[{"_1":2,"_183":-5,"_184":-5},"loaderData",{"_3":4,"_10":11},"root",{"_5":-5,"_6":7,"_8":9},"user","appId","cm7twdhs6009l11ml868xhxld","wsEndpoint","https://dev.fun","routes/app.$appId",{"_12":13},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_5":43,"_55":56,"_57":58,"_59":58,"_60":61,"_62":58,"_63":58,"_64":58,"_65":58,"_66":58,"_67":58,"_68":17,"_69":17,"_70":71,"_72":73,"_74":75,"_76":77,"_78":79,"_95":96,"_146":17,"_147":148,"_104":30,"_106":181,"_182":17},"id","087323c5b2fa45f82276","isMyApp",false,"name","pokésmash-mobile","description","The vertical Pokémon brawler that transforms your phone into a pocket-sized battle arena! Now with intuitive touch controls that let you pummel opponents with your thumbs while they're trapped in a towering battlefield designed specifically for your mobile addiction.","brief","","isLive",true,"isPublic","tags",[],"cover","https://cdn.dev.fun/snapshot/087323c5b2fa45f82276/22228_74c4bc61.webp","cdnUrl","https://cdn.dev.fun/app/087323c5b2fa45f82276/22228","createdAt",["D",1740689076167],"updatedAt",["D",1740716306567],"lastCommitId",["B","22228"],"tier",1,"credits",177,{"_14":44,"_45":46,"_47":46,"_48":49,"_50":46,"_51":52,"_53":54},"ba8a89d1-a5ed-49ba-ba64-8d88f865c9af","uniqueId","fengtasy","username","solanaWallet","BEgmM3KduecXCW96746QsRUxCrmrN8oX3Qzxkn84sohd","displayName","bio","Feel the … fengtasy","avatar","/avatar.svg","commitCount",38,"forkCount",0,"likeCount","runsCount",161,"downvoteCount","upvoteCount","upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","2UXerQi66e9gn2yfQRKRC7LiMpeAetjdLrzpcy8Ppump","code","import { useState, useEffect, useRef } from 'react';\nimport { Shield, Zap, Flame, Droplet, Wind, Mountain, Moon, Sparkles, ChevronUp, ChevronDown, ChevronLeft, ChevronRight, Zap as ZapIcon, Trophy, User, X } from 'lucide-react';\nexport default function App() {\n const [gameState, setGameState] = useState('nameEntry'); // nameEntry, selection, battle, results\n const [trainerName, setTrainerName] = useState('');\n const [leaderboard, setLeaderboard] = useState([]);\n const [showLeaderboard, setShowLeaderboard] = useState(false);\n const [selectedCharacter, setSelectedCharacter] = useState(null);\n const [opponent, setOpponent] = useState(null);\n const [isMobile, setIsMobile] = useState(false);\n const [touchControls, setTouchControls] = useState({\n left: false,\n right: false,\n up: false,\n attack: false,\n special: false\n });\n const [playerPosition, setPlayerPosition] = useState({\n x: 150,\n y: 300\n });\n const [opponentPosition, setOpponentPosition] = useState({\n x: 650,\n y: 300\n });\n const [countdown, setCountdown] = useState(3);\n const [showCountdown, setShowCountdown] = useState(false);\n const [cameraOffset, setCameraOffset] = useState({\n x: 0,\n y: 0\n });\n const [playerVelocity, setPlayerVelocity] = useState({\n x: 0,\n y: 0\n });\n const [opponentVelocity, setOpponentVelocity] = useState({\n x: 0,\n y: 0\n });\n const [playerHealth, setPlayerHealth] = useState(100);\n const [opponentHealth, setOpponentHealth] = useState(100);\n const [playerDamage, setPlayerDamage] = useState(0);\n const [opponentDamage, setOpponentDamage] = useState(0);\n const [playerFacing, setPlayerFacing] = useState('right');\n const [opponentFacing, setOpponentFacing] = useState('left');\n const [playerAttacking, setPlayerAttacking] = useState(false);\n const [opponentAttacking, setOpponentAttacking] = useState(false);\n const [playerSpecialCooldown, setPlayerSpecialCooldown] = useState(0);\n const [opponentSpecialCooldown, setOpponentSpecialCooldown] = useState(0);\n const [winner, setWinner] = useState(null);\n const [effects, setEffects] = useState([]);\n const [currentLevel, setCurrentLevel] = useState(1);\n const [confetti, setConfetti] = useState([]);\n const [opponentSettlingTime, setOpponentSettlingTime] = useState(2); // Time for opponent to stay in place after level start\n const [keys, setKeys] = useState({\n ArrowUp: false,\n ArrowDown: false,\n ArrowLeft: false,\n ArrowRight: false,\n ' ': false,\n 'z': false\n });\n const gameLoopRef = useRef(null);\n const lastUpdateTimeRef = useRef(Date.now());\n const characters = [{\n id: 'pikachu',\n name: 'Pikachu',\n type: 'electric',\n color: 'bg-yellow-400',\n specialName: 'Thunder Shock',\n specialColor: 'bg-yellow-300',\n specialType: 'lightning',\n specialDescription: 'Shoots lightning bolts that chain to nearby opponents',\n icon: ,\n stats: {\n speed: 8,\n jump: 15,\n attack: 8,\n special: 12\n }\n }, {\n id: 'charizard',\n name: 'Charizard',\n type: 'fire',\n color: 'bg-orange-500',\n specialName: 'Flamethrower',\n specialColor: 'bg-red-500',\n specialType: 'flame',\n specialDescription: 'Breathes a cone of fire that burns opponents',\n icon: ,\n stats: {\n speed: 6,\n jump: 12,\n attack: 10,\n special: 10\n }\n }, {\n id: 'blastoise',\n name: 'Blastoise',\n type: 'water',\n color: 'bg-blue-500',\n specialName: 'Hydro Pump',\n specialColor: 'bg-blue-400',\n specialType: 'water',\n specialDescription: 'Shoots powerful water jets that push opponents back',\n icon: ,\n stats: {\n speed: 5,\n jump: 10,\n attack: 9,\n special: 13\n }\n }, {\n id: 'jigglypuff',\n name: 'Jigglypuff',\n type: 'fairy',\n color: 'bg-pink-300',\n specialName: 'Sing',\n specialColor: 'bg-pink-200',\n specialType: 'stun',\n specialDescription: 'Creates a lullaby that temporarily stuns opponents',\n icon: ,\n stats: {\n speed: 4,\n jump: 18,\n attack: 6,\n special: 15\n }\n }, {\n id: 'mewtwo',\n name: 'Mewtwo',\n type: 'psychic',\n color: 'bg-purple-500',\n specialName: 'Psystrike',\n specialColor: 'bg-purple-300',\n specialType: 'psychic',\n specialDescription: 'Launches psychic waves that pass through platforms',\n icon: ,\n stats: {\n speed: 7,\n jump: 14,\n attack: 12,\n special: 16\n }\n }, {\n id: 'lucario',\n name: 'Lucario',\n type: 'fighting',\n color: 'bg-blue-600',\n specialName: 'Aura Sphere',\n specialColor: 'bg-blue-300',\n specialType: 'aura',\n specialDescription: 'Charges an energy ball that grows more powerful over time',\n icon: ,\n stats: {\n speed: 9,\n jump: 13,\n attack: 11,\n special: 10\n }\n }, {\n id: 'pidgeot',\n name: 'Pidgeot',\n type: 'flying',\n color: 'bg-amber-300',\n specialName: 'Hurricane',\n specialColor: 'bg-sky-200',\n specialType: 'wind',\n specialDescription: 'Creates a whirlwind that pulls opponents in and damages them',\n icon: ,\n stats: {\n speed: 10,\n jump: 16,\n attack: 7,\n special: 11\n }\n }, {\n id: 'golem',\n name: 'Golem',\n type: 'rock',\n color: 'bg-stone-500',\n specialName: 'Rock Slide',\n specialColor: 'bg-stone-400',\n specialType: 'rock',\n specialDescription: 'Drops rocks from above that damage opponents below',\n icon: ,\n stats: {\n speed: 3,\n jump: 12,\n attack: 14,\n special: 9\n }\n }];\n\n // Platform layouts for different levels\n const levelPlatforms = [\n // Level 1 - Vertical layout for mobile\n [\n // Main ground platform - consistent size across all levels - narrowed for mobile\n {\n id: 'ground',\n x: 50,\n y: 800,\n width: 500,\n height: 20,\n type: 'normal'\n },\n // Lower platforms - narrowed for mobile\n {\n id: 'lower1',\n x: 100,\n y: 700,\n width: 180,\n height: 15,\n type: 'normal'\n }, {\n id: 'lower2',\n x: 320,\n y: 650,\n width: 180,\n height: 15,\n type: 'normal'\n },\n // Mid-level platforms\n {\n id: 'mid1',\n x: 120,\n y: 550,\n width: 150,\n height: 15,\n type: 'normal'\n }, {\n id: 'mid2',\n x: 320,\n y: 500,\n width: 120,\n height: 15,\n type: 'normal'\n },\n // Upper platforms\n {\n id: 'upper1',\n x: 50,\n y: 400,\n width: 100,\n height: 15,\n type: 'normal'\n }, {\n id: 'upper2',\n x: 220,\n y: 380,\n width: 80,\n height: 15,\n type: 'normal'\n }, {\n id: 'upper3',\n x: 380,\n y: 350,\n width: 120,\n height: 15,\n type: 'normal'\n },\n // High platforms\n {\n id: 'high1',\n x: 300,\n y: 280,\n width: 80,\n height: 15,\n type: 'normal'\n }, {\n id: 'high2',\n x: 150,\n y: 250,\n width: 100,\n height: 15,\n type: 'normal'\n },\n // Top platforms\n {\n id: 'top1',\n x: 220,\n y: 150,\n width: 80,\n height: 15,\n type: 'normal'\n }, {\n id: 'top2',\n x: 350,\n y: 120,\n width: 100,\n height: 15,\n type: 'normal'\n }, {\n id: 'top3',\n x: 80,\n y: 100,\n width: 100,\n height: 15,\n type: 'normal'\n },\n // Sky platforms\n {\n id: 'sky1',\n x: 250,\n y: 50,\n width: 80,\n height: 15,\n type: 'normal'\n }, {\n id: 'sky2',\n x: 120,\n y: 30,\n width: 60,\n height: 15,\n type: 'normal'\n }, {\n id: 'sky3',\n x: 380,\n y: 20,\n width: 60,\n height: 15,\n type: 'normal'\n },\n // Moving platforms\n {\n id: 'moving1',\n x: 220,\n y: 600,\n width: 60,\n height: 15,\n type: 'moving',\n direction: 'horizontal',\n speed: 50,\n min: 180,\n max: 320,\n originalX: 220,\n originalY: 600\n }, {\n id: 'moving2',\n x: 450,\n y: 450,\n width: 60,\n height: 15,\n type: 'moving',\n direction: 'vertical',\n speed: 40,\n min: 400,\n max: 550,\n originalX: 450,\n originalY: 450\n }, {\n id: 'moving3',\n x: 150,\n y: 200,\n width: 60,\n height: 15,\n type: 'moving',\n direction: 'horizontal',\n speed: 60,\n min: 120,\n max: 250,\n originalX: 150,\n originalY: 200\n }, {\n id: 'moving4',\n x: 350,\n y: 80,\n width: 60,\n height: 15,\n type: 'moving',\n direction: 'vertical',\n speed: 30,\n min: 50,\n max: 150,\n originalX: 350,\n originalY: 80\n },\n // Bouncy platforms\n {\n id: 'bouncy1',\n x: 80,\n y: 450,\n width: 50,\n height: 15,\n type: 'bouncy'\n }, {\n id: 'bouncy2',\n x: 380,\n y: 520,\n width: 50,\n height: 15,\n type: 'bouncy'\n }, {\n id: 'bouncy3',\n x: 280,\n y: 220,\n width: 50,\n height: 15,\n type: 'bouncy'\n }, {\n id: 'bouncy4',\n x: 180,\n y: 320,\n width: 50,\n height: 15,\n type: 'bouncy'\n },\n // Crumbling platforms\n {\n id: 'crumble1',\n x: 250,\n y: 420,\n width: 80,\n height: 15,\n type: 'crumbling',\n timer: 0,\n active: true\n }, {\n id: 'crumble2',\n x: 350,\n y: 350,\n width: 70,\n height: 15,\n type: 'crumbling',\n timer: 0,\n active: true\n }, {\n id: 'crumble3',\n x: 180,\n y: 180,\n width: 80,\n height: 15,\n type: 'crumbling',\n timer: 0,\n active: true\n }, {\n id: 'crumble4',\n x: 300,\n y: 120,\n width: 70,\n height: 15,\n type: 'crumbling',\n timer: 0,\n active: true\n },\n // Small floating islands\n {\n id: 'island1',\n x: 120,\n y: 350,\n width: 30,\n height: 15,\n type: 'normal'\n }, {\n id: 'island2',\n x: 450,\n y: 300,\n width: 30,\n height: 15,\n type: 'normal'\n }, {\n id: 'island3',\n x: 70,\n y: 180,\n width: 30,\n height: 15,\n type: 'normal'\n }, {\n id: 'island4',\n x: 420,\n y: 150,\n width: 30,\n height: 15,\n type: 'normal'\n }],\n // Level 2 - More complex vertical layout\n [\n // Main ground platform - narrowed for mobile\n {\n id: 'ground',\n x: 50,\n y: 800,\n width: 500,\n height: 20,\n type: 'normal'\n },\n // Floating platforms - adjusted for mobile\n {\n id: 'float1',\n x: 30,\n y: 750,\n width: 120,\n height: 15,\n type: 'normal'\n }, {\n id: 'float2',\n x: 450,\n y: 750,\n width: 120,\n height: 15,\n type: 'normal'\n },\n // Lower platforms\n {\n id: 'lower1',\n x: 120,\n y: 680,\n width: 100,\n height: 15,\n type: 'crumbling',\n timer: 0,\n active: true\n }, {\n id: 'lower2',\n x: 380,\n y: 680,\n width: 100,\n height: 15,\n type: 'crumbling',\n timer: 0,\n active: true\n },\n // Center platform\n {\n id: 'center',\n x: 250,\n y: 650,\n width: 80,\n height: 15,\n type: 'bouncy'\n },\n // Mid-level platforms\n {\n id: 'mid1',\n x: 150,\n y: 580,\n width: 100,\n height: 15,\n type: 'normal'\n }, {\n id: 'mid2',\n x: 350,\n y: 580,\n width: 100,\n height: 15,\n type: 'normal'\n }, {\n id: 'mid3',\n x: 250,\n y: 520,\n width: 80,\n height: 15,\n type: 'bouncy'\n },\n // Upper platforms\n {\n id: 'upper1',\n x: 80,\n y: 450,\n width: 60,\n height: 15,\n type: 'moving',\n direction: 'horizontal',\n speed: 60,\n min: 80,\n max: 220,\n originalX: 80,\n originalY: 450\n }, {\n id: 'upper2',\n x: 420,\n y: 450,\n width: 60,\n height: 15,\n type: 'moving',\n direction: 'horizontal',\n speed: 60,\n min: 350,\n max: 480,\n originalX: 420,\n originalY: 450\n }, {\n id: 'upper3',\n x: 250,\n y: 400,\n width: 80,\n height: 15,\n type: 'crumbling',\n timer: 0,\n active: true\n },\n // High platforms\n {\n id: 'high1',\n x: 180,\n y: 320,\n width: 60,\n height: 15,\n type: 'moving',\n direction: 'vertical',\n speed: 50,\n min: 320,\n max: 420,\n originalX: 180,\n originalY: 320\n }, {\n id: 'high2',\n x: 340,\n y: 320,\n width: 60,\n height: 15,\n type: 'moving',\n direction: 'vertical',\n speed: 50,\n min: 320,\n max: 420,\n originalX: 340,\n originalY: 320\n }, {\n id: 'high3',\n x: 120,\n y: 250,\n width: 80,\n height: 15,\n type: 'normal'\n }, {\n id: 'high4',\n x: 400,\n y: 250,\n width: 80,\n height: 15,\n type: 'normal'\n },\n // Top platforms\n {\n id: 'top1',\n x: 250,\n y: 180,\n width: 80,\n height: 15,\n type: 'bouncy'\n }, {\n id: 'top2',\n x: 150,\n y: 150,\n width: 60,\n height: 15,\n type: 'moving',\n direction: 'horizontal',\n speed: 40,\n min: 120,\n max: 220,\n originalX: 150,\n originalY: 150\n }, {\n id: 'top3',\n x: 350,\n y: 150,\n width: 60,\n height: 15,\n type: 'moving',\n direction: 'horizontal',\n speed: 40,\n min: 320,\n max: 420,\n originalX: 350,\n originalY: 150\n },\n // Highest platforms\n {\n id: 'highest1',\n x: 250,\n y: 80,\n width: 80,\n height: 15,\n type: 'normal'\n }, {\n id: 'highest2',\n x: 120,\n y: 50,\n width: 60,\n height: 15,\n type: 'crumbling',\n timer: 0,\n active: true\n }, {\n id: 'highest3',\n x: 380,\n y: 50,\n width: 60,\n height: 15,\n type: 'crumbling',\n timer: 0,\n active: true\n },\n // Extra bouncy platforms\n {\n id: 'bouncy1',\n x: 150,\n y: 750,\n width: 40,\n height: 15,\n type: 'bouncy'\n }, {\n id: 'bouncy2',\n x: 380,\n y: 750,\n width: 40,\n height: 15,\n type: 'bouncy'\n }, {\n id: 'bouncy3',\n x: 220,\n y: 350,\n width: 40,\n height: 15,\n type: 'bouncy'\n }, {\n id: 'bouncy4',\n x: 320,\n y: 350,\n width: 40,\n height: 15,\n type: 'bouncy'\n },\n // Extra crumbling platforms\n {\n id: 'crumble3',\n x: 220,\n y: 120,\n width: 50,\n height: 15,\n type: 'crumbling',\n timer: 0,\n active: true\n }, {\n id: 'crumble4',\n x: 320,\n y: 120,\n width: 50,\n height: 15,\n type: 'crumbling',\n timer: 0,\n active: true\n }],\n // Level 3 - Extreme vertical layout\n [\n // Main ground platform - narrowed for mobile\n {\n id: 'ground',\n x: 50,\n y: 800,\n width: 500,\n height: 20,\n type: 'normal'\n },\n // Bouncy platforms to help reach higher areas - adjusted for mobile\n {\n id: 'bouncy1',\n x: 150,\n y: 780,\n width: 50,\n height: 15,\n type: 'bouncy'\n }, {\n id: 'bouncy2',\n x: 380,\n y: 780,\n width: 50,\n height: 15,\n type: 'bouncy'\n }, {\n id: 'bouncy3',\n x: 280,\n y: 600,\n width: 30,\n height: 15,\n type: 'bouncy'\n }, {\n id: 'bouncy4',\n x: 280,\n y: 400,\n width: 30,\n height: 15,\n type: 'bouncy'\n }, {\n id: 'bouncy5',\n x: 280,\n y: 200,\n width: 30,\n height: 15,\n type: 'bouncy'\n },\n // Lower moving platforms\n {\n id: 'moving1',\n x: 80,\n y: 720,\n width: 60,\n height: 15,\n type: 'moving',\n direction: 'horizontal',\n speed: 70,\n min: 50,\n max: 180,\n originalX: 80,\n originalY: 720\n }, {\n id: 'moving2',\n x: 280,\n y: 720,\n width: 60,\n height: 15,\n type: 'moving',\n direction: 'horizontal',\n speed: 70,\n min: 220,\n max: 350,\n originalX: 280,\n originalY: 720\n }, {\n id: 'moving3',\n x: 450,\n y: 720,\n width: 60,\n height: 15,\n type: 'moving',\n direction: 'horizontal',\n speed: 70,\n min: 400,\n max: 500,\n originalX: 450,\n originalY: 720\n },\n // Mid-level moving platforms\n {\n id: 'moving4',\n x: 120,\n y: 650,\n width: 60,\n height: 15,\n type: 'moving',\n direction: 'vertical',\n speed: 60,\n min: 550,\n max: 650,\n originalX: 120,\n originalY: 650\n }, {\n id: 'moving5',\n x: 450,\n y: 650,\n width: 60,\n height: 15,\n type: 'moving',\n direction: 'vertical',\n speed: 60,\n min: 550,\n max: 650,\n originalX: 450,\n originalY: 650\n },\n // Crumbling platforms in the middle\n {\n id: 'crumble1',\n x: 150,\n y: 550,\n width: 80,\n height: 15,\n type: 'crumbling',\n timer: 0,\n active: true\n }, {\n id: 'crumble2',\n x: 250,\n y: 550,\n width: 80,\n height: 15,\n type: 'crumbling',\n timer: 0,\n active: true\n }, {\n id: 'crumble3',\n x: 350,\n y: 550,\n width: 80,\n height: 15,\n type: 'crumbling',\n timer: 0,\n active: true\n }, {\n id: 'crumble4',\n x: 180,\n y: 450,\n width: 80,\n height: 15,\n type: 'crumbling',\n timer: 0,\n active: true\n }, {\n id: 'crumble5',\n x: 320,\n y: 450,\n width: 80,\n height: 15,\n type: 'crumbling',\n timer: 0,\n active: true\n },\n // Upper level with fast moving platforms\n {\n id: 'fastmove1',\n x: 120,\n y: 380,\n width: 50,\n height: 15,\n type: 'moving',\n direction: 'horizontal',\n speed: 100,\n min: 80,\n max: 220,\n originalX: 120,\n originalY: 380\n }, {\n id: 'fastmove2',\n x: 280,\n y: 380,\n width: 50,\n height: 15,\n type: 'moving',\n direction: 'vertical',\n speed: 80,\n min: 320,\n max: 440,\n originalX: 280,\n originalY: 380\n }, {\n id: 'fastmove3',\n x: 450,\n y: 380,\n width: 50,\n height: 15,\n type: 'moving',\n direction: 'horizontal',\n speed: 100,\n min: 380,\n max: 500,\n originalX: 450,\n originalY: 380\n },\n // High level platforms\n {\n id: 'high1',\n x: 150,\n y: 300,\n width: 80,\n height: 15,\n type: 'normal'\n }, {\n id: 'high2',\n x: 350,\n y: 300,\n width: 80,\n height: 15,\n type: 'normal'\n }, {\n id: 'high3',\n x: 250,\n y: 250,\n width: 80,\n height: 15,\n type: 'crumbling',\n timer: 0,\n active: true\n },\n // Top level with super bouncy platforms\n {\n id: 'superbounce1',\n x: 180,\n y: 180,\n width: 30,\n height: 15,\n type: 'bouncy'\n }, {\n id: 'superbounce2',\n x: 380,\n y: 180,\n width: 30,\n height: 15,\n type: 'bouncy'\n }, {\n id: 'superbounce3',\n x: 120,\n y: 120,\n width: 30,\n height: 15,\n type: 'bouncy'\n }, {\n id: 'superbounce4',\n x: 450,\n y: 120,\n width: 30,\n height: 15,\n type: 'bouncy'\n },\n // Highest platforms\n {\n id: 'highest1',\n x: 280,\n y: 100,\n width: 60,\n height: 15,\n type: 'crumbling',\n timer: 0,\n active: true\n }, {\n id: 'highest2',\n x: 180,\n y: 50,\n width: 50,\n height: 15,\n type: 'moving',\n direction: 'horizontal',\n speed: 120,\n min: 150,\n max: 280,\n originalX: 180,\n originalY: 50\n }, {\n id: 'highest3',\n x: 380,\n y: 50,\n width: 50,\n height: 15,\n type: 'moving',\n direction: 'horizontal',\n speed: 120,\n min: 320,\n max: 450,\n originalX: 380,\n originalY: 50\n },\n // Extra small platforms\n {\n id: 'tiny1',\n x: 80,\n y: 250,\n width: 25,\n height: 15,\n type: 'normal'\n }, {\n id: 'tiny2',\n x: 480,\n y: 250,\n width: 25,\n height: 15,\n type: 'normal'\n }, {\n id: 'tiny3',\n x: 80,\n y: 80,\n width: 25,\n height: 15,\n type: 'normal'\n }, {\n id: 'tiny4',\n x: 480,\n y: 80,\n width: 25,\n height: 15,\n type: 'normal'\n }, {\n id: 'tiny5',\n x: 280,\n y: 20,\n width: 25,\n height: 15,\n type: 'normal'\n }]];\n const [platforms, setPlatforms] = useState(levelPlatforms[0]);\n\n // Detect mobile device and set viewport\n useEffect(() => {\n const checkMobile = () => {\n const isMobileDevice = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || window.innerWidth < 768;\n setIsMobile(isMobileDevice);\n\n // Add viewport meta tag for proper mobile scaling\n if (isMobileDevice && !document.querySelector('meta[name=\"viewport\"]')) {\n const meta = document.createElement('meta');\n meta.name = 'viewport';\n meta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover';\n document.getElementsByTagName('head')[0].appendChild(meta);\n }\n\n // Prevent scrolling on mobile\n document.body.style.overflow = 'hidden';\n document.body.style.position = 'fixed';\n document.body.style.width = '100%';\n document.body.style.height = '100%';\n };\n checkMobile();\n window.addEventListener('resize', checkMobile);\n return () => window.removeEventListener('resize', checkMobile);\n }, []);\n\n // Handle keyboard input\n useEffect(() => {\n const handleKeyDown = e => {\n if (gameState === 'battle' && ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' ', 'z'].includes(e.key)) {\n e.preventDefault();\n setKeys(prev => ({\n ...prev,\n [e.key]: true\n }));\n }\n };\n const handleKeyUp = e => {\n if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' ', 'z'].includes(e.key)) {\n setKeys(prev => ({\n ...prev,\n [e.key]: false\n }));\n }\n };\n window.addEventListener('keydown', handleKeyDown);\n window.addEventListener('keyup', handleKeyUp);\n return () => {\n window.removeEventListener('keydown', handleKeyDown);\n window.removeEventListener('keyup', handleKeyUp);\n };\n }, [gameState]);\n\n // Handle touch controls\n useEffect(() => {\n if (gameState === 'battle') {\n // Update keys based on touch controls\n setKeys(prev => ({\n ...prev,\n 'ArrowLeft': touchControls.left,\n 'ArrowRight': touchControls.right,\n 'ArrowUp': touchControls.up,\n ' ': touchControls.attack,\n 'z': touchControls.special\n }));\n }\n }, [touchControls, gameState]);\n\n // Character selection\n const selectCharacter = character => {\n setSelectedCharacter(character);\n\n // Randomly select an opponent different from player\n const availableOpponents = characters.filter(c => c.id !== character.id);\n const randomOpponent = availableOpponents[Math.floor(Math.random() * availableOpponents.length)];\n setOpponent(randomOpponent);\n\n // Reset game state\n setPlayerHealth(100);\n setOpponentHealth(100);\n setPlayerDamage(0);\n setOpponentDamage(0);\n\n // Find the ground platform to position characters\n const groundPlatform = levelPlatforms[0].find(p => p.id === 'ground');\n const platformCenterX = groundPlatform.x + groundPlatform.width / 2;\n\n // Position player exactly at the center of the ground platform\n setPlayerPosition({\n x: platformCenterX - 40,\n // Centered (adjusted for character width)\n y: groundPlatform.y - 60 // Just above the platform\n });\n\n // Position opponent slightly to the right of center\n setOpponentPosition({\n x: platformCenterX + 40,\n // Slightly to the right of center\n y: groundPlatform.y - 60 // Just above the platform\n });\n\n // Ensure zero initial velocity for both characters\n setPlayerVelocity({\n x: 0,\n y: 0\n });\n setOpponentVelocity({\n x: 0,\n y: 0\n });\n setPlayerFacing('right');\n setOpponentFacing('left');\n setPlayerAttacking(false);\n setOpponentAttacking(false);\n setPlayerSpecialCooldown(0);\n setOpponentSpecialCooldown(0);\n setWinner(null);\n setEffects([]);\n setConfetti([]);\n\n // Reset opponent settling time\n setOpponentSettlingTime(2);\n\n // Start countdown\n setCountdown(3);\n setShowCountdown(true);\n\n // Start the battle\n setGameState('battle');\n };\n\n // Game loop\n useEffect(() => {\n if (gameState !== 'battle') return;\n\n // Handle countdown\n if (showCountdown) {\n const countdownTimer = setInterval(() => {\n setCountdown(prev => {\n if (prev <= 1) {\n clearInterval(countdownTimer);\n setShowCountdown(false);\n return 0;\n }\n return prev - 1;\n });\n }, 1000);\n return () => clearInterval(countdownTimer);\n }\n const gameLoop = () => {\n const now = Date.now();\n const deltaTime = (now - lastUpdateTimeRef.current) / 1000; // Convert to seconds\n lastUpdateTimeRef.current = now;\n\n // Only update game if countdown is finished\n if (!showCountdown) {\n // Update player\n updatePlayer(deltaTime);\n\n // Update opponent AI\n updateOpponent(deltaTime);\n\n // Update platforms\n updatePlatforms(deltaTime);\n\n // Check for collisions\n checkCollisions();\n\n // Check for win conditions\n checkWinConditions();\n\n // Update effects\n updateEffects(deltaTime);\n\n // Update confetti\n updateConfetti(deltaTime);\n\n // Update opponent settling time\n if (opponentSettlingTime > 0) {\n setOpponentSettlingTime(prev => Math.max(0, prev - deltaTime));\n }\n }\n\n // Continue the game loop\n gameLoopRef.current = requestAnimationFrame(gameLoop);\n };\n gameLoopRef.current = requestAnimationFrame(gameLoop);\n return () => {\n if (gameLoopRef.current) {\n cancelAnimationFrame(gameLoopRef.current);\n }\n };\n }, [gameState, keys, playerPosition, opponentPosition, playerVelocity, opponentVelocity, playerHealth, opponentHealth, playerDamage, opponentDamage, selectedCharacter, opponent, platforms, showCountdown, opponentSettlingTime]);\n // Update platforms (moving, crumbling, etc.)\n const updatePlatforms = deltaTime => {\n setPlatforms(prevPlatforms => {\n return prevPlatforms.map(platform => {\n // Handle moving platforms\n if (platform.type === 'moving') {\n let newX = platform.x;\n let newY = platform.y;\n if (platform.direction === 'horizontal') {\n newX = platform.originalX + Math.sin(Date.now() / 1000) * (platform.max - platform.min) / 2 + (platform.max - platform.min) / 2 + platform.min - platform.originalX;\n } else if (platform.direction === 'vertical') {\n newY = platform.originalY + Math.sin(Date.now() / 800) * (platform.max - platform.min) / 2 + (platform.max - platform.min) / 2 + platform.min - platform.originalY;\n }\n return {\n ...platform,\n x: newX,\n y: newY\n };\n }\n\n // Handle crumbling platforms\n if (platform.type === 'crumbling') {\n // Check if player or opponent is standing on this platform\n const playerOnPlatform = playerPosition.x + 40 > platform.x && playerPosition.x < platform.x + platform.width && playerPosition.y + 60 >= platform.y - 5 && playerPosition.y + 60 <= platform.y + 5;\n const opponentOnPlatform = opponentPosition.x + 40 > platform.x && opponentPosition.x < platform.x + platform.width && opponentPosition.y + 60 >= platform.y - 5 && opponentPosition.y + 60 <= platform.y + 5;\n let newTimer = platform.timer;\n let newActive = platform.active;\n\n // If someone is on the platform and it's active, start the timer\n if ((playerOnPlatform || opponentOnPlatform) && platform.active) {\n newTimer += deltaTime;\n\n // If timer exceeds 0.5 seconds, deactivate the platform\n if (newTimer > 0.5) {\n newActive = false;\n newTimer = 0;\n\n // Add crumbling effect\n addEffect({\n type: 'crumble',\n x: platform.x + platform.width / 2,\n y: platform.y,\n duration: 0.5\n });\n }\n } else if (!platform.active) {\n // If platform is inactive, increment timer for respawn\n newTimer += deltaTime;\n\n // Respawn after 3 seconds\n if (newTimer > 3) {\n newActive = true;\n newTimer = 0;\n }\n }\n return {\n ...platform,\n timer: newTimer,\n active: newActive\n };\n }\n return platform;\n });\n });\n };\n const updatePlayer = deltaTime => {\n if (!selectedCharacter) return;\n\n // Check if any movement keys are pressed\n const isAnyMovementKeyPressed = keys.ArrowLeft || keys.ArrowRight || keys.ArrowUp || keys[' '] || keys.z;\n\n // If no keys are pressed and we're at the start of the game, keep the player stationary\n if (!isAnyMovementKeyPressed && opponentSettlingTime > 0) {\n // Find the ground platform\n const groundPlatform = platforms.find(p => p.id === 'ground');\n if (groundPlatform) {\n // Keep player centered on the ground platform\n const platformCenterX = groundPlatform.x + groundPlatform.width / 2;\n\n // Set position exactly at center\n setPlayerPosition({\n x: platformCenterX - 40,\n // Centered (adjusted for character width)\n y: groundPlatform.y - 60 // Just above the platform\n });\n\n // Ensure zero velocity\n setPlayerVelocity({\n x: 0,\n y: 0\n });\n return;\n }\n }\n\n // Movement\n let newVelocity = {\n ...playerVelocity\n };\n let newPosition = {\n ...playerPosition\n };\n\n // Horizontal movement\n if (keys.ArrowLeft) {\n newVelocity.x = -selectedCharacter.stats.speed * 30 * deltaTime;\n setPlayerFacing('left');\n } else if (keys.ArrowRight) {\n newVelocity.x = selectedCharacter.stats.speed * 30 * deltaTime;\n setPlayerFacing('right');\n } else {\n // Apply friction\n newVelocity.x *= 0.8;\n }\n\n // Jumping\n let onGround = false;\n let onBouncyPlatform = false;\n for (const platform of platforms) {\n if (platform.active !== false && playerPosition.x + 40 > platform.x && playerPosition.x < platform.x + platform.width && playerPosition.y + 60 >= platform.y - 5 && playerPosition.y + 60 <= platform.y + 5) {\n onGround = true;\n if (platform.type === 'bouncy') {\n onBouncyPlatform = true;\n }\n break;\n }\n }\n if (keys.ArrowUp && onGround) {\n if (onBouncyPlatform) {\n // Extra bounce height on bouncy platforms\n newVelocity.y = -selectedCharacter.stats.jump * 1.2;\n\n // Add bounce effect\n addEffect({\n type: 'bounce',\n x: playerPosition.x + 20,\n y: playerPosition.y + 60,\n duration: 0.3\n });\n } else {\n newVelocity.y = -selectedCharacter.stats.jump * 0.8; // Significantly reduced jump height\n }\n }\n\n // Apply gravity\n if (!onGround) {\n newVelocity.y += 30 * deltaTime; // Gravity\n } else if (newVelocity.y > 0) {\n newVelocity.y = 0;\n }\n\n // Update position\n newPosition.x += newVelocity.x;\n newPosition.y += newVelocity.y;\n\n // Boundary checks\n if (newPosition.x < 0) newPosition.x = 0;\n if (newPosition.x > 560) newPosition.x = 560;\n if (newPosition.y > 900) {\n // Check if there's a platform to teleport to\n let rescuePlatform = null;\n\n // First try to find the ground platform\n rescuePlatform = platforms.find(p => p.id === 'ground');\n\n // If found, teleport to it\n if (rescuePlatform) {\n newPosition.y = rescuePlatform.y - 60;\n newPosition.x = rescuePlatform.x + rescuePlatform.width / 2;\n newVelocity.y = 0;\n newVelocity.x = 0;\n\n // Add teleport effect\n addEffect({\n type: 'notification',\n text: 'TELEPORTED!',\n x: newPosition.x,\n y: newPosition.y - 30,\n duration: 1\n });\n\n // Make sure to update position and velocity before returning\n setPlayerPosition(newPosition);\n setPlayerVelocity(newVelocity);\n return;\n } else {\n // Fallback to old behavior if no platform found\n setPlayerHealth(0);\n return;\n }\n }\n\n // Update camera to follow player with better vertical tracking for mobile\n // This keeps the player more centered and visible during vertical movement\n const verticalLookAhead = newVelocity.y < 0 ? -150 : 50; // Enhanced vertical look ahead\n\n // Adjust camera offset based on device type for better mobile experience\n if (isMobile) {\n // Mobile camera: more focused on vertical movement with narrower view\n setCameraOffset({\n x: Math.max(0, Math.min(newPosition.x - 300, 560 - 600)),\n y: Math.max(0, Math.min(newPosition.y - 400 + verticalLookAhead, 900 - 800))\n });\n } else {\n // Desktop camera: standard tracking\n setCameraOffset({\n x: Math.max(0, Math.min(newPosition.x - 300, 560 - 600)),\n y: Math.max(0, Math.min(newPosition.y - 300 + verticalLookAhead, 800 - 600))\n });\n }\n\n // Platform collision\n for (const platform of platforms) {\n // Skip inactive platforms\n if (platform.active === false) continue;\n if (newPosition.x + 40 > platform.x && newPosition.x < platform.x + platform.width && newPosition.y + 60 > platform.y && newPosition.y + 60 < platform.y + platform.height + 10 && playerPosition.y + 60 <= platform.y) {\n newPosition.y = platform.y - 60;\n newVelocity.y = 0;\n\n // If it's a moving platform, add its velocity to the player\n if (platform.type === 'moving' && platform.direction === 'horizontal') {\n // Calculate platform's velocity\n const platformVelocityX = (platform.x - (platform.prevX || platform.x)) / deltaTime;\n newPosition.x += platformVelocityX * deltaTime * 0.8; // Apply 80% of platform movement\n }\n }\n }\n\n // Attack\n if (keys[' '] && !playerAttacking) {\n setPlayerAttacking(true);\n\n // Check if opponent is in range\n const attackRange = 80;\n const attackDirection = playerFacing === 'right' ? 1 : -1;\n const attackX = playerPosition.x + attackDirection * 30;\n if (Math.abs(attackX - opponentPosition.x) < attackRange && Math.abs(playerPosition.y - opponentPosition.y) < 60) {\n // Hit opponent\n const baseDamage = selectedCharacter.stats.attack * 0.5;\n const knockbackForce = 5 + opponentDamage * 0.1;\n setOpponentDamage(prev => prev + baseDamage);\n // Reduce opponent health based on damage\n setOpponentHealth(prev => Math.max(0, prev - baseDamage));\n setOpponentVelocity({\n x: attackDirection * knockbackForce,\n y: -knockbackForce * 0.5\n });\n\n // Add hit effect\n addEffect({\n type: 'hit',\n x: opponentPosition.x,\n y: opponentPosition.y,\n duration: 0.3\n });\n }\n\n // Reset attack state after delay\n setTimeout(() => {\n setPlayerAttacking(false);\n }, 400);\n }\n\n // Special attack\n if (keys.z && playerSpecialCooldown <= 0 && !playerAttacking) {\n setPlayerAttacking(true);\n setPlayerSpecialCooldown(3); // 3 second cooldown\n\n // Create special attack effect based on character type\n const direction = playerFacing === 'right' ? 1 : -1;\n\n // Different special attack types\n switch (selectedCharacter.specialType) {\n case 'lightning':\n // Pikachu's Thunder Shock - fast lightning bolt that can chain\n addEffect({\n type: 'special',\n specialType: 'lightning',\n character: selectedCharacter,\n x: playerPosition.x + direction * 40,\n y: playerPosition.y + 30,\n direction: direction,\n duration: 1.5,\n damage: selectedCharacter.stats.special * 0.7,\n velocity: {\n x: direction * 15,\n y: 0\n },\n canChain: true,\n chainCount: 0,\n maxChains: 2\n });\n break;\n case 'flame':\n // Charizard's Flamethrower - cone of fire (severely nerfed version)\n for (let i = -1; i <= 1; i += 2) {\n // Only create 2 flames instead of 3 (skip the middle)\n addEffect({\n type: 'special',\n specialType: 'flame',\n character: selectedCharacter,\n x: playerPosition.x + direction * 40,\n y: playerPosition.y + 30 + i * 10,\n direction: direction,\n duration: 0.6,\n // Further reduced duration\n damage: selectedCharacter.stats.special * 0.2,\n // Significantly reduced damage multiplier\n velocity: {\n x: direction * 5 + i * direction * 0.5,\n // Slower velocity\n y: i * 0.2\n },\n size: 0.6 + Math.abs(i) * 0.3 // Even smaller flames\n });\n }\n break;\n case 'water':\n // Blastoise's Hydro Pump - powerful pushback\n addEffect({\n type: 'special',\n specialType: 'water',\n character: selectedCharacter,\n x: playerPosition.x + direction * 40,\n y: playerPosition.y + 30,\n direction: direction,\n duration: 1,\n damage: selectedCharacter.stats.special * 0.5,\n velocity: {\n x: direction * 12,\n y: 0\n },\n knockback: 15\n });\n break;\n case 'stun':\n // Jigglypuff's Sing - area stun\n addEffect({\n type: 'special',\n specialType: 'stun',\n character: selectedCharacter,\n x: playerPosition.x,\n y: playerPosition.y,\n direction: direction,\n duration: 2,\n damage: selectedCharacter.stats.special * 0.3,\n radius: 120,\n stunDuration: 1.5\n });\n break;\n case 'psychic':\n // Mewtwo's Psystrike - passes through platforms\n addEffect({\n type: 'special',\n specialType: 'psychic',\n character: selectedCharacter,\n x: playerPosition.x + direction * 40,\n y: playerPosition.y + 30,\n direction: direction,\n duration: 1.5,\n damage: selectedCharacter.stats.special * 0.9,\n velocity: {\n x: direction * 12,\n y: 0\n },\n passThroughPlatforms: true\n });\n break;\n case 'aura':\n // Lucario's Aura Sphere - charged attack\n addEffect({\n type: 'special',\n specialType: 'aura',\n character: selectedCharacter,\n x: playerPosition.x + direction * 40,\n y: playerPosition.y + 30,\n direction: direction,\n duration: 1.2,\n damage: selectedCharacter.stats.special * 1.1,\n velocity: {\n x: direction * 8,\n y: 0\n },\n size: 1.5\n });\n break;\n case 'wind':\n // Pidgeot's Hurricane - pulls opponents in\n addEffect({\n type: 'special',\n specialType: 'wind',\n character: selectedCharacter,\n x: playerPosition.x + direction * 80,\n y: playerPosition.y,\n direction: direction,\n duration: 2,\n damage: selectedCharacter.stats.special * 0.6,\n radius: 100,\n pullForce: 5\n });\n break;\n case 'rock':\n // Golem's Rock Slide - rocks from above\n for (let i = 0; i < 4; i++) {\n setTimeout(() => {\n const targetX = opponentPosition.x + (Math.random() * 100 - 50);\n addEffect({\n type: 'special',\n specialType: 'rock',\n character: selectedCharacter,\n x: targetX,\n y: opponentPosition.y - 150,\n direction: 0,\n duration: 1,\n damage: selectedCharacter.stats.special * 0.7,\n velocity: {\n x: 0,\n y: 12\n }\n });\n }, i * 200);\n }\n break;\n default:\n // Fallback for any character without a specific special\n addEffect({\n type: 'special',\n specialType: 'default',\n character: selectedCharacter,\n x: playerPosition.x + direction * 40,\n y: playerPosition.y + 30,\n direction: direction,\n duration: 1,\n damage: selectedCharacter.stats.special * 0.8,\n velocity: {\n x: direction * 10,\n y: 0\n }\n });\n }\n\n // Add \"special used\" notification effect\n addEffect({\n type: 'notification',\n text: 'SPECIAL USED!',\n x: playerPosition.x,\n y: playerPosition.y - 30,\n duration: 1\n });\n\n // Reset attack state after delay\n setTimeout(() => {\n setPlayerAttacking(false);\n }, 600);\n }\n\n // Update cooldowns\n if (playerSpecialCooldown > 0) {\n setPlayerSpecialCooldown(prev => Math.max(0, prev - deltaTime));\n }\n setPlayerPosition(newPosition);\n setPlayerVelocity(newVelocity);\n };\n // AI state variables\n const [aiState, setAiState] = useState({\n comboInProgress: false,\n comboStep: 0,\n targetPlatform: null,\n lastPlayerPosition: {\n x: 0,\n y: 0\n },\n playerPatternRecognition: {\n jumpsFrequently: false,\n usesSpecialsOften: false,\n staysOnGround: false,\n preferredDirection: null,\n aggressiveness: 0\n },\n adaptiveStrategy: 'balanced',\n // 'aggressive', 'defensive', 'aerial', 'balanced'\n lastAttackTime: 0,\n consecutiveAttacks: 0,\n dodgeSuccessRate: 0.5,\n platformAwareness: 0.7\n });\n const updateOpponent = deltaTime => {\n if (!opponent) return;\n\n // Advanced AI behavior\n let newVelocity = {\n ...opponentVelocity\n };\n let newPosition = {\n ...opponentPosition\n };\n\n // Check if on ground\n let onGround = false;\n let onBouncyPlatform = false;\n for (const platform of platforms) {\n if (platform.active !== false && opponentPosition.x + 40 > platform.x && opponentPosition.x < platform.x + platform.width && opponentPosition.y + 60 >= platform.y - 5 && opponentPosition.y + 60 <= platform.y + 5) {\n onGround = true;\n if (platform.type === 'bouncy') {\n onBouncyPlatform = true;\n }\n break;\n }\n }\n\n // If opponent is still settling in, keep them in place\n if (opponentSettlingTime > 0) {\n // Find the ground platform\n const groundPlatform = platforms.find(p => p.id === 'ground');\n if (groundPlatform) {\n // Keep opponent centered on the ground platform\n const platformCenterX = groundPlatform.x + groundPlatform.width / 2;\n\n // Gently move opponent to center if they're not there\n if (Math.abs(opponentPosition.x - (platformCenterX + 40)) > 5) {\n const direction = opponentPosition.x < platformCenterX + 40 ? 1 : -1;\n newVelocity.x = direction * 2;\n } else {\n newVelocity.x = 0;\n }\n\n // Make sure opponent is facing the player\n setOpponentFacing('left');\n\n // Keep opponent on the ground\n if (!onGround) {\n newVelocity.y += 30 * deltaTime; // Apply gravity\n } else {\n newVelocity.y = 0;\n }\n\n // Update position\n newPosition.x += newVelocity.x;\n newPosition.y += newVelocity.y;\n\n // Platform collision\n for (const platform of platforms) {\n if (platform.active !== false && newPosition.x + 40 > platform.x && newPosition.x < platform.x + platform.width && newPosition.y + 60 > platform.y && newPosition.y + 60 < platform.y + platform.height + 10 && opponentPosition.y + 60 <= platform.y) {\n newPosition.y = platform.y - 60;\n newVelocity.y = 0;\n }\n }\n setOpponentPosition(newPosition);\n setOpponentVelocity(newVelocity);\n return;\n }\n }\n\n // Update player pattern recognition\n const now = Date.now();\n const playerMovedSinceLastFrame = Math.abs(playerPosition.x - aiState.lastPlayerPosition.x) > 5 || Math.abs(playerPosition.y - aiState.lastPlayerPosition.y) > 5;\n\n // Update AI state with player patterns\n if (playerMovedSinceLastFrame) {\n setAiState(prev => {\n const verticalMovement = playerPosition.y - prev.lastPlayerPosition.y;\n const horizontalMovement = playerPosition.x - prev.lastPlayerPosition.x;\n\n // Detect if player jumps frequently\n const jumpsFrequently = prev.playerPatternRecognition.jumpsFrequently;\n const newJumpsFrequently = verticalMovement < -10 ? Math.min(1, jumpsFrequently + 0.1) : Math.max(0, jumpsFrequently - 0.02);\n\n // Detect if player stays on ground\n const staysOnGround = prev.playerPatternRecognition.staysOnGround;\n const newStaysOnGround = Math.abs(verticalMovement) < 5 ? Math.min(1, staysOnGround + 0.05) : Math.max(0, staysOnGround - 0.02);\n\n // Detect preferred direction\n let preferredDirection = prev.playerPatternRecognition.preferredDirection;\n if (Math.abs(horizontalMovement) > 10) {\n preferredDirection = horizontalMovement > 0 ? 'right' : 'left';\n }\n\n // Detect aggressiveness based on attack frequency and proximity\n const aggressiveness = prev.playerPatternRecognition.aggressiveness;\n const proximityFactor = Math.abs(playerPosition.x - opponentPosition.x) < 100 ? 0.1 : -0.05;\n const newAggressiveness = Math.max(0, Math.min(1, aggressiveness + proximityFactor));\n\n // Determine adaptive strategy based on patterns\n let adaptiveStrategy = prev.adaptiveStrategy;\n if (newJumpsFrequently > 0.7) adaptiveStrategy = 'aerial';else if (newStaysOnGround > 0.7) adaptiveStrategy = 'aggressive';else if (newAggressiveness > 0.7) adaptiveStrategy = 'defensive';else if (playerSpecialCooldown <= 0) adaptiveStrategy = 'defensive';else adaptiveStrategy = 'balanced';\n\n // Improve dodge success rate and platform awareness as level increases\n const dodgeSuccessRate = Math.min(0.9, 0.5 + (currentLevel - 1) * 0.15);\n const platformAwareness = Math.min(0.95, 0.7 + (currentLevel - 1) * 0.1);\n return {\n ...prev,\n lastPlayerPosition: {\n ...playerPosition\n },\n playerPatternRecognition: {\n jumpsFrequently: newJumpsFrequently,\n staysOnGround: newStaysOnGround,\n preferredDirection: preferredDirection,\n usesSpecialsOften: playerSpecialCooldown <= 0 ? prev.playerPatternRecognition.usesSpecialsOften + 0.1 : prev.playerPatternRecognition.usesSpecialsOften,\n aggressiveness: newAggressiveness\n },\n adaptiveStrategy,\n dodgeSuccessRate,\n platformAwareness\n };\n });\n }\n\n // AI difficulty scaling based on level with more aggressive scaling but better self-preservation\n const baseAggressiveness = 0.03 * (1 + (currentLevel - 1) * 0.8); // Increases by 80% per level\n const baseSpecialFrequency = 0.01 * (1 + (currentLevel - 1) * 1.0); // Increases by 100% per level\n const baseJumpFrequency = 0.015 * (1 + (currentLevel - 1) * 0.5); // Reduced base jump frequency\n const aiReactionTime = Math.max(0.3, 1 - (currentLevel - 1) * 0.3); // Decreases by 30% per level (faster reactions)\n const aiSelfPreservation = 0.85 + (currentLevel - 1) * 0.1; // Increased base self-preservation\n\n // Adjust based on adaptive strategy\n let aiAggressiveness = baseAggressiveness;\n let aiSpecialFrequency = baseSpecialFrequency;\n let aiJumpFrequency = baseJumpFrequency;\n switch (aiState.adaptiveStrategy) {\n case 'aggressive':\n aiAggressiveness *= 1.5;\n aiSpecialFrequency *= 1.2;\n break;\n case 'defensive':\n aiAggressiveness *= 0.7;\n aiJumpFrequency *= 1.5;\n break;\n case 'aerial':\n aiJumpFrequency *= 2;\n aiSpecialFrequency *= 1.3;\n break;\n // balanced is default\n }\n\n // Cooldown for opponent actions\n const aiDecision = Math.random();\n const distanceToPlayer = playerPosition.x - opponentPosition.x;\n const verticalDistanceToPlayer = playerPosition.y - opponentPosition.y;\n const direction = distanceToPlayer > 0 ? 1 : -1;\n\n // Handle combo attacks\n if (aiState.comboInProgress) {\n if (aiState.comboStep === 0) {\n // First attack in combo\n setOpponentAttacking(true);\n\n // Basic attack\n const baseDamage = opponent.stats.attack * 0.6;\n const knockbackForce = 5 + playerDamage * 0.1;\n setPlayerDamage(prev => prev + baseDamage);\n setPlayerHealth(prev => Math.max(0, prev - baseDamage));\n setPlayerVelocity({\n x: direction * knockbackForce * 0.7,\n // Reduced knockback for combo\n y: -knockbackForce * 0.3\n });\n\n // Add hit effect\n addEffect({\n type: 'hit',\n x: playerPosition.x,\n y: playerPosition.y,\n duration: 0.3\n });\n\n // Move to next combo step\n setAiState(prev => ({\n ...prev,\n comboStep: 1\n }));\n\n // Quick recovery for combo\n setTimeout(() => {\n setOpponentAttacking(false);\n\n // Execute next combo step after short delay\n setTimeout(() => {\n // Only continue combo if player is still in range\n if (Math.abs(playerPosition.x - opponentPosition.x) < 100) {\n // Second attack - jump attack\n if (onGround) {\n newVelocity.y = -opponent.stats.jump * 0.6;\n }\n setOpponentAttacking(true);\n\n // Stronger second hit\n const comboDamage = opponent.stats.attack * 0.7;\n setPlayerDamage(prev => prev + comboDamage);\n setPlayerHealth(prev => Math.max(0, prev - comboDamage));\n setPlayerVelocity({\n x: direction * knockbackForce,\n y: -knockbackForce * 0.7\n });\n\n // Add hit effect\n addEffect({\n type: 'hit',\n x: playerPosition.x,\n y: playerPosition.y - 20,\n // Higher hit\n duration: 0.3\n });\n\n // Move to final combo step\n setAiState(prev => ({\n ...prev,\n comboStep: 2\n }));\n\n // Quick recovery for combo\n setTimeout(() => {\n setOpponentAttacking(false);\n\n // Final combo step after short delay\n setTimeout(() => {\n // Only finish combo if player is still in range\n if (Math.abs(playerPosition.x - opponentPosition.x) < 120) {\n // Final attack - special if available, otherwise strong attack\n if (opponentSpecialCooldown <= 0) {\n // Use special as finisher\n executeSpecialAttack(direction);\n } else {\n // Strong final hit\n setOpponentAttacking(true);\n\n // Powerful final hit\n const finalDamage = opponent.stats.attack * 1.0;\n const finalKnockback = 10 + playerDamage * 0.15;\n setPlayerDamage(prev => prev + finalDamage);\n setPlayerHealth(prev => Math.max(0, prev - finalDamage));\n setPlayerVelocity({\n x: direction * finalKnockback,\n y: -finalKnockback * 0.6\n });\n\n // Add hit effect\n addEffect({\n type: 'hit',\n x: playerPosition.x,\n y: playerPosition.y,\n duration: 0.4\n });\n\n // Add \"combo\" notification\n addEffect({\n type: 'notification',\n text: 'COMBO!',\n x: opponentPosition.x,\n y: opponentPosition.y - 30,\n duration: 1.5\n });\n\n // End combo\n setTimeout(() => {\n setOpponentAttacking(false);\n setAiState(prev => ({\n ...prev,\n comboInProgress: false,\n comboStep: 0\n }));\n }, 400 / aiReactionTime);\n }\n } else {\n // Combo broken, reset\n setAiState(prev => ({\n ...prev,\n comboInProgress: false,\n comboStep: 0\n }));\n }\n }, 200 / aiReactionTime);\n }, 300 / aiReactionTime);\n } else {\n // Combo broken, reset\n setAiState(prev => ({\n ...prev,\n comboInProgress: false,\n comboStep: 0\n }));\n }\n }, 200 / aiReactionTime);\n }, 300 / aiReactionTime);\n }\n\n // While in combo, just apply gravity and platform collision\n if (!onGround) {\n newVelocity.y += 30 * deltaTime; // Apply gravity\n } else if (newVelocity.y > 0) {\n newVelocity.y = 0;\n }\n }\n // Normal AI decision making when not in combo\n else if (!opponentAttacking) {\n // Find optimal platform to reach player\n const findOptimalPlatform = () => {\n // If player is above, find platforms to reach them\n if (playerPosition.y < opponentPosition.y - 50) {\n // Find platforms that can help reach the player\n const potentialPlatforms = platforms.filter(p => p.active !== false && p.y < opponentPosition.y && p.y > playerPosition.y + 60 && Math.abs(p.x + p.width / 2 - playerPosition.x) < 150);\n if (potentialPlatforms.length > 0) {\n // Sort by proximity to player and height\n potentialPlatforms.sort((a, b) => {\n const aScore = Math.abs(a.x + a.width / 2 - playerPosition.x) + Math.abs(a.y - playerPosition.y);\n const bScore = Math.abs(b.x + b.width / 2 - playerPosition.x) + Math.abs(b.y - playerPosition.y);\n return aScore - bScore;\n });\n return potentialPlatforms[0];\n }\n }\n\n // If no good platform found, return null\n return null;\n };\n\n // Check if we should target a platform\n const targetPlatform = aiState.targetPlatform || findOptimalPlatform();\n\n // If we have a target platform, move towards it\n if (targetPlatform && Math.random() < aiState.platformAwareness) {\n const platformCenterX = targetPlatform.x + targetPlatform.width / 2;\n const distanceToPlatform = platformCenterX - opponentPosition.x;\n const platformDirection = distanceToPlatform > 0 ? 1 : -1;\n\n // Move towards platform\n newVelocity.x = platformDirection * opponent.stats.speed * 25 * deltaTime;\n setOpponentFacing(platformDirection > 0 ? 'right' : 'left');\n\n // Jump if close enough horizontally and below platform\n if (Math.abs(distanceToPlatform) < 30 && onGround) {\n newVelocity.y = -opponent.stats.jump * 0.9;\n\n // Clear target platform once we've jumped\n setAiState(prev => ({\n ...prev,\n targetPlatform: null\n }));\n }\n }\n // Otherwise, standard movement logic with improvements\n else {\n // Advanced platform navigation\n // Check if there's a platform below\n let hasPlatformBelow = false;\n let platformEdgeDistance = 0;\n let currentPlatform = null;\n\n // Find current platform the opponent is standing on\n for (const platform of platforms) {\n if (platform.active !== false && opponentPosition.x + 40 > platform.x && opponentPosition.x < platform.x + platform.width && opponentPosition.y + 60 >= platform.y - 5 && opponentPosition.y + 60 <= platform.y + 5) {\n currentPlatform = platform;\n break;\n }\n }\n\n // Check for platforms below (for fall detection)\n for (const platform of platforms) {\n if (platform.active !== false && opponentPosition.x + 40 > platform.x && opponentPosition.x < platform.x + platform.width && opponentPosition.y + 70 < platform.y && opponentPosition.y + 120 > platform.y) {\n hasPlatformBelow = true;\n\n // Calculate distance to platform edge based on direction\n if (direction > 0) {\n platformEdgeDistance = platform.x + platform.width - opponentPosition.x;\n } else {\n platformEdgeDistance = opponentPosition.x - platform.x;\n }\n break;\n }\n }\n\n // Enhanced edge detection - much more cautious to prevent falling\n const edgeAwareness = 80 + currentLevel * 30; // Significantly increased edge awareness\n const isNearEdge = platformEdgeDistance < edgeAwareness || platformEdgeDistance === 0;\n const isVeryNearEdge = platformEdgeDistance < 30; // Extreme danger zone\n\n // Check if opponent is falling with no platform below\n const isFalling = !onGround && newVelocity.y > 0;\n const isDangerouslyFalling = isFalling && !hasPlatformBelow && opponentPosition.y > 200;\n\n // Check if there's a platform directly below current position (for safer jumps)\n let hasSafePlatformBelow = false;\n for (const platform of platforms) {\n if (platform.active !== false && opponentPosition.x + 20 > platform.x && opponentPosition.x + 20 < platform.x + platform.width && opponentPosition.y + 70 < platform.y && opponentPosition.y + 150 > platform.y) {\n hasSafePlatformBelow = true;\n break;\n }\n }\n\n // Emergency recovery when falling with no platform below\n if (isDangerouslyFalling) {\n // Look for the nearest platform to recover to\n let nearestPlatform = null;\n let nearestDistance = Infinity;\n for (const platform of platforms) {\n if (platform.active !== false) {\n // Calculate horizontal and vertical distance to platform\n const horizontalDist = Math.abs(platform.x + platform.width / 2 - opponentPosition.x);\n const verticalDist = platform.y - opponentPosition.y;\n\n // Only consider platforms that are above or not too far below\n if (verticalDist > -200 && verticalDist < 300 && horizontalDist < 200) {\n const totalDist = horizontalDist + Math.abs(verticalDist) * 0.5;\n if (totalDist < nearestDistance) {\n nearestDistance = totalDist;\n nearestPlatform = platform;\n }\n }\n }\n }\n if (nearestPlatform) {\n // Move toward the nearest platform\n const platformCenterX = nearestPlatform.x + nearestPlatform.width / 2;\n const moveDirection = platformCenterX > opponentPosition.x ? 1 : -1;\n\n // Set velocity to move toward platform\n newVelocity.x = moveDirection * opponent.stats.speed * 30 * deltaTime;\n setOpponentFacing(moveDirection > 0 ? 'right' : 'left');\n\n // Add \"recovery\" notification at higher levels\n if (currentLevel >= 2 && Math.random() < 0.2) {\n addEffect({\n type: 'notification',\n text: 'RECOVERING!',\n x: opponentPosition.x,\n y: opponentPosition.y - 30,\n duration: 0.5\n });\n }\n }\n }\n // If on ground but near edge or no platform below, be extremely cautious\n else if ((isNearEdge || !hasPlatformBelow) && onGround) {\n // Look for platforms below in the direction of the player\n let hasSafePath = false;\n let safePathPlatform = null;\n for (const platform of platforms) {\n if (platform.active !== false && platform.y > opponentPosition.y && platform.y < opponentPosition.y + 200 && (direction > 0 && platform.x < opponentPosition.x + 100 && platform.x + platform.width > opponentPosition.x || direction < 0 && platform.x < opponentPosition.x && platform.x + platform.width > opponentPosition.x - 100)) {\n hasSafePath = true;\n safePathPlatform = platform;\n break;\n }\n }\n\n // If very near edge, always move away regardless of other factors\n if (isVeryNearEdge) {\n // Emergency edge avoidance - move away from edge\n const edgeDirection = platformEdgeDistance === 0 ? -direction : direction > 0 ? -1 : 1;\n newVelocity.x = edgeDirection * opponent.stats.speed * 30 * deltaTime;\n setOpponentFacing(edgeDirection > 0 ? 'right' : 'left');\n\n // Never jump when very near edge\n if (newVelocity.y < 0) newVelocity.y = 0;\n } else if (!hasSafePath) {\n // No safe path forward - prioritize safety over aggression\n if (Math.random() < 0.7 * aiSelfPreservation) {\n // Increased probability of safe behavior\n // Only jump if there's a platform we can reach AND we're not near an edge\n let canReachPlatform = false;\n for (const platform of platforms) {\n if (platform.active !== false && platform.y < opponentPosition.y && platform.y > opponentPosition.y - opponent.stats.jump * 1.5 && Math.abs(platform.x + platform.width / 2 - opponentPosition.x) < 100 && !isNearEdge) {\n canReachPlatform = true;\n break;\n }\n }\n if (canReachPlatform && hasSafePlatformBelow) {\n // Jump to try to reach another platform, but only if safe\n newVelocity.y = -opponent.stats.jump * 0.9;\n } else {\n // Move away from edge\n newVelocity.x = -direction * opponent.stats.speed * 25 * deltaTime;\n setOpponentFacing(direction < 0 ? 'right' : 'left');\n }\n } else {\n // Move away from edge toward safety\n newVelocity.x = -direction * opponent.stats.speed * 25 * deltaTime;\n setOpponentFacing(direction < 0 ? 'right' : 'left');\n }\n } else if (Math.abs(distanceToPlayer) > 100) {\n // Safe to move toward player but do so cautiously\n const safeSpeed = opponent.stats.speed * 10 * deltaTime; // Reduced speed near edges\n newVelocity.x = direction * safeSpeed;\n setOpponentFacing(direction > 0 ? 'right' : 'left');\n }\n }\n // Normal movement when safe\n else if (Math.abs(distanceToPlayer) > 80) {\n // Move towards player\n newVelocity.x = direction * opponent.stats.speed * 20 * deltaTime;\n setOpponentFacing(direction > 0 ? 'right' : 'left');\n } else {\n // In close range - circle around player based on strategy\n if (aiState.adaptiveStrategy === 'defensive') {\n // Circle around player\n const circleDirection = Math.random() > 0.5 ? 1 : -1;\n newVelocity.x = circleDirection * opponent.stats.speed * 15 * deltaTime;\n setOpponentFacing(circleDirection > 0 ? 'right' : 'left');\n }\n }\n\n // Jump to reach player if they're above, but only if it's very safe\n if (playerPosition.y < opponentPosition.y - 100 && onGround && Math.random() < aiJumpFrequency * 1.5) {\n // Only jump if not near an edge\n if (!isNearEdge) {\n // Check if there's a platform above we can land on\n let hasPlatformAbove = false;\n for (const platform of platforms) {\n if (platform.active !== false && platform.y < opponentPosition.y && platform.y > opponentPosition.y - opponent.stats.jump * 1.5 && opponentPosition.x + 20 > platform.x && opponentPosition.x + 20 < platform.x + platform.width) {\n hasPlatformAbove = true;\n break;\n }\n }\n\n // Only jump if there's a platform above AND we're in a safe position\n if (hasPlatformAbove && Math.random() < aiSelfPreservation && hasSafePlatformBelow) {\n newVelocity.y = -opponent.stats.jump * 0.9;\n }\n }\n }\n // Random jumps based on frequency and strategy, but only if not near an edge and has safe platform below\n else if (aiDecision < aiJumpFrequency && onGround && !isNearEdge && hasSafePlatformBelow) {\n // Check if we're in the middle of a platform for safer jumps\n let isInPlatformMiddle = false;\n if (currentPlatform) {\n const platformCenter = currentPlatform.x + currentPlatform.width / 2;\n const distanceFromCenter = Math.abs(opponentPosition.x - platformCenter);\n isInPlatformMiddle = distanceFromCenter < currentPlatform.width * 0.4; // Stricter middle check\n }\n\n // Only jump if we're safely in the middle of a platform\n if (isInPlatformMiddle && Math.random() < aiSelfPreservation) {\n if (onBouncyPlatform) {\n newVelocity.y = -opponent.stats.jump * 1.2;\n\n // Add bounce effect\n addEffect({\n type: 'bounce',\n x: opponentPosition.x + 20,\n y: opponentPosition.y + 60,\n duration: 0.3\n });\n } else {\n newVelocity.y = -opponent.stats.jump * 0.8;\n }\n }\n }\n }\n\n // Enhanced attack logic\n const inAttackRange = Math.abs(distanceToPlayer) < 80 && Math.abs(verticalDistanceToPlayer) < 60;\n const now = Date.now();\n const timeSinceLastAttack = now - aiState.lastAttackTime;\n\n // Combo attack trigger - more likely at higher levels\n const comboThreshold = 0.02 + (currentLevel - 1) * 0.03;\n if (inAttackRange && aiDecision < comboThreshold && timeSinceLastAttack > 1000) {\n // Start combo sequence\n setAiState(prev => ({\n ...prev,\n comboInProgress: true,\n comboStep: 0,\n lastAttackTime: now\n }));\n }\n // Regular attack\n else if (inAttackRange && aiDecision < aiAggressiveness && timeSinceLastAttack > 500 / aiReactionTime) {\n // Attack if close\n setOpponentAttacking(true);\n\n // Update attack tracking\n setAiState(prev => ({\n ...prev,\n lastAttackTime: now,\n consecutiveAttacks: prev.consecutiveAttacks + 1\n }));\n\n // Hit player\n const baseDamage = opponent.stats.attack * 0.5 * (1 + (currentLevel - 1) * 0.2);\n const knockbackForce = 5 + playerDamage * 0.1;\n setPlayerDamage(prev => prev + baseDamage);\n // Reduce player health based on damage\n setPlayerHealth(prev => Math.max(0, prev - baseDamage));\n setPlayerVelocity({\n x: direction * knockbackForce,\n y: -knockbackForce * 0.5\n });\n\n // Add hit effect\n addEffect({\n type: 'hit',\n x: playerPosition.x,\n y: playerPosition.y,\n duration: 0.3\n });\n\n // Reset attack state after delay\n setTimeout(() => {\n setOpponentAttacking(false);\n }, 400 / aiReactionTime); // Faster recovery at higher levels\n }\n // Special attack with improved targeting\n else if (aiDecision < aiSpecialFrequency && opponentSpecialCooldown <= 0) {\n // Use special attack with better targeting\n executeSpecialAttack(direction);\n }\n\n // Enhanced dodging - more effective at higher levels\n const shouldDodge = playerAttacking || playerSpecialCooldown <= 0 && aiState.playerPatternRecognition.usesSpecialsOften > 0.5 || Math.abs(distanceToPlayer) < 100 && Math.abs(playerVelocity.x) > 5;\n if (shouldDodge && Math.random() < aiState.dodgeSuccessRate) {\n // Dodge by jumping, moving away, or both\n if (onGround && Math.random() < 0.7) {\n // Jump dodge\n newVelocity.y = -opponent.stats.jump * (0.7 + Math.random() * 0.3);\n\n // Also move away horizontally sometimes\n if (Math.random() < 0.5) {\n newVelocity.x = -direction * opponent.stats.speed * 30 * deltaTime;\n }\n } else {\n // Horizontal dodge\n newVelocity.x = -direction * opponent.stats.speed * 35 * deltaTime;\n }\n\n // Add dodge effect at higher levels\n if (currentLevel >= 2 && Math.random() < 0.3) {\n addEffect({\n type: 'notification',\n text: 'DODGE!',\n x: opponentPosition.x,\n y: opponentPosition.y - 30,\n duration: 0.5\n });\n }\n }\n }\n\n // Apply gravity\n if (!onGround) {\n newVelocity.y += 30 * deltaTime; // Gravity\n } else if (newVelocity.y > 0) {\n newVelocity.y = 0;\n }\n\n // Update position\n newPosition.x += newVelocity.x;\n newPosition.y += newVelocity.y;\n\n // Boundary checks with improved safety\n if (newPosition.x < 0) newPosition.x = 0;\n if (newPosition.x > 560) newPosition.x = 560;\n\n // Prevent falling off the stage\n if (newPosition.y > 900) {\n // Check if there's a platform to teleport to\n let rescuePlatform = null;\n\n // First try to find the ground platform\n rescuePlatform = platforms.find(p => p.id === 'ground');\n\n // If found, teleport to it\n if (rescuePlatform) {\n newPosition.y = rescuePlatform.y - 60;\n newPosition.x = rescuePlatform.x + rescuePlatform.width / 2;\n newVelocity.y = 0;\n newVelocity.x = 0;\n\n // Add teleport effect\n addEffect({\n type: 'notification',\n text: 'TELEPORTED!',\n x: newPosition.x,\n y: newPosition.y - 30,\n duration: 1\n });\n\n // Make sure to update position and velocity before returning\n setOpponentPosition(newPosition);\n setOpponentVelocity(newVelocity);\n } else {\n // Fallback to old behavior if no platform found\n if (playerHealth > 0) {\n setOpponentHealth(0);\n } else {\n newPosition.y = 800;\n newVelocity.y = 0;\n\n // Make sure to update position and velocity\n setOpponentPosition(newPosition);\n setOpponentVelocity(newVelocity);\n }\n }\n return;\n }\n\n // Platform collision\n for (const platform of platforms) {\n // Skip inactive platforms\n if (platform.active === false) continue;\n if (newPosition.x + 40 > platform.x && newPosition.x < platform.x + platform.width && newPosition.y + 60 > platform.y && newPosition.y + 60 < platform.y + platform.height + 10 && opponentPosition.y + 60 <= platform.y) {\n newPosition.y = platform.y - 60;\n newVelocity.y = 0;\n\n // If it's a moving platform, add its velocity to the opponent\n if (platform.type === 'moving' && platform.direction === 'horizontal') {\n // Calculate platform's velocity\n const platformVelocityX = (platform.x - (platform.prevX || platform.x)) / deltaTime;\n newPosition.x += platformVelocityX * deltaTime * 0.8; // Apply 80% of platform movement\n }\n\n // If it's a bouncy platform and the AI decides to jump\n if (platform.type === 'bouncy' && Math.random() < 0.2) {\n newVelocity.y = -opponent.stats.jump * 1.2;\n\n // Add bounce effect\n addEffect({\n type: 'bounce',\n x: opponentPosition.x + 20,\n y: opponentPosition.y + 60,\n duration: 0.3\n });\n }\n }\n }\n\n // Update cooldowns\n if (opponentSpecialCooldown > 0) {\n setOpponentSpecialCooldown(prev => Math.max(0, prev - deltaTime));\n }\n setOpponentPosition(newPosition);\n setOpponentVelocity(newVelocity);\n };\n\n // Helper function for executing special attacks with better targeting\n const executeSpecialAttack = direction => {\n setOpponentAttacking(true);\n setOpponentSpecialCooldown(3); // 3 second cooldown\n\n // Update attack tracking\n setAiState(prev => ({\n ...prev,\n lastAttackTime: Date.now(),\n comboInProgress: false,\n comboStep: 0\n }));\n\n // Better targeting - predict player movement\n const predictedPlayerX = playerPosition.x + playerVelocity.x * 0.5;\n const predictedPlayerY = playerPosition.y + playerVelocity.y * 0.5;\n\n // Different special attack types for opponent with improved targeting\n switch (opponent.specialType) {\n case 'lightning':\n // Pikachu's Thunder Shock - aim ahead of player movement\n addEffect({\n type: 'special',\n specialType: 'lightning',\n character: opponent,\n x: opponentPosition.x + direction * 40,\n y: opponentPosition.y + 30,\n direction: direction,\n duration: 1.5,\n damage: opponent.stats.special * 0.7 * (1 + (currentLevel - 1) * 0.2),\n velocity: {\n x: direction * 15,\n y: (predictedPlayerY - opponentPosition.y) * 0.05\n },\n canChain: true,\n chainCount: 0,\n maxChains: 2 + Math.floor((currentLevel - 1) * 0.5)\n });\n break;\n case 'flame':\n // Charizard's Flamethrower - wider spread at higher levels\n const flameCount = 2 + Math.floor((currentLevel - 1) * 0.5);\n const spreadFactor = Math.min(0.7, 0.3 + (currentLevel - 1) * 0.1);\n for (let i = -flameCount / 2; i <= flameCount / 2; i++) {\n if (i === 0 && flameCount % 2 === 0) continue; // Skip middle for even counts\n\n addEffect({\n type: 'special',\n specialType: 'flame',\n character: opponent,\n x: opponentPosition.x + direction * 40,\n y: opponentPosition.y + 30 + i * 10 * spreadFactor,\n direction: direction,\n duration: 0.6 + (currentLevel - 1) * 0.1,\n damage: opponent.stats.special * 0.2 * (1 + (currentLevel - 1) * 0.15),\n velocity: {\n x: direction * (5 + (currentLevel - 1)) + i * direction * 0.5,\n y: i * 0.2 + (predictedPlayerY - opponentPosition.y) * 0.02\n },\n size: 0.6 + Math.abs(i) * 0.3\n });\n }\n break;\n case 'water':\n // Blastoise's Hydro Pump - stronger knockback at higher levels\n addEffect({\n type: 'special',\n specialType: 'water',\n character: opponent,\n x: opponentPosition.x + direction * 40,\n y: opponentPosition.y + 30,\n direction: direction,\n duration: 1 + (currentLevel - 1) * 0.2,\n damage: opponent.stats.special * 0.5 * (1 + (currentLevel - 1) * 0.2),\n velocity: {\n x: direction * 12,\n y: (predictedPlayerY - opponentPosition.y) * 0.05\n },\n knockback: 15 + (currentLevel - 1) * 3\n });\n break;\n case 'stun':\n // Jigglypuff's Sing - larger radius at higher levels\n addEffect({\n type: 'special',\n specialType: 'stun',\n character: opponent,\n x: opponentPosition.x,\n y: opponentPosition.y,\n direction: direction,\n duration: 2 + (currentLevel - 1) * 0.3,\n damage: opponent.stats.special * 0.3 * (1 + (currentLevel - 1) * 0.2),\n radius: 120 + (currentLevel - 1) * 20,\n stunDuration: 1.5 + (currentLevel - 1) * 0.3\n });\n break;\n case 'psychic':\n // Mewtwo's Psystrike - faster and more damaging at higher levels\n addEffect({\n type: 'special',\n specialType: 'psychic',\n character: opponent,\n x: opponentPosition.x + direction * 40,\n y: opponentPosition.y + 30,\n direction: direction,\n duration: 1.5,\n damage: opponent.stats.special * 0.9 * (1 + (currentLevel - 1) * 0.25),\n velocity: {\n x: direction * (12 + (currentLevel - 1) * 2),\n y: (predictedPlayerY - opponentPosition.y) * 0.08\n },\n passThroughPlatforms: true\n });\n break;\n case 'aura':\n // Lucario's Aura Sphere - larger and more powerful at higher levels\n addEffect({\n type: 'special',\n specialType: 'aura',\n character: opponent,\n x: opponentPosition.x + direction * 40,\n y: opponentPosition.y + 30,\n direction: direction,\n duration: 1.2 + (currentLevel - 1) * 0.2,\n damage: opponent.stats.special * 1.1 * (1 + (currentLevel - 1) * 0.2),\n velocity: {\n x: direction * (8 + (currentLevel - 1)),\n y: (predictedPlayerY - opponentPosition.y) * 0.06\n },\n size: 1.5 + (currentLevel - 1) * 0.2\n });\n break;\n case 'wind':\n // Pidgeot's Hurricane - stronger pull and larger radius at higher levels\n addEffect({\n type: 'special',\n specialType: 'wind',\n character: opponent,\n x: predictedPlayerX,\n // Target where player will be\n y: predictedPlayerY,\n direction: direction,\n duration: 2 + (currentLevel - 1) * 0.3,\n damage: opponent.stats.special * 0.6 * (1 + (currentLevel - 1) * 0.2),\n radius: 100 + (currentLevel - 1) * 15,\n pullForce: 5 + (currentLevel - 1) * 1.5\n });\n break;\n case 'rock':\n // Golem's Rock Slide - more rocks and better targeting at higher levels\n const rockCount = 4 + Math.floor((currentLevel - 1) * 1.5);\n for (let i = 0; i < rockCount; i++) {\n setTimeout(() => {\n // Better targeting - aim where player is likely to be\n const targetX = predictedPlayerX + (Math.random() * 80 - 40) * (1 - currentLevel * 0.1);\n addEffect({\n type: 'special',\n specialType: 'rock',\n character: opponent,\n x: targetX,\n y: predictedPlayerY - 150 - i * 20,\n direction: 0,\n duration: 1 + (currentLevel - 1) * 0.1,\n damage: opponent.stats.special * 0.7 * (1 + (currentLevel - 1) * 0.15),\n velocity: {\n x: 0,\n y: 12 + (currentLevel - 1) * 2\n }\n });\n }, i * (200 - (currentLevel - 1) * 20));\n }\n break;\n default:\n // Fallback with improved targeting\n addEffect({\n type: 'special',\n specialType: 'default',\n character: opponent,\n x: opponentPosition.x + direction * 40,\n y: opponentPosition.y + 30,\n direction: direction,\n duration: 1 + (currentLevel - 1) * 0.2,\n damage: opponent.stats.special * 0.8 * (1 + (currentLevel - 1) * 0.2),\n velocity: {\n x: direction * (10 + (currentLevel - 1)),\n y: (predictedPlayerY - opponentPosition.y) * 0.05\n }\n });\n }\n\n // Add \"special used\" notification effect\n addEffect({\n type: 'notification',\n text: `${opponent.specialName}!`,\n x: opponentPosition.x,\n y: opponentPosition.y - 30,\n duration: 1\n });\n\n // Reset attack state after delay\n setTimeout(() => {\n setOpponentAttacking(false);\n }, 600 / Math.max(0.3, 1 - (currentLevel - 1) * 0.3)); // Faster recovery at higher levels\n };\n const checkCollisions = () => {\n // Check special attack collisions\n effects.forEach(effect => {\n if (effect.type === 'special') {\n // Different collision logic based on special type\n switch (effect.specialType) {\n case 'stun':\n // Area effect (Jigglypuff's Sing)\n const distanceToPlayer = Math.sqrt(Math.pow(effect.x - playerPosition.x, 2) + Math.pow(effect.y - playerPosition.y, 2));\n const distanceToOpponent = Math.sqrt(Math.pow(effect.x - opponentPosition.x, 2) + Math.pow(effect.y - opponentPosition.y, 2));\n\n // Check if player is in range of opponent's stun\n if (effect.character.id === opponent?.id && distanceToPlayer < effect.radius) {\n // Stun player\n setPlayerVelocity({\n x: 0,\n y: 0\n });\n\n // Add stun effect\n if (!effects.some(e => e.type === 'stun' && e.target === 'player')) {\n addEffect({\n type: 'stun',\n target: 'player',\n x: playerPosition.x,\n y: playerPosition.y - 30,\n duration: effect.stunDuration\n });\n }\n\n // Apply damage over time\n setPlayerDamage(prev => prev + effect.damage * 0.1);\n setPlayerHealth(prev => Math.max(0, prev - effect.damage * 0.1));\n }\n\n // Check if opponent is in range of player's stun\n if (effect.character.id === selectedCharacter?.id && distanceToOpponent < effect.radius) {\n // Stun opponent\n setOpponentVelocity({\n x: 0,\n y: 0\n });\n\n // Add stun effect\n if (!effects.some(e => e.type === 'stun' && e.target === 'opponent')) {\n addEffect({\n type: 'stun',\n target: 'opponent',\n x: opponentPosition.x,\n y: opponentPosition.y - 30,\n duration: effect.stunDuration\n });\n }\n\n // Apply damage over time\n setOpponentDamage(prev => prev + effect.damage * 0.1);\n setOpponentHealth(prev => Math.max(0, prev - effect.damage * 0.1));\n }\n break;\n case 'wind':\n // Pull effect (Pidgeot's Hurricane)\n const playerDistToWind = Math.sqrt(Math.pow(effect.x - playerPosition.x, 2) + Math.pow(effect.y - playerPosition.y, 2));\n const opponentDistToWind = Math.sqrt(Math.pow(effect.x - opponentPosition.x, 2) + Math.pow(effect.y - opponentPosition.y, 2));\n\n // Pull player towards hurricane\n if (effect.character.id === opponent?.id && playerDistToWind < effect.radius) {\n const pullDirection = {\n x: effect.x - playerPosition.x,\n y: effect.y - playerPosition.y\n };\n const magnitude = Math.sqrt(pullDirection.x * pullDirection.x + pullDirection.y * pullDirection.y);\n if (magnitude > 0) {\n const normalized = {\n x: pullDirection.x / magnitude,\n y: pullDirection.y / magnitude\n };\n setPlayerVelocity(prev => ({\n x: prev.x + normalized.x * effect.pullForce,\n y: prev.y + normalized.y * effect.pullForce\n }));\n\n // Apply damage\n setPlayerDamage(prev => prev + effect.damage * 0.05);\n setPlayerHealth(prev => Math.max(0, prev - effect.damage * 0.05));\n }\n }\n\n // Pull opponent towards hurricane\n if (effect.character.id === selectedCharacter?.id && opponentDistToWind < effect.radius) {\n const pullDirection = {\n x: effect.x - opponentPosition.x,\n y: effect.y - opponentPosition.y\n };\n const magnitude = Math.sqrt(pullDirection.x * pullDirection.x + pullDirection.y * pullDirection.y);\n if (magnitude > 0) {\n const normalized = {\n x: pullDirection.x / magnitude,\n y: pullDirection.y / magnitude\n };\n setOpponentVelocity(prev => ({\n x: prev.x + normalized.x * effect.pullForce,\n y: prev.y + normalized.y * effect.pullForce\n }));\n\n // Apply damage\n setOpponentDamage(prev => prev + effect.damage * 0.05);\n setOpponentHealth(prev => Math.max(0, prev - effect.damage * 0.05));\n }\n }\n break;\n default:\n // Standard projectile collision\n const effectHitbox = {\n x: effect.x - 20 * (effect.size || 1),\n y: effect.y - 20 * (effect.size || 1),\n width: 40 * (effect.size || 1),\n height: 40 * (effect.size || 1)\n };\n\n // Check if player is hit by opponent's special\n if (effect.character.id === opponent?.id && playerPosition.x < effectHitbox.x + effectHitbox.width && playerPosition.x + 40 > effectHitbox.x && playerPosition.y < effectHitbox.y + effectHitbox.height && playerPosition.y + 60 > effectHitbox.y) {\n // Hit player with special\n setPlayerDamage(prev => prev + effect.damage);\n // Reduce player health based on special damage\n setPlayerHealth(prev => Math.max(0, prev - effect.damage));\n\n // Apply knockback based on special type\n const knockbackForce = effect.knockback || 10 + playerDamage * 0.1;\n setPlayerVelocity({\n x: effect.direction * knockbackForce,\n y: -5\n });\n\n // Add hit effect\n addEffect({\n type: 'hit',\n x: playerPosition.x,\n y: playerPosition.y,\n duration: 0.3\n });\n\n // For lightning, it can chain to another target\n if (effect.specialType === 'lightning' && effect.canChain && effect.chainCount < effect.maxChains) {\n addEffect({\n ...effect,\n x: playerPosition.x,\n y: playerPosition.y,\n chainCount: effect.chainCount + 1,\n damage: effect.damage * 0.7,\n // Reduced damage for chain hits\n duration: 0.8\n });\n }\n\n // Remove the special effect unless it's a type that persists\n if (effect.specialType !== 'flame' && effect.specialType !== 'stun' && effect.specialType !== 'wind') {\n setEffects(prev => prev.filter(e => e !== effect));\n }\n }\n\n // Check if opponent is hit by player's special\n if (effect.character.id === selectedCharacter?.id && opponentPosition.x < effectHitbox.x + effectHitbox.width && opponentPosition.x + 40 > effectHitbox.x && opponentPosition.y < effectHitbox.y + effectHitbox.height && opponentPosition.y + 60 > effectHitbox.y) {\n // Hit opponent with special\n setOpponentDamage(prev => prev + effect.damage);\n // Reduce opponent health based on special damage\n setOpponentHealth(prev => Math.max(0, prev - effect.damage));\n\n // Apply knockback based on special type\n const knockbackForce = effect.knockback || 10 + opponentDamage * 0.1;\n setOpponentVelocity({\n x: effect.direction * knockbackForce,\n y: -5\n });\n\n // Add hit effect\n addEffect({\n type: 'hit',\n x: opponentPosition.x,\n y: opponentPosition.y,\n duration: 0.3\n });\n\n // For lightning, it can chain to another target\n if (effect.specialType === 'lightning' && effect.canChain && effect.chainCount < effect.maxChains) {\n addEffect({\n ...effect,\n x: opponentPosition.x,\n y: opponentPosition.y,\n chainCount: effect.chainCount + 1,\n damage: effect.damage * 0.7,\n // Reduced damage for chain hits\n duration: 0.8\n });\n }\n\n // Remove the special effect unless it's a type that persists\n if (effect.specialType !== 'flame' && effect.specialType !== 'stun' && effect.specialType !== 'wind') {\n setEffects(prev => prev.filter(e => e !== effect));\n }\n }\n }\n }\n });\n };\n const checkWinConditions = () => {\n if (playerHealth <= 0) {\n setWinner(opponent);\n setGameState('results');\n } else if (opponentHealth <= 0) {\n setWinner(selectedCharacter);\n // Create victory confetti\n createVictoryConfetti();\n // Update leaderboard when player wins\n updateLeaderboard();\n setGameState('results');\n }\n };\n\n // Create confetti for victory celebration\n const createVictoryConfetti = () => {\n const newConfetti = [];\n const colors = ['bg-red-500', 'bg-blue-500', 'bg-green-500', 'bg-yellow-500', 'bg-purple-500', 'bg-pink-500', 'bg-indigo-500', 'bg-orange-500'];\n\n // Create 100 confetti pieces\n for (let i = 0; i < 100; i++) {\n newConfetti.push({\n id: i,\n x: Math.random() * window.innerWidth,\n y: -20 - Math.random() * 100,\n size: 5 + Math.random() * 10,\n color: colors[Math.floor(Math.random() * colors.length)],\n velocity: {\n x: (Math.random() - 0.5) * 5,\n y: 2 + Math.random() * 5\n },\n rotation: Math.random() * 360,\n rotationSpeed: (Math.random() - 0.5) * 10,\n lifetime: 3 + Math.random() * 2\n });\n }\n setConfetti(newConfetti);\n };\n\n // Update confetti animation\n const updateConfetti = deltaTime => {\n setConfetti(prev => prev.map(piece => ({\n ...piece,\n x: piece.x + piece.velocity.x * deltaTime * 60,\n y: piece.y + piece.velocity.y * deltaTime * 60,\n rotation: piece.rotation + piece.rotationSpeed * deltaTime * 60,\n lifetime: piece.lifetime - deltaTime\n })).filter(piece => piece.lifetime > 0 && piece.y < window.innerHeight + 50));\n };\n const addEffect = effect => {\n const id = Date.now() + Math.random();\n setEffects(prev => [...prev, {\n ...effect,\n id\n }]);\n };\n const updateEffects = deltaTime => {\n setEffects(prev => prev.map(effect => {\n if (effect.type === 'special') {\n // Update based on special type\n switch (effect.specialType) {\n case 'stun':\n // Jigglypuff's Sing - stationary area effect\n return {\n ...effect,\n duration: effect.duration - deltaTime\n };\n case 'wind':\n // Pidgeot's Hurricane - stationary area effect\n return {\n ...effect,\n duration: effect.duration - deltaTime\n };\n case 'rock':\n // Golem's Rock Slide - falling rocks\n return {\n ...effect,\n x: effect.x + effect.velocity.x,\n y: effect.y + effect.velocity.y,\n duration: effect.duration - deltaTime\n };\n case 'flame':\n // Charizard's Flamethrower - add some randomness to flame movement\n return {\n ...effect,\n x: effect.x + effect.velocity.x + (Math.random() - 0.5) * 2,\n y: effect.y + effect.velocity.y + (Math.random() - 0.5) * 2,\n duration: effect.duration - deltaTime\n };\n default:\n // Standard projectile movement\n return {\n ...effect,\n x: effect.x + effect.velocity.x,\n y: effect.y + effect.velocity.y,\n duration: effect.duration - deltaTime\n };\n }\n }\n if (effect.type === 'stun') {\n // Update stun effect\n return {\n ...effect,\n duration: effect.duration - deltaTime\n };\n }\n if (effect.type === 'notification') {\n return {\n ...effect,\n y: effect.y - deltaTime * 30,\n // Move notification upward\n duration: effect.duration - deltaTime\n };\n }\n return {\n ...effect,\n duration: effect.duration - deltaTime\n };\n }).filter(effect => effect.duration > 0));\n\n // Add special ready notification when cooldown ends\n if (playerSpecialCooldown > 0 && playerSpecialCooldown - deltaTime <= 0) {\n addEffect({\n type: 'notification',\n text: 'SPECIAL READY!',\n x: playerPosition.x,\n y: playerPosition.y - 30,\n duration: 1.5,\n isReady: true\n });\n }\n };\n const goToNextLevel = () => {\n // Increment level\n const nextLevel = currentLevel + 1;\n\n // Cap at level 3 (or the max level you have)\n const maxLevel = levelPlatforms.length;\n const newLevel = Math.min(nextLevel, maxLevel);\n setCurrentLevel(newLevel);\n\n // Get the new level platforms\n const newLevelPlatforms = levelPlatforms[newLevel - 1];\n setPlatforms(newLevelPlatforms);\n\n // Always use the ground platform which is now consistent across all levels\n const groundPlatform = newLevelPlatforms.find(p => p.id === 'ground');\n\n // Calculate positions at the center of the ground platform\n const platformCenterX = groundPlatform.x + groundPlatform.width / 2;\n const characterY = groundPlatform.y - 60; // Position just above the platform\n\n // Reset game state\n setPlayerHealth(100);\n setOpponentHealth(100);\n setPlayerDamage(0);\n setOpponentDamage(0);\n\n // Position player exactly at the center of the ground platform\n setPlayerPosition({\n x: platformCenterX - 40,\n // Centered (adjusted for character width)\n y: characterY\n });\n\n // Position opponent slightly to the right of center\n setOpponentPosition({\n x: platformCenterX + 40,\n // Slightly to the right of center\n y: characterY\n });\n\n // Ensure zero initial velocity for both characters\n setPlayerVelocity({\n x: 0,\n y: 0\n });\n setOpponentVelocity({\n x: 0,\n y: 0\n });\n setPlayerFacing('right');\n setOpponentFacing('left');\n setPlayerAttacking(false);\n setOpponentAttacking(false);\n setPlayerSpecialCooldown(0);\n setOpponentSpecialCooldown(0);\n setWinner(null);\n setEffects([]);\n setConfetti([]);\n\n // Reset opponent settling time\n setOpponentSettlingTime(2);\n\n // Start countdown\n setCountdown(3);\n setShowCountdown(true);\n\n // Start the battle\n setGameState('battle');\n };\n const restartGame = () => {\n setGameState('selection');\n setSelectedCharacter(null);\n setOpponent(null);\n setCurrentLevel(1);\n setPlatforms(levelPlatforms[0]);\n };\n\n // Load leaderboard from localStorage\n useEffect(() => {\n const storedLeaderboard = localStorage.getItem('pokesmashLeaderboard');\n if (storedLeaderboard) {\n setLeaderboard(JSON.parse(storedLeaderboard));\n }\n }, []);\n\n // Update leaderboard when player wins\n const updateLeaderboard = () => {\n if (!trainerName) return;\n const updatedLeaderboard = [...leaderboard];\n const existingEntry = updatedLeaderboard.find(entry => entry.name === trainerName);\n if (existingEntry) {\n existingEntry.wins += 1;\n existingEntry.level = Math.max(existingEntry.level, currentLevel);\n } else {\n updatedLeaderboard.push({\n name: trainerName,\n wins: 1,\n level: currentLevel,\n character: selectedCharacter.name\n });\n }\n\n // Sort by wins (descending)\n updatedLeaderboard.sort((a, b) => b.wins - a.wins);\n\n // Save to localStorage\n localStorage.setItem('pokesmashLeaderboard', JSON.stringify(updatedLeaderboard));\n setLeaderboard(updatedLeaderboard);\n };\n\n // Render functions\n const renderCharacterSelection = () =>

\n PokéSmash\n

Choose your fighter,

{trainerName}!

\n \n

\n {characters.map(character => )}\n

\n \n

Game Controls:

\n ←→\n

Move

Move your character left and right

\n ↑\n

Jump

Jump onto platforms

\n Space\n

Basic Attack

Perform a close-range attack

\n Z\n

Special Attack

Use your Pokémon's unique special move

\n \n

Special Attacks

\n {characters.map(character =>

\n {character.icon}\n

{character.name}: {character.specialName}

{character.specialDescription}

)}\n

\n \n

Tip: During battle, press the \"?\" button to see controls again!

;\n const [showControls, setShowControls] = useState(true);\n\n // Auto-hide controls after 5 seconds\n useEffect(() => {\n if (gameState === 'battle' && showControls) {\n const timer = setTimeout(() => {\n setShowControls(false);\n }, 5000);\n return () => clearTimeout(timer);\n }\n }, [gameState, showControls]);\n // Touch control handlers\n const handleTouchStart = control => {\n setTouchControls(prev => ({\n ...prev,\n [control]: true\n }));\n };\n const handleTouchEnd = control => {\n setTouchControls(prev => ({\n ...prev,\n [control]: false\n }));\n };\n const renderMobileControls = () => {\n if (!isMobile || gameState !== 'battle' || showCountdown) return null;\n return <>\n {/* Direction controls - left bottom with better positioning for mobile */}\n

\n \n \n

\n \n \n \n

\n \n {/* Attack controls - right bottom with better positioning for mobile */}\n

\n \n \n \n

\n \n {/* Mobile zoom indicator */}\n

\n Swipe to move • Tap buttons to attack\n

\n ;\n };\n // Background images for different levels\n const levelBackgrounds = [\"https://images8.alphacoders.com/927/927403.png\",\n // Level 1 background\n \"https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/35022c4c-6186-41a3-8a0c-eee467625009/dcr0krb-be2b548c-5f98-4207-bd9d-996f564375f9.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzM1MDIyYzRjLTYxODYtNDFhMy04YTBjLWVlZTQ2NzYyNTAwOVwvZGNyMGtyYi1iZTJiNTQ4Yy01Zjk4LTQyMDctYmQ5ZC05OTZmNTY0Mzc1ZjkucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.wQF9DRQW5ji6EarGautyHXNjDyrG-hi0aG1rfbsIWFU\",\n // Level 2 background\n \"https://wallpapercave.com/wp/wp2763910.gif\" // Level 3 background (fallback)\n ];\n const renderBattle = () => {\n if (!selectedCharacter || !opponent) return null;\n\n // Calculate viewport scaling for better mobile fit\n const viewportScale = isMobile ? 0.8 : 1;\n\n // Get the current level background (zero-indexed array)\n const currentBackground = levelBackgrounds[currentLevel - 1] || levelBackgrounds[0];\n return

\n {/* Background image with reduced opacity for better platform visibility */}\n

{/* Darker overlay to improve contrast */}\n

\n {/* Countdown overlay - simplified without control instructions */}\n {showCountdown &&

\n {countdown}\n

\n Get Ready!\n

}\n \n {/* Fixed HUD that stays at the top of the screen */}\n

\n {selectedCharacter.id === 'pikachu' ? $\"Pikachu\"$ : selectedCharacter.id === 'charizard' ? $\"Charizard\"$ : selectedCharacter.id === 'blastoise' ? $\"Blastoise\"$ : selectedCharacter.id === 'jigglypuff' ? $\"Jigglypuff\"$ : selectedCharacter.id === 'mewtwo' ? $\"Mewtwo\"$ : selectedCharacter.id === 'lucario' ? $\"Lucario\"$ : selectedCharacter.id === 'pidgeot' ? $\"Pidgeot\"$ : selectedCharacter.id === 'golem' ? $\"Golem\"$ : selectedCharacter.icon}\n

{selectedCharacter.name}

{Math.floor(playerDamage)}% Damage

\n {/* Special cooldown */}\n

Special:

0 ? 'bg-red-500' : 'bg-blue-500'} transition-all duration-300`} style={{\n width: `${playerSpecialCooldown > 0 ? (1 - playerSpecialCooldown / 3) * 100 : 100}%`\n }}>

\n {playerSpecialCooldown <= 0 &&

\n READY!\n

}\n

\n \n {/* Level indicator in the middle */}\n

Level {currentLevel}

\n \n

{opponent.name}

{Math.floor(opponentDamage)}% Damage

\n {opponent.id === 'pikachu' ? $\"Pikachu\"$ : opponent.id === 'charizard' ? $\"Charizard\"$ : opponent.id === 'blastoise' ? $\"Blastoise\"$ : opponent.id === 'jigglypuff' ? $\"Jigglypuff\"$ : opponent.id === 'mewtwo' ? $\"Mewtwo\"$ : opponent.id === 'lucario' ? $\"Lucario\"$ : opponent.id === 'pidgeot' ? $\"Pidgeot\"$ : opponent.id === 'golem' ? $\"Golem\"$ : opponent.icon}\n

\n {/* Special cooldown */}\n

:Special

0 ? 'bg-red-500' : 'bg-blue-500'} transition-all duration-300`} style={{\n width: `${opponentSpecialCooldown > 0 ? (1 - opponentSpecialCooldown / 3) * 100 : 100}%`\n }}>

