import React, { useState, useEffect } from 'react'; import Card from 'Card'; import { getCardAbility, processDefense } from 'CardAbilities'; import { useRef } from 'react'; const BattleArena = ({ playerCards, aiCards, onBattleComplete }) => { // Ref to allow external components to call methods const battleRef = useRef({}); // Track multiple cards on the field const [activePlayerCards, setActivePlayerCards] = useState([]); const [activeAiCards, setActiveAiCards] = useState([]); const [playerCardStates, setPlayerCardStates] = useState({}); const [aiCardStates, setAiCardStates] = useState({}); const [battleState, setBattleState] = useState({ playerStates: {}, // Store special state for each player card aiStates: {} // Store special state for each AI card }); const [roundMessage, setRoundMessage] = useState('Battle starting...'); const [battleLog, setBattleLog] = useState([]); const [battleComplete, setBattleComplete] = useState(false); const [playerVictory, setPlayerVictory] = useState(false); // Initialize cards for battle useEffect(() => { if (playerCards.length > 0 && aiCards.length > 0) { // Deploy initial cards (up to 3 from each deck) const initialPlayerCards = playerCards.slice(0, Math.min(3, playerCards.length)).map(card => ({ id: card.id, card: card, health: card.health, state: 'idle' // 'idle', 'attack', 'damage', 'defeated' })); const initialAiCards = aiCards.slice(0, Math.min(3, aiCards.length)).map(card => ({ id: card.id, card: card, health: card.health, state: 'idle' })); setActivePlayerCards(initialPlayerCards); setActiveAiCards(initialAiCards); // Initialize states for all active cards const playerStates = {}; const aiStates = {}; initialPlayerCards.forEach(cardInfo => { playerStates[cardInfo.id] = {}; }); initialAiCards.forEach(cardInfo => { aiStates[cardInfo.id] = {}; }); setBattleState({ playerStates, aiStates }); setBattleLog([`Battle begins! ${initialPlayerCards.length} cards vs ${initialAiCards.length} cards`]); } }, [playerCards, aiCards]); // Battle turn logic useEffect(() => { if (battleComplete) return; const battleTurn = () => { // If no cards left on either side, end battle if (activePlayerCards.length === 0) { setBattleComplete(true); setPlayerVictory(false); setBattleLog(prev => [...prev, "Defeat! All your cards have fallen!"]); return; } if (activeAiCards.length === 0) { setBattleComplete(true); setPlayerVictory(true); setBattleLog(prev => [...prev, "Victory! All enemy cards are defeated!"]); return; } // Player cards attack first setTimeout(() => { playerCardsAttack(); }, 1000); }; const playerCardsAttack = () => { // Clone the arrays to avoid direct state mutation const updatedPlayerCards = [...activePlayerCards]; const updatedAiCards = [...activeAiCards]; const updatedPlayerStates = {...battleState.playerStates}; const updatedAiStates = {...battleState.aiStates}; // For each player card, attack an AI card if available let attackLog = []; // Process all player attacks updatedPlayerCards.forEach((playerCardInfo, index) => { // Skip defeated cards if (playerCardInfo.health <= 0 || playerCardInfo.state === 'defeated') return; // Find an enemy to attack - preferentially attack the first non-defeated card const targetIndex = updatedAiCards.findIndex(card => card.health > 0); if (targetIndex >= 0) { const aiCardInfo = updatedAiCards[targetIndex]; // Get player card's ability const playerAbility = getCardAbility(playerCardInfo.card); // Mark player card as attacking playerCardInfo.state = 'attack'; // Calculate attack result using card's special ability const attackResult = playerAbility.effect( playerCardInfo.card, aiCardInfo.card, { ...updatedPlayerStates[playerCardInfo.id], currentHealth: playerCardInfo.health } ); // Process defense const defenseResult = processDefense( attackResult.damage, aiCardInfo.card, updatedAiStates[aiCardInfo.id] || {} ); // Update final damage const finalDamage = defenseResult.damageTaken; aiCardInfo.health = Math.max(0, aiCardInfo.health - finalDamage); aiCardInfo.state = 'damage'; // Compile battle message let message = `${playerCardInfo.card.name} attacks ${aiCardInfo.card.name} for ${finalDamage} damage`; if (defenseResult.message) { message += ` ${defenseResult.message}`; } // Handle extra effects if (attackResult.extraEffect) { message += attackResult.extraEffect.message; // Chain damage to next enemy card if (attackResult.extraEffect.type === 'chainDamage') { const nextTargetIndex = updatedAiCards.findIndex((card, i) => i !== targetIndex && card.health > 0); if (nextTargetIndex >= 0) { const chainDamage = attackResult.extraEffect.value; updatedAiCards[nextTargetIndex].health = Math.max(0, updatedAiCards[nextTargetIndex].health - chainDamage); updatedAiCards[nextTargetIndex].state = 'damage'; message += ` Chain damage hits ${updatedAiCards[nextTargetIndex].card.name} for ${chainDamage}!`; } } // Healing if (attackResult.extraEffect.type === 'healing') { const healing = attackResult.extraEffect.value; playerCardInfo.health = Math.min( playerCardInfo.health + healing, playerCardInfo.card.health ); message += ` ${playerCardInfo.card.name} heals for ${healing} health!`; } } // Handle reflected damage if (defenseResult.extraEffect && defenseResult.extraEffect.type === 'reflection') { const reflectedDamage = defenseResult.extraEffect.value; playerCardInfo.health = Math.max(0, playerCardInfo.health - reflectedDamage); message += ` ${defenseResult.extraEffect.message}`; } // Update state with any changes from the ability if (attackResult.stateChanges) { updatedPlayerStates[playerCardInfo.id] = { ...updatedPlayerStates[playerCardInfo.id], ...attackResult.stateChanges }; } attackLog.push(message); // Check if AI card is defeated if (aiCardInfo.health <= 0) { aiCardInfo.state = 'defeated'; attackLog.push(`${aiCardInfo.card.name} is defeated!`); } } }); // Update the state with the new values setActivePlayerCards(updatedPlayerCards); setActiveAiCards(updatedAiCards); setBattleState({ playerStates: updatedPlayerStates, aiStates: updatedAiStates }); // Update battle log with all attack messages setBattleLog(prev => [...prev, ...attackLog]); setRoundMessage(attackLog.length > 0 ? attackLog[0] : "Player's turn"); // After a short delay, reset card states and let AI attack setTimeout(() => { // Reset player card states to idle setActivePlayerCards(updatedPlayerCards.map(card => ({ ...card, state: card.health <= 0 ? 'defeated' : 'idle' }))); // Reset AI card states to idle setActiveAiCards(updatedAiCards.map(card => ({ ...card, state: card.health <= 0 ? 'defeated' : 'idle' }))); // Remove defeated AI cards const filteredAiCards = updatedAiCards.filter(card => card.health > 0); if (filteredAiCards.length !== updatedAiCards.length) { setActiveAiCards(filteredAiCards); // Check if all AI cards are defeated if (filteredAiCards.length === 0) { setBattleComplete(true); setPlayerVictory(true); setBattleLog(prev => [...prev, "Victory! All enemy cards are defeated!"]); return; } // If there are remaining AI cards but the current array is empty, deploy new cards if (filteredAiCards.length === 0 && aiCards.length > activeAiCards.length) { const nextAiCardIndex = activeAiCards.length; const newAiCards = aiCards.slice(nextAiCardIndex, nextAiCardIndex + Math.min(3, aiCards.length - nextAiCardIndex)) .map(card => ({ id: card.id, card: card, health: card.health, state: 'idle' })); setActiveAiCards(newAiCards); setBattleLog(prev => [...prev, `${newAiCards.length} new enemy cards enter the battle!`]); } } // Now AI attacks setTimeout(() => { aiCardsAttack(); }, 800); }, 1000); }; const aiCardsAttack = () => { // Clone the arrays to avoid direct state mutation const updatedPlayerCards = [...activePlayerCards]; const updatedAiCards = [...activeAiCards]; const updatedPlayerStates = {...battleState.playerStates}; const updatedAiStates = {...battleState.aiStates}; // For each AI card, attack a player card if available let attackLog = []; // Process all AI attacks updatedAiCards.forEach((aiCardInfo, index) => { // Skip defeated cards if (aiCardInfo.health <= 0 || aiCardInfo.state === 'defeated') return; // Find a player card to attack - preferentially attack the first non-defeated card const targetIndex = updatedPlayerCards.findIndex(card => card.health > 0); if (targetIndex >= 0) { const playerCardInfo = updatedPlayerCards[targetIndex]; // Get AI card's ability const aiAbility = getCardAbility(aiCardInfo.card); // Mark AI card as attacking aiCardInfo.state = 'attack'; // Calculate attack result using card's special ability const attackResult = aiAbility.effect( aiCardInfo.card, playerCardInfo.card, { ...updatedAiStates[aiCardInfo.id], currentHealth: aiCardInfo.health } ); // Process defense const defenseResult = processDefense( attackResult.damage, playerCardInfo.card, updatedPlayerStates[playerCardInfo.id] || {} ); // Update final damage const finalDamage = defenseResult.damageTaken; playerCardInfo.health = Math.max(0, playerCardInfo.health - finalDamage); playerCardInfo.state = 'damage'; // Compile battle message let message = `${aiCardInfo.card.name} attacks ${playerCardInfo.card.name} for ${finalDamage} damage`; if (defenseResult.message) { message += ` ${defenseResult.message}`; } // Handle extra effects if (attackResult.extraEffect) { message += attackResult.extraEffect.message; // Chain damage to next player card if (attackResult.extraEffect.type === 'chainDamage') { const nextTargetIndex = updatedPlayerCards.findIndex((card, i) => i !== targetIndex && card.health > 0); if (nextTargetIndex >= 0) { const chainDamage = attackResult.extraEffect.value; updatedPlayerCards[nextTargetIndex].health = Math.max(0, updatedPlayerCards[nextTargetIndex].health - chainDamage); updatedPlayerCards[nextTargetIndex].state = 'damage'; message += ` Chain damage hits ${updatedPlayerCards[nextTargetIndex].card.name} for ${chainDamage}!`; } } // Healing if (attackResult.extraEffect.type === 'healing') { const healing = attackResult.extraEffect.value; aiCardInfo.health = Math.min( aiCardInfo.health + healing, aiCardInfo.card.health ); message += ` ${aiCardInfo.card.name} heals for ${healing} health!`; } } // Handle reflected damage if (defenseResult.extraEffect && defenseResult.extraEffect.type === 'reflection') { const reflectedDamage = defenseResult.extraEffect.value; aiCardInfo.health = Math.max(0, aiCardInfo.health - reflectedDamage); message += ` ${defenseResult.extraEffect.message}`; } // Update state with any changes from the ability if (attackResult.stateChanges) { updatedAiStates[aiCardInfo.id] = { ...updatedAiStates[aiCardInfo.id], ...attackResult.stateChanges }; } attackLog.push(message); // Check if player card is defeated if (playerCardInfo.health <= 0) { playerCardInfo.state = 'defeated'; attackLog.push(`${playerCardInfo.card.name} is defeated!`); } } }); // Update the state with the new values setActivePlayerCards(updatedPlayerCards); setActiveAiCards(updatedAiCards); setBattleState({ playerStates: updatedPlayerStates, aiStates: updatedAiStates }); // Update battle log with all attack messages setBattleLog(prev => [...prev, ...attackLog]); setRoundMessage(attackLog.length > 0 ? attackLog[0] : "AI's turn"); // Cleanup after AI attacks setTimeout(() => { // Reset AI card states to idle setActiveAiCards(updatedAiCards.map(card => ({ ...card, state: card.health <= 0 ? 'defeated' : 'idle' }))); // Reset player card states to idle setActivePlayerCards(updatedPlayerCards.map(card => ({ ...card, state: card.health <= 0 ? 'defeated' : 'idle' }))); // Remove defeated player cards const filteredPlayerCards = updatedPlayerCards.filter(card => card.health > 0); if (filteredPlayerCards.length !== updatedPlayerCards.length) { setActivePlayerCards(filteredPlayerCards); // Check if all player cards are defeated if (filteredPlayerCards.length === 0) { setBattleComplete(true); setPlayerVictory(false); setBattleLog(prev => [...prev, "Defeat! All your cards have fallen!"]); return; } // If there are remaining player cards in the deck but the current array is empty, deploy new cards if (filteredPlayerCards.length === 0 && playerCards.length > activePlayerCards.length) { const nextPlayerCardIndex = activePlayerCards.length; const newPlayerCards = playerCards.slice(nextPlayerCardIndex, nextPlayerCardIndex + Math.min(3, playerCards.length - nextPlayerCardIndex)) .map(card => ({ id: card.id, card: card, health: card.health, state: 'idle' })); setActivePlayerCards(newPlayerCards); setBattleLog(prev => [...prev, `${newPlayerCards.length} new player cards enter the battle!`]); } } // Continue to next turn after a delay setTimeout(() => { battleTurn(); }, 1000); }, 1000); }; // Start the battle const timer = setTimeout(() => { if (!battleComplete && activePlayerCards.length > 0 && activeAiCards.length > 0) { battleTurn(); } }, 1500); return () => clearTimeout(timer); }, [battleComplete, playerCards, aiCards, activePlayerCards, activeAiCards]); // Expose castSpell method for external components const castSpell = (spell) => { if (battleComplete || activePlayerCards.length === 0 || activeAiCards.length === 0) { return false; } // Clone the current state to modify it const updatedPlayerCards = [...activePlayerCards]; const updatedAiCards = [...activeAiCards]; const updatedPlayerStates = {...battleState.playerStates}; const updatedAiStates = {...battleState.aiStates}; // Get the spell ability const spellAbility = getCardAbility(spell); // Find target for the spell (first active enemy card) const targetIndex = updatedAiCards.findIndex(card => card.health > 0); if (targetIndex >= 0) { const aiCardInfo = updatedAiCards[targetIndex]; // Create a virtual card info for the spell effect const spellCardInfo = { id: spell.id, card: spell, health: spell.health, state: 'attack' }; // Calculate spell effect const spellResult = spellAbility.effect( spell, aiCardInfo.card, { currentHealth: spell.health } ); // Process defense const defenseResult = processDefense( spellResult.damage, aiCardInfo.card, updatedAiStates[aiCardInfo.id] || {} ); // Update final damage const finalDamage = defenseResult.damageTaken; aiCardInfo.health = Math.max(0, aiCardInfo.health - finalDamage); aiCardInfo.state = 'damage'; // Compile battle message let message = `${spell.name} casts on ${aiCardInfo.card.name} for ${finalDamage} damage`; if (defenseResult.message) { message += ` ${defenseResult.message}`; } // Handle extra effects if (spellResult.extraEffect) { message += spellResult.extraEffect.message; // Chain damage to next enemy card if (spellResult.extraEffect.type === 'chainDamage') { const nextTargetIndex = updatedAiCards.findIndex((card, i) => i !== targetIndex && card.health > 0); if (nextTargetIndex >= 0) { const chainDamage = spellResult.extraEffect.value; updatedAiCards[nextTargetIndex].health = Math.max(0, updatedAiCards[nextTargetIndex].health - chainDamage); updatedAiCards[nextTargetIndex].state = 'damage'; message += ` Chain damage hits ${updatedAiCards[nextTargetIndex].card.name} for ${chainDamage}!`; } } // Healing friendly units if (spellResult.extraEffect.type === 'healing') { // Find lowest health player card to heal const lowestHealthCard = updatedPlayerCards.reduce((lowest, current) => { if (current.health <= 0) return lowest; if (!lowest || (current.health / current.card.health) < (lowest.health / lowest.card.health)) { return current; } return lowest; }, null); if (lowestHealthCard) { const healing = spellResult.extraEffect.value; lowestHealthCard.health = Math.min( lowestHealthCard.health + healing, lowestHealthCard.card.health ); message += ` ${lowestHealthCard.card.name} heals for ${healing} health!`; } } } // Update the state with the new values setActivePlayerCards(updatedPlayerCards); setActiveAiCards(updatedAiCards); setBattleState({ playerStates: updatedPlayerStates, aiStates: updatedAiStates }); // Update battle log setBattleLog(prev => [...prev, message]); setRoundMessage(message); // Check if AI card is defeated if (aiCardInfo.health <= 0) { aiCardInfo.state = 'defeated'; // After a short delay, cleanup defeated AI cards setTimeout(() => { const filteredAiCards = updatedAiCards.filter(card => card.health > 0); setActiveAiCards(filteredAiCards); // Check if all AI cards are defeated if (filteredAiCards.length === 0) { setBattleComplete(true); setPlayerVictory(true); setBattleLog(prev => [...prev, "Victory! All enemy cards are defeated!"]); } }, 1000); } return true; } return false; }; // Expose methods through the ref battleRef.current = { castSpell }; // Notify parent when battle is complete useEffect(() => { if (battleComplete) { setTimeout(() => { onBattleComplete(playerVictory); }, 2000); } }, [battleComplete, playerVictory, onBattleComplete]); if (playerCards.length === 0 || aiCards.length === 0) { return

Loading battle...

; } const getCardStyle = (state) => { switch(state) { case 'attack': return { transform: 'scale(1.1)', transition: 'transform 0.3s' }; case 'damage': return { transform: 'translateX(5px) translateY(5px) rotate(3deg)', transition: 'all 0.3s', filter: 'brightness(1.5)' }; case 'defeated': return { opacity: 0.5, transform: 'rotate(90deg)', transition: 'all 0.5s' }; default: return { transition: 'all 0.3s' }; } }; return (

{roundMessage}

{activePlayerCards.map(cardInfo => (

{cardInfo.health}/{cardInfo.card.health}

))}

{playerCards.length > activePlayerCards.length && (

+{playerCards.length - activePlayerCards.length} in deck

)}

{activeAiCards.map(cardInfo => (

{cardInfo.health}/{cardInfo.card.health}

))}

{aiCards.length > activeAiCards.length && (

+{aiCards.length - activeAiCards.length} in deck

)}

Battle Log

{battleLog.map((entry, index) => (

{entry}

))}

{battleComplete && (

{playerVictory ? 'Victory!' : 'Defeat!'}

)}

); }; const styles = { container: { display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '20px', maxWidth: '800px', margin: '0 auto', gap: '20px' }, battleHeader: { width: '100%', textAlign: 'center', marginBottom: '10px' }, battlefield: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%', marginBottom: '20px' }, playerSide: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px', width: '45%', flexWrap: 'wrap' }, aiSide: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px', width: '45%', flexWrap: 'wrap' }, cardContainer: { position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center' }, healthBar: { width: '80px', height: '8px', backgroundColor: 'rgba(0,0,0,0.3)', borderRadius: '4px', overflow: 'hidden', marginTop: '5px' }, healthFill: { height: '100%', transition: 'width 0.5s, background-color 0.5s' }, healthText: { fontSize: '0.7rem', marginTop: '2px' }, battleIndicator: { fontSize: '1.5rem', fontWeight: 'bold', color: '#e63946' }, deckPreview: { display: 'flex', flexDirection: 'column', alignItems: 'center' }, remainingCards: { fontSize: '0.8rem', backgroundColor: 'rgba(255,255,255,0.1)', padding: '5px 10px', borderRadius: '4px' }, battleLog: { width: '100%', maxHeight: '150px', overflowY: 'auto', backgroundColor: 'rgba(0,0,0,0.2)', borderRadius: '8px', padding: '10px' }, logEntries: { display: 'flex', flexDirection: 'column-reverse', gap: '5px' }, logEntry: { fontSize: '0.8rem', padding: '3px 0' }, battleComplete: { textAlign: 'center', marginTop: '20px' }, continueButton: { padding: '10px 20px', backgroundColor: '#4a6a8a', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' } }; // Export component with method to cast spells export default React.forwardRef((props, ref) => { const battleArenaRef = useRef(); // When ref is passed from parent, expose the castSpell method React.useImperativeHandle(ref, () => ({ castSpell: (spell) => { if (battleArenaRef.current) { return battleArenaRef.current.castSpell(spell); } return false; } })); return ; });