import { useState, useEffect, useRef } from 'react'; import { Button } from "/components/ui/button"; import { usePokemon } from '../context/PokemonContext'; import Header from '../components/Header'; import Navigation from '../components/Navigation'; import PokemonCard from '../components/PokemonCard'; import { motion, AnimatePresence } from 'framer-motion'; // Define battle state types interface BattleState { stage: 'selection' | 'opponent-selection' | 'battle' | 'results'; playerPokemon: number | null; opponentPokemon: any | null; battleLog: string[]; currentTurn: number; playerHealth: number; opponentHealth: number; isPlayerAttacking: boolean; isOpponentAttacking: boolean; lastDamage: number; winner: 'player' | 'opponent' | null; rewards: { wow: number; experience: number; } | null; } export default function Battle() { const { player, addWow } = usePokemon(); const [battleState, setBattleState] = useState({ stage: 'selection', playerPokemon: null, opponentPokemon: null, battleLog: [], currentTurn: 0, playerHealth: 0, opponentHealth: 0, isPlayerAttacking: false, isOpponentAttacking: false, lastDamage: 0, winner: null, rewards: null }); const [opponents, setOpponents] = useState([]); const [isLoading, setIsLoading] = useState(false); const battleLogRef = useRef(null); // Fetch random opponents when component mounts useEffect(() => { if (battleState.stage === 'opponent-selection' && opponents.length === 0) { fetchOpponents(); } }, [battleState.stage, opponents.length]); // Auto-scroll battle log to bottom when new entries are added useEffect(() => { if (battleLogRef.current) { battleLogRef.current.scrollTop = battleLogRef.current.scrollHeight; } }, [battleState.battleLog]); // Fetch random Pokémon to use as opponents const fetchOpponents = async () => { setIsLoading(true); try { const opponentsList = []; // Generate 3 random opponents of varying difficulty for (let i = 0; i < 3; i++) { const difficulty = i + 1; // 1, 2, or 3 stars const randomId = Math.floor(Math.random() * 150) + 1; const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${randomId}`); const data = await response.json(); opponentsList.push({ id: Date.now() + i, name: data.name, imageUrl: data.sprites.other['official-artwork'].front_default, stars: difficulty, hp: 80 + (difficulty * 20), attack: 40 + (difficulty * 15), defense: 30 + (difficulty * 10), speed: 20 + (difficulty * 8), types: data.types.map((t: any) => t.type.name), difficulty: ['Easy', 'Medium', 'Hard'][i], reward: 50 * difficulty }); } setOpponents(opponentsList); } catch (error) { console.error("Error fetching opponents:", error); } finally { setIsLoading(false); } }; // Select player's Pokémon for battle const selectPokemon = (pokemonId: number) => { setBattleState(prev => ({ ...prev, playerPokemon: pokemonId, stage: 'opponent-selection' })); }; // Select opponent to battle against const selectOpponent = (opponent: any) => { const playerPokemon = getPlayerPokemon(); if (!playerPokemon) return; setBattleState(prev => ({ ...prev, opponentPokemon: opponent, stage: 'battle', battleLog: [`Battle started between ${playerPokemon.name} and ${opponent.name}!`], playerHealth: playerPokemon.hp, opponentHealth: opponent.hp, currentTurn: 0 })); }; // Helper to get the selected player Pokémon const getPlayerPokemon = () => { if (battleState.playerPokemon === null) return null; return player.pokemonCollection.find(p => p.id === battleState.playerPokemon) || null; }; // Start the battle simulation const startBattle = () => { const playerPokemon = getPlayerPokemon(); const opponentPokemon = battleState.opponentPokemon; if (!playerPokemon || !opponentPokemon) return; // Determine who goes first based on speed const playerFirst = playerPokemon.speed >= opponentPokemon.speed; // Start battle with first turn executeTurn(playerFirst); }; // Execute a single turn of battle const executeTurn = (isPlayerTurn: boolean) => { const playerPokemon = getPlayerPokemon(); const opponentPokemon = battleState.opponentPokemon; if (!playerPokemon || !opponentPokemon) return; // Set the current turn state setBattleState(prev => ({ ...prev, currentTurn: prev.currentTurn + 1, isPlayerAttacking: isPlayerTurn, isOpponentAttacking: !isPlayerTurn, lastDamage: 0 })); // Simulate attack animation timing setTimeout(() => { if (isPlayerTurn) { // Player's turn const damage = calculateDamage(playerPokemon, opponentPokemon); // Use a function to update state to ensure we're working with the latest state setBattleState(prev => { const newOpponentHealth = Math.max(0, prev.opponentHealth - damage); return { ...prev, opponentHealth: newOpponentHealth, lastDamage: damage, battleLog: [...prev.battleLog, `${playerPokemon.name} attacks for ${damage} damage! ${opponentPokemon.name} has ${newOpponentHealth} HP left.`], isPlayerAttacking: false }; }); // Check if opponent fainted - use setTimeout to ensure state is updated setTimeout(() => { setBattleState(prev => { if (prev.opponentHealth <= 0) { endBattle('player'); return prev; } else { // Schedule opponent's turn after a delay setTimeout(() => executeTurn(false), 1500); return prev; } }); }, 100); } else { // Opponent's turn const damage = calculateDamage(opponentPokemon, playerPokemon); // Use a function to update state to ensure we're working with the latest state setBattleState(prev => { const newPlayerHealth = Math.max(0, prev.playerHealth - damage); return { ...prev, playerHealth: newPlayerHealth, lastDamage: damage, battleLog: [...prev.battleLog, `${opponentPokemon.name} attacks for ${damage} damage! ${playerPokemon.name} has ${newPlayerHealth} HP left.`], isOpponentAttacking: false }; }); // Check if player fainted - use setTimeout to ensure state is updated setTimeout(() => { setBattleState(prev => { if (prev.playerHealth <= 0) { endBattle('opponent'); return prev; } else { // Schedule player's turn after a delay setTimeout(() => executeTurn(true), 1500); return prev; } }); }, 100); } }, 1000); }; // End battle and calculate rewards const endBattle = (winner: 'player' | 'opponent') => { const playerPokemon = getPlayerPokemon(); const opponentPokemon = battleState.opponentPokemon; if (!playerPokemon || !opponentPokemon) return; let wowReward = 10; // Default consolation prize let expReward = 5; if (winner === 'player') { wowReward = opponentPokemon.reward || 50; expReward = Math.floor(wowReward / 2); addWow(wowReward); setBattleState(prev => ({ ...prev, battleLog: [...prev.battleLog, `${opponentPokemon.name} fainted! You win!`], winner: 'player', rewards: { wow: wowReward, experience: expReward } })); } else { setBattleState(prev => ({ ...prev, battleLog: [...prev.battleLog, `${playerPokemon.name} fainted! You lose!`], winner: 'opponent', rewards: { wow: wowReward, experience: expReward } })); } // Transition to results screen after a delay setTimeout(() => { setBattleState(prev => ({ ...prev, stage: 'results' })); }, 2000); }; // Calculate damage based on attack and defense stats const calculateDamage = (attacker: any, defender: any) => { const baseDamage = Math.max(5, attacker.attack - (defender.defense / 2)); const randomFactor = 0.85 + (Math.random() * 0.3); // 0.85 to 1.15 return Math.floor(baseDamage * randomFactor); }; // Reset battle state to start over const resetBattle = () => { setBattleState({ stage: 'selection', playerPokemon: null, opponentPokemon: null, battleLog: [], currentTurn: 0, playerHealth: 0, opponentHealth: 0, isPlayerAttacking: false, isOpponentAttacking: false, lastDamage: 0, winner: null, rewards: null }); setOpponents([]); }; // Calculate health percentage for progress bars const getHealthPercentage = (current: number, max: number) => { return Math.max(0, Math.min(100, (current / max) * 100)); }; // Get color for health bar based on percentage const getHealthColor = (percentage: number) => { if (percentage > 50) return "bg-green-500"; if (percentage > 20) return "bg-yellow-500"; return "bg-red-500"; }; // Render different UI based on battle stage const renderBattleStage = () => { switch (battleState.stage) { case 'selection': return (