\n {opponentSpecialCooldown <= 0 &&

\n READY!\n

}\n

\n \n {/* Camera viewport with smoother transitions and mobile scaling */}\n

\n \n {/* Battle arena */}\n

\n {/* Platforms with enhanced visibility */}\n {platforms.map(platform => {\n // Skip rendering inactive crumbling platforms\n if (platform.type === 'crumbling' && !platform.active) {\n return null;\n }\n\n // Base platform classes with higher z-index\n let platformClasses = \"absolute rounded-md platform-mobile-visible z-40 \";\n\n // Different styling based on platform type with enhanced colors\n switch (platform.type) {\n case 'normal':\n platformClasses += \"bg-gradient-to-r from-green-700 to-green-500 border-3 border-green-300\";\n break;\n case 'moving':\n platformClasses += \"bg-gradient-to-r from-blue-700 to-blue-400 border-3 border-blue-200 animate-pulse\";\n break;\n case 'bouncy':\n platformClasses += \"bg-gradient-to-r from-yellow-600 to-yellow-300 border-3 border-yellow-100\";\n break;\n case 'crumbling':\n platformClasses += \"bg-gradient-to-r from-red-700 to-red-400 border-3 border-red-200\";\n if (platform.timer > 0) {\n platformClasses += \" opacity-\" + Math.floor((0.5 - platform.timer) * 20);\n }\n break;\n default:\n platformClasses += \"bg-gradient-to-r from-green-700 to-green-500 border-3 border-green-300\";\n }\n\n // Enhanced visibility with glow effect\n return

\n {/* Platform type indicators */}\n {platform.type === 'bouncy' &&

}\n {platform.type === 'moving' &&

}\n {platform.type === 'crumbling' &&

}\n

;\n })}\n \n {/* Player character */}\n

