import React, { useState, useEffect } from 'react'; import Card from 'Card'; import { getCardAbility, processDefense } from 'CardAbilities'; const BattleArena = ({ playerCards, aiCards, onBattleComplete }) => { const [currentPlayerCard, setCurrentPlayerCard] = useState(0); const [currentAiCard, setCurrentAiCard] = useState(0); const [playerCardHealth, setPlayerCardHealth] = useState(0); const [aiCardHealth, setAiCardHealth] = useState(0); const [playerCardState, setPlayerCardState] = useState('idle'); // 'idle', 'attack', 'damage', 'defeated' const [aiCardState, setAiCardState] = useState('idle'); const [battleState, setBattleState] = useState({ playerState: {}, // Store special state for player's current card aiState: {} // Store special state for AI's current card }); const [roundMessage, setRoundMessage] = useState('Battle starting...'); const [battleLog, setBattleLog] = useState([]); const [battleComplete, setBattleComplete] = useState(false); const [playerVictory, setPlayerVictory] = useState(false); // Initialize first cards' health useEffect(() => { if (playerCards.length > 0 && aiCards.length > 0) { setPlayerCardHealth(playerCards[0].health); setAiCardHealth(aiCards[0].health); setBattleLog([`Battle begins! ${playerCards[0].name} vs ${aiCards[0].name}`]); } }, [playerCards, aiCards]); // Battle turn logic useEffect(() => { if (battleComplete) return; const battleTurn = () => { // Player attacks first setTimeout(() => { if (currentPlayerCard < playerCards.length && currentAiCard < aiCards.length) { const playerCard = playerCards[currentPlayerCard]; const aiCard = aiCards[currentAiCard]; // Get player card's ability const playerAbility = getCardAbility(playerCard); // Player attack setPlayerCardState('attack'); setTimeout(() => { setPlayerCardState('idle'); setAiCardState('damage'); // Calculate attack result using card's special ability const attackResult = playerAbility.effect( playerCard, aiCards[currentAiCard], { ...battleState.playerState, currentHealth: playerCardHealth } ); // Process defense const defenseResult = processDefense( attackResult.damage, aiCards[currentAiCard], battleState.aiState ); // Update final damage const finalDamage = defenseResult.damageTaken; const newAiHealth = Math.max(0, aiCardHealth - finalDamage); setAiCardHealth(newAiHealth); // Compile battle message let message = attackResult.message; 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' && currentAiCard + 1 < aiCards.length) { setBattleLog(prev => [ ...prev, `Chain damage hits ${aiCards[currentAiCard + 1].name} for ${attackResult.extraEffect.value}!` ]); } // Healing if (attackResult.extraEffect.type === 'healing') { const newHealth = Math.min( playerCardHealth + attackResult.extraEffect.value, playerCards[currentPlayerCard].health ); setPlayerCardHealth(newHealth); } } // Handle reflected damage if (defenseResult.extraEffect && defenseResult.extraEffect.type === 'reflection') { setBattleLog(prev => [ ...prev, defenseResult.extraEffect.message ]); const reflectedDamage = defenseResult.extraEffect.value; const newPlayerHealth = Math.max(0, playerCardHealth - reflectedDamage); setPlayerCardHealth(newPlayerHealth); } // Update state with any changes from the ability if (attackResult.stateChanges) { setBattleState(prev => ({ ...prev, playerState: { ...prev.playerState, ...attackResult.stateChanges } })); } setRoundMessage(message); setBattleLog(prev => [...prev, message]); setTimeout(() => { setAiCardState('idle'); // Check if AI card is defeated if (newAiHealth <= 0) { setAiCardState('defeated'); const defeatMsg = `${aiCard.name} is defeated!`; setBattleLog(prev => [...prev, defeatMsg]); setTimeout(() => { // Move to next AI card const nextAiCard = currentAiCard + 1; if (nextAiCard < aiCards.length) { setCurrentAiCard(nextAiCard); setAiCardHealth(aiCards[nextAiCard].health); setAiCardState('idle'); // Reset state for new card setBattleState(prev => ({ ...prev, aiState: {} })); const newCardMsg = `${aiCards[nextAiCard].name} enters the battle!`; setBattleLog(prev => [...prev, newCardMsg]); } else { // Player won the battle setBattleComplete(true); setPlayerVictory(true); setBattleLog(prev => [...prev, "Victory! All enemy cards are defeated!"]); } }, 1000); } else { // AI attack setTimeout(() => { aiAttackTurn(); }, 500); } }, 500); }, 500); } }, 1000); }; const aiAttackTurn = () => { if (currentPlayerCard < playerCards.length && currentAiCard < aiCards.length) { const playerCard = playerCards[currentPlayerCard]; const aiCard = aiCards[currentAiCard]; // Get AI card's ability const aiAbility = getCardAbility(aiCard); // AI attack setAiCardState('attack'); setTimeout(() => { setAiCardState('idle'); setPlayerCardState('damage'); // Calculate attack result using card's special ability const attackResult = aiAbility.effect( aiCard, playerCards[currentPlayerCard], { ...battleState.aiState, currentHealth: aiCardHealth } ); // Process defense const defenseResult = processDefense( attackResult.damage, playerCards[currentPlayerCard], battleState.playerState ); // Update final damage const finalDamage = defenseResult.damageTaken; const newPlayerHealth = Math.max(0, playerCardHealth - finalDamage); setPlayerCardHealth(newPlayerHealth); // Compile battle message let message = attackResult.message; 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' && currentPlayerCard + 1 < playerCards.length) { setBattleLog(prev => [ ...prev, `Chain damage hits ${playerCards[currentPlayerCard + 1].name} for ${attackResult.extraEffect.value}!` ]); } // Healing if (attackResult.extraEffect.type === 'healing') { const newHealth = Math.min( aiCardHealth + attackResult.extraEffect.value, aiCards[currentAiCard].health ); setAiCardHealth(newHealth); } } // Handle reflected damage if (defenseResult.extraEffect && defenseResult.extraEffect.type === 'reflection') { setBattleLog(prev => [ ...prev, defenseResult.extraEffect.message ]); const reflectedDamage = defenseResult.extraEffect.value; const newAiHealth = Math.max(0, aiCardHealth - reflectedDamage); setAiCardHealth(newAiHealth); } // Update state with any changes from the ability if (attackResult.stateChanges) { setBattleState(prev => ({ ...prev, aiState: { ...prev.aiState, ...attackResult.stateChanges } })); } setRoundMessage(message); setBattleLog(prev => [...prev, message]); setTimeout(() => { setPlayerCardState('idle'); // Check if player card is defeated if (newPlayerHealth <= 0) { setPlayerCardState('defeated'); const defeatMsg = `${playerCard.name} is defeated!`; setBattleLog(prev => [...prev, defeatMsg]); setTimeout(() => { // Move to next player card const nextPlayerCard = currentPlayerCard + 1; if (nextPlayerCard < playerCards.length) { setCurrentPlayerCard(nextPlayerCard); setPlayerCardHealth(playerCards[nextPlayerCard].health); setPlayerCardState('idle'); // Reset state for new card setBattleState(prev => ({ ...prev, playerState: {} })); const newCardMsg = `${playerCards[nextPlayerCard].name} enters the battle!`; setBattleLog(prev => [...prev, newCardMsg]); } else { // AI won the battle setBattleComplete(true); setPlayerVictory(false); setBattleLog(prev => [...prev, "Defeat! All your cards have fallen!"]); } }, 1000); } else { // Continue battle with next turn setTimeout(battleTurn, 1000); } }, 500); }, 500); } }; // Start the battle const timer = setTimeout(() => { if (!battleComplete && playerCards.length > 0 && aiCards.length > 0) { battleTurn(); } }, 1500); return () => clearTimeout(timer); }, [currentPlayerCard, currentAiCard, playerCardHealth, aiCardHealth, battleComplete, playerCards, aiCards]); // 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}

{currentPlayerCard < playerCards.length && ( <>

{playerCardHealth}/{playerCards[currentPlayerCard].health}

)}

{playerCards.length > 1 && (

+{playerCards.length - 1} more cards

)}

{currentAiCard < aiCards.length && ( <>

{aiCardHealth}/{aiCards[currentAiCard].health}

)}

{aiCards.length > 1 && (

+{aiCards.length - 1} more cards

)}

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' }, aiSide: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px' }, 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 default BattleArena;