Select Your Pokémon

{player.pokemonCollection.length === 0 ? (

No Pokémon Available

You need to capture Pokémon before you can battle!

) : (

{player.pokemonCollection.map(pokemon => ( selectPokemon(pokemon.id)} whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.98 }} > ))}

)}

); case 'opponent-selection': return (

Select Your Opponent

{isLoading ? (

) : (

{opponents.map(opponent => ( selectOpponent(opponent)} whileHover={{ scale: 1.02, boxShadow: "0 4px 6px rgba(0,0,0,0.1)" }} >

{opponent.name}

{opponent.types.map((type: string, i: number) => ( {type} ))}

HP: {opponent.hp} ATK: {opponent.attack} DEF: {opponent.defense}

{opponent.difficulty}

Reward: {opponent.reward} WOW

))}

)}

); case 'battle': const playerPokemon = getPlayerPokemon(); const opponentPokemon = battleState.opponentPokemon; if (!playerPokemon || !opponentPokemon) { return

Error loading battle data

; } const playerHealthPercent = getHealthPercentage(battleState.playerHealth, playerPokemon.hp); const opponentHealthPercent = getHealthPercentage(battleState.opponentHealth, opponentPokemon.hp); return (

Battle Arena

{/* Battle arena background */}

{/* Opponent section */}

{opponentPokemon.name}

Lv. {opponentPokemon.stars * 5}

{battleState.opponentHealth}/{opponentPokemon.hp} HP

0 ? [0, -5, 5, -5, 0] : 0 }} transition={{ duration: 0.5 }} > {opponentPokemon.name}

{/* Battle indicators */}

{battleState.isPlayerAttacking && (

Attacking!

)} {battleState.isOpponentAttacking && (

Incoming Attack!

)} {battleState.lastDamage > 0 && !battleState.isPlayerAttacking && !battleState.isOpponentAttacking && (

-{battleState.lastDamage} HP

)}

{/* Player section */}

0 ? [0, 5, -5, 5, 0] : 0 }} transition={{ duration: 0.5 }} > {playerPokemon.name}

{battleState.playerHealth}/{playerPokemon.hp} HP

{playerPokemon.name}

Lv. {playerPokemon.stars * 5}

{battleState.currentTurn === 0 && (

)}

Battle Log

{battleState.battleLog.map((log, index) => ( {log} ))}

); case 'results': return (

Battle Results

{battleState.winner === 'player' ? ( 🏆 ) : battleState.winner === 'opponent' ? (

😢

) : (

🤝

)}

{battleState.winner === 'player' ? 'Victory!' : battleState.winner === 'opponent' ? 'Defeat!' : 'Draw!'}

{battleState.winner === 'player' ? 'Your Pokémon fought bravely and won the battle!' : battleState.winner === 'opponent' ? 'Your Pokémon fought bravely but was defeated.' : 'The battle ended in a draw. Both Pokémon fought well!'}

{battleState.rewards && (

Rewards

{battleState.rewards.wow}

WOW Coins

{battleState.rewards.experience}

Experience

)}

Battle Summary

{battleState.battleLog.map((log, index) => (

{log}

))}

); } }; return (

Battle Arena

{renderBattleStage()}

); }