\n {/* Character face */}\n

\n {selectedCharacter.icon}\n

}\n

\n {/* Attack indicator */}\n {playerAttacking &&

}\n

\n \n {/* Opponent character */}\n

\n {/* Character face */}\n

\n {opponent.icon}\n

}\n

\n {/* Attack indicator */}\n {opponentAttacking &&

}\n

\n \n {/* Effects */}\n {effects.map(effect => {\n if (effect.type === 'hit') {\n return

POW!

;\n } else if (effect.type === 'special') {\n // Render different special effects based on type\n switch (effect.specialType) {\n case 'lightning':\n // Pikachu's Thunder Shock\n return

\n {effect.character.icon}\n

\n {[...Array(5)].map((_, i) =>

)}\n

;\n case 'flame':\n // Charizard's Flamethrower\n return

\n \n

;\n case 'water':\n // Blastoise's Hydro Pump\n return

\n \n

\n {[...Array(10)].map((_, i) =>

)}\n

;\n case 'stun':\n // Jigglypuff's Sing\n return

♪

\n {[...Array(5)].map((_, i) =>

\n ♫\n

)}\n

;\n case 'psychic':\n // Mewtwo's Psystrike\n return

\n \n

\n {[...Array(3)].map((_, i) =>

)}\n

;\n case 'aura':\n // Lucario's Aura Sphere\n return

\n \n

;\n case 'wind':\n // Pidgeot's Hurricane\n return

\n \n

\n {[...Array(12)].map((_, i) =>

)}\n

;\n case 'rock':\n // Golem's Rock Slide\n return

\n \n

;\n default:\n // Default special effect\n return

\n {effect.character.icon}\n

;\n }\n } else if (effect.type === 'bounce') {\n return

\n BOING!\n

;\n } else if (effect.type === 'crumble') {\n return

\n {[...Array(6)].map((_, i) =>

)}\n

;\n } else if (effect.type === 'notification') {\n return

\n {effect.text}\n

;\n } else if (effect.type === 'stun') {\n // Render stun effect (stars spinning around head)\n return

\n {[...Array(3)].map((_, i) =>

\n ★\n

)}\n

;\n }\n return null;\n })}\n

