[{"_1":2,"_164":-5,"_165":-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":17,"_25":26,"_27":28,"_30":31,"_32":33,"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_5":44,"_56":57,"_58":41,"_59":60,"_61":62,"_63":60,"_64":60,"_65":60,"_66":60,"_67":60,"_68":60,"_69":26,"_70":26,"_71":-5,"_72":73,"_74":75,"_76":77,"_78":-5,"_79":80,"_129":17,"_130":131,"_88":31,"_90":162,"_163":17},"id","d56d9c1942d5b402c8c9","isMyApp",false,"name","whot Go!","description","Experience the silkiest, most polished Whot card game ever created! Every card animation flows like butter while the game intelligently pauses turns, preventing chaos and ensuring each move feels deliberate and satisfying. Watch as cards glide across the table in perfect harmony while the turn system waits patiently for the magic to complete.","brief","Whot with buttery-smooth animations that actually respect turn order!","isLive","isPublic",true,"tags",[29],"👑","cover","https://cdn.dev.fun/snapshot/d56d9c1942d5b402c8c9/93245_800fafd1.webp","cdnUrl","https://cdn.dev.fun/app/d56d9c1942d5b402c8c9/93245","createdAt",["D",1754573900439],"updatedAt",["D",1754585087135],"lastCommitId",["B","93245"],"tier",1,"credits",130,{"_14":45,"_46":47,"_48":47,"_49":50,"_51":47,"_52":53,"_54":55},"e1a516b0-7d90-46da-8eeb-58f649cd9eda","uniqueId","fortuneofweb3","username","solanaWallet","DtdnqvRddQspZvRV5SJX2DeqxmLYef7Hqn9LFK9LioJS","displayName","bio","","avatar","https://cdn.dev.fun/avatar/e1a516b0-7d90-46da-8eeb-58f649cd9eda/842e7d93.webp","commitCount",23,"forkCount","likeCount",0,"runsCount",5,"downvoteCount","upvoteCount","upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","code","import { useState, useEffect, useRef } from 'react';\nimport { ChevronRight, Play, Settings, Award, Shield, ArrowLeft, Wifi, Bot, ChevronLeft, ChevronRight as ChevronRightIcon, Grid3X3 } from 'lucide-react';\nimport { useDevapp, UserButton, DevappProvider } from '@devfunlabs/web-sdk';\nexport default function AppWithProvider() {\n return \n \n ;\n}\nfunction App() {\n const MAX_VISIBLE_AI_CARDS = 3;\n const [currentCard, setCurrentCard] = useState(0);\n const [isVisible, setIsVisible] = useState(false);\n const [gameState, setGameState] = useState('landing');\n const [gameData, setGameData] = useState(null);\n const [showWhotChoice, setShowWhotChoice] = useState(false);\n const [activePopup, setActivePopup] = useState(null);\n const [pendingWhotCard, setPendingWhotCard] = useState(null);\n const [animatingCards, setAnimatingCards] = useState([]);\n const [marketCardPositions, setMarketCardPositions] = useState([]);\n const [needNewMarketPositions, setNeedNewMarketPositions] = useState(false);\n const [, setPlayPilePositions] = useState([]);\n const [playerScrollIndex, setPlayerScrollIndex] = useState(0);\n const [maxVisiblePlayerCards, setMaxVisiblePlayerCards] = useState(6);\n const [showDeckView, setShowDeckView] = useState(false);\n const [isPlayerActionInProgress, setIsPlayerActionInProgress] = useState(false);\n const [, setIsAITurnInProgress] = useState(false);\n const [isAnyAnimationInProgress, setIsAnyAnimationInProgress] = useState(false);\n const [showEliminatedPopup, setShowEliminatedPopup] = useState(false);\n const [showRoundEndPopup, setShowRoundEndPopup] = useState(false);\n const [roundEndData, setRoundEndData] = useState(null);\n const [showGameLog, setShowGameLog] = useState(false);\n const [selectedLogRound, setSelectedLogRound] = useState(1);\n const [animationPositions, setAnimationPositions] = useState({});\n const [playPileCardPositions, setPlayPileCardPositions] = useState({});\n const [confettiActive, setConfettiActive] = useState(false);\n const confettiCanvasRef = useRef(null);\n const [adminCardsRevealed, setAdminCardsRevealed] = useState(false);\n const [adminMarketRevealed, setAdminMarketRevealed] = useState(false);\n const [showAdminDeckOverview, setShowAdminDeckOverview] = useState(false);\n const [leaderboardData] = useState([{\n rank: 1,\n name: 'Shadow Master',\n wins: 347,\n games: 412,\n winRate: 84.2,\n level: 89\n }, {\n rank: 2,\n name: 'Card Phantom',\n wins: 298,\n games: 356,\n winRate: 83.7,\n level: 76\n }, {\n rank: 3,\n name: 'Dark Ace',\n wins: 267,\n games: 331,\n winRate: 80.7,\n level: 68\n }, {\n rank: 4,\n name: 'Night Blade',\n wins: 189,\n games: 245,\n winRate: 77.1,\n level: 54\n }, {\n rank: 5,\n name: 'You',\n wins: 23,\n games: 35,\n winRate: 65.7,\n level: 12\n }, {\n rank: 6,\n name: 'Soul Reaper',\n wins: 156,\n games: 234,\n winRate: 66.7,\n level: 43\n }, {\n rank: 7,\n name: 'Void Walker',\n wins: 134,\n games: 189,\n winRate: 70.9,\n level: 38\n }, {\n rank: 8,\n name: 'Blood Moon',\n wins: 98,\n games: 156,\n winRate: 62.8,\n level: 29\n }]);\n const [achievements, setAchievements] = useState([{\n id: 1,\n name: 'First Victory',\n description: 'Win your first game',\n unlocked: true,\n claimed: true,\n icon: '🏆',\n reward: '100 XP'\n }, {\n id: 2,\n name: 'Card Master',\n description: 'Play 10 games',\n unlocked: true,\n claimed: false,\n icon: '🎯',\n reward: '200 XP'\n }, {\n id: 3,\n name: 'Shadow Warrior',\n description: 'Win 5 games in a row',\n unlocked: false,\n claimed: false,\n icon: '⚔️',\n reward: '500 XP'\n }, {\n id: 4,\n name: 'Whot Legend',\n description: 'Play 20 WHOT cards',\n unlocked: true,\n claimed: false,\n icon: '🔥',\n reward: '300 XP'\n }, {\n id: 5,\n name: 'Perfect Storm',\n description: 'Win without drawing cards',\n unlocked: false,\n claimed: false,\n icon: '⚡',\n reward: '1000 XP'\n }, {\n id: 6,\n name: 'Shape Shifter',\n description: 'Play all 5 shapes in one game',\n unlocked: false,\n claimed: false,\n icon: '🌟',\n reward: '250 XP'\n }, {\n id: 7,\n name: 'Speed Demon',\n description: 'Win a game in under 2 minutes',\n unlocked: false,\n claimed: false,\n icon: '🚀',\n reward: '400 XP'\n }, {\n id: 8,\n name: 'Comeback King',\n description: 'Win with 8+ cards in hand',\n unlocked: false,\n claimed: false,\n icon: '👑',\n reward: '600 XP'\n }, {\n id: 9,\n name: 'Century Club',\n description: 'Play 100 total games',\n unlocked: false,\n claimed: false,\n icon: '💯',\n reward: '1500 XP'\n }, {\n id: 10,\n name: 'Ultimate Champion',\n description: 'Reach Level 50',\n unlocked: false,\n claimed: false,\n icon: '🌟',\n reward: '2000 XP'\n }, {\n id: 11,\n name: 'Endurance Master',\n description: 'Play for 5 hours straight',\n unlocked: false,\n claimed: false,\n icon: '⏰',\n reward: '800 XP'\n }, {\n id: 12,\n name: 'Card Collector',\n description: 'Draw 1000 cards total',\n unlocked: false,\n claimed: false,\n icon: '📚',\n reward: '750 XP'\n }, {\n id: 13,\n name: 'Strategic Mind',\n description: 'Win 20 games',\n unlocked: false,\n claimed: false,\n icon: '🧠',\n reward: '1200 XP'\n }, {\n id: 14,\n name: 'Legendary Player',\n description: 'Reach Level 75',\n unlocked: false,\n claimed: false,\n icon: '👑',\n reward: '3000 XP'\n }, {\n id: 15,\n name: 'Whot Grandmaster',\n description: 'Reach Level 100',\n unlocked: false,\n claimed: false,\n icon: '💎',\n reward: '5000 XP'\n }]);\n const [musicVolume, setMusicVolume] = useState(75);\n const [soundVolume, setSoundVolume] = useState(85);\n const [showHelp, setShowHelp] = useState(false);\n const [currentXP, setCurrentXP] = useState(2150);\n const [totalGamesPlayed, setTotalGamesPlayed] = useState(35);\n const [totalWins, setTotalWins] = useState(23);\n const marketCardPositionsRef = useRef([]);\n const playPilePositionsRef = useRef([]);\n const {\n userWallet\n } = useDevapp();\n const ADMIN_WALLET = 'DtdnqvRddQspZvRV5SJX2DeqxmLYef7Hqn9LFK9LioJS';\n const isAdmin = userWallet === ADMIN_WALLET;\n const calculateLevel = xp => {\n let totalXPNeeded = 0;\n let level = 1;\n while (level <= 100) {\n const xpForThisLevel = 100 + (level - 1) * 150 + Math.floor((level - 1) / 10) * 500;\n if (totalXPNeeded + xpForThisLevel > xp) {\n break;\n }\n totalXPNeeded += xpForThisLevel;\n level++;\n }\n return {\n level: Math.min(level, 100),\n currentLevelXP: xp - totalXPNeeded,\n xpNeededForNext: level <= 100 ? 100 + level * 150 + Math.floor(level / 10) * 500 : 0,\n totalXP: xp\n };\n };\n const playerProgress = calculateLevel(currentXP);\n const startConfetti = () => {\n setConfettiActive(true);\n const canvas = confettiCanvasRef.current;\n if (!canvas) return;\n const ctx = canvas.getContext('2d');\n const particles = [];\n const colors = ['#80142C', '#a01d39', '#FFD700', '#FF6B6B', '#4ECDC4', '#45B7D1'];\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight;\n for (let i = 0; i < 150; i++) {\n particles.push({\n x: Math.random() * canvas.width,\n y: -10,\n vx: (Math.random() - 0.5) * 4,\n vy: Math.random() * 3 + 2,\n color: colors[Math.floor(Math.random() * colors.length)],\n size: Math.random() * 8 + 4,\n rotation: Math.random() * 360,\n rotationSpeed: (Math.random() - 0.5) * 10,\n gravity: 0.1\n });\n }\n const animate = () => {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n particles.forEach((particle, index) => {\n particle.x += particle.vx;\n particle.y += particle.vy;\n particle.vy += particle.gravity;\n particle.rotation += particle.rotationSpeed;\n ctx.save();\n ctx.translate(particle.x, particle.y);\n ctx.rotate(particle.rotation * Math.PI / 180);\n ctx.fillStyle = particle.color;\n ctx.fillRect(-particle.size / 2, -particle.size / 2, particle.size, particle.size);\n ctx.restore();\n if (particle.y > canvas.height + 50) {\n particles.splice(index, 1);\n }\n });\n if (particles.length > 0) {\n requestAnimationFrame(animate);\n } else {\n setConfettiActive(false);\n }\n };\n animate();\n };\n const claimAchievement = achievementId => {\n setAchievements(prevAchievements => prevAchievements.map(achievement => {\n if (achievement.id === achievementId && achievement.unlocked && !achievement.claimed) {\n const xpReward = parseInt(achievement.reward.replace(' XP', ''));\n setCurrentXP(prevXP => prevXP + xpReward);\n return {\n ...achievement,\n claimed: true\n };\n }\n return achievement;\n }));\n };\n const getXPFromGame = (won, roundsPlayed, cardsPlayed) => {\n let baseXP = 50;\n if (won) baseXP += 100;\n baseXP += roundsPlayed * 25;\n baseXP += Math.floor(cardsPlayed / 5) * 10;\n return baseXP;\n };\n useEffect(() => {\n const calculateMaxCards = () => {\n const screenWidth = window.innerWidth;\n const cardWidth = screenWidth < 768 ? 72 : screenWidth < 1024 ? 100 : 130;\n const availableWidth = screenWidth - 400;\n const cardSpacing = 6;\n const maxCards = Math.max(3, Math.floor(availableWidth / (cardWidth + cardSpacing)));\n setMaxVisiblePlayerCards(Math.min(maxCards, 7));\n const positions = {\n playPile: {\n top: '50%',\n left: '50%',\n transform: `translate(calc(-50% - ${screenWidth < 768 ? '54px' : screenWidth < 1024 ? '72px' : '90px'}), -50%)`\n },\n market: {\n top: '50%',\n left: '50%',\n transform: `translate(calc(-50% + ${screenWidth < 768 ? '54px' : screenWidth < 1024 ? '72px' : '90px'}), -50%)`\n },\n playerDecks: {\n 0: {\n bottom: '20px',\n left: '50%',\n transform: 'translateX(-50%)'\n },\n 1: {\n left: '-120px',\n top: '50%',\n transform: 'translateY(-50%) rotate(-90deg)'\n },\n 2: {\n top: '20px',\n left: '50%',\n transform: 'translateX(-50%)'\n },\n 3: {\n right: '-120px',\n top: '50%',\n transform: 'translateY(-50%) rotate(90deg)'\n }\n },\n animationStarts: {\n 0: {\n top: 'calc(100vh + 200px)',\n left: '50%',\n transform: 'translateX(-50%)',\n opacity: 0\n },\n 1: {\n left: '-200px',\n top: '50%',\n transform: 'translateY(-50%)',\n opacity: 0\n },\n 2: {\n top: '-200px',\n left: '50%',\n transform: 'translateX(-50%)',\n opacity: 0\n },\n 3: {\n left: 'calc(100% + 200px)',\n top: '50%',\n transform: 'translateY(-50%)',\n opacity: 0\n }\n },\n drawEnds: {\n 0: {\n top: 'calc(100vh - 120px)',\n left: '50%',\n transform: 'translateX(-50%)',\n opacity: 1\n },\n 1: {\n left: '-120px',\n top: '50%',\n transform: 'translateY(-50%)',\n opacity: 1\n },\n 2: {\n top: '20px',\n left: '50%',\n transform: 'translateX(-50%)',\n opacity: 1\n },\n 3: {\n left: 'calc(100% + 120px)',\n top: '50%',\n transform: 'translateY(-50%)',\n opacity: 1\n }\n }\n };\n setAnimationPositions(positions);\n };\n calculateMaxCards();\n window.addEventListener('resize', calculateMaxCards);\n return () => window.removeEventListener('resize', calculateMaxCards);\n }, []);\n useEffect(() => {\n if (gameState === 'game' && !gameData) {\n initializeGame();\n setPlayerScrollIndex(0);\n setNeedNewMarketPositions(true);\n }\n }, [gameState]);\n useEffect(() => {\n if (gameData && gameData.drawPile && needNewMarketPositions) {\n if (marketCardPositionsRef.current.length === 0) {\n const positions = Array.from({\n length: 8\n }, (_, index) => {\n const randomX = (Math.random() - 0.5) * 8;\n const randomY = (Math.random() - 0.5) * 8;\n const randomRotate = (Math.random() - 0.5) * 15;\n return {\n transform: `translate(${randomX}px, ${randomY}px) rotate(${randomRotate}deg)`,\n zIndex: index\n };\n });\n marketCardPositionsRef.current = positions;\n setMarketCardPositions(positions);\n } else {\n setMarketCardPositions(marketCardPositionsRef.current);\n }\n setNeedNewMarketPositions(false);\n }\n }, [gameData?.drawPile, needNewMarketPositions]);\n const getCardsPerPlayer = playerCount => {\n if (playerCount === 4) return 6;\n if (playerCount === 3) return 9;\n if (playerCount === 2) return 12;\n return 6;\n };\n const initializeGame = () => {\n const deck = createDeck();\n const shuffledDeck = shuffleDeck(deck);\n const players = [{\n id: 0,\n name: 'You',\n cards: [],\n isAI: false,\n eliminated: false\n }, {\n id: 1,\n name: 'AI Shadow',\n cards: [],\n isAI: true,\n eliminated: false\n }, {\n id: 2,\n name: 'AI Phantom',\n cards: [],\n isAI: true,\n eliminated: false\n }, {\n id: 3,\n name: 'AI Wraith',\n cards: [],\n isAI: true,\n eliminated: false\n }];\n const cardsPerPlayer = getCardsPerPlayer(players.length);\n console.log(`Initializing game: ${players.length} total players (1 human + ${players.length - 1} AI), ${cardsPerPlayer} cards each`);\n playPilePositionsRef.current = [];\n setPlayPilePositions([]);\n setGameData({\n players,\n playPile: [],\n drawPile: shuffledDeck,\n currentPlayer: 0,\n gamePhase: 'dealingCards',\n roundNumber: 1,\n lastAction: 'Dealing cards...',\n pendingPickCount: 0,\n generalMarketActive: false,\n generalMarketOriginatorId: null,\n gameLog: {\n 1: [`Game started with ${players.length} players: ${players.map(p => p.name).join(', ')}`, 'Cards dealt to all players', 'The shadow realm awaits your first move...']\n }\n });\n setTimeout(() => startDealingAnimation([...shuffledDeck], players, cardsPerPlayer), 500);\n };\n const startDealingAnimation = async (deckToDeal, players, cardsPerPlayer) => {\n const totalCardsToDistribute = players.length * cardsPerPlayer;\n for (let i = 0; i < totalCardsToDistribute; i++) {\n const currentPlayerIndex = i % players.length;\n const currentPlayer = players[currentPlayerIndex];\n const cardToDeal = deckToDeal[i];\n const dealingCard = {\n ...cardToDeal,\n id: `dealing-${Date.now()}-${i}`,\n startPos: getTopMarketCardPosition(),\n endPos: {\n ...animationPositions.drawEnds[currentPlayer.id],\n opacity: 0\n },\n isPlayerCard: false\n };\n setAnimatingCards(prev => [...prev, dealingCard]);\n await new Promise(resolve => {\n setTimeout(() => {\n setAnimatingCards(prev => prev.filter(c => c.id !== dealingCard.id));\n setGameData(prevData => {\n const newData = {\n ...prevData\n };\n const updatedPlayers = newData.players.map(p => ({\n ...p,\n cards: [...p.cards]\n }));\n const actualPlayerIndex = updatedPlayers.findIndex(p => p.id === currentPlayer.id);\n if (actualPlayerIndex !== -1 && !updatedPlayers[actualPlayerIndex].eliminated) {\n updatedPlayers[actualPlayerIndex].cards.push(cardToDeal);\n }\n return {\n ...newData,\n players: updatedPlayers,\n drawPile: deckToDeal.slice(i + 1)\n };\n });\n resolve();\n }, 80);\n });\n await new Promise(resolve => setTimeout(resolve, 10));\n }\n const remainingDeck = deckToDeal.slice(totalCardsToDistribute);\n if (remainingDeck.length > 0) {\n const playCard = remainingDeck[0];\n console.log(\"Dealing initial play card:\", playCard);\n const endPosition = getPlayPilePosition(0, false);\n setPlayPileCardPositions(prev => ({\n ...prev,\n [0]: endPosition\n }));\n const playPileCard = {\n ...playCard,\n id: `dealing-play-${Date.now()}`,\n startPos: getTopMarketCardPosition(),\n endPos: endPosition,\n isPlayerCard: true\n };\n setAnimatingCards(prev => [...prev, playPileCard]);\n await new Promise(resolve => {\n setTimeout(() => {\n setAnimatingCards(prev => prev.filter(c => c.id !== playPileCard.id));\n const initialCardEffects = {};\n let specialMessage = '';\n if (playCard.special === 'whot') {\n const shapes = ['●', '▲', '✚', '■', '★'];\n playCard.chosenShape = shapes[Math.floor(Math.random() * shapes.length)];\n specialMessage = ` - Auto-chosen shape: ${playCard.chosenShape}`;\n }\n setGameData(prevData => {\n const newData = {\n ...prevData,\n playPile: [playCard],\n drawPile: remainingDeck.slice(1),\n gamePhase: 'playing',\n lastAction: prevData.roundNumber === 1 ? `Game started - ${playCard.number}${playCard.shape} played${specialMessage}` : `Round ${prevData.roundNumber}`,\n ...initialCardEffects,\n generalMarketDrawCount: initialCardEffects.generalMarketActive ? 0 : undefined,\n gameLog: {\n ...prevData.gameLog,\n [prevData.roundNumber]: prevData.roundNumber === 1 ? [...(prevData.gameLog[1] || []), `Initial card: ${playCard.number}${playCard.shape} placed on table${specialMessage}`] : [...(prevData.gameLog[prevData.roundNumber] || []), `Round ${prevData.roundNumber} begins`]\n }\n };\n if (newData.players[newData.currentPlayer].isAI) {\n setTimeout(() => {\n setIsAITurnInProgress(true);\n setTimeout(async () => {\n if (!isAnyAnimationInProgress) {\n await aiTurn({\n ...newData\n });\n }\n }, 1000);\n }, 500);\n }\n return newData;\n });\n resolve();\n }, 80);\n });\n }\n };\n const createDeck = () => {\n const deck = [];\n let cardIdCounter = 0;\n const cardDefinitions = [{\n shape: '●',\n numbers: [1, 2, 3, 4, 5, 7, 8, 10, 11, 12, 13, 14]\n }, {\n shape: '▲',\n numbers: [1, 2, 3, 4, 5, 7, 8, 10, 11, 12, 13, 14]\n }, {\n shape: '✚',\n numbers: [1, 2, 3, 5, 7, 10, 11, 13, 14]\n }, {\n shape: '■',\n numbers: [1, 2, 3, 5, 7, 10, 11, 13, 14]\n }, {\n shape: '★',\n numbers: [1, 2, 3, 4, 5, 7, 8]\n }];\n const createdCards = new Map();\n cardDefinitions.forEach(({\n shape,\n numbers\n }) => {\n numbers.forEach(number => {\n const cardKey = `${shape}-${number}`;\n if (createdCards.has(cardKey)) {\n console.error(`CRITICAL ERROR: Attempted to create duplicate card: ${cardKey}`);\n throw new Error(`Duplicate card creation attempted: ${cardKey}`);\n }\n const card = {\n shape: shape,\n number: number,\n id: `unique-${shape}-${number}-${Date.now()}-${cardIdCounter++}`\n };\n if (number === 1) card.special = 'holdon';else if (number === 2) card.special = 'pick2';else if (number === 14) card.special = 'generalmarket';\n createdCards.set(cardKey, card);\n deck.push(card);\n });\n });\n for (let i = 0; i < 5; i++) {\n deck.push({\n shape: '🔥',\n number: 'WHOT',\n id: `whot-${i}-${Date.now()}-${cardIdCounter++}`,\n special: 'whot'\n });\n }\n const regularCards = deck.filter(card => card.special !== 'whot');\n const cardKeys = regularCards.map(card => `${card.shape}-${card.number}`);\n const uniqueKeys = new Set(cardKeys);\n if (cardKeys.length !== uniqueKeys.size) {\n console.error('CRITICAL: Duplicate cards found in deck after creation!');\n console.log('Total regular cards:', cardKeys.length);\n console.log('Unique combinations:', uniqueKeys.size);\n const duplicates = cardKeys.filter((key, index) => cardKeys.indexOf(key) !== index);\n console.error('Duplicate cards found:', [...new Set(duplicates)]);\n throw new Error('Deck creation failed - duplicate cards detected');\n }\n console.log(`✓ Deck created successfully: ${deck.length} total cards`);\n console.log(` - Circles: ${deck.filter(c => c.shape === '●').length}`);\n console.log(` - Triangles: ${deck.filter(c => c.shape === '▲').length}`);\n console.log(` - Crosses: ${deck.filter(c => c.shape === '✚').length}`);\n console.log(` - Squares: ${deck.filter(c => c.shape === '■').length}`);\n console.log(` - Stars: ${deck.filter(c => c.shape === '★').length}`);\n console.log(` - WHOT cards: ${deck.filter(c => c.shape === '🔥').length}`);\n console.log(`✓ All ${uniqueKeys.size} regular card combinations are unique`);\n return deck;\n };\n const shuffleDeck = deck => {\n const shuffled = [...deck];\n for (let i = shuffled.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];\n }\n return shuffled;\n };\n const canPlayCard = (card, topCard) => {\n if (!card) return false;\n if (card.special === 'whot') return true;\n if (!topCard) {\n return false;\n }\n return card.shape === topCard.shape || card.number === topCard.number;\n };\n const chooseWhotShape = shape => {\n if (!pendingWhotCard || isPlayerActionInProgress || isAnyAnimationInProgress) return;\n setIsPlayerActionInProgress(true);\n const newGameData = {\n ...gameData\n };\n const whotCard = {\n ...pendingWhotCard,\n chosenShape: shape\n };\n newGameData.playPile[newGameData.playPile.length - 1] = whotCard;\n newGameData.lastAction = `You - WHOT → ${shape}`;\n newGameData.gameLog = {\n ...newGameData.gameLog,\n [newGameData.roundNumber]: [...(newGameData.gameLog[newGameData.roundNumber] || []), `You played WHOT and chose ${shape} as the active shape`]\n };\n setShowWhotChoice(false);\n setPendingWhotCard(null);\n if (newGameData.players[0].cards.length === 0) {\n endRound(newGameData);\n } else {\n nextTurn(newGameData);\n }\n setGameData(newGameData);\n setIsPlayerActionInProgress(false);\n };\n const getExactCardPosition = (playerIndex, cardIndex, totalCards, clampToVisible = true) => {\n if (!animationPositions.playerDecks) return {\n left: '50%',\n top: '50%',\n transform: 'translate(-50%, -50%)'\n };\n const basePosition = animationPositions.playerDecks[playerIndex];\n const cardWidth = window.innerWidth < 768 ? 72 : window.innerWidth < 1024 ? 100 : 130;\n const cardSpacing = 6;\n const MAX_VISIBLE_AI_CARDS = 3;\n if (playerIndex === 0) {\n const effectiveCardIndex = clampToVisible ? Math.max(0, Math.min(cardIndex, totalCards - 1)) : cardIndex;\n const totalHandWidth = totalCards * cardWidth + (totalCards - 1) * cardSpacing;\n const startX = (window.innerWidth - totalHandWidth) / 2;\n const cardX = startX + effectiveCardIndex * (cardWidth + cardSpacing);\n return {\n position: 'fixed',\n left: `${cardX}px`,\n bottom: basePosition.bottom,\n transform: basePosition.transform || ''\n };\n } else if (playerIndex === 1) {\n const effectiveCardIndex = clampToVisible ? Math.min(cardIndex, MAX_VISIBLE_AI_CARDS - 1) : cardIndex;\n const cardY = window.innerHeight / 2 - (MAX_VISIBLE_AI_CARDS * cardWidth + (MAX_VISIBLE_AI_CARDS - 1) * cardSpacing) / 2 + effectiveCardIndex * (cardWidth + cardSpacing);\n return {\n position: 'fixed',\n left: basePosition.left,\n top: `${cardY}px`,\n transform: basePosition.transform || ''\n };\n } else if (playerIndex === 2) {\n const effectiveCardIndex = clampToVisible ? Math.min(cardIndex, MAX_VISIBLE_AI_CARDS - 1) : cardIndex;\n const cardX = window.innerWidth / 2 - (MAX_VISIBLE_AI_CARDS * cardWidth + (MAX_VISIBLE_AI_CARDS - 1) * cardSpacing) / 2 + effectiveCardIndex * (cardWidth + cardSpacing);\n return {\n position: 'fixed',\n left: `${cardX}px`,\n top: basePosition.top,\n transform: basePosition.transform || ''\n };\n } else if (playerIndex === 3) {\n const effectiveCardIndex = clampToVisible ? Math.min(cardIndex, MAX_VISIBLE_AI_CARDS - 1) : cardIndex;\n const cardY = window.innerHeight / 2 - (MAX_VISIBLE_AI_CARDS * cardWidth + (MAX_VISIBLE_AI_CARDS - 1) * cardSpacing) / 2 + effectiveCardIndex * (cardWidth + cardSpacing);\n return {\n position: 'fixed',\n right: basePosition.right,\n top: `${cardY}px`,\n transform: basePosition.transform || ''\n };\n }\n return basePosition;\n };\n const getPlayPilePosition = (cardIndex = null, storePosition = true) => {\n cardIndex = cardIndex === null ? 0 : cardIndex;\n while (playPilePositionsRef.current.length <= cardIndex) {\n const randomX = (Math.random() - 0.5) * 8;\n const randomY = (Math.random() - 0.5) * 8;\n const randomRotate = (Math.random() - 0.5) * 15;\n playPilePositionsRef.current.push({\n transform: `translate(${randomX}px, ${randomY}px) rotate(${randomRotate}deg)`,\n zIndex: 30 + playPilePositionsRef.current.length\n });\n }\n const cardPosition = playPilePositionsRef.current[cardIndex];\n const relativeCardStyle = {\n transform: cardPosition.transform,\n zIndex: cardPosition.zIndex\n };\n if (storePosition) {\n setPlayPileCardPositions(prev => ({\n ...prev,\n [cardIndex]: relativeCardStyle\n }));\n }\n return relativeCardStyle;\n };\n const getMarketCardPosition = index => {\n return marketCardPositionsRef.current[index] || marketCardPositions[index] || {\n transform: 'translate(0px, 0px) rotate(0deg)',\n zIndex: index\n };\n };\n const scrollPlayerCards = direction => {\n if (!gameData) return;\n const playerCards = gameData.players[0].cards;\n const maxScroll = Math.max(0, playerCards.length - maxVisiblePlayerCards);\n if (direction === 'left') {\n setPlayerScrollIndex(Math.max(0, playerScrollIndex - 1));\n } else if (direction === 'right') {\n setPlayerScrollIndex(Math.min(maxScroll, playerScrollIndex + 1));\n }\n };\n const isCardPlayable = (card, topCard) => {\n if (card.special === 'whot') return true;\n if (!topCard) {\n return false;\n }\n if (topCard.chosenShape) {\n return card.shape === topCard.chosenShape;\n }\n return card.shape === topCard.shape || card.number === topCard.number;\n };\n const hasPlayableCardsOutsideRange = () => {\n if (!gameData || gameData.currentPlayer !== 0) return {\n left: false,\n right: false\n };\n const player = gameData.players[0];\n const topCard = gameData.playPile[gameData.playPile.length - 1];\n const leftCards = player.cards.slice(0, playerScrollIndex);\n const hasPlayableLeft = leftCards.some(card => isCardPlayable(card, topCard));\n const rightCards = player.cards.slice(playerScrollIndex + maxVisiblePlayerCards);\n const hasPlayableRight = rightCards.some(card => isCardPlayable(card, topCard));\n return {\n left: hasPlayableLeft,\n right: hasPlayableRight\n };\n };\n const playCard = cardIndex => {\n if (!gameData || gameData.currentPlayer !== 0 || isPlayerActionInProgress || isAnyAnimationInProgress || animatingCards.length > 0) return;\n setIsPlayerActionInProgress(true);\n setIsAnyAnimationInProgress(true);\n const newGameData = JSON.parse(JSON.stringify(gameData));\n const player = newGameData.players[0];\n const actualCardIndex = cardIndex + playerScrollIndex;\n const card = player.cards[actualCardIndex];\n const topCard = newGameData.playPile[newGameData.playPile.length - 1];\n const newCardRelativeStyle = getPlayPilePosition(newGameData.playPile.length, false);\n if (topCard.chosenShape) {\n if (card.special !== 'whot' && card.shape !== topCard.chosenShape) {\n setIsPlayerActionInProgress(false);\n setIsAnyAnimationInProgress(false);\n return;\n }\n } else if (!canPlayCard(card, topCard)) {\n setIsPlayerActionInProgress(false);\n setIsAnyAnimationInProgress(false);\n return;\n }\n const endPosition = {\n ...animationPositions.playPile,\n transform: `${animationPositions.playPile.transform} ${newCardRelativeStyle.transform}`,\n zIndex: newCardRelativeStyle.zIndex\n };\n const animatingCard = {\n ...card,\n id: `animating-${Date.now()}-${actualCardIndex}`,\n startPos: getExactCardPosition(0, actualCardIndex, player.cards.length, true),\n endPos: endPosition,\n isPlayerCard: true\n };\n setAnimatingCards(prev => [...prev, animatingCard]);\n player.cards = player.cards.filter((_, idx) => idx !== actualCardIndex);\n newGameData.playPile = [...newGameData.playPile, card];\n const newCardsLength = player.cards.length;\n const maxScroll = Math.max(0, newCardsLength - maxVisiblePlayerCards);\n if (newCardsLength <= maxVisiblePlayerCards) {\n setPlayerScrollIndex(0);\n } else if (playerScrollIndex >= maxScroll) {\n setPlayerScrollIndex(maxScroll);\n } else if (actualCardIndex < playerScrollIndex + Math.floor(maxVisiblePlayerCards / 2)) {\n setPlayerScrollIndex(Math.max(0, playerScrollIndex - 1));\n }\n setTimeout(() => {\n getPlayPilePosition(newGameData.playPile.length - 1, true);\n setAnimatingCards(prev => prev.filter(c => c.id !== animatingCard.id));\n if (card.special === 'pick2') {\n newGameData.pendingPickCount += 2;\n newGameData.lastAction = `You - ${card.number}${card.shape} pick2`;\n newGameData.gameLog = {\n ...newGameData.gameLog,\n [newGameData.roundNumber]: [...(newGameData.gameLog[newGameData.roundNumber] || []), `You played ${card.number}${card.shape} (Pick 2) - Next player must draw 2 cards`]\n };\n } else if (card.special === 'whot') {\n setPendingWhotCard(card);\n setShowWhotChoice(true);\n setGameData(newGameData);\n setIsPlayerActionInProgress(false);\n setIsAnyAnimationInProgress(false);\n return;\n } else if (card.special === 'holdon') {\n newGameData.lastAction = `You - ${card.number}${card.shape} hold`;\n newGameData.skipNextPlayer = true;\n newGameData.gameLog = {\n ...newGameData.gameLog,\n [newGameData.roundNumber]: [...(newGameData.gameLog[newGameData.roundNumber] || []), `You played ${card.number}${card.shape} (Hold On) - Next player's turn skipped`]\n };\n } else if (card.special === 'generalmarket') {\n newGameData.lastAction = `You - ${card.number}${card.shape} gen`;\n newGameData.generalMarketActive = true;\n newGameData.generalMarketOriginatorId = 0;\n newGameData.gameLog = {\n ...newGameData.gameLog,\n [newGameData.roundNumber]: [...(newGameData.gameLog[newGameData.roundNumber] || []), `You played ${card.number}${card.shape} (General Market) - All other players must draw from market`]\n };\n } else {\n newGameData.lastAction = `You - ${card.number}${card.shape}`;\n newGameData.gameLog = {\n ...newGameData.gameLog,\n [newGameData.roundNumber]: [...(newGameData.gameLog[newGameData.roundNumber] || []), `You played ${card.number}${card.shape}`]\n };\n }\n if (player.cards.length === 0) {\n endRound(newGameData);\n setGameData(newGameData);\n setIsPlayerActionInProgress(false);\n setIsAnyAnimationInProgress(false);\n } else {\n setGameData(newGameData);\n setIsPlayerActionInProgress(false);\n setIsAnyAnimationInProgress(false);\n if (newGameData.gamePhase === 'playing') {\n nextTurn(newGameData);\n }\n }\n }, 800);\n };\n const nextTurn = gameData => {\n let nextPlayer = gameData.currentPlayer;\n let playersToSkip = gameData.skipNextPlayer ? 1 : 0;\n do {\n nextPlayer = (nextPlayer + 1) % gameData.players.length;\n } while (gameData.players[nextPlayer].eliminated);\n while (playersToSkip > 0) {\n do {\n nextPlayer = (nextPlayer + 1) % gameData.players.length;\n } while (gameData.players[nextPlayer].eliminated);\n playersToSkip--;\n }\n gameData.currentPlayer = nextPlayer;\n gameData.skipNextPlayer = false;\n if (gameData.generalMarketActive && nextPlayer === gameData.generalMarketOriginatorId) {\n gameData.generalMarketActive = false;\n gameData.generalMarketOriginatorId = null;\n gameData.lastAction += ' General Market effect ends.';\n gameData.gameLog = {\n ...gameData.gameLog,\n [gameData.roundNumber]: [...(gameData.gameLog[gameData.roundNumber] || []), 'General Market effect ended - all players have drawn']\n };\n }\n setGameData({\n ...gameData\n });\n if (gameData.players[nextPlayer].isAI) {\n setIsAITurnInProgress(true);\n setTimeout(async () => {\n if (!isAnyAnimationInProgress) {\n await aiTurn({\n ...gameData,\n currentPlayer: nextPlayer\n });\n }\n }, 1000);\n }\n };\n const aiTurn = async gameData => {\n if (!gameData.players[gameData.currentPlayer].isAI || isAnyAnimationInProgress) {\n setIsAITurnInProgress(false);\n return;\n }\n setIsAnyAnimationInProgress(true);\n let newGameData = JSON.parse(JSON.stringify(gameData));\n const currentPlayer = newGameData.players[newGameData.currentPlayer];\n if (newGameData.pendingPickCount > 0 || newGameData.generalMarketActive && currentPlayer.id !== newGameData.generalMarketOriginatorId) {\n const count = newGameData.pendingPickCount > 0 ? newGameData.pendingPickCount : 1;\n const isPending = newGameData.pendingPickCount > 0;\n const isGeneral = newGameData.generalMarketActive && currentPlayer.id !== newGameData.generalMarketOriginatorId && !isPending;\n await animateDrawCards(newGameData, currentPlayer, count, isPending, isGeneral);\n setIsAITurnInProgress(false);\n return;\n }\n const topCard = newGameData.playPile[newGameData.playPile.length - 1];\n const playableCards = currentPlayer.cards.map((card, index) => ({\n card,\n index\n })).filter(({\n card\n }) => {\n if (!topCard) return card.special === 'whot';\n if (topCard.chosenShape) return card.special === 'whot' || card.shape === topCard.chosenShape;\n return canPlayCard(card, topCard);\n });\n if (playableCards.length > 0) {\n const randomCard = playableCards[Math.floor(Math.random() * playableCards.length)];\n const cardToPlay = {\n ...randomCard.card\n };\n const currentTopCard = newGameData.playPile[newGameData.playPile.length - 1];\n let isValidPlay = false;\n if (cardToPlay.special === 'whot') {\n isValidPlay = true;\n } else if (!currentTopCard) {\n isValidPlay = false;\n } else if (currentTopCard.chosenShape) {\n isValidPlay = cardToPlay.shape === currentTopCard.chosenShape;\n } else {\n isValidPlay = cardToPlay.shape === currentTopCard.shape || cardToPlay.number === currentTopCard.number;\n }\n if (!isValidPlay) {\n console.warn(`AI ${currentPlayer.name} attempted invalid play: ${cardToPlay.number}${cardToPlay.shape} on ${currentTopCard?.number}${currentTopCard?.chosenShape || currentTopCard?.shape}`);\n await animateDrawCards(newGameData, currentPlayer, 1, false, false);\n setIsAITurnInProgress(false);\n setIsAnyAnimationInProgress(false);\n return;\n }\n const newCardRelativeStyle = getPlayPilePosition(newGameData.playPile.length, false);\n const endPosition = {\n ...animationPositions.playPile,\n transform: `${animationPositions.playPile.transform} ${newCardRelativeStyle.transform}`,\n zIndex: newCardRelativeStyle.zIndex\n };\n const animatingCard = {\n ...cardToPlay,\n id: `animating-${Date.now()}-${randomCard.index}`,\n startPos: animationPositions.animationStarts[currentPlayer.id],\n endPos: endPosition,\n isPlayerCard: true\n };\n setAnimatingCards(prev => [...prev, animatingCard]);\n await new Promise(resolve => setTimeout(resolve, 800));\n currentPlayer.cards = currentPlayer.cards.filter((_, idx) => idx !== randomCard.index);\n newGameData.playPile = [...newGameData.playPile, cardToPlay];\n setAnimatingCards(prev => prev.filter(c => c.id !== animatingCard.id));\n if (cardToPlay.special === 'whot') {\n const shapes = ['●', '▲', '✚', '■', '★'];\n cardToPlay.chosenShape = shapes[Math.floor(Math.random() * shapes.length)];\n newGameData.lastAction = `${currentPlayer.name.split(' ')[0]} - WHOT → ${cardToPlay.chosenShape}`;\n newGameData.gameLog = {\n ...newGameData.gameLog,\n [newGameData.roundNumber]: [...(newGameData.gameLog[newGameData.roundNumber] || []), `${currentPlayer.name} played WHOT and chose ${cardToPlay.chosenShape} as the active shape`]\n };\n } else if (cardToPlay.special === 'pick2') {\n newGameData.pendingPickCount += 2;\n newGameData.lastAction = `${currentPlayer.name.split(' ')[0]} - ${cardToPlay.number}${cardToPlay.shape} pick2`;\n newGameData.gameLog = {\n ...newGameData.gameLog,\n [newGameData.roundNumber]: [...(newGameData.gameLog[newGameData.roundNumber] || []), `${currentPlayer.name} played ${cardToPlay.number}${cardToPlay.shape} (Pick 2) - Next player must draw 2 cards`]\n };\n } else if (cardToPlay.special === 'holdon') {\n newGameData.lastAction = `${currentPlayer.name.split(' ')[0]} - ${cardToPlay.number}${cardToPlay.shape} hold`;\n newGameData.skipNextPlayer = true;\n newGameData.gameLog = {\n ...newGameData.gameLog,\n [newGameData.roundNumber]: [...(newGameData.gameLog[newGameData.roundNumber] || []), `${currentPlayer.name} played ${cardToPlay.number}${cardToPlay.shape} (Hold On) - Next player's turn skipped`]\n };\n } else if (cardToPlay.special === 'generalmarket') {\n newGameData.lastAction = `${currentPlayer.name.split(' ')[0]} - ${cardToPlay.number}${cardToPlay.shape} gen`;\n newGameData.generalMarketActive = true;\n newGameData.generalMarketOriginatorId = newGameData.currentPlayer;\n newGameData.gameLog = {\n ...newGameData.gameLog,\n [newGameData.roundNumber]: [...(newGameData.gameLog[newGameData.roundNumber] || []), `${currentPlayer.name} played ${cardToPlay.number}${cardToPlay.shape} (General Market) - All other players must draw from market`]\n };\n } else {\n newGameData.lastAction = `${currentPlayer.name.split(' ')[0]} - ${cardToPlay.number}${cardToPlay.shape}`;\n newGameData.gameLog = {\n ...newGameData.gameLog,\n [newGameData.roundNumber]: [...(newGameData.gameLog[newGameData.roundNumber] || []), `${currentPlayer.name} played ${cardToPlay.number}${cardToPlay.shape}`]\n };\n }\n if (currentPlayer.cards.length === 0) {\n endRound(newGameData);\n setGameData(newGameData);\n setIsAITurnInProgress(false);\n return;\n }\n setGameData(newGameData);\n setIsAITurnInProgress(false);\n setIsAnyAnimationInProgress(false);\n nextTurn(newGameData);\n } else {\n await animateDrawCards(newGameData, currentPlayer, 1, false, false);\n setIsAITurnInProgress(false);\n return;\n }\n };\n const calculateCardTotal = cards => {\n return cards.reduce((total, card) => {\n if (card.number === 'WHOT') return total + 20;\n return total + parseInt(card.number);\n }, 0);\n };\n const endRound = gameData => {\n const activePlayers = gameData.players.filter(p => !p.eliminated);\n const playersWithTotals = activePlayers.map(p => ({\n ...p,\n cardTotal: calculateCardTotal(p.cards),\n cardCount: p.cards.length\n }));\n let maxTotal = Math.max(...playersWithTotals.map(p => p.cardTotal));\n const playersWithMaxTotal = playersWithTotals.filter(p => p.cardTotal === maxTotal);\n const eliminatedPlayer = playersWithMaxTotal[Math.floor(Math.random() * playersWithMaxTotal.length)];\n const roundWinner = playersWithTotals.find(p => p.cardTotal === Math.min(...playersWithTotals.map(p => p.cardTotal)));\n const roundEndInfo = {\n winner: roundWinner,\n players: playersWithTotals.map(p => ({\n ...p,\n cardCount: p.cards.length,\n cardTotal: p.cardTotal,\n cards: p.cards.slice()\n })),\n eliminatedPlayer,\n maxCards: maxTotal,\n roundNumber: gameData.roundNumber\n };\n setRoundEndData(roundEndInfo);\n setTimeout(() => {\n setShowRoundEndPopup(true);\n setTimeout(() => startConfetti(), 200);\n }, 2500);\n setTimeout(() => {\n setGameData(prevData => {\n const nextRoundGameData = JSON.parse(JSON.stringify(prevData));\n const eliminatedPlayerInNewData = nextRoundGameData.players.find(p => p.id === eliminatedPlayer.id);\n if (eliminatedPlayerInNewData) {\n eliminatedPlayerInNewData.eliminated = true;\n }\n nextRoundGameData.lastAction = `${eliminatedPlayer.name.split(' ')[0]} eliminated`;\n const currentRoundLog = nextRoundGameData.gameLog[nextRoundGameData.roundNumber] || [];\n nextRoundGameData.gameLog[nextRoundGameData.roundNumber] = [...currentRoundLog, `Round ${nextRoundGameData.roundNumber}: ${eliminatedPlayer.name} eliminated with ${maxTotal} total card points`];\n if (eliminatedPlayer.id === 0) {\n setShowEliminatedPopup(true);\n }\n nextRoundGameData.roundNumber++;\n const remainingPlayers = nextRoundGameData.players.filter(p => !p.eliminated);\n if (remainingPlayers.length <= 1) {\n nextRoundGameData.gamePhase = 'gameEnd';\n const winner = remainingPlayers.length > 0 ? remainingPlayers[0] : roundWinner;\n nextRoundGameData.winner = winner;\n nextRoundGameData.lastAction = `${winner.name.split(' ')[0]} wins!`;\n nextRoundGameData.gameLog[nextRoundGameData.roundNumber] = [`GAME OVER: ${winner.name} wins the game!`];\n setShowRoundEndPopup(false);\n return nextRoundGameData;\n } else {\n const newDeck = createDeck();\n const shuffledNewDeck = shuffleDeck(newDeck);\n nextRoundGameData.players.forEach(player => {\n player.cards = [];\n });\n nextRoundGameData.playPile = [];\n nextRoundGameData.drawPile = shuffledNewDeck;\n const firstPlayerIndex = nextRoundGameData.players.findIndex(p => !p.eliminated);\n nextRoundGameData.currentPlayer = firstPlayerIndex !== -1 ? firstPlayerIndex : 0;\n nextRoundGameData.pendingPickCount = 0;\n nextRoundGameData.generalMarketActive = false;\n nextRoundGameData.generalMarketOriginatorId = null;\n nextRoundGameData.skipNextPlayer = false;\n nextRoundGameData.gamePhase = 'dealingCards';\n nextRoundGameData.lastAction = 'Dealing cards...';\n nextRoundGameData.gameLog[nextRoundGameData.roundNumber] = [`Round ${nextRoundGameData.roundNumber} begins with remaining players.`, `New deck created and shuffled.`];\n setAnimatingCards([]);\n setPlayerScrollIndex(0);\n setNeedNewMarketPositions(true);\n playPilePositionsRef.current = [];\n setPlayPilePositions([]);\n setPlayPileCardPositions({});\n setIsAITurnInProgress(false);\n setIsPlayerActionInProgress(false);\n setIsAnyAnimationInProgress(false);\n setSelectedLogRound(nextRoundGameData.roundNumber);\n setShowRoundEndPopup(false);\n setRoundEndData(null);\n setConfettiActive(false);\n setTimeout(() => {\n startDealingAnimation([...shuffledNewDeck], remainingPlayers, getCardsPerPlayer(remainingPlayers.length));\n }, 100);\n return nextRoundGameData;\n }\n });\n }, 10000);\n };\n const getTopMarketCardPosition = () => {\n if (!animationPositions.market) {\n const offset = window.innerWidth < 768 ? '54px' : window.innerWidth < 1024 ? '72px' : '90px';\n return {\n top: '50%',\n left: '50%',\n transform: `translate(calc(-50% + ${offset}), -50%)`\n };\n }\n const topCardIndex = Math.min(gameData?.drawPile?.length || 0, 8) - 1;\n if (topCardIndex < 0) {\n return animationPositions.market;\n }\n const cardPosition = getMarketCardPosition(topCardIndex);\n return {\n ...animationPositions.market,\n transform: `${animationPositions.market.transform} ${cardPosition.transform}`\n };\n };\n const animateDrawCards = async (gameDataToUse, player, count, isPending = false, isGeneral = false) => {\n setIsAnyAnimationInProgress(true);\n for (let i = 0; i < count; i++) {\n if (gameDataToUse.drawPile.length <= 1) {\n reshuffleMarket(gameDataToUse);\n }\n if (gameDataToUse.drawPile.length === 0) break;\n const drawnCard = gameDataToUse.drawPile[gameDataToUse.drawPile.length - 1];\n gameDataToUse.drawPile = gameDataToUse.drawPile.slice(0, -1);\n player.cards = [...player.cards, drawnCard];\n const animatingCard = {\n ...drawnCard,\n id: `draw-${Date.now()}-${i}`,\n startPos: getTopMarketCardPosition(),\n endPos: {\n ...animationPositions.drawEnds[player.id],\n opacity: 0\n },\n isPlayerCard: false\n };\n setAnimatingCards(prev => [...prev, animatingCard]);\n await new Promise(resolve => {\n setTimeout(() => {\n setAnimatingCards(prev => prev.filter(c => c.id !== animatingCard.id));\n resolve();\n }, 800);\n });\n await new Promise(resolve => setTimeout(resolve, 100));\n }\n if (player.id === 0) {\n const newTotal = player.cards.length;\n if (newTotal > maxVisiblePlayerCards) setPlayerScrollIndex(newTotal - maxVisiblePlayerCards);\n setIsPlayerActionInProgress(false);\n }\n gameDataToUse.lastAction = isPending ? `${player.name.split(' ')[0]} - pick${count}` : isGeneral ? `${player.name.split(' ')[0]} - market` : `${player.name.split(' ')[0]} - market`;\n gameDataToUse.gameLog = {\n ...gameDataToUse.gameLog,\n [gameDataToUse.roundNumber]: [...(gameDataToUse.gameLog[gameDataToUse.roundNumber] || []), isPending ? `${player.name} drew ${count} card${count > 1 ? 's' : ''} (penalty)` : isGeneral ? `${player.name} drew ${count} card${count > 1 ? 's' : ''} (general market)` : `${player.name} drew ${count} card${count > 1 ? 's' : ''} from market`]\n };\n if (isPending) gameDataToUse.pendingPickCount = 0;\n setGameData({\n ...gameDataToUse\n });\n setIsAnyAnimationInProgress(false);\n nextTurn(gameDataToUse);\n };\n const drawCard = async () => {\n if (!gameData || gameData.currentPlayer !== 0 || animatingCards.length > 0 || isPlayerActionInProgress || isAnyAnimationInProgress) return;\n setIsPlayerActionInProgress(true);\n setIsAnyAnimationInProgress(true);\n const newGameData = {\n ...gameData\n };\n const player = newGameData.players[0];\n const count = newGameData.pendingPickCount > 0 ? newGameData.pendingPickCount : newGameData.generalMarketActive && newGameData.currentPlayer !== newGameData.generalMarketOriginatorId ? 1 : 1;\n const isPending = newGameData.pendingPickCount > 0;\n const isGeneral = newGameData.generalMarketActive && newGameData.currentPlayer !== newGameData.generalMarketOriginatorId && !isPending;\n await animateDrawCards(newGameData, player, count, isPending, isGeneral);\n };\n const reshuffleMarket = gameData => {\n if (gameData.playPile.length <= 1) return;\n const topCard = gameData.playPile[gameData.playPile.length - 1];\n const cardsToShuffle = gameData.playPile.slice(0, -1);\n gameData.drawPile = shuffleDeck(cardsToShuffle);\n gameData.playPile = [topCard];\n const topCardPosition = playPileCardPositions[gameData.playPile.length - 1] || getPlayPilePosition(0, false);\n playPilePositionsRef.current = [playPilePositionsRef.current[gameData.playPile.length - 1] || {\n transform: 'translate(0px, 0px) rotate(0deg)',\n zIndex: 30\n }];\n setPlayPileCardPositions({\n 0: topCardPosition\n });\n setNeedNewMarketPositions(true);\n gameData.lastAction += ' (Market reshuffled)';\n gameData.gameLog = {\n ...gameData.gameLog,\n [gameData.roundNumber]: [...(gameData.gameLog[gameData.roundNumber] || []), 'Market deck was reshuffled from played cards']\n };\n };\n const getCardBackSVG = () => {\n return `\n \n `;\n };\n const getCardSVGContent = card => {\n const numberText = card.number;\n if (card.special === 'whot' || card.shape === '🔥') {\n const hasChosenShape = card.chosenShape;\n const firstWhotY = hasChosenShape ? \"110\" : \"120\";\n const secondWhotY = hasChosenShape ? \"150\" : \"140\";\n const chosenShapeElement = hasChosenShape ? `${card.chosenShape}` : '';\n return `\n \n `;\n }\n const svgTemplates = {\n '●': num => `\n \n `,\n '✚': num => `\n \n `,\n '■': num => `\n \n `,\n '▲': num => `\n \n `,\n '★': num => `\n \n `\n };\n return svgTemplates[card.shape] ? svgTemplates[card.shape](numberText) : '';\n };\n const cards = [{\n shape: '●',\n number: '1',\n color: '#80142c'\n }, {\n shape: '▲',\n number: '7',\n color: '#a01d39'\n }, {\n shape: '✚',\n number: '13',\n color: '#661123'\n }, {\n shape: '■',\n number: '10',\n color: '#550f1e'\n }, {\n shape: '🔥',\n number: 'WHOT',\n color: '#4a0c1a'\n }];\n useEffect(() => {\n setIsVisible(true);\n const interval = setInterval(() => {\n setCurrentCard(prev => (prev + 1) % cards.length);\n }, 2000);\n return () => clearInterval(interval);\n }, []);\n const pageStyles = {\n landing: {\n background: '#000000'\n },\n menu: {\n background: '#000000'\n },\n game: {\n background: 'radial-gradient(ellipse at center, #1a1a1a 0%, #000000 70%)',\n perspective: '1000px'\n }\n };\n return

\n \n {}\n

\n {gameState === 'landing' ?

\n {}\n

\n {cards.map((card, index) =>

)}\n

\n {}\n

\n \n whot\n \n Go!\n
\n

\n ◆ THE CLASSIC 4-PLAYER CARD GAME ◆\n

\n {}\n

\n Experience the beloved classic card game for everyone\n

\n Strategic thinking meets fun gameplay in exciting 4-player matches with friends or AI opponents.\n

\n {}\n

\n \n

\n \n {}\n

\n Connect your wallet and start playing the classic African card game that brings families together.\n

: gameState === 'menu' ?

\n \n

\n Main Menu\n

\n Select an Option\n

\n \n \n \n \n

\n Choose an option above to get started with Whot Go!\n

\n {}\n {activePopup &&

setActivePopup(null)}>\n

e.stopPropagation()}>\n {}\n {activePopup === 'battle' &&

\n \n

\n Game Modes\n

\n Select How You Want to Play\n

\n \n

Online Multiplayer

Play with other players online

\n \n Coming Soon\n \n

\n \n

\n Select your preferred game mode to start playing.\n

}\n {}\n {activePopup === 'profile' &&

\n \n

\n Player Profile\n

\n Your Game Performance\n

\n \n {}\n

\n \n ⭐\n \n Level Progress\n

\n Level {playerProgress.level}\n {playerProgress.totalXP.toLocaleString()} Total XP\n

\n {playerProgress.currentLevelXP.toLocaleString()} XP\n {playerProgress.level < 100 && {playerProgress.xpNeededForNext.toLocaleString()} XP needed for Level {playerProgress.level + 1}}\n {playerProgress.level >= 100 && MAX LEVEL REACHED!}\n

\n \n 📊\n \n Your Game Stats\n

{totalGamesPlayed}

Games Played

{totalWins}

Games Won

{(totalWins / totalGamesPlayed * 100).toFixed(1)}%

Win Rate

{playerProgress.level}

Player Level

\n Keep playing to improve your statistics and climb the leaderboards.\n

}\n {activePopup === 'achievements' &&

\n \n

\n Achievements & Badges\n

\n Track Your Progress\n

\n {achievements.map(achievement =>

\n {achievement.icon}\n

{achievement.name}

{achievement.description}

\n {achievement.unlocked && !achievement.claimed &&

}\n

\n {achievement.reward}\n {achievement.unlocked && !achievement.claimed && }\n {achievement.claimed && ✓ Claimed}\n {!achievement.unlocked && 🔒 Locked}\n

)}\n

\n Complete challenges to unlock new achievements and earn rewards!\n

}\n {}\n {activePopup === 'leaderboards' &&

\n \n \n

\n Leaderboards\n

\n Top Players\n

\n \n \n \n \n \n \n \n \n \n \n {leaderboardData.map((player, index) => \n \n \n \n \n )}\n \n

Rank	Player	Wins	Win Rate
\n \n #{player.rank}\n {player.rank === 1 && 👑}\n {player.rank === 2 && 🥈}\n {player.rank === 3 && 🥉}\n \n	\n \n \n {player.name}\n \n Level {player.level} \n \n	\n {player.wins} \n {player.games} battles \n	\n \n {player.winRate}%\n \n

\n Compete with other players to climb the rankings and earn your place at the top.\n

}\n {}\n {activePopup === 'config' &&

\n \n

\n Settings\n

\n Customize Your Experience\n

\n {}\n

\n \n 🔊\n \n Audio Settings\n

\n Music Volume\n \n setMusicVolume(e.target.value)} />\n \n \n

\n Sound Effects\n \n setSoundVolume(e.target.value)} />\n \n \n

\n {}\n

\n \n 👤\n \n Account Settings\n

\n \n \n

\n Customize your gaming experience to your preferences.\n

}\n