\n \n {/* Platform Legend - conditionally show on mobile */}\n {!isMobile &&

Platform Types:

\n Normal\n

\n Moving\n

\n Bouncy\n

\n Crumbling\n

}\n \n {/* Controls Overlay - only show when not in countdown */}\n {showControls && !showCountdown &&

Controls

\n ←→\n Move left/right\n

\n ↑\n Jump\n

\n Space\n Basic Attack\n

\n Z\n Special Attack: {selectedCharacter.specialName}\n

\n \n

Special Attack Status:

\n Cooling down - wait for blue bar\n

\n Ready to use - \"READY!\" will flash\n

\n \n

Your Special Attack:

\n {selectedCharacter.icon}\n

{selectedCharacter.specialName}

{selectedCharacter.specialDescription}

}\n

\n \n {/* Mobile touch controls */}\n {renderMobileControls()}\n

;\n };\n const renderResults = () => {\n const isPlayerWinner = winner?.id === selectedCharacter?.id;\n return

\n {/* Semi-transparent overlay to ensure text readability */}\n

\n \n {/* Confetti animation */}\n {confetti.map(piece =>

)}\n \n

\n {isPlayerWinner ? 'You Win!' : 'Game Over!'}\n

\n \n {winner &&

\n {winner.id === 'pikachu' ? $\"Pikachu\"$ : winner.id === 'charizard' ? $\"Charizard\"$ : winner.id === 'blastoise' ? $\"Blastoise\"$ : winner.id === 'jigglypuff' ? $\"Jigglypuff\"$ : winner.id === 'mewtwo' ? $\"Mewtwo\"$ : winner.id === 'lucario' ? $\"Lucario\"$ : winner.id === 'pidgeot' ? $\"Pidgeot\"$ : winner.id === 'golem' ? $\"Golem\"$ : winner.icon}\n

{winner.name} wins!

\n {isPlayerWinner ? `Congratulations, ${trainerName}! You are the champion!` : 'Better luck next time!'}\n

\n \n {isPlayerWinner && currentLevel < levelPlatforms.length &&

Level {currentLevel} Completed!

Ready for a tougher challenge?

}\n \n {isPlayerWinner && currentLevel >= levelPlatforms.length &&

All Levels Completed!

You've mastered PokéSmash!

}\n

}\n \n

\n {isPlayerWinner && currentLevel < levelPlatforms.length && }\n \n \n

\n \n {isPlayerWinner &&

\n {currentLevel < levelPlatforms.length ? `Level ${currentLevel + 1} awaits with tougher enemies and crazier platforms!` : 'You\\'ve beaten all levels! Start a new game to play again!'}\n

}\n \n {/* Leaderboard */}\n

\n \n \n {showLeaderboard &&

Top Trainers

\n \n

\n \n \n \n \n \n \n \n \n \n \n {leaderboard.map((entry, index) => \n \n \n \n \n )}\n \n

Rank	Trainer	Wins	Level
{index + 1}	{entry.name}	{entry.wins}	{entry.level}

}\n

\n \n {/* Victory effects for player win */}\n {isPlayerWinner && <>\n

🏆

\n }\n

;\n };\n\n // Add custom animation class\n const customStyles = `\n @keyframes bounce-slow {\n 0%, 100% {\n transform: translateY(-5%);\n animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\n }\n 50% {\n transform: translateY(0);\n animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n }\n }\n .animate-bounce-slow {\n animation: bounce-slow 2s infinite;\n }\n \n /* Enhanced platform visibility against background images */\n .platform-mobile-visible {\n position: relative;\n z-index: 40;\n box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5), 0 0 10px rgba(0, 0, 0, 0.7);\n }\n \n /* Custom border width for platforms */\n .border-3 {\n border-width: 3px;\n }\n \n /* Platform glow animations */\n @keyframes platform-glow {\n 0%, 100% {\n box-shadow: 0 0 8px rgba(255, 255, 255, 0.6), 0 0 15px rgba(0, 0, 0, 0.8);\n }\n 50% {\n box-shadow: 0 0 12px rgba(255, 255, 255, 0.8), 0 0 20px rgba(0, 0, 0, 0.9);\n }\n }\n .platform-glow {\n animation: platform-glow 2s ease-in-out infinite;\n }\n \n @keyframes pulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.5;\n }\n }\n .animate-pulse {\n animation: pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n }\n \n @keyframes special-ready {\n 0%, 100% {\n text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);\n color: white;\n }\n 50% {\n text-shadow: 0 0 15px rgba(59, 130, 246, 0.9);\n color: #93c5fd;\n }\n }\n .special-ready {\n animation: special-ready 1.5s ease-in-out infinite;\n }\n \n @keyframes spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n .animate-spin {\n animation: spin 2s linear infinite;\n }\n \n @keyframes fall-0 { to { transform: translate(10px, 20px); opacity: 0; } }\n @keyframes fall-1 { to { transform: translate(-15px, 25px); opacity: 0; } }\n @keyframes fall-2 { to { transform: translate(5px, 30px); opacity: 0; } }\n @keyframes fall-3 { to { transform: translate(-8px, 15px); opacity: 0; } }\n @keyframes fall-4 { to { transform: translate(12px, 18px); opacity: 0; } }\n @keyframes fall-5 { to { transform: translate(-10px, 22px); opacity: 0; } }\n `;\n\n // Render trainer name entry screen\n const renderNameEntry = () => {\n return

\n PokéSmash\n

Enter your trainer name

\n \n \n \n {leaderboard.length > 0 &&

\n \n \n {showLeaderboard &&

Top Trainers

\n \n \n \n \n \n \n \n \n \n \n {leaderboard.slice(0, 5).map((entry, index) => \n \n \n \n \n )}\n \n

Rank	Trainer	Wins	Level
{index + 1}	{entry.name}	{entry.wins}	{entry.level}

}\n

;\n };\n\n // Main render\n return

\n {/* Add viewport meta tag for proper mobile scaling */}\n \n

\n {gameState === 'nameEntry' && renderNameEntry()}\n {gameState === 'selection' && renderCharacterSelection()}\n {gameState === 'battle' && renderBattle()}\n {gameState === 'results' && renderResults()}\n

;\n}","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"ai\":\"4.0.0\",\"zod\":\"3.22.4\",\"recharts\":\"2.8.0\",\"lucide-react\":\"0.441.0\"}}","appFunctions",[],"token",{"_18":80,"_81":82,"_83":84,"_85":86,"_87":88,"_89":23,"_90":23,"_91":92,"_93":94,"_70":71},"Fengtasy","symbol","1","price",0.00000455,"marketcap",6866.67534498,"image","https://pump.mypinata.cloud/ipfs/QmNMDT2PjxfrDEaekhDuAtTbZV7uiCteMVGv4n7TfmRvkc?img-width=256&img-dpr=2","website","twitter","devCount",3,"appCount",5,"upstreamApp",{"_14":97,"_33":98,"_35":99,"_100":101,"_18":102,"_20":103,"_22":-5,"_70":71,"_104":105,"_106":107,"_31":108,"_39":40,"_41":109,"_110":111,"_112":17,"_26":25,"_68":17,"_69":17,"_113":17,"_114":17,"_115":17,"_55":116,"_57":40,"_59":58,"_60":117,"_65":58,"_63":58,"_62":58,"_118":44,"_119":120,"_37":121,"_122":123,"_144":17,"_24":25,"_64":58,"_27":145},"8eef1ddf3014b5cf1f35",["D",1740640691103],["D",1756309862422],"template","web","pokésmash+","The ultimate Pokémon brawler where your opponents actually stick around to fight! We've fixed that pesky bug where challengers would rather dive off the platform than face your wrath - now they're locked and loaded in the center, ready for the beatdown they deserve.","snapshot","https://cdn.dev.fun/snapshot/8eef1ddf3014b5cf1f35/22054_1d02c543.webp","ogImage","https://cdn.dev.fun/og/image/8eef1ddf3014b5cf1f35/906a7fe2.webp","https://cdn.dev.fun/app/8eef1ddf3014b5cf1f35/22054",123,"featureScore","0","isAutomated","isTagHot","isTagMoney","isTagCrown",4,54,"userId","upstreamAppId","9ebdae2307602732fe55",["B","22054"],"lastCommit",{"_14":121,"_33":124,"_125":126,"_127":128,"_72":128,"_74":129,"_130":131,"_132":133,"_134":-5,"_104":105,"_31":108,"_135":17,"_136":17,"_137":25,"_100":101,"_138":-5,"_139":-5,"_140":-5,"_6":97,"_118":44,"_141":142,"_76":143},["D",1740640742768],"input","currently, when initializing the level, the opponent just jump off the platform right away, can you make sure the opponent always initilize in the center of the ground platform and does not jump off automatically? ","output","import { useState, useEffect, useRef } from 'react';\nimport { Shield, Zap, Flame, Droplet, Wind, Mountain, Moon, Sparkles } from 'lucide-react';\nexport default function App() {\n const [gameState, setGameState] = useState('selection'); // selection, battle, results\n const [selectedCharacter, setSelectedCharacter] = useState(null);\n const [opponent, setOpponent] = useState(null);\n const [playerPosition, setPlayerPosition] = useState({\n x: 150,\n y: 300\n });\n const [opponentPosition, setOpponentPosition] = useState({\n x: 650,\n y: 300\n });\n const [countdown, setCountdown] = useState(3);\n const [showCountdown, setShowCountdown] = useState(false);\n const [cameraOffset, setCameraOffset] = useState({\n x: 0,\n y: 0\n });\n const [playerVelocity, setPlayerVelocity] = useState({\n x: 0,\n y: 0\n });\n const [opponentVelocity, setOpponentVelocity] = useState({\n x: 0,\n y: 0\n });\n const [playerHealth, setPlayerHealth] = useState(100);\n const [opponentHealth, setOpponentHealth] = useState(100);\n const [playerDamage, setPlayerDamage] = useState(0);\n const [opponentDamage, setOpponentDamage] = useState(0);\n const [playerFacing, setPlayerFacing] = useState('right');\n const [opponentFacing, setOpponentFacing] = useState('left');\n const [playerAttacking, setPlayerAttacking] = useState(false);\n const [opponentAttacking, setOpponentAttacking] = useState(false);\n const [playerSpecialCooldown, setPlayerSpecialCooldown] = useState(0);\n const [opponentSpecialCooldown, setOpponentSpecialCooldown] = useState(0);\n const [winner, setWinner] = useState(null);\n const [effects, setEffects] = useState([]);\n const [currentLevel, setCurrentLevel] = useState(1);\n const [confetti, setConfetti] = useState([]);\n const [opponentSettlingTime, setOpponentSettlingTime] = useState(2); // Time for opponent to stay in place after level start\n const [keys, setKeys] = useState({\n ArrowUp: false,\n ArrowDown: false,\n ArrowLeft: false,\n ArrowRight: false,\n ' ': false,\n 'z': false\n });\n const gameLoopRef = useRef(null);\n const lastUpdateTimeRef = useRef(Date.now());\n const characters = [{\n id: 'pikachu',\n name: 'Pikachu',\n type: 'electric',\n color: 'bg-yellow-400',\n specialName: 'Thunder Shock',\n specialColor: 'bg-yellow-300',\n specialType: 'lightning',\n specialDescription: 'Shoots lightning bolts that chain to nearby opponents',\n icon: ,\n stats: {\n speed: 8,\n jump: 15,\n attack: 8,\n special: 12\n }\n }, {\n id: 'charizard',\n name: 'Charizard',\n type: 'fire',\n color: 'bg-orange-500',\n specialName: 'Flamethrower',\n specialColor: 'bg-red-500',\n specialType: 'flame',\n specialDescription: 'Breathes a cone of fire that burns opponents',\n icon: ,\n stats: {\n speed: 6,\n jump: 12,\n attack: 10,\n special: 14\n }\n }, {\n id: 'blastoise',\n name: 'Blastoise',\n type: 'water',\n color: 'bg-blue-500',\n specialName: 'Hydro Pump',\n specialColor: 'bg-blue-400',\n specialType: 'water',\n specialDescription: 'Shoots powerful water jets that push opponents back',\n icon: ,\n stats: {\n speed: 5,\n jump: 10,\n attack: 9,\n special: 13\n }\n }, {\n id: 'jigglypuff',\n name: 'Jigglypuff',\n type: 'fairy',\n color: 'bg-pink-300',\n specialName: 'Sing',\n specialColor: 'bg-pink-200',\n specialType: 'stun',\n specialDescription: 'Creates a lullaby that temporarily stuns opponents',\n icon: ,\n stats: {\n speed: 4,\n jump: 18,\n attack: 6,\n special: 15\n }\n }, {\n id: 'mewtwo',\n name: 'Mewtwo',\n type: 'psychic',\n color: 'bg-purple-500',\n specialName: 'Psystrike',\n specialColor: 'bg-purple-300',\n specialType: 'psychic',\n specialDescription: 'Launches psychic waves that pass through platforms',\n icon: ,\n stats: {\n speed: 7,\n jump: 14,\n attack: 12,\n special: 16\n }\n }, {\n id: 'lucario',\n name: 'Lucario',\n type: 'fighting',\n color: 'bg-blue-600',\n specialName: 'Aura Sphere',\n specialColor: 'bg-blue-300',\n specialType: 'aura',\n specialDescription: 'Charges an energy ball that grows more powerful over time',\n icon: ,\n stats: {\n speed: 9,\n jump: 13,\n attack: 11,\n special: 10\n }\n }, {\n id: 'pidgeot',\n name: 'Pidgeot',\n type: 'flying',\n color: 'bg-amber-300',\n specialName: 'Hurricane',\n specialColor: 'bg-sky-200',\n specialType: 'wind',\n specialDescription: 'Creates a whirlwind that pulls opponents in and damages them',\n icon: ,\n stats: {\n speed: 10,\n jump: 16,\n attack: 7,\n special: 11\n }\n }, {\n id: 'golem',\n name: 'Golem',\n type: 'rock',\n color: 'bg-stone-500',\n specialName: 'Rock Slide',\n specialColor: 'bg-stone-400',\n specialType: 'rock',\n specialDescription: 'Drops rocks from above that damage opponents below',\n icon: ,\n stats: {\n speed: 3,\n jump: 8,\n attack: 14,\n special: 9\n }\n }];\n\n // Platform layouts for different levels\n const levelPlatforms = [\n // Level 1 - Basic layout\n [\n // Main ground platform - consistent size across all levels\n {\n id: 'ground',\n x: 100,\n y: 400,\n width: 600,\n height: 20,\n type: 'normal'\n },\n // Mid-level platforms\n {\n id: 'mid1',\n x: 200,\n y: 300,\n width: 200,\n height: 15,\n type: 'normal'\n }, {\n id: 'mid2',\n x: 500,\n y: 250,\n width: 150,\n height: 15,\n type: 'normal'\n },\n // Upper platforms\n {\n id: 'upper1',\n x: 50,\n y: 200,\n width: 120,\n height: 15,\n type: 'normal'\n }, {\n id: 'upper2',\n x: 300,\n y: 180,\n width: 100,\n height: 15,\n type: 'normal'\n }, {\n id: 'upper3',\n x: 600,\n y: 150,\n width: 150,\n height: 15,\n type: 'normal'\n },\n // Top platforms\n {\n id: 'top1',\n x: 400,\n y: 120,\n width: 100,\n height: 15,\n type: 'normal'\n }, {\n id: 'top2',\n x: 200,\n y: 100,\n width: 120,\n height: 15,\n type: 'normal'\n },\n // Moving platforms\n {\n id: 'moving1',\n x: 300,\n y: 350,\n width: 80,\n height: 15,\n type: 'moving',\n direction: 'horizontal',\n speed: 50,\n min: 250,\n max: 450,\n originalX: 300,\n originalY: 350\n }, {\n id: 'moving2',\n x: 650,\n y: 200,\n width: 80,\n height: 15,\n type: 'moving',\n direction: 'vertical',\n speed: 40,\n min: 150,\n max: 300,\n originalX: 650,\n originalY: 200\n },\n // Bouncy platforms\n {\n id: 'bouncy1',\n x: 100,\n y: 250,\n width: 60,\n height: 15,\n type: 'bouncy'\n }, {\n id: 'bouncy2',\n x: 550,\n y: 320,\n width: 60,\n height: 15,\n type: 'bouncy'\n },\n // Crumbling platforms\n {\n id: 'crumble1',\n x: 350,\n y: 220,\n width: 100,\n height: 15,\n type: 'crumbling',\n timer: 0,\n active: true\n }, {\n id: 'crumble2',\n x: 480,\n y: 150,\n width: 80,\n height: 15,\n type: 'crumbling',\n timer: 0,\n active: true\n },\n // Small floating islands\n {\n id: 'island1',\n x: 150,\n y: 150,\n width: 40,\n height: 15,\n type: 'normal'\n }, {\n id: 'island2',\n x: 700,\n y: 100,\n width: 40,\n height: 15,\n type: 'normal'\n }],\n // Level 2 - More complex layout\n [\n // Main ground platform - same size as level 1\n {\n id: 'ground',\n x: 100,\n y: 400,\n width: 600,\n height: 20,\n type: 'normal'\n },\n // Floating platforms\n {\n id: 'float1',\n x: 50,\n y: 350,\n width: 100,\n height: 15,\n type: 'normal'\n }, {\n id: 'float2',\n x: 650,\n y: 350,\n width: 100,\n height: 15,\n type: 'normal'\n },\n // Mid-level platforms\n {\n id: 'mid1',\n x: 150,\n y: 280,\n width: 120,\n height: 15,\n type: 'crumbling',\n timer: 0,\n active: true\n }, {\n id: 'mid2',\n x: 530,\n y: 280,\n width: 120,\n height: 15,\n type: 'crumbling',\n timer: 0,\n active: true\n },\n // Center platform\n {\n id: 'center',\n x: 350,\n y: 250,\n width: 100,\n height: 15,\n type: 'bouncy'\n },\n // Upper platforms\n {\n id: 'upper1',\n x: 100,\n y: 180,\n width: 80,\n height: 15,\n type: 'moving',\n direction: 'horizontal',\n speed: 60,\n min: 100,\n max: 300,\n originalX: 100,\n originalY: 180\n }, {\n id: 'upper2',\n x: 620,\n y: 180,\n width: 80,\n height: 15,\n type: 'moving',\n direction: 'horizontal',\n speed: 60,\n min: 500,\n max: 700,\n originalX: 620,\n originalY: 180\n },\n // Top platforms\n {\n id: 'top1',\n x: 250,\n y: 120,\n width: 80,\n height: 15,\n type: 'moving',\n direction: 'vertical',\n speed: 50,\n min: 120,\n max: 220,\n originalX: 250,\n originalY: 120\n }, {\n id: 'top2',\n x: 470,\n y: 120,\n width: 80,\n height: 15,\n type: 'moving',\n direction: 'vertical',\n speed: 50,\n min: 120,\n max: 220,\n originalX: 470,\n originalY: 120\n },\n // Highest platform\n {\n id: 'highest',\n x: 350,\n y: 80,\n width: 100,\n height: 15,\n type: 'normal'\n },\n // Extra bouncy platforms\n {\n id: 'bouncy1',\n x: 200,\n y: 350,\n width: 50,\n height: 15,\n type: 'bouncy'\n }, {\n id: 'bouncy2',\n x: 550,\n y: 350,\n width: 50,\n height: 15,\n type: 'bouncy'\n },\n // Extra crumbling platforms\n {\n id: 'crumble3',\n x: 300,\n y: 150,\n width: 60,\n height: 15,\n type: 'crumbling',\n timer: 0,\n active: true\n }, {\n id: 'crumble4',\n x: 440,\n y: 150,\n width: 60,\n height: 15,\n type: 'crumbling',\n timer: 0,\n active: true\n }],\n // Level 3 - Extreme layout\n [\n // Main ground platform - same size as other levels\n {\n id: 'ground',\n x: 100,\n y: 400,\n width: 600,\n height: 20,\n type: 'normal'\n },\n // Bouncy platforms to help reach higher areas\n {\n id: 'bouncy1',\n x: 230,\n y: 380,\n width: 40,\n height: 15,\n type: 'bouncy'\n }, {\n id: 'bouncy2',\n x: 530,\n y: 380,\n width: 40,\n height: 15,\n type: 'bouncy'\n },\n // Mid-level moving platforms\n {\n id: 'moving1',\n x: 100,\n y: 320,\n width: 80,\n height: 15,\n type: 'moving',\n direction: 'horizontal',\n speed: 70,\n min: 50,\n max: 250,\n originalX: 100,\n originalY: 320\n }, {\n id: 'moving2',\n x: 400,\n y: 320,\n width: 80,\n height: 15,\n type: 'moving',\n direction: 'horizontal',\n speed: 70,\n min: 300,\n max: 500,\n originalX: 400,\n originalY: 320\n }, {\n id: 'moving3',\n x: 650,\n y: 320,\n width: 80,\n height: 15,\n type: 'moving',\n direction: 'horizontal',\n speed: 70,\n min: 550,\n max: 750,\n originalX: 650,\n originalY: 320\n },\n // Crumbling platforms in the middle\n {\n id: 'crumble1',\n x: 200,\n y: 250,\n width: 100,\n height: 15,\n type: 'crumbling',\n timer: 0,\n active: true\n }, {\n id: 'crumble2',\n x: 350,\n y: 250,\n width: 100,\n height: 15,\n type: 'crumbling',\n timer: 0,\n active: true\n }, {\n id: 'crumble3',\n x: 500,\n y: 250,\n width: 100,\n height: 15,\n type: 'crumbling',\n timer: 0,\n active: true\n },\n // Upper level with fast moving platforms\n {\n id: 'fastmove1',\n x: 150,\n y: 180,\n width: 60,\n height: 15,\n type: 'moving',\n direction: 'horizontal',\n speed: 100,\n min: 100,\n max: 300,\n originalX: 150,\n originalY: 180\n }, {\n id: 'fastmove2',\n x: 400,\n y: 180,\n width: 60,\n height: 15,\n type: 'moving',\n direction: 'vertical',\n speed: 80,\n min: 120,\n max: 240,\n originalX: 400,\n originalY: 180\n }, {\n id: 'fastmove3',\n x: 650,\n y: 180,\n width: 60,\n height: 15,\n type: 'moving',\n direction: 'horizontal',\n speed: 100,\n min: 500,\n max: 700,\n originalX: 650,\n originalY: 180\n },\n // Top level with super bouncy platforms\n {\n id: 'superbounce1',\n x: 250,\n y: 120,\n width: 40,\n height: 15,\n type: 'bouncy'\n }, {\n id: 'superbounce2',\n x: 550,\n y: 120,\n width: 40,\n height: 15,\n type: 'bouncy'\n },\n // Highest platform\n {\n id: 'highest',\n x: 400,\n y: 80,\n width: 80,\n height: 15,\n type: 'crumbling',\n timer: 0,\n active: true\n },\n // Extra small platforms\n {\n id: 'tiny1',\n x: 100,\n y: 150,\n width: 30,\n height: 15,\n type: 'normal'\n }, {\n id: 'tiny2',\n x: 700,\n y: 150,\n width: 30,\n height: 15,\n type: 'normal'\n }]];\n const [platforms, setPlatforms] = useState(levelPlatforms[0]);\n\n // Handle keyboard input\n useEffect(() => {\n const handleKeyDown = e => {\n if (gameState === 'battle' && ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' ', 'z'].includes(e.key)) {\n e.preventDefault();\n setKeys(prev => ({\n ...prev,\n [e.key]: true\n }));\n }\n };\n const handleKeyUp = e => {\n if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' ', 'z'].includes(e.key)) {\n setKeys(prev => ({\n ...prev,\n [e.key]: false\n }));\n }\n };\n window.addEventListener('keydown', handleKeyDown);\n window.addEventListener('keyup', handleKeyUp);\n return () => {\n window.removeEventListener('keydown', handleKeyDown);\n window.removeEventListener('keyup', handleKeyUp);\n };\n }, [gameState]);\n\n // Character selection\n const selectCharacter = character => {\n setSelectedCharacter(character);\n\n // Randomly select an opponent different from player\n const availableOpponents = characters.filter(c => c.id !== character.id);\n const randomOpponent = availableOpponents[Math.floor(Math.random() * availableOpponents.length)];\n setOpponent(randomOpponent);\n\n // Reset game state\n setPlayerHealth(100);\n setOpponentHealth(100);\n setPlayerDamage(0);\n setOpponentDamage(0);\n\n // Find the ground platform to position characters\n const groundPlatform = levelPlatforms[0].find(p => p.id === 'ground');\n const platformCenterX = groundPlatform.x + groundPlatform.width / 2;\n setPlayerPosition({\n x: platformCenterX - 100,\n // Left of center\n y: groundPlatform.y - 60 // Just above the platform\n });\n setOpponentPosition({\n x: platformCenterX + 100,\n // Right of center\n y: groundPlatform.y - 60 // Just above the platform\n });\n setPlayerVelocity({\n x: 0,\n y: 0\n });\n setOpponentVelocity({\n x: 0,\n y: 0\n });\n setPlayerFacing('right');\n setOpponentFacing('left');\n setPlayerAttacking(false);\n setOpponentAttacking(false);\n setPlayerSpecialCooldown(0);\n setOpponentSpecialCooldown(0);\n setWinner(null);\n setEffects([]);\n setConfetti([]);\n \n // Reset opponent settling time\n setOpponentSettlingTime(2);\n\n // Start countdown\n setCountdown(3);\n setShowCountdown(true);\n\n // Start the battle\n setGameState('battle');\n };\n\n // Game loop\n useEffect(() => {\n if (gameState !== 'battle') return;\n\n // Handle countdown\n if (showCountdown) {\n const countdownTimer = setInterval(() => {\n setCountdown(prev => {\n if (prev <= 1) {\n clearInterval(countdownTimer);\n setShowCountdown(false);\n return 0;\n }\n return prev - 1;\n });\n }, 1000);\n return () => clearInterval(countdownTimer);\n }\n const gameLoop = () => {\n const now = Date.now();\n const deltaTime = (now - lastUpdateTimeRef.current) / 1000; // Convert to seconds\n lastUpdateTimeRef.current = now;\n\n // Only update game if countdown is finished\n if (!showCountdown) {\n // Update player\n updatePlayer(deltaTime);\n\n // Update opponent AI\n updateOpponent(deltaTime);\n\n // Update platforms\n updatePlatforms(deltaTime);\n\n // Check for collisions\n checkCollisions();\n\n // Check for win conditions\n checkWinConditions();\n\n // Update effects\n updateEffects(deltaTime);\n\n // Update confetti\n updateConfetti(deltaTime);\n \n // Update opponent settling time\n if (opponentSettlingTime > 0) {\n setOpponentSettlingTime(prev => Math.max(0, prev - deltaTime));\n }\n }\n\n // Continue the game loop\n gameLoopRef.current = requestAnimationFrame(gameLoop);\n };\n gameLoopRef.current = requestAnimationFrame(gameLoop);\n return () => {\n if (gameLoopRef.current) {\n cancelAnimationFrame(gameLoopRef.current);\n }\n };\n }, [gameState, keys, playerPosition, opponentPosition, playerVelocity, opponentVelocity, playerHealth, opponentHealth, playerDamage, opponentDamage, selectedCharacter, opponent, platforms, showCountdown, opponentSettlingTime]);\n // Update platforms (moving, crumbling, etc.)\n const updatePlatforms = deltaTime => {\n setPlatforms(prevPlatforms => {\n return prevPlatforms.map(platform => {\n // Handle moving platforms\n if (platform.type === 'moving') {\n let newX = platform.x;\n let newY = platform.y;\n if (platform.direction === 'horizontal') {\n newX = platform.originalX + Math.sin(Date.now() / 1000) * (platform.max - platform.min) / 2 + (platform.max - platform.min) / 2 + platform.min - platform.originalX;\n } else if (platform.direction === 'vertical') {\n newY = platform.originalY + Math.sin(Date.now() / 800) * (platform.max - platform.min) / 2 + (platform.max - platform.min) / 2 + platform.min - platform.originalY;\n }\n return {\n ...platform,\n x: newX,\n y: newY\n };\n }\n\n // Handle crumbling platforms\n if (platform.type === 'crumbling') {\n // Check if player or opponent is standing on this platform\n const playerOnPlatform = playerPosition.x + 40 > platform.x && playerPosition.x < platform.x + platform.width && playerPosition.y + 60 >= platform.y - 5 && playerPosition.y + 60 <= platform.y + 5;\n const opponentOnPlatform = opponentPosition.x + 40 > platform.x && opponentPosition.x < platform.x + platform.width && opponentPosition.y + 60 >= platform.y - 5 && opponentPosition.y + 60 <= platform.y + 5;\n let newTimer = platform.timer;\n let newActive = platform.active;\n\n // If someone is on the platform and it's active, start the timer\n if ((playerOnPlatform || opponentOnPlatform) && platform.active) {\n newTimer += deltaTime;\n\n // If timer exceeds 0.5 seconds, deactivate the platform\n if (newTimer > 0.5) {\n newActive = false;\n newTimer = 0;\n\n // Add crumbling effect\n addEffect({\n type: 'crumble',\n x: platform.x + platform.width / 2,\n y: platform.y,\n duration: 0.5\n });\n }\n } else if (!platform.active) {\n // If platform is inactive, increment timer for respawn\n newTimer += deltaTime;\n\n // Respawn after 3 seconds\n if (newTimer > 3) {\n newActive = true;\n newTimer = 0;\n }\n }\n return {\n ...platform,\n timer: newTimer,\n active: newActive\n };\n }\n return platform;\n });\n });\n };\n const updatePlayer = deltaTime => {\n if (!selectedCharacter) return;\n\n // Movement\n let newVelocity = {\n ...playerVelocity\n };\n let newPosition = {\n ...playerPosition\n };\n\n // Horizontal movement\n if (keys.ArrowLeft) {\n newVelocity.x = -selectedCharacter.stats.speed * 30 * deltaTime;\n setPlayerFacing('left');\n } else if (keys.ArrowRight) {\n newVelocity.x = selectedCharacter.stats.speed * 30 * deltaTime;\n setPlayerFacing('right');\n } else {\n // Apply friction\n newVelocity.x *= 0.8;\n }\n\n // Jumping\n let onGround = false;\n let onBouncyPlatform = false;\n for (const platform of platforms) {\n if (platform.active !== false && playerPosition.x + 40 > platform.x && playerPosition.x < platform.x + platform.width && playerPosition.y + 60 >= platform.y - 5 && playerPosition.y + 60 <= platform.y + 5) {\n onGround = true;\n if (platform.type === 'bouncy') {\n onBouncyPlatform = true;\n }\n break;\n }\n }\n if (keys.ArrowUp && onGround) {\n if (onBouncyPlatform) {\n // Extra bounce height on bouncy platforms\n newVelocity.y = -selectedCharacter.stats.jump * 1.2;\n\n // Add bounce effect\n addEffect({\n type: 'bounce',\n x: playerPosition.x + 20,\n y: playerPosition.y + 60,\n duration: 0.3\n });\n } else {\n newVelocity.y = -selectedCharacter.stats.jump * 0.8; // Significantly reduced jump height\n }\n }\n\n // Apply gravity\n if (!onGround) {\n newVelocity.y += 30 * deltaTime; // Gravity\n } else if (newVelocity.y > 0) {\n newVelocity.y = 0;\n }\n\n // Update position\n newPosition.x += newVelocity.x;\n newPosition.y += newVelocity.y;\n\n // Boundary checks\n if (newPosition.x < 0) newPosition.x = 0;\n if (newPosition.x > 760) newPosition.x = 760;\n if (newPosition.y > 500) {\n // Fell off the stage\n setPlayerHealth(0);\n return;\n }\n\n // Update camera to follow player with minimal vertical offset\n // This keeps the player more centered and visible during smaller jumps\n const verticalLookAhead = newVelocity.y < 0 ? -50 : 0; // Reduced look ahead when jumping up\n setCameraOffset({\n x: Math.max(0, Math.min(newPosition.x - 400, 760 - 800)),\n y: Math.max(0, Math.min(newPosition.y - 300 + verticalLookAhead, 500 - 600))\n });\n\n // Platform collision\n for (const platform of platforms) {\n // Skip inactive platforms\n if (platform.active === false) continue;\n if (newPosition.x + 40 > platform.x && newPosition.x < platform.x + platform.width && newPosition.y + 60 > platform.y && newPosition.y + 60 < platform.y + platform.height + 10 && playerPosition.y + 60 <= platform.y) {\n newPosition.y = platform.y - 60;\n newVelocity.y = 0;\n\n // If it's a moving platform, add its velocity to the player\n if (platform.type === 'moving' && platform.direction === 'horizontal') {\n // Calculate platform's velocity\n const platformVelocityX = (platform.x - (platform.prevX || platform.x)) / deltaTime;\n newPosition.x += platformVelocityX * deltaTime * 0.8; // Apply 80% of platform movement\n }\n }\n }\n\n // Attack\n if (keys[' '] && !playerAttacking) {\n setPlayerAttacking(true);\n\n // Check if opponent is in range\n const attackRange = 80;\n const attackDirection = playerFacing === 'right' ? 1 : -1;\n const attackX = playerPosition.x + attackDirection * 30;\n if (Math.abs(attackX - opponentPosition.x) < attackRange && Math.abs(playerPosition.y - opponentPosition.y) < 60) {\n // Hit opponent\n const baseDamage = selectedCharacter.stats.attack * 0.5;\n const knockbackForce = 5 + opponentDamage * 0.1;\n setOpponentDamage(prev => prev + baseDamage);\n // Reduce opponent health based on damage\n setOpponentHealth(prev => Math.max(0, prev - baseDamage));\n setOpponentVelocity({\n x: attackDirection * knockbackForce,\n y: -knockbackForce * 0.5\n });\n\n // Add hit effect\n addEffect({\n type: 'hit',\n x: opponentPosition.x,\n y: opponentPosition.y,\n duration: 0.3\n });\n }\n\n // Reset attack state after delay\n setTimeout(() => {\n setPlayerAttacking(false);\n }, 400);\n }\n\n // Special attack\n if (keys.z && playerSpecialCooldown <= 0 && !playerAttacking) {\n setPlayerAttacking(true);\n setPlayerSpecialCooldown(3); // 3 second cooldown\n\n // Create special attack effect based on character type\n const direction = playerFacing === 'right' ? 1 : -1;\n\n // Different special attack types\n switch (selectedCharacter.specialType) {\n case 'lightning':\n // Pikachu's Thunder Shock - fast lightning bolt that can chain\n addEffect({\n type: 'special',\n specialType: 'lightning',\n character: selectedCharacter,\n x: playerPosition.x + direction * 40,\n y: playerPosition.y + 30,\n direction: direction,\n duration: 1.5,\n damage: selectedCharacter.stats.special * 0.7,\n velocity: {\n x: direction * 15,\n y: 0\n },\n canChain: true,\n chainCount: 0,\n maxChains: 2\n });\n break;\n case 'flame':\n // Charizard's Flamethrower - cone of fire\n for (let i = -1; i <= 1; i++) {\n addEffect({\n type: 'special',\n specialType: 'flame',\n character: selectedCharacter,\n x: playerPosition.x + direction * 40,\n y: playerPosition.y + 30 + i * 15,\n direction: direction,\n duration: 1.2,\n damage: selectedCharacter.stats.special * 0.6,\n velocity: {\n x: direction * 8 + i * direction,\n y: i * 0.5\n },\n size: 1 + Math.abs(i) * 0.5\n });\n }\n break;\n case 'water':\n // Blastoise's Hydro Pump - powerful pushback\n addEffect({\n type: 'special',\n specialType: 'water',\n character: selectedCharacter,\n x: playerPosition.x + direction * 40,\n y: playerPosition.y + 30,\n direction: direction,\n duration: 1,\n damage: selectedCharacter.stats.special * 0.5,\n velocity: {\n x: direction * 12,\n y: 0\n },\n knockback: 15\n });\n break;\n case 'stun':\n // Jigglypuff's Sing - area stun\n addEffect({\n type: 'special',\n specialType: 'stun',\n character: selectedCharacter,\n x: playerPosition.x,\n y: playerPosition.y,\n direction: direction,\n duration: 2,\n damage: selectedCharacter.stats.special * 0.3,\n radius: 120,\n stunDuration: 1.5\n });\n break;\n case 'psychic':\n // Mewtwo's Psystrike - passes through platforms\n addEffect({\n type: 'special',\n specialType: 'psychic',\n character: selectedCharacter,\n x: playerPosition.x + direction * 40,\n y: playerPosition.y + 30,\n direction: direction,\n duration: 1.5,\n damage: selectedCharacter.stats.special * 0.9,\n velocity: {\n x: direction * 12,\n y: 0\n },\n passThroughPlatforms: true\n });\n break;\n case 'aura':\n // Lucario's Aura Sphere - charged attack\n addEffect({\n type: 'special',\n specialType: 'aura',\n character: selectedCharacter,\n x: playerPosition.x + direction * 40,\n y: playerPosition.y + 30,\n direction: direction,\n duration: 1.2,\n damage: selectedCharacter.stats.special * 1.1,\n velocity: {\n x: direction * 8,\n y: 0\n },\n size: 1.5\n });\n break;\n case 'wind':\n // Pidgeot's Hurricane - pulls opponents in\n addEffect({\n type: 'special',\n specialType: 'wind',\n character: selectedCharacter,\n x: playerPosition.x + direction * 80,\n y: playerPosition.y,\n direction: direction,\n duration: 2,\n damage: selectedCharacter.stats.special * 0.6,\n radius: 100,\n pullForce: 5\n });\n break;\n case 'rock':\n // Golem's Rock Slide - rocks from above\n for (let i = 0; i < 4; i++) {\n setTimeout(() => {\n const targetX = opponentPosition.x + (Math.random() * 100 - 50);\n addEffect({\n type: 'special',\n specialType: 'rock',\n character: selectedCharacter,\n x: targetX,\n y: opponentPosition.y - 150,\n direction: 0,\n duration: 1,\n damage: selectedCharacter.stats.special * 0.7,\n velocity: {\n x: 0,\n y: 12\n }\n });\n }, i * 200);\n }\n break;\n default:\n // Fallback for any character without a specific special\n addEffect({\n type: 'special',\n specialType: 'default',\n character: selectedCharacter,\n x: playerPosition.x + direction * 40,\n y: playerPosition.y + 30,\n direction: direction,\n duration: 1,\n damage: selectedCharacter.stats.special * 0.8,\n velocity: {\n x: direction * 10,\n y: 0\n }\n });\n }\n\n // Add \"special used\" notification effect\n addEffect({\n type: 'notification',\n text: 'SPECIAL USED!',\n x: playerPosition.x,\n y: playerPosition.y - 30,\n duration: 1\n });\n\n // Reset attack state after delay\n setTimeout(() => {\n setPlayerAttacking(false);\n }, 600);\n }\n\n // Update cooldowns\n if (playerSpecialCooldown > 0) {\n setPlayerSpecialCooldown(prev => Math.max(0, prev - deltaTime));\n }\n setPlayerPosition(newPosition);\n setPlayerVelocity(newVelocity);\n };\n const updateOpponent = deltaTime => {\n if (!opponent) return;\n\n // Simple AI behavior\n let newVelocity = {\n ...opponentVelocity\n };\n let newPosition = {\n ...opponentPosition\n };\n\n // Check if on ground\n let onGround = false;\n let onBouncyPlatform = false;\n for (const platform of platforms) {\n if (platform.active !== false && opponentPosition.x + 40 > platform.x && opponentPosition.x < platform.x + platform.width && opponentPosition.y + 60 >= platform.y - 5 && opponentPosition.y + 60 <= platform.y + 5) {\n onGround = true;\n if (platform.type === 'bouncy') {\n onBouncyPlatform = true;\n }\n break;\n }\n }\n\n // If opponent is still settling in, keep them in place\n if (opponentSettlingTime > 0) {\n // Find the ground platform\n const groundPlatform = platforms.find(p => p.id === 'ground');\n if (groundPlatform) {\n // Keep opponent centered on the ground platform\n const platformCenterX = groundPlatform.x + groundPlatform.width / 2;\n \n // Gently move opponent to center if they're not there\n if (Math.abs(opponentPosition.x - platformCenterX) > 5) {\n const direction = opponentPosition.x < platformCenterX ? 1 : -1;\n newVelocity.x = direction * 2;\n } else {\n newVelocity.x = 0;\n }\n \n // Make sure opponent is facing the player\n setOpponentFacing('left');\n \n // Keep opponent on the ground\n if (!onGround) {\n newVelocity.y += 30 * deltaTime; // Apply gravity\n } else {\n newVelocity.y = 0;\n }\n \n // Update position\n newPosition.x += newVelocity.x;\n newPosition.y += newVelocity.y;\n \n // Platform collision\n for (const platform of platforms) {\n if (platform.active !== false && newPosition.x + 40 > platform.x && newPosition.x < platform.x + platform.width && newPosition.y + 60 > platform.y && newPosition.y + 60 < platform.y + platform.height + 10 && opponentPosition.y + 60 <= platform.y) {\n newPosition.y = platform.y - 60;\n newVelocity.y = 0;\n }\n }\n \n setOpponentPosition(newPosition);\n setOpponentVelocity(newVelocity);\n return;\n }\n }\n\n // Cooldown for opponent actions\n const aiDecision = Math.random();\n\n // AI difficulty scaling based on level\n const aiAggressiveness = 0.03 * (1 + (currentLevel - 1) * 0.5); // Increases by 50% per level\n const aiSpecialFrequency = 0.01 * (1 + (currentLevel - 1) * 0.7); // Increases by 70% per level\n const aiJumpFrequency = 0.02 * (1 + (currentLevel - 1) * 0.3); // Increases by 30% per level\n const aiReactionTime = Math.max(0.5, 1 - (currentLevel - 1) * 0.2); // Decreases by 20% per level (faster reactions)\n\n // AI decision making\n if (!opponentAttacking) {\n // Move towards player\n const distanceToPlayer = playerPosition.x - opponentPosition.x;\n const direction = distanceToPlayer > 0 ? 1 : -1;\n\n // Smarter platform navigation in higher levels\n if (currentLevel >= 2) {\n // Check if there's a platform below\n let hasPlatformBelow = false;\n for (const platform of platforms) {\n if (platform.active !== false && opponentPosition.x + 40 > platform.x && opponentPosition.x < platform.x + platform.width && opponentPosition.y + 70 < platform.y && opponentPosition.y + 120 > platform.y) {\n hasPlatformBelow = true;\n break;\n }\n }\n\n // If no platform below and at edge, change direction\n if (!hasPlatformBelow && (direction > 0 && opponentPosition.x > 700 || direction < 0 && opponentPosition.x < 60)) {\n // Reverse direction to avoid falling\n newVelocity.x = -direction * opponent.stats.speed * 20 * deltaTime;\n setOpponentFacing(direction < 0 ? 'right' : 'left');\n } else if (Math.abs(distanceToPlayer) > 100) {\n // Move towards player\n newVelocity.x = direction * opponent.stats.speed * 20 * deltaTime;\n setOpponentFacing(direction > 0 ? 'right' : 'left');\n }\n } else {\n // Level 1 basic movement\n if (Math.abs(distanceToPlayer) > 100) {\n // Move towards player\n newVelocity.x = direction * opponent.stats.speed * 20 * deltaTime;\n setOpponentFacing(direction > 0 ? 'right' : 'left');\n }\n }\n\n // Attack logic\n if (Math.abs(distanceToPlayer) < 80 && Math.abs(opponentPosition.y - playerPosition.y) < 60 && aiDecision < aiAggressiveness) {\n // Attack if close\n setOpponentAttacking(true);\n\n // Hit player\n const baseDamage = opponent.stats.attack * 0.5;\n const knockbackForce = 5 + playerDamage * 0.1;\n setPlayerDamage(prev => prev + baseDamage);\n // Reduce player health based on damage\n setPlayerHealth(prev => Math.max(0, prev - baseDamage));\n setPlayerVelocity({\n x: direction * knockbackForce,\n y: -knockbackForce * 0.5\n });\n\n // Add hit effect\n addEffect({\n type: 'hit',\n x: playerPosition.x,\n y: playerPosition.y,\n duration: 0.3\n });\n\n // Reset attack state after delay\n setTimeout(() => {\n setOpponentAttacking(false);\n }, 400 / aiReactionTime); // Faster recovery at higher levels\n } else if (aiDecision < aiSpecialFrequency && opponentSpecialCooldown <= 0) {\n // Use special attack occasionally\n setOpponentAttacking(true);\n setOpponentSpecialCooldown(3); // 3 second cooldown\n\n // Create special attack effect based on character type\n const direction = opponentFacing === 'right' ? 1 : -1;\n\n // Different special attack types for opponent\n switch (opponent.specialType) {\n case 'lightning':\n // Pikachu's Thunder Shock\n addEffect({\n type: 'special',\n specialType: 'lightning',\n character: opponent,\n x: opponentPosition.x + direction * 40,\n y: opponentPosition.y + 30,\n direction: direction,\n duration: 1.5,\n damage: opponent.stats.special * 0.7,\n velocity: {\n x: direction * 15,\n y: 0\n },\n canChain: true,\n chainCount: 0,\n maxChains: 2\n });\n break;\n case 'flame':\n // Charizard's Flamethrower\n for (let i = -1; i <= 1; i++) {\n addEffect({\n type: 'special',\n specialType: 'flame',\n character: opponent,\n x: opponentPosition.x + direction * 40,\n y: opponentPosition.y + 30 + i * 15,\n direction: direction,\n duration: 1.2,\n damage: opponent.stats.special * 0.6,\n velocity: {\n x: direction * 8 + i * direction,\n y: i * 0.5\n },\n size: 1 + Math.abs(i) * 0.5\n });\n }\n break;\n case 'water':\n // Blastoise's Hydro Pump\n addEffect({\n type: 'special',\n specialType: 'water',\n character: opponent,\n x: opponentPosition.x + direction * 40,\n y: opponentPosition.y + 30,\n direction: direction,\n duration: 1,\n damage: opponent.stats.special * 0.5,\n velocity: {\n x: direction * 12,\n y: 0\n },\n knockback: 15\n });\n break;\n case 'stun':\n // Jigglypuff's Sing\n addEffect({\n type: 'special',\n specialType: 'stun',\n character: opponent,\n x: opponentPosition.x,\n y: opponentPosition.y,\n direction: direction,\n duration: 2,\n damage: opponent.stats.special * 0.3,\n radius: 120,\n stunDuration: 1.5\n });\n break;\n case 'psychic':\n // Mewtwo's Psystrike\n addEffect({\n type: 'special',\n specialType: 'psychic',\n character: opponent,\n x: opponentPosition.x + direction * 40,\n y: opponentPosition.y + 30,\n direction: direction,\n duration: 1.5,\n damage: opponent.stats.special * 0.9,\n velocity: {\n x: direction * 12,\n y: 0\n },\n passThroughPlatforms: true\n });\n break;\n case 'aura':\n // Lucario's Aura Sphere\n addEffect({\n type: 'special',\n specialType: 'aura',\n character: opponent,\n x: opponentPosition.x + direction * 40,\n y: opponentPosition.y + 30,\n direction: direction,\n duration: 1.2,\n damage: opponent.stats.special * 1.1,\n velocity: {\n x: direction * 8,\n y: 0\n },\n size: 1.5\n });\n break;\n case 'wind':\n // Pidgeot's Hurricane\n addEffect({\n type: 'special',\n specialType: 'wind',\n character: opponent,\n x: opponentPosition.x + direction * 80,\n y: opponentPosition.y,\n direction: direction,\n duration: 2,\n damage: opponent.stats.special * 0.6,\n radius: 100,\n pullForce: 5\n });\n break;\n case 'rock':\n // Golem's Rock Slide\n for (let i = 0; i < 4; i++) {\n setTimeout(() => {\n const targetX = playerPosition.x + (Math.random() * 100 - 50);\n addEffect({\n type: 'special',\n specialType: 'rock',\n character: opponent,\n x: targetX,\n y: playerPosition.y - 150,\n direction: 0,\n duration: 1,\n damage: opponent.stats.special * 0.7,\n velocity: {\n x: 0,\n y: 12\n }\n });\n }, i * 200);\n }\n break;\n default:\n // Fallback\n addEffect({\n type: 'special',\n specialType: 'default',\n character: opponent,\n x: opponentPosition.x + direction * 40,\n y: opponentPosition.y + 30,\n direction: direction,\n duration: 1,\n damage: opponent.stats.special * 0.8,\n velocity: {\n x: direction * 10,\n y: 0\n }\n });\n }\n\n // Reset attack state after delay\n setTimeout(() => {\n setOpponentAttacking(false);\n }, 600 / aiReactionTime); // Faster recovery at higher levels\n } else if (aiDecision < aiJumpFrequency && onGround) {\n // Jump occasionally\n if (onBouncyPlatform) {\n newVelocity.y = -opponent.stats.jump * 1.2;\n\n // Add bounce effect\n addEffect({\n type: 'bounce',\n x: opponentPosition.x + 20,\n y: opponentPosition.y + 60,\n duration: 0.3\n });\n } else {\n newVelocity.y = -opponent.stats.jump * 0.8; // Significantly reduced jump height\n }\n }\n\n // In higher levels, AI can dodge attacks\n if (currentLevel >= 3 && Math.abs(distanceToPlayer) < 100 && playerAttacking && aiDecision < 0.4) {\n // Dodge by jumping or moving away\n if (onGround) {\n newVelocity.y = -opponent.stats.jump * 0.8;\n } else {\n newVelocity.x = -direction * opponent.stats.speed * 30 * deltaTime;\n }\n }\n }\n\n // Apply gravity\n if (!onGround) {\n newVelocity.y += 30 * deltaTime; // Gravity\n } else if (newVelocity.y > 0) {\n newVelocity.y = 0;\n }\n\n // Update position\n newPosition.x += newVelocity.x;\n newPosition.y += newVelocity.y;\n\n // Boundary checks\n if (newPosition.x < 0) newPosition.x = 0;\n if (newPosition.x > 760) newPosition.x = 760;\n if (newPosition.y > 500) {\n // Fell off the stage\n setOpponentHealth(0);\n return;\n }\n\n // Platform collision\n for (const platform of platforms) {\n // Skip inactive platforms\n if (platform.active === false) continue;\n if (newPosition.x + 40 > platform.x && newPosition.x < platform.x + platform.width && newPosition.y + 60 > platform.y && newPosition.y + 60 < platform.y + platform.height + 10 && opponentPosition.y + 60 <= platform.y) {\n newPosition.y = platform.y - 60;\n newVelocity.y = 0;\n\n // If it's a moving platform, add its velocity to the opponent\n if (platform.type === 'moving' && platform.direction === 'horizontal') {\n // Calculate platform's velocity\n const platformVelocityX = (platform.x - (platform.prevX || platform.x)) / deltaTime;\n newPosition.x += platformVelocityX * deltaTime * 0.8; // Apply 80% of platform movement\n }\n\n // If it's a bouncy platform and the AI decides to jump\n if (platform.type === 'bouncy' && aiDecision < 0.1) {\n newVelocity.y = -opponent.stats.jump * 1.2;\n\n // Add bounce effect\n addEffect({\n type: 'bounce',\n x: opponentPosition.x + 20,\n y: opponentPosition.y + 60,\n duration: 0.3\n });\n }\n }\n }\n\n // Update cooldowns\n if (opponentSpecialCooldown > 0) {\n setOpponentSpecialCooldown(prev => Math.max(0, prev - deltaTime));\n }\n setOpponentPosition(newPosition);\n setOpponentVelocity(newVelocity);\n };\n const checkCollisions = () => {\n // Check special attack collisions\n effects.forEach(effect => {\n if (effect.type === 'special') {\n // Different collision logic based on special type\n switch (effect.specialType) {\n case 'stun':\n // Area effect (Jigglypuff's Sing)\n const distanceToPlayer = Math.sqrt(Math.pow(effect.x - playerPosition.x, 2) + Math.pow(effect.y - playerPosition.y, 2));\n const distanceToOpponent = Math.sqrt(Math.pow(effect.x - opponentPosition.x, 2) + Math.pow(effect.y - opponentPosition.y, 2));\n\n // Check if player is in range of opponent's stun\n if (effect.character.id === opponent?.id && distanceToPlayer < effect.radius) {\n // Stun player\n setPlayerVelocity({\n x: 0,\n y: 0\n });\n\n // Add stun effect\n if (!effects.some(e => e.type === 'stun' && e.target === 'player')) {\n addEffect({\n type: 'stun',\n target: 'player',\n x: playerPosition.x,\n y: playerPosition.y - 30,\n duration: effect.stunDuration\n });\n }\n\n // Apply damage over time\n setPlayerDamage(prev => prev + effect.damage * 0.1);\n setPlayerHealth(prev => Math.max(0, prev - effect.damage * 0.1));\n }\n\n // Check if opponent is in range of player's stun\n if (effect.character.id === selectedCharacter?.id && distanceToOpponent < effect.radius) {\n // Stun opponent\n setOpponentVelocity({\n x: 0,\n y: 0\n });\n\n // Add stun effect\n if (!effects.some(e => e.type === 'stun' && e.target === 'opponent')) {\n addEffect({\n type: 'stun',\n target: 'opponent',\n x: opponentPosition.x,\n y: opponentPosition.y - 30,\n duration: effect.stunDuration\n });\n }\n\n // Apply damage over time\n setOpponentDamage(prev => prev + effect.damage * 0.1);\n setOpponentHealth(prev => Math.max(0, prev - effect.damage * 0.1));\n }\n break;\n case 'wind':\n // Pull effect (Pidgeot's Hurricane)\n const playerDistToWind = Math.sqrt(Math.pow(effect.x - playerPosition.x, 2) + Math.pow(effect.y - playerPosition.y, 2));\n const opponentDistToWind = Math.sqrt(Math.pow(effect.x - opponentPosition.x, 2) + Math.pow(effect.y - opponentPosition.y, 2));\n\n // Pull player towards hurricane\n if (effect.character.id === opponent?.id && playerDistToWind < effect.radius) {\n const pullDirection = {\n x: effect.x - playerPosition.x,\n y: effect.y - playerPosition.y\n };\n const magnitude = Math.sqrt(pullDirection.x * pullDirection.x + pullDirection.y * pullDirection.y);\n if (magnitude > 0) {\n const normalized = {\n x: pullDirection.x / magnitude,\n y: pullDirection.y / magnitude\n };\n setPlayerVelocity(prev => ({\n x: prev.x + normalized.x * effect.pullForce,\n y: prev.y + normalized.y * effect.pullForce\n }));\n\n // Apply damage\n setPlayerDamage(prev => prev + effect.damage * 0.05);\n setPlayerHealth(prev => Math.max(0, prev - effect.damage * 0.05));\n }\n }\n\n // Pull opponent towards hurricane\n if (effect.character.id === selectedCharacter?.id && opponentDistToWind < effect.radius) {\n const pullDirection = {\n x: effect.x - opponentPosition.x,\n y: effect.y - opponentPosition.y\n };\n const magnitude = Math.sqrt(pullDirection.x * pullDirection.x + pullDirection.y * pullDirection.y);\n if (magnitude > 0) {\n const normalized = {\n x: pullDirection.x / magnitude,\n y: pullDirection.y / magnitude\n };\n setOpponentVelocity(prev => ({\n x: prev.x + normalized.x * effect.pullForce,\n y: prev.y + normalized.y * effect.pullForce\n }));\n\n // Apply damage\n setOpponentDamage(prev => prev + effect.damage * 0.05);\n setOpponentHealth(prev => Math.max(0, prev - effect.damage * 0.05));\n }\n }\n break;\n default:\n // Standard projectile collision\n const effectHitbox = {\n x: effect.x - 20 * (effect.size || 1),\n y: effect.y - 20 * (effect.size || 1),\n width: 40 * (effect.size || 1),\n height: 40 * (effect.size || 1)\n };\n\n // Check if player is hit by opponent's special\n if (effect.character.id === opponent?.id && playerPosition.x < effectHitbox.x + effectHitbox.width && playerPosition.x + 40 > effectHitbox.x && playerPosition.y < effectHitbox.y + effectHitbox.height && playerPosition.y + 60 > effectHitbox.y) {\n // Hit player with special\n setPlayerDamage(prev => prev + effect.damage);\n // Reduce player health based on special damage\n setPlayerHealth(prev => Math.max(0, prev - effect.damage));\n\n // Apply knockback based on special type\n const knockbackForce = effect.knockback || 10 + playerDamage * 0.1;\n setPlayerVelocity({\n x: effect.direction * knockbackForce,\n y: -5\n });\n\n // Add hit effect\n addEffect({\n type: 'hit',\n x: playerPosition.x,\n y: playerPosition.y,\n duration: 0.3\n });\n\n // For lightning, it can chain to another target\n if (effect.specialType === 'lightning' && effect.canChain && effect.chainCount < effect.maxChains) {\n addEffect({\n ...effect,\n x: playerPosition.x,\n y: playerPosition.y,\n chainCount: effect.chainCount + 1,\n damage: effect.damage * 0.7,\n // Reduced damage for chain hits\n duration: 0.8\n });\n }\n\n // Remove the special effect unless it's a type that persists\n if (effect.specialType !== 'flame' && effect.specialType !== 'stun' && effect.specialType !== 'wind') {\n setEffects(prev => prev.filter(e => e !== effect));\n }\n }\n\n // Check if opponent is hit by player's special\n if (effect.character.id === selectedCharacter?.id && opponentPosition.x < effectHitbox.x + effectHitbox.width && opponentPosition.x + 40 > effectHitbox.x && opponentPosition.y < effectHitbox.y + effectHitbox.height && opponentPosition.y + 60 > effectHitbox.y) {\n // Hit opponent with special\n setOpponentDamage(prev => prev + effect.damage);\n // Reduce opponent health based on special damage\n setOpponentHealth(prev => Math.max(0, prev - effect.damage));\n\n // Apply knockback based on special type\n const knockbackForce = effect.knockback || 10 + opponentDamage * 0.1;\n setOpponentVelocity({\n x: effect.direction * knockbackForce,\n y: -5\n });\n\n // Add hit effect\n addEffect({\n type: 'hit',\n x: opponentPosition.x,\n y: opponentPosition.y,\n duration: 0.3\n });\n\n // For lightning, it can chain to another target\n if (effect.specialType === 'lightning' && effect.canChain && effect.chainCount < effect.maxChains) {\n addEffect({\n ...effect,\n x: opponentPosition.x,\n y: opponentPosition.y,\n chainCount: effect.chainCount + 1,\n damage: effect.damage * 0.7,\n // Reduced damage for chain hits\n duration: 0.8\n });\n }\n\n // Remove the special effect unless it's a type that persists\n if (effect.specialType !== 'flame' && effect.specialType !== 'stun' && effect.specialType !== 'wind') {\n setEffects(prev => prev.filter(e => e !== effect));\n }\n }\n }\n }\n });\n };\n const checkWinConditions = () => {\n if (playerHealth <= 0) {\n setWinner(opponent);\n setGameState('results');\n } else if (opponentHealth <= 0) {\n setWinner(selectedCharacter);\n // Create victory confetti\n createVictoryConfetti();\n setGameState('results');\n }\n };\n\n // Create confetti for victory celebration\n const createVictoryConfetti = () => {\n const newConfetti = [];\n const colors = ['bg-red-500', 'bg-blue-500', 'bg-green-500', 'bg-yellow-500', 'bg-purple-500', 'bg-pink-500', 'bg-indigo-500', 'bg-orange-500'];\n\n // Create 100 confetti pieces\n for (let i = 0; i < 100; i++) {\n newConfetti.push({\n id: i,\n x: Math.random() * window.innerWidth,\n y: -20 - Math.random() * 100,\n size: 5 + Math.random() * 10,\n color: colors[Math.floor(Math.random() * colors.length)],\n velocity: {\n x: (Math.random() - 0.5) * 5,\n y: 2 + Math.random() * 5\n },\n rotation: Math.random() * 360,\n rotationSpeed: (Math.random() - 0.5) * 10,\n lifetime: 3 + Math.random() * 2\n });\n }\n setConfetti(newConfetti);\n };\n\n // Update confetti animation\n const updateConfetti = deltaTime => {\n setConfetti(prev => prev.map(piece => ({\n ...piece,\n x: piece.x + piece.velocity.x * deltaTime * 60,\n y: piece.y + piece.velocity.y * deltaTime * 60,\n rotation: piece.rotation + piece.rotationSpeed * deltaTime * 60,\n lifetime: piece.lifetime - deltaTime\n })).filter(piece => piece.lifetime > 0 && piece.y < window.innerHeight + 50));\n };\n const addEffect = effect => {\n const id = Date.now() + Math.random();\n setEffects(prev => [...prev, {\n ...effect,\n id\n }]);\n };\n const updateEffects = deltaTime => {\n setEffects(prev => prev.map(effect => {\n if (effect.type === 'special') {\n // Update based on special type\n switch (effect.specialType) {\n case 'stun':\n // Jigglypuff's Sing - stationary area effect\n return {\n ...effect,\n duration: effect.duration - deltaTime\n };\n case 'wind':\n // Pidgeot's Hurricane - stationary area effect\n return {\n ...effect,\n duration: effect.duration - deltaTime\n };\n case 'rock':\n // Golem's Rock Slide - falling rocks\n return {\n ...effect,\n x: effect.x + effect.velocity.x,\n y: effect.y + effect.velocity.y,\n duration: effect.duration - deltaTime\n };\n case 'flame':\n // Charizard's Flamethrower - add some randomness to flame movement\n return {\n ...effect,\n x: effect.x + effect.velocity.x + (Math.random() - 0.5) * 2,\n y: effect.y + effect.velocity.y + (Math.random() - 0.5) * 2,\n duration: effect.duration - deltaTime\n };\n default:\n // Standard projectile movement\n return {\n ...effect,\n x: effect.x + effect.velocity.x,\n y: effect.y + effect.velocity.y,\n duration: effect.duration - deltaTime\n };\n }\n }\n if (effect.type === 'stun') {\n // Update stun effect\n return {\n ...effect,\n duration: effect.duration - deltaTime\n };\n }\n if (effect.type === 'notification') {\n return {\n ...effect,\n y: effect.y - deltaTime * 30,\n // Move notification upward\n duration: effect.duration - deltaTime\n };\n }\n return {\n ...effect,\n duration: effect.duration - deltaTime\n };\n }).filter(effect => effect.duration > 0));\n\n // Add special ready notification when cooldown ends\n if (playerSpecialCooldown > 0 && playerSpecialCooldown - deltaTime <= 0) {\n addEffect({\n type: 'notification',\n text: 'SPECIAL READY!',\n x: playerPosition.x,\n y: playerPosition.y - 30,\n duration: 1.5,\n isReady: true\n });\n }\n };\n const goToNextLevel = () => {\n // Increment level\n const nextLevel = currentLevel + 1;\n\n // Cap at level 3 (or the max level you have)\n const maxLevel = levelPlatforms.length;\n const newLevel = Math.min(nextLevel, maxLevel);\n setCurrentLevel(newLevel);\n\n // Get the new level platforms\n const newLevelPlatforms = levelPlatforms[newLevel - 1];\n setPlatforms(newLevelPlatforms);\n\n // Always use the ground platform which is now consistent across all levels\n const groundPlatform = newLevelPlatforms.find(p => p.id === 'ground');\n\n // Calculate positions at the center of the ground platform\n const platformCenterX = groundPlatform.x + groundPlatform.width / 2;\n const playerX = platformCenterX - 100; // Left of center\n const opponentX = platformCenterX + 100; // Right of center\n const characterY = groundPlatform.y - 60; // Position just above the platform\n\n // Reset game state\n setPlayerHealth(100);\n setOpponentHealth(100);\n setPlayerDamage(0);\n setOpponentDamage(0);\n setPlayerPosition({\n x: playerX,\n y: characterY\n });\n setOpponentPosition({\n x: opponentX,\n y: characterY\n });\n setPlayerVelocity({\n x: 0,\n y: 0\n });\n setOpponentVelocity({\n x: 0,\n y: 0\n });\n setPlayerFacing('right');\n setOpponentFacing('left');\n setPlayerAttacking(false);\n setOpponentAttacking(false);\n setPlayerSpecialCooldown(0);\n setOpponentSpecialCooldown(0);\n setWinner(null);\n setEffects([]);\n setConfetti([]);\n \n // Reset opponent settling time\n setOpponentSettlingTime(2);\n\n // Start countdown\n setCountdown(3);\n setShowCountdown(true);\n\n // Start the battle\n setGameState('battle');\n };\n const restartGame = () => {\n setGameState('selection');\n setSelectedCharacter(null);\n setOpponent(null);\n setCurrentLevel(1);\n setPlatforms(levelPlatforms[0]);\n };\n\n // Render functions\n const renderCharacterSelection = () =>

\n PokéSmash\n

Choose your fighter!

\n \n

\n {characters.map(character => )}\n

\n \n

Game Controls:

\n ←→\n

Move

Move your character left and right

\n ↑\n

Jump

Jump onto platforms

\n Space\n

Basic Attack

Perform a close-range attack

\n Z\n

Special Attack

Use your Pokémon's unique special move

\n \n

Special Attacks

\n {characters.map(character =>

\n {character.icon}\n

{character.name}: {character.specialName}

{character.specialDescription}

)}\n

\n \n

Tip: During battle, press the \"?\" button to see controls again!

\n {/* Countdown overlay */}\n {showCountdown &&

\n {countdown}\n

\n Get Ready!\n

}\n \n {/* Camera viewport with smoother transitions */}\n

\n {/* HUD */}\n

\n {selectedCharacter.icon}\n

{selectedCharacter.name}

{Math.floor(playerDamage)}% Damage

\n {/* Special cooldown */}\n

Special:

0 ? 'bg-red-500' : 'bg-blue-500'} transition-all duration-300`} style={{\n width: `${playerSpecialCooldown > 0 ? (1 - playerSpecialCooldown / 3) * 100 : 100}%`\n }}>

\n {playerSpecialCooldown <= 0 &&

\n READY!\n

}\n

\n \n

{opponent.name}

{Math.floor(opponentDamage)}% Damage

\n {opponent.icon}\n

\n {/* Special cooldown */}\n

:Special

0 ? 'bg-red-500' : 'bg-blue-500'} transition-all duration-300`} style={{\n width: `${opponentSpecialCooldown > 0 ? (1 - opponentSpecialCooldown / 3) * 100 : 100}%`\n }}>

\n {opponentSpecialCooldown <= 0 &&

\n READY!\n

}\n

\n \n {/* Level indicator */}\n

Level {currentLevel}

\n \n {/* Battle arena */}\n

\n {/* Platforms */}\n {platforms.map(platform => {\n // Skip rendering inactive crumbling platforms\n if (platform.type === 'crumbling' && !platform.active) {\n return null;\n }\n let platformClasses = \"absolute rounded-md \";\n\n // Different styling based on platform type\n switch (platform.type) {\n case 'normal':\n platformClasses += \"bg-gradient-to-r from-green-700 to-green-600 border-t-2 border-green-500\";\n break;\n case 'moving':\n platformClasses += \"bg-gradient-to-r from-blue-600 to-blue-500 border-t-2 border-blue-400 animate-pulse\";\n break;\n case 'bouncy':\n platformClasses += \"bg-gradient-to-r from-yellow-500 to-yellow-400 border-t-2 border-yellow-300\";\n break;\n case 'crumbling':\n platformClasses += \"bg-gradient-to-r from-red-600 to-red-500 border-t-2 border-red-400\";\n if (platform.timer > 0) {\n platformClasses += \" opacity-\" + Math.floor((0.5 - platform.timer) * 20);\n }\n break;\n default:\n platformClasses += \"bg-gradient-to-r from-green-700 to-green-600 border-t-2 border-green-500\";\n }\n return

\n {platform.type === 'bouncy' &&

}\n

;\n })}\n \n {/* Player character */}\n