: gameState === 'game' && gameData ?

\n {}\n

\n \n

\n {}\n {isAdmin &&

\n \n \n \n

}\n \n

\n {}\n

\n {(() => {\n if (gameData.playPile.length === 0) return '?';\n const topCard = gameData.playPile[gameData.playPile.length - 1];\n if (!topCard) return '?';\n if (topCard.chosenShape) {\n return topCard.chosenShape;\n }\n return topCard.shape === '🔥' ? '?' : topCard.shape;\n })()}\n

\n {}\n \n

\n {}\n

\n {gameData.playPile.length > 0 ? <>\n {gameData.playPile.map((card, cardIndex) => {\n const position = playPileCardPositions[cardIndex] || getPlayPilePosition(cardIndex, false);\n return

;\n })}\n :

\n Play
Pile\n

}\n

\n {}\n

{\n const shouldGlow = !isAnyAnimationInProgress && gameData.currentPlayer === 0 && (gameData.pendingPickCount > 0 || gameData.generalMarketActive && gameData.currentPlayer !== gameData.generalMarketOriginatorId || gameData.pendingPickCount === 0 && !gameData.generalMarketActive && (() => {\n const topCard = gameData.playPile[gameData.playPile.length - 1];\n if (!topCard) return false;\n const playableCards = gameData.players[0].cards.filter(card => {\n if (topCard && topCard.chosenShape) {\n return card.special === 'whot' || card.shape === topCard.chosenShape;\n }\n return canPlayCard(card, topCard);\n });\n return playableCards.length === 0;\n })());\n return shouldGlow ? 'animate-pulse' : '';\n })()}`} style={{\n filter: (() => {\n const shouldGlow = gameData.currentPlayer === 0 && (gameData.pendingPickCount > 0 || gameData.generalMarketActive && gameData.currentPlayer !== gameData.generalMarketOriginatorId || gameData.pendingPickCount === 0 && !gameData.generalMarketActive && (() => {\n const topCard = gameData.playPile[gameData.playPile.length - 1];\n if (!topCard) return false;\n const playableCards = gameData.players[0].cards.filter(card => {\n if (topCard && topCard.chosenShape) {\n return card.special === 'whot' || card.shape === topCard.chosenShape;\n }\n return canPlayCard(card, topCard);\n });\n return playableCards.length === 0;\n })());\n return shouldGlow ? 'drop-shadow(0 0 15px rgba(239, 68, 68, 0.8)) drop-shadow(0 0 25px rgba(239, 68, 68, 0.4))' : 'none';\n })()\n }}>\n {}\n {Array.from({\n length: Math.min(gameData.drawPile.length, 8)\n }, (_, index) =>

)}\n {}\n {gameData.drawPile.length === 0 &&

\n Empty\n

}\n

\n {}\n {}\n {roundEndData && !showRoundEndPopup &&

🎉

Round Complete!

Preparing results...

}\n {}\n {animatingCards.map(card => {\n const initialStyle = {\n transform: card.startPos.transform || 'translateZ(0)',\n opacity: card.startPos.opacity !== undefined ? card.startPos.opacity : 1,\n zIndex: 70\n };\n if (card.startPos.top !== undefined) {\n initialStyle.top = card.startPos.top;\n initialStyle.bottom = 'auto';\n } else if (card.startPos.bottom !== undefined) {\n initialStyle.bottom = card.startPos.bottom;\n initialStyle.top = 'auto';\n } else {\n initialStyle.top = 'auto';\n initialStyle.bottom = 'auto';\n }\n if (card.startPos.left !== undefined) {\n initialStyle.left = card.startPos.left;\n initialStyle.right = 'auto';\n } else if (card.startPos.right !== undefined) {\n initialStyle.right = card.startPos.right;\n initialStyle.left = 'auto';\n } else {\n initialStyle.left = 'auto';\n initialStyle.right = 'auto';\n }\n return

{\n if (el) {\n requestAnimationFrame(() => {\n el.style.transform = card.endPos.transform || 'translateZ(0)';\n el.style.opacity = card.endPos.opacity !== undefined ? card.endPos.opacity : 1;\n el.style.top = '';\n el.style.bottom = '';\n el.style.left = '';\n el.style.right = '';\n if (card.endPos.top !== undefined) {\n el.style.top = card.endPos.top;\n el.style.bottom = 'auto';\n } else if (card.endPos.bottom !== undefined) {\n el.style.bottom = card.endPos.bottom;\n el.style.top = 'auto';\n } else {\n el.style.top = 'auto';\n el.style.bottom = 'auto';\n }\n if (card.endPos.left !== undefined) {\n el.style.left = card.endPos.left;\n el.style.right = 'auto';\n } else if (card.endPos.right !== undefined) {\n el.style.right = card.endPos.right;\n el.style.left = 'auto';\n } else {\n el.style.left = 'auto';\n el.style.right = 'auto';\n }\n });\n }\n }}>\n

;\n })}\n {}\n {gameData.players.map((player, playerIndex) => {\n const isCurrentPlayer = !isAnyAnimationInProgress && gameData.currentPlayer === playerIndex;\n const pos = animationPositions.playerDecks[playerIndex];\n const maxVisibleCards = playerIndex === 0 ? maxVisiblePlayerCards : 3;\n const cardSpacing = 6;\n const visibleCards = playerIndex === 0 ? player.cards.slice(playerScrollIndex, playerScrollIndex + maxVisibleCards) : player.cards.slice(0, maxVisibleCards);\n const cardDimensions = window.innerWidth < 768 ? 'w-[72px] h-[100px]' : window.innerWidth < 1024 ? 'w-[100px] h-36' : 'w-[130px] h-[172px]';\n const topCard = gameData.playPile[gameData.playPile.length - 1];\n const canPlayerPlay = !isAnyAnimationInProgress && gameData.currentPlayer === playerIndex && !isPlayerActionInProgress;\n const playableOutsideRange = hasPlayableCardsOutsideRange();\n return

\n {player.eliminated ?

\n \n

ELIMINATED

: <>\n

\n {}\n {playerIndex === 0 && }\n {visibleCards.map((card, cardIndex) => {\n const canPlayAnyCard = canPlayerPlay && gameData.pendingPickCount === 0 && !(gameData.generalMarketActive && gameData.currentPlayer !== gameData.generalMarketOriginatorId) && !isAnyAnimationInProgress;\n const isThisCardPlayable = canPlayAnyCard && isCardPlayable(card, topCard);\n return

isThisCardPlayable && playCard(cardIndex)}>\n {playerIndex === 0 ?

\n {card.special &&

\n {card.special === 'holdon' && 'HOLD'}\n {card.special === 'pick2' && 'P2'}\n {card.special === 'generalmarket' && 'GM'}\n {card.special === 'whot' && 'WHOT'}\n

}\n

;\n })}\n {}\n {playerIndex !== 0 &&

maxVisibleCards ? 1 : 0,\n transition: 'opacity 0.3s ease-in-out'\n }}>\n +{Math.max(0, player.cards.length - maxVisibleCards)}\n

}\n {}\n {playerIndex === 0 && }\n

\n {}\n

\n {window.innerWidth < 768 ? `${player.name.split(' ')[0]} (${player.cards.length})` : `${player.name} (${player.cards.length})`}\n {playerIndex === 0 && }\n {isCurrentPlayer && !isAnyAnimationInProgress && {window.innerWidth < 768 ? '●' : '(Your Turn)'}}\n {isAnyAnimationInProgress && gameData.currentPlayer === playerIndex && {window.innerWidth < 768 ? '⏸' : '(Wait...)'}}\n {playerIndex === 0 && gameData.generalMarketActive && gameData.currentPlayer !== gameData.generalMarketOriginatorId && (General Market Active)}\n {player.cards.length === 1 && {window.innerWidth < 768 ? '!' : '(Last Card!)'}}\n

\n }\n

;\n })}\n {}\n {showEliminatedPopup &&

ELIMINATED

You have been knocked out of the game.

\n \n \n

}\n {}\n {showWhotChoice &&

Choose WHOT Shape

\n {['●', '▲', '✚', '■', '★'].map(shape => )}\n

}\n {}\n {showDeckView &&

Your Full Deck ({gameData.players[0].cards.length} cards)

\n \n

\n {gameData.players[0].cards.map((card, index) => {\n const canPlayAnyCard = gameData.currentPlayer === 0 && gameData.pendingPickCount === 0 && !(gameData.generalMarketActive && gameData.currentPlayer !== gameData.generalMarketOriginatorId) && !isPlayerActionInProgress;\n const topCard = gameData.playPile[gameData.playPile.length - 1];\n const isPlayable = canPlayAnyCard && isCardPlayable(card, topCard);\n return

{\n if (isPlayable) {\n const actualIndex = index - playerScrollIndex;\n if (actualIndex >= 0 && actualIndex < maxVisiblePlayerCards) {\n playCard(actualIndex);\n } else {\n setPlayerScrollIndex(Math.max(0, Math.min(index - Math.floor(maxVisiblePlayerCards / 2), gameData.players[0].cards.length - maxVisiblePlayerCards)));\n setTimeout(() => {\n const newIndex = index - Math.max(0, Math.min(index - Math.floor(maxVisiblePlayerCards / 2), gameData.players[0].cards.length - maxVisiblePlayerCards));\n playCard(newIndex);\n }, 100);\n }\n setShowDeckView(false);\n }\n }}>\n

\n {card.special &&

\n {card.special === 'holdon' && 'HOLD'}\n {card.special === 'pick2' && 'P2'}\n {card.special === 'generalmarket' && 'GM'}\n {card.special === 'whot' && 'WHOT'}\n

}\n {isPlayable &&

}\n

;\n })}\n

\n \n

}\n {}\n {}\n {confettiActive &&

\n \n whot\n \n Go!\n \n

\n Main Menu\n

Play Game

Profile

Achievements

Settings

\n Game Modes\n

Online Multiplayer

Play vs AI

\n Player Profile\n

Leaderboards

\n \n ⭐\n \n Level Progress\n

\n \n 📊\n \n Your Game Stats\n

\n Achievements & Badges\n

{achievement.name}

\n Leaderboards\n

\n Settings\n

\n \n 🔊\n \n Audio Settings\n

\n \n 👤\n \n Account Settings\n

Round Complete!

ELIMINATED

ELIMINATED

Choose WHOT Shape

Your Full Deck ({gameData.players[0].cards.length} cards)

Round {roundEndData.roundNumber} Complete!

Admin - All Card Distributions

\n P\n Play Pile ({gameData.playPile.length} cards)\n

\n M\n Market Deck ({gameData.drawPile.length} cards)\n

\n \n {playerIndex + 1}\n \n {player.name} ({player.cards.length} cards)\n {player.eliminated && [ELIMINATED]}\n {gameData.currentPlayer === playerIndex && !isAnyAnimationInProgress && [CURRENT TURN]}\n

Game Log

\n {gameData.winner.id === 0 ? 'VICTORY!' : 'DEFEAT'}\n

\n Game Guide & Rules\n

\n 📚\n Basic Rules\n

\n ✨\n Special Cards\n

🔥 WHOT Card

2 - Pick Two

1 - Hold On

14 - General Market

\n 🔷\n Card Shapes & Numbers\n

Available Shapes:

Number Distribution:

\n ⭐\n XP & Progress System\n

How to Earn XP:

Level System (1-100):

Achievements & Rewards:

\n 💡\n Pro Tips & Strategy\n

\n 🎮\n Game Controls\n

\n \n whot\n \n Go!\n \n

\n Main Menu\n

Play Game

Profile

Achievements

Settings

\n Game Modes\n

Online Multiplayer

Play vs AI

\n Player Profile\n

Leaderboards

\n \n ⭐\n \n Level Progress\n

\n \n 📊\n \n Your Game Stats\n

\n Achievements & Badges\n

{achievement.name}

\n Leaderboards\n

\n Settings\n

\n \n 🔊\n \n Audio Settings\n

\n \n 👤\n \n Account Settings\n

ELIMINATED

ELIMINATED

Choose WHOT Shape

Your Full Deck ({gameData.players[0].cards.length} cards)

Round {roundEndData.roundNumber} Complete!

Game Log

\n {gameData.winner.id === 0 ? 'VICTORY!' : 'DEFEAT'}\n

\n Game Guide & Rules\n

\n 📚\n Basic Rules\n

\n ✨\n Special Cards\n

🔥 WHOT Card

2 - Pick Two

1 - Hold On

14 - General Market

\n \n whot\n \n Go!\n
\n

\n \n whot\n \n Go!\n
\n

say something