\n {/* Character face */}\n

\n {selectedCharacter.icon}\n

\n {/* Attack indicator */}\n {playerAttacking &&

}\n

\n \n {/* Opponent character */}\n

\n {/* Character face */}\n

\n {opponent.icon}\n

\n {/* Attack indicator */}\n {opponentAttacking &&

}\n

\n \n {/* Effects */}\n {effects.map(effect => {\n if (effect.type === 'hit') {\n return

POW!

;\n } else if (effect.type === 'special') {\n // Render different special effects based on type\n switch (effect.specialType) {\n case 'lightning':\n // Pikachu's Thunder Shock\n return

\n {effect.character.icon}\n

\n {[...Array(5)].map((_, i) =>

)}\n

;\n case 'flame':\n // Charizard's Flamethrower\n return

\n \n

;\n case 'water':\n // Blastoise's Hydro Pump\n return

\n \n

\n {[...Array(10)].map((_, i) =>

)}\n

;\n case 'stun':\n // Jigglypuff's Sing\n return

♪

\n {[...Array(5)].map((_, i) =>

\n ♫\n

)}\n

;\n case 'psychic':\n // Mewtwo's Psystrike\n return

\n \n

\n {[...Array(3)].map((_, i) =>

)}\n

;\n case 'aura':\n // Lucario's Aura Sphere\n return

\n \n

;\n case 'wind':\n // Pidgeot's Hurricane\n return

\n \n

\n {[...Array(12)].map((_, i) =>

)}\n

;\n case 'rock':\n // Golem's Rock Slide\n return

\n \n

;\n default:\n // Default special effect\n return

\n {effect.character.icon}\n

;\n }\n } else if (effect.type === 'bounce') {\n return

\n BOING!\n

;\n } else if (effect.type === 'crumble') {\n return

\n {[...Array(6)].map((_, i) =>

)}\n

;\n } else if (effect.type === 'notification') {\n return

\n {effect.text}\n

;\n } else if (effect.type === 'stun') {\n // Render stun effect (stars spinning around head)\n return

\n {[...Array(3)].map((_, i) =>

\n ★\n

)}\n

;\n }\n return null;\n })}\n

\n \n {/* Controls Help Button */}\n \n \n {/* Platform Legend */}\n

Platform Types:

\n Normal\n

\n Moving\n

\n Bouncy\n

\n Crumbling\n

\n \n {/* Controls Overlay */}\n {showControls &&

Controls

\n ←→\n Move left/right\n

\n ↑\n Jump\n

\n Space\n Basic Attack\n

\n Z\n Special Attack: {selectedCharacter.specialName}\n

\n \n

Special Attack Status:

\n Cooling down - wait for blue bar\n

\n Ready to use - \"READY!\" will flash\n

\n \n

Your Special Attack:

\n {selectedCharacter.icon}\n

{selectedCharacter.specialName}

{selectedCharacter.specialDescription}

}\n

;\n };\n const renderResults = () => {\n const isPlayerWinner = winner?.id === selectedCharacter?.id;\n return

\n {/* Confetti animation */}\n {confetti.map(piece =>

)}\n \n

\n {isPlayerWinner ? 'You Win!' : 'Game Over!'}\n

\n \n {winner &&

\n {winner.icon}\n

{winner.name} wins!

\n {isPlayerWinner ? 'Congratulations! You are the champion!' : 'Better luck next time!'}\n

\n \n {isPlayerWinner && currentLevel < levelPlatforms.length &&

Level {currentLevel} Completed!

Ready for a tougher challenge?

}\n \n {isPlayerWinner && currentLevel >= levelPlatforms.length &&

All Levels Completed!

You've mastered PokéSmash!

}\n

}\n \n

\n {isPlayerWinner && currentLevel < levelPlatforms.length && }\n \n \n

\n \n {isPlayerWinner &&

\n {currentLevel < levelPlatforms.length ? `Level ${currentLevel + 1} awaits with tougher enemies and crazier platforms!` : 'You\\'ve beaten all levels! Start a new game to play again!'}\n

}\n

\n \n {/* Victory effects for player win */}\n {isPlayerWinner && <>\n

🏆

\n }\n

\n \n {gameState === 'selection' && renderCharacterSelection()}\n {gameState === 'battle' && renderBattle()}\n {gameState === 'results' && renderResults()}\n

;\n}","{\"dependencies\":{\"react\":\"18.2.0\",\"lucide-react\":\"0.441.0\"}}","thinking","Let's analyze the issue and the current code to understand what needs to be fixed:\n\nThe problem is that when initializing a level, the opponent AI jumps off the platform right away instead of staying in the center of the ground platform.\n\nLooking at the code, I need to identify where the opponent's initial position and behavior are set:\n\n1. In the `selectCharacter` function, the initial positions for both player and opponent are set:\n```javascript\n// Find the ground platform to position characters\nconst groundPlatform = levelPlatforms[0].find(p => p.id === 'ground');\nconst platformCenterX = groundPlatform.x + groundPlatform.width / 2;\nsetPlayerPosition({\n x: platformCenterX - 100, // Left of center\n y: groundPlatform.y - 60 // Just above the platform\n});\nsetOpponentPosition({\n x: platformCenterX + 100, // Right of center\n y: groundPlatform.y - 60 // Just above the platform\n});\n```\n\n2. The `updateOpponent` function handles the opponent's AI behavior. This is likely where the issue is occurring. The opponent might be making decisions to move or jump immediately after initialization.\n\n3. The `goToNextLevel` function also sets positions when advancing to a new level:\n```javascript\n// Calculate positions at the center of the ground platform\nconst platformCenterX = groundPlatform.x + groundPlatform.width / 2;\nconst playerX = platformCenterX - 100; // Left of center\nconst opponentX = platformCenterX + 100; // Right of center\nconst characterY = groundPlatform.y - 60; // Position just above the platform\n```\n\nThe issue is likely in the AI decision-making in the `updateOpponent` function. The opponent might be making movement decisions too quickly after initialization, causing it to jump off the platform.\n\nLet's look at the AI decision-making logic in the `updateOpponent` function:\n\nThe AI makes decisions based on:\n- Distance to the player\n- Random chance (aiDecision)\n- Level difficulty (aiAggressiveness, aiSpecialFrequency, aiJumpFrequency)\n\nThe issue might be that the AI is making decisions to move or jump immediately after initialization, without giving the player time to react.\n\nTo fix this, I'll modify the `updateOpponent` function to:\n\n1. Add a \"settling period\" after initialization where the opponent stays in place\n2. Make sure the opponent stays centered on the platform initially\n3. Prevent immediate jumping or moving off the platform\n\nLet's implement these changes:","changelog","Fixed the opponent's behavior so they now stay centered on the platform at the start of each level instead of immediately jumping off. They'll now properly face you for an epic showdown!","diff","isRephrased","isDebug","isSuccess","error","devbaseSchema","devbaseInsight","messageId",["B","81230"],[],"isDraft",[],"isLordOfDev","analytics",[149,153,155,157,159,161,163,165,167,169,171,173,175,177,179],{"_150":151,"_152":58},"day","2025-08-13","runCount",{"_150":154,"_152":58},"2025-08-14",{"_150":156,"_152":58},"2025-08-15",{"_150":158,"_152":58},"2025-08-16",{"_150":160,"_152":58},"2025-08-17",{"_150":162,"_152":58},"2025-08-18",{"_150":164,"_152":58},"2025-08-19",{"_150":166,"_152":58},"2025-08-20",{"_150":168,"_152":58},"2025-08-21",{"_150":170,"_152":58},"2025-08-22",{"_150":172,"_152":58},"2025-08-23",{"_150":174,"_152":58},"2025-08-24",{"_150":176,"_152":58},"2025-08-25",{"_150":178,"_152":58},"2025-08-26",{"_150":180,"_152":94},"2025-08-27","https://cdn.dev.fun/og/image/087323c5b2fa45f82276/acb1b6a3.webp","isDevbase","actionData","errors"]

say something