[{"_1":2,"_174":-5,"_175":-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,"_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":41,"_67":60,"_68":60,"_69":17,"_70":25,"_71":-5,"_72":73,"_74":75,"_76":77,"_78":-5,"_79":80,"_131":17,"_132":133,"_88":31,"_90":172,"_173":17},"id","1dd217667e21a49fcd4a","isMyApp",false,"name","whot Go!","description","The ultimate multiplayer Whot experience where silky-smooth gameplay meets competitive online action! Create or join rooms with up to 4 players, watch as the room owner orchestrates epic battles, and experience real-time card synchronization that feels like magic. Your moves are tracked, your XP grows, and every game becomes part of your legendary journey in the most polished card arena ever built.","brief","Multiplayer Whot with rooms, real-time sync, and buttery-smooth competitive gameplay!","isLive",true,"isPublic","tags",[29],"👑","cover","https://cdn.dev.fun/snapshot/1dd217667e21a49fcd4a/93863_3b9a7892.webp","cdnUrl","https://cdn.dev.fun/app/1dd217667e21a49fcd4a/93863","createdAt",["D",1754591432551],"updatedAt",["D",1755096973691],"lastCommitId",["B","93863"],"tier",1,"credits",137,{"_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",65,"forkCount","likeCount",0,"runsCount",37,"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, Users, Plus, Clock, Crown } from 'lucide-react';\nimport { useDevapp, UserButton, DevappProvider } from '@devfunlabs/web-sdk';\nimport { initializeApp } from 'firebase/app';\nimport { getDatabase, ref, push, set, onValue, off, update, remove, serverTimestamp, onDisconnect } from 'firebase/database';\nconst firebaseConfig = {\n apiKey: \"AIzaSyCdEsxnNGXVb0UOY1gdTElzJTtxZag-Q2w\",\n authDomain: \"xashmarkets-1.firebaseapp.com\",\n databaseURL: \"https://xashmarkets-1-default-rtdb.europe-west1.firebasedatabase.app\",\n projectId: \"xashmarkets-1\",\n storageBucket: \"xashmarkets-1.firebasestorage.app\",\n messagingSenderId: \"166775884916\",\n appId: \"1:166775884916:web:20453106dfe337739e5521\",\n measurementId: \"G-VRMQS3FBV1\"\n};\nconst app = initializeApp(firebaseConfig);\nconst database = getDatabase(app);\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 [currentUser, setCurrentUser] = useState(null);\n const [rooms, setRooms] = useState([]);\n const [currentRoom, setCurrentRoom] = useState(null);\n const [gameCountdown, setGameCountdown] = useState(null);\n const [turnTimer, setTurnTimer] = useState(null);\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, setLeaderboardData] = useState([]);\n const [achievements, setAchievements] = useState([]);\n const [musicVolume, setMusicVolume] = useState(75);\n const [soundVolume, setSoundVolume] = useState(85);\n const [showHelp, setShowHelp] = useState(false);\n const [isEditingUsername, setIsEditingUsername] = useState(false);\n const [newUsername, setNewUsername] = useState('');\n const marketCardPositionsRef = useRef([]);\n const playPilePositionsRef = useRef([]);\n const playSound = (soundUrl, volume = soundVolume) => {\n try {\n const audio = new Audio(soundUrl);\n audio.volume = volume / 100;\n audio.play().catch(e => console.log('Sound play failed:', e));\n } catch (e) {\n console.log('Sound creation failed:', e);\n }\n };\n const playSoundEffect = {\n normalPlay: () => playSound('https://cdn.dev.fun/asset/1dd217667e21a49fcd4a/Play_68bba31b.wav'),\n specialPlay: () => playSound('https://cdn.dev.fun/asset/1dd217667e21a49fcd4a/Special_0fc3bad8.wav'),\n shuffle: () => playSound('https://cdn.dev.fun/asset/1dd217667e21a49fcd4a/Shuffle_e5bc5879.wav'),\n deal: () => playSound('https://cdn.dev.fun/asset/1dd217667e21a49fcd4a/Deal_9f661965.wav'),\n market: () => playSound('https://cdn.dev.fun/asset/1dd217667e21a49fcd4a/Market_b1db7924.wav')\n };\n const {\n userWallet\n } = useDevapp();\n const ADMIN_WALLET = 'DtdnqvRddQspZvRV5SJX2DeqxmLYef7Hqn9LFK9LioJS';\n const isAdmin = userWallet === ADMIN_WALLET;\n useEffect(() => {\n let unsubscribe;\n if (userWallet) {\n unsubscribe = initializeUser(userWallet);\n fetchLeaderboard();\n } else {\n setCurrentUser(null);\n setLeaderboardData([]);\n setAchievements([]);\n }\n return () => {\n if (unsubscribe) {\n unsubscribe();\n }\n };\n }, [userWallet]);\n useEffect(() => {\n if (currentUser) {\n initializeAchievements(currentUser);\n fetchLeaderboard();\n }\n }, [currentUser]);\n const initializeUser = async walletAddress => {\n try {\n const userRef = ref(database, `users/${walletAddress}`);\n const unsubscribe = onValue(userRef, async snapshot => {\n if (snapshot.exists()) {\n const userData = {\n id: walletAddress,\n ...snapshot.val()\n };\n setCurrentUser(userData);\n await update(userRef, {\n lastActive: serverTimestamp()\n });\n } else {\n const newUserData = {\n id: walletAddress,\n username: `Player${Math.floor(Math.random() * 10000)}`,\n xp: 0,\n level: 1,\n gamesPlayed: 0,\n gamesWon: 0,\n createdAt: serverTimestamp(),\n lastActive: serverTimestamp()\n };\n setCurrentUser(newUserData);\n await set(userRef, newUserData);\n }\n onDisconnect(userRef).update({\n lastActive: serverTimestamp()\n });\n });\n return unsubscribe;\n } catch (error) {\n console.error('Error initializing user:', error);\n setCurrentUser({\n id: walletAddress,\n username: `Player${Math.floor(Math.random() * 10000)}`,\n xp: 0,\n level: 1,\n gamesPlayed: 0,\n gamesWon: 0\n });\n }\n };\n useEffect(() => {\n const roomsRef = ref(database, 'rooms');\n const unsubscribe = onValue(roomsRef, snapshot => {\n if (snapshot.exists()) {\n const roomsData = snapshot.val();\n const roomsList = Object.keys(roomsData).map(roomId => ({\n id: roomId,\n ...roomsData[roomId]\n })).filter(room => room.status === 'waiting' || room.status === 'countdown');\n setRooms(roomsList);\n } else {\n setRooms([]);\n }\n });\n return () => off(roomsRef, 'value', unsubscribe);\n }, []);\n useEffect(() => {\n if (currentRoom) {\n const roomRef = ref(database, `rooms/${currentRoom.id}`);\n const unsubscribe = onValue(roomRef, snapshot => {\n if (snapshot.exists()) {\n const roomData = {\n id: currentRoom.id,\n ...snapshot.val()\n };\n setCurrentRoom(roomData);\n if (roomData.status === 'countdown' && roomData.countdown !== undefined) {\n if (currentUser?.id !== currentRoom?.ownerId || gameCountdown === null) {\n setGameCountdown(roomData.countdown);\n }\n } else {\n setGameCountdown(null);\n }\n if (roomData.status === 'playing' && roomData.gameData) {\n const newGameData = roomData.gameData;\n if (gameData && gameData.playPile && newGameData.playPile.length > gameData.playPile.length) {\n const lastCard = newGameData.playPile[newGameData.playPile.length - 1];\n const playerWhoPlayed = gameData.players.findIndex(p => p.cards.length > newGameData.players.find(np => np.id === p.id)?.cards.length);\n if (playerWhoPlayed !== -1 && playerWhoPlayed !== gameData.players.findIndex(p => p.id === currentUser?.id)) {\n if (lastCard.special) {\n playSoundEffect.specialPlay();\n } else {\n playSoundEffect.normalPlay();\n }\n const mapping = getVisualPlayerMapping();\n const visualPlayerIndex = mapping.actualToVisual[playerWhoPlayed] !== undefined ? mapping.actualToVisual[playerWhoPlayed] : playerWhoPlayed;\n const newCardRelativeStyle = getPlayPilePosition(newGameData.playPile.length - 1, false);\n const endPosition = {\n ...animationPositions.playPile,\n transform: `${animationPositions.playPile.transform} ${newCardRelativeStyle.transform}`,\n zIndex: newCardRelativeStyle.zIndex\n };\n const animatingCard = {\n ...lastCard,\n id: `opponent-play-${Date.now()}`,\n startPos: animationPositions.animationStarts?.[visualPlayerIndex] || {\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)'\n },\n endPos: endPosition,\n isPlayerCard: true\n };\n setAnimatingCards(prev => [...prev, animatingCard]);\n setTimeout(() => {\n setAnimatingCards(prev => prev.filter(c => c.id !== animatingCard.id));\n getPlayPilePosition(newGameData.playPile.length - 1, true);\n }, 800);\n }\n }\n if (gameData && gameData.players) {\n newGameData.players.forEach((newPlayer, playerIndex) => {\n const oldPlayer = gameData.players.find(p => p.id === newPlayer.id);\n if (oldPlayer && newPlayer.cards.length > oldPlayer.cards.length && playerIndex !== gameData.players.findIndex(p => p.id === currentUser?.id)) {\n const cardsDifference = newPlayer.cards.length - oldPlayer.cards.length;\n const mapping = getVisualPlayerMapping();\n const visualPlayerIndex = mapping.actualToVisual[playerIndex] !== undefined ? mapping.actualToVisual[playerIndex] : playerIndex;\n for (let i = 0; i < cardsDifference; i++) {\n const animatingCard = {\n id: `opponent-draw-${Date.now()}-${i}`,\n startPos: getTopMarketCardPosition(),\n endPos: {\n ...animationPositions.drawEnds[visualPlayerIndex],\n opacity: 0\n },\n isPlayerCard: false\n };\n setTimeout(() => {\n setAnimatingCards(prev => [...prev, animatingCard]);\n playSoundEffect.market();\n setTimeout(() => {\n setAnimatingCards(prev => prev.filter(c => c.id !== animatingCard.id));\n }, 800);\n }, i * 100);\n }\n }\n });\n }\n setGameData(newGameData);\n setGameState('game');\n }\n } else {\n setCurrentRoom(null);\n setGameState('menu');\n }\n });\n return () => off(roomRef, 'value', unsubscribe);\n }\n }, [currentRoom?.id, gameData, currentUser, animationPositions]);\n useEffect(() => {\n if (gameCountdown > 0 && currentRoom && currentUser?.id === currentRoom.ownerId) {\n const timer = setTimeout(() => {\n const newCountdown = gameCountdown - 1;\n setGameCountdown(newCountdown);\n update(ref(database, `rooms/${currentRoom.id}`), {\n countdown: newCountdown\n });\n if (newCountdown === 0) {\n startMultiplayerGame();\n }\n }, 1000);\n return () => clearTimeout(timer);\n }\n }, [gameCountdown]);\n useEffect(() => {\n if (gameData && gameState === 'game' && currentRoom && turnTimer > 0) {\n const timer = setTimeout(() => {\n const newTimer = turnTimer - 1;\n setTurnTimer(newTimer);\n if (newTimer === 0) {\n const currentUserActualIndex = gameData.players.findIndex(p => p.id === currentUser?.id);\n if (currentUserActualIndex !== -1 && gameData.currentPlayer === currentUserActualIndex) {\n handleAutoPlay();\n }\n }\n }, 1000);\n return () => clearTimeout(timer);\n }\n }, [turnTimer, gameData, gameState, currentRoom, currentUser]);\n useEffect(() => {\n if (gameData && gameState === 'game' && currentRoom && gameData.gamePhase === 'playing') {\n setTurnTimer(30);\n }\n }, [gameData?.currentPlayer, gameState, currentRoom, gameData?.gamePhase]);\n const createRoom = async () => {\n if (!currentUser) return;\n try {\n const roomRef = push(ref(database, 'rooms'));\n const roomData = {\n ownerId: currentUser.id,\n ownerUsername: currentUser.username,\n status: 'waiting',\n players: {\n [currentUser.id]: {\n id: currentUser.id,\n username: currentUser.username,\n ready: true,\n joinedAt: serverTimestamp()\n }\n },\n maxPlayers: 4,\n createdAt: serverTimestamp()\n };\n await set(roomRef, roomData);\n setCurrentRoom({\n id: roomRef.key,\n ...roomData\n });\n setGameState('room');\n } catch (error) {\n console.error('Error creating room:', error);\n }\n };\n const joinRoom = async roomId => {\n if (!currentUser) return;\n try {\n const roomRef = ref(database, `rooms/${roomId}`);\n const playerRef = ref(database, `rooms/${roomId}/players/${currentUser.id}`);\n await set(playerRef, {\n id: currentUser.id,\n username: currentUser.username,\n ready: false,\n joinedAt: serverTimestamp()\n });\n onValue(roomRef, snapshot => {\n if (snapshot.exists()) {\n setCurrentRoom({\n id: roomId,\n ...snapshot.val()\n });\n setGameState('room');\n }\n }, {\n onlyOnce: true\n });\n } catch (error) {\n console.error('Error joining room:', error);\n }\n };\n const leaveRoom = async () => {\n if (!currentRoom || !currentUser) return;\n try {\n if (currentUser.id === currentRoom.ownerId) {\n await remove(ref(database, `rooms/${currentRoom.id}`));\n } else {\n await remove(ref(database, `rooms/${currentRoom.id}/players/${currentUser.id}`));\n }\n setCurrentRoom(null);\n setGameState('menu');\n } catch (error) {\n console.error('Error leaving room:', error);\n }\n };\n const toggleReady = async () => {\n if (!currentRoom || !currentUser || currentUser.id === currentRoom.ownerId) return;\n try {\n const currentReady = currentRoom.players[currentUser.id]?.ready || false;\n await update(ref(database, `rooms/${currentRoom.id}/players/${currentUser.id}`), {\n ready: !currentReady\n });\n } catch (error) {\n console.error('Error toggling ready:', error);\n }\n };\n const startGameCountdown = async () => {\n if (!currentRoom || !currentUser || currentUser.id !== currentRoom.ownerId) return;\n const playersList = Object.values(currentRoom.players || {});\n if (playersList.length < 2) return;\n try {\n await update(ref(database, `rooms/${currentRoom.id}`), {\n status: 'countdown',\n countdown: 30\n });\n } catch (error) {\n console.error('Error starting countdown:', error);\n }\n };\n const startMultiplayerGame = async () => {\n if (!currentRoom || !currentUser || currentUser.id !== currentRoom.ownerId) return;\n try {\n const deck = createDeck();\n const shuffledDeck = shuffleDeck(deck);\n const playersList = Object.values(currentRoom.players || {});\n const cardsPerPlayer = getCardsPerPlayer(playersList.length);\n const players = playersList.map((player, index) => ({\n id: player.id,\n name: player.username,\n cards: shuffledDeck.slice(index * cardsPerPlayer, (index + 1) * cardsPerPlayer),\n isAI: false,\n eliminated: false\n }));\n const remainingDeck = shuffledDeck.slice(playersList.length * cardsPerPlayer);\n const playCard = remainingDeck[0];\n const initialGameData = {\n players,\n playPile: [playCard],\n drawPile: remainingDeck.slice(1),\n currentPlayer: 0,\n gamePhase: 'playing',\n roundNumber: 1,\n lastAction: `Game started - ${playCard.number}${playCard.shape} played`,\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(', ')}`, `Initial card: ${playCard.number}${playCard.shape} placed on table`]\n }\n };\n await update(ref(database, `rooms/${currentRoom.id}`), {\n status: 'playing',\n gameData: initialGameData,\n countdown: null\n });\n } catch (error) {\n console.error('Error starting multiplayer game:', error);\n }\n };\n const handleAutoPlay = async () => {\n if (!gameData || !currentRoom || !currentUser) return;\n const currentUserActualIndex = gameData.players.findIndex(p => p.id === currentUser.id);\n if (currentUserActualIndex === -1) return;\n if (gameData.currentPlayer !== currentUserActualIndex) return;\n const currentPlayerData = gameData.players[currentUserActualIndex];\n try {\n const topCard = gameData.playPile[gameData.playPile.length - 1];\n const playableCards = currentPlayerData.cards.filter(card => canPlayCard(card, topCard));\n if (playableCards.length > 0) {\n const cardToPlay = playableCards[0];\n const cardIndex = currentPlayerData.cards.findIndex(c => c.id === cardToPlay.id);\n await playMultiplayerCard(cardIndex);\n } else {\n await drawMultiplayerCard();\n }\n } catch (error) {\n console.error('Error with auto-play:', error);\n }\n };\n const handlePlayMultiplayerCard = async (cardIndex, clickPosition) => {\n if (!gameData || !currentRoom || !currentUser || isPlayerActionInProgress) return;\n const currentUserActualIndex = gameData.players.findIndex(p => p.id === currentUser.id);\n if (currentUserActualIndex === -1) return;\n if (gameData.currentPlayer !== currentUserActualIndex) return;\n const currentPlayerData = gameData.players[currentUserActualIndex];\n const actualCardIndex = cardIndex + playerScrollIndex;\n const card = currentPlayerData.cards[actualCardIndex];\n const topCard = gameData.playPile[gameData.playPile.length - 1];\n if (topCard.chosenShape) {\n if (card.special !== 'whot' && card.shape !== topCard.chosenShape) return;\n } else if (!canPlayCard(card, topCard)) {\n return;\n }\n try {\n setIsPlayerActionInProgress(true);\n setIsAnyAnimationInProgress(true);\n const newCardRelativeStyle = getPlayPilePosition(gameData.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 ...card,\n id: `animating-${Date.now()}-${actualCardIndex}`,\n startPos: clickPosition ? {\n top: `${clickPosition.y}px`,\n left: `${clickPosition.x}px`,\n transform: 'translate(-50%, -50%)',\n position: 'fixed',\n zIndex: 1000\n } : getExactCardPosition(currentUserActualIndex, actualCardIndex, currentPlayerData.cards.length, true),\n endPos: endPosition,\n isPlayerCard: true\n };\n setAnimatingCards(prev => [...prev, animatingCard]);\n if (card.special) {\n playSoundEffect.specialPlay();\n } else {\n playSoundEffect.normalPlay();\n }\n await new Promise(resolve => setTimeout(resolve, 800));\n setAnimatingCards(prev => prev.filter(c => c.id !== animatingCard.id));\n getPlayPilePosition(gameData.playPile.length, true);\n const newGameData = {\n ...gameData\n };\n const newPlayers = [...newGameData.players];\n const currentPlayer = {\n ...newPlayers[currentUserActualIndex]\n };\n currentPlayer.cards = currentPlayer.cards.filter((_, idx) => idx !== actualCardIndex);\n newPlayers[currentUserActualIndex] = currentPlayer;\n newGameData.players = newPlayers;\n newGameData.playPile = [...newGameData.playPile, card];\n const newCardsLength = currentPlayer.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 if (card.special === 'pick2') {\n playSoundEffect.specialPlay();\n newGameData.pendingPickCount += 2;\n newGameData.lastAction = `${currentPlayer.name} - ${card.number}${card.shape} pick2`;\n newGameData.gameLog = {\n ...newGameData.gameLog,\n [newGameData.roundNumber]: [...(newGameData.gameLog[newGameData.roundNumber] || []), `${currentPlayer.name} played ${card.number}${card.shape} (Pick 2) - Next player must draw 2 cards`]\n };\n } else if (card.special === 'whot') {\n playSoundEffect.specialPlay();\n setPendingWhotCard(card);\n setShowWhotChoice(true);\n setGameData(newGameData);\n setIsPlayerActionInProgress(false);\n return;\n } else if (card.special === 'holdon') {\n playSoundEffect.specialPlay();\n newGameData.lastAction = `${currentPlayer.name} - ${card.number}${card.shape} hold`;\n newGameData.skipNextPlayer = true;\n newGameData.gameLog = {\n ...newGameData.gameLog,\n [newGameData.roundNumber]: [...(newGameData.gameLog[newGameData.roundNumber] || []), `${currentPlayer.name} played ${card.number}${card.shape} (Hold On) - Next player's turn skipped`]\n };\n } else if (card.special === 'generalmarket') {\n playSoundEffect.specialPlay();\n newGameData.lastAction = `${currentPlayer.name} - ${card.number}${card.shape} gen`;\n newGameData.generalMarketActive = true;\n newGameData.generalMarketOriginatorId = currentUserActualIndex;\n newGameData.gameLog = {\n ...newGameData.gameLog,\n [newGameData.roundNumber]: [...(newGameData.gameLog[newGameData.roundNumber] || []), `${currentPlayer.name} played ${card.number}${card.shape} (General Market) - All other players must draw from market`]\n };\n } else {\n playSoundEffect.normalPlay();\n newGameData.lastAction = `${currentPlayer.name} - ${card.number}${card.shape}`;\n newGameData.gameLog = {\n ...newGameData.gameLog,\n [newGameData.roundNumber]: [...(newGameData.gameLog[newGameData.roundNumber] || []), `${currentPlayer.name} played ${card.number}${card.shape}`]\n };\n }\n if (currentPlayer.cards.length === 0) {\n await handleMultiplayerRoundEnd(newGameData);\n } else {\n const nextPlayerIndex = getNextPlayer(newGameData);\n newGameData.currentPlayer = nextPlayerIndex;\n newGameData.skipNextPlayer = false;\n if (newGameData.generalMarketActive && nextPlayerIndex === newGameData.generalMarketOriginatorId) {\n newGameData.generalMarketActive = false;\n newGameData.generalMarketOriginatorId = null;\n newGameData.lastAction += ' General Market effect ends.';\n newGameData.gameLog = {\n ...newGameData.gameLog,\n [newGameData.roundNumber]: [...(newGameData.gameLog[newGameData.roundNumber] || []), 'General Market effect ended - all players have drawn']\n };\n }\n await update(ref(database, `rooms/${currentRoom.id}/gameData`), newGameData);\n }\n setIsPlayerActionInProgress(false);\n setIsAnyAnimationInProgress(false);\n } catch (error) {\n console.error('Error playing multiplayer card:', error);\n setIsPlayerActionInProgress(false);\n }\n };\n const drawMultiplayerCard = async () => {\n if (!gameData || !currentRoom || !currentUser || isPlayerActionInProgress) return;\n const currentUserActualIndex = gameData.players.findIndex(p => p.id === currentUser.id);\n if (currentUserActualIndex === -1) return;\n if (gameData.currentPlayer !== currentUserActualIndex) return;\n try {\n setIsPlayerActionInProgress(true);\n setIsAnyAnimationInProgress(true);\n const newGameData = {\n ...gameData\n };\n const count = newGameData.pendingPickCount > 0 ? newGameData.pendingPickCount : 1;\n const currentPlayer = {\n ...newGameData.players[currentUserActualIndex]\n };\n for (let i = 0; i < count; i++) {\n if (newGameData.drawPile.length <= 1) {\n reshuffleMarket(newGameData);\n }\n if (newGameData.drawPile.length === 0) break;\n const drawnCard = newGameData.drawPile[newGameData.drawPile.length - 1];\n newGameData.drawPile = newGameData.drawPile.slice(0, -1);\n currentPlayer.cards = [...currentPlayer.cards, drawnCard];\n const mapping = getVisualPlayerMapping();\n const visualPlayerIndex = mapping.actualToVisual[currentUserActualIndex] !== undefined ? mapping.actualToVisual[currentUserActualIndex] : currentUserActualIndex;\n const animatingCard = {\n ...drawnCard,\n id: `draw-${Date.now()}-${i}`,\n startPos: getTopMarketCardPosition(),\n endPos: {\n ...animationPositions.drawEnds[visualPlayerIndex],\n opacity: 0\n },\n isPlayerCard: false\n };\n setAnimatingCards(prev => [...prev, animatingCard]);\n playSoundEffect.market();\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 const newPlayers = [...newGameData.players];\n newPlayers[currentUserActualIndex] = currentPlayer;\n newGameData.players = newPlayers;\n newGameData.pendingPickCount = 0;\n newGameData.lastAction = `${currentPlayer.name} - drew ${count} card${count > 1 ? 's' : ''}`;\n const newTotal = currentPlayer.cards.length;\n if (newTotal > maxVisiblePlayerCards) {\n setPlayerScrollIndex(newTotal - maxVisiblePlayerCards);\n }\n const nextPlayerIndex = getNextPlayer(newGameData);\n newGameData.currentPlayer = nextPlayerIndex;\n await update(ref(database, `rooms/${currentRoom.id}/gameData`), newGameData);\n setIsPlayerActionInProgress(false);\n setIsAnyAnimationInProgress(false);\n } catch (error) {\n console.error('Error drawing multiplayer card:', error);\n setIsPlayerActionInProgress(false);\n }\n };\n const getNextPlayer = 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 return nextPlayer;\n };\n const handleMultiplayerRoundEnd = async gameData => {\n try {\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 const newGameData = {\n ...gameData,\n roundEndData: roundEndInfo,\n gamePhase: 'roundEnd'\n };\n const eliminatedPlayerInNewData = newGameData.players.find(p => p.id === eliminatedPlayer.id);\n if (eliminatedPlayerInNewData) {\n eliminatedPlayerInNewData.eliminated = true;\n }\n newGameData.lastAction = `${eliminatedPlayer.name.split(' ')[0]} eliminated`;\n const currentRoundLog = newGameData.gameLog[newGameData.roundNumber] || [];\n newGameData.gameLog[newGameData.roundNumber] = [...currentRoundLog, `Round ${newGameData.roundNumber}: ${eliminatedPlayer.name} eliminated with ${maxTotal} total card points`];\n const remainingPlayers = newGameData.players.filter(p => !p.eliminated);\n if (remainingPlayers.length <= 1) {\n newGameData.gamePhase = 'gameEnd';\n const finalWinner = remainingPlayers.length > 0 ? remainingPlayers[0] : roundWinner;\n newGameData.winner = finalWinner;\n newGameData.lastAction = `${finalWinner.name.split(' ')[0]} wins!`;\n newGameData.gameLog[newGameData.roundNumber + 1] = [`GAME OVER: ${finalWinner.name} wins the game!`];\n const isWinner = finalWinner.id === currentUser.id;\n const updateData = {\n gamesPlayed: (currentUser.gamesPlayed || 0) + 1\n };\n if (isWinner) {\n updateData.gamesWon = (currentUser.gamesWon || 0) + 1;\n updateData.xp = (currentUser.xp || 0) + 150;\n updateData.currentWinStreak = (currentUser.currentWinStreak || 0) + 1;\n updateData.bestWinStreak = Math.max(updateData.currentWinStreak, currentUser.bestWinStreak || 0);\n } else {\n updateData.currentWinStreak = 0;\n }\n await update(ref(database, `users/${currentUser.id}`), updateData);\n await update(ref(database, `rooms/${currentRoom.id}/gameData`), newGameData);\n setTimeout(async () => {\n await update(ref(database, `rooms/${currentRoom.id}`), {\n status: 'waiting',\n gameData: null,\n countdown: null\n });\n }, 10000);\n } else {\n newGameData.roundNumber++;\n await update(ref(database, `rooms/${currentRoom.id}/gameData`), newGameData);\n setTimeout(async () => {\n const deck = createDeck();\n const shuffledDeck = shuffleDeck(deck);\n const resetPlayers = newGameData.players.map(player => ({\n ...player,\n cards: []\n }));\n const nextRoundGameData = {\n ...newGameData,\n players: resetPlayers,\n playPile: [],\n drawPile: shuffledDeck,\n currentPlayer: remainingPlayers[0] ? newGameData.players.findIndex(p => p.id === remainingPlayers[0].id) : 0,\n pendingPickCount: 0,\n generalMarketActive: false,\n generalMarketOriginatorId: null,\n skipNextPlayer: false,\n gamePhase: 'dealingCards',\n lastAction: 'Dealing cards...',\n roundEndData: null,\n gameLog: {\n ...newGameData.gameLog,\n [newGameData.roundNumber]: [`Round ${newGameData.roundNumber} begins with remaining players.`, `New deck created and shuffled.`]\n }\n };\n await update(ref(database, `rooms/${currentRoom.id}/gameData`), nextRoundGameData);\n }, 10000);\n }\n } catch (error) {\n console.error('Error handling multiplayer round end:', error);\n }\n };\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(currentUser?.xp || 0);\n const fetchLeaderboard = async () => {\n try {\n const usersRef = ref(database, 'users');\n onValue(usersRef, snapshot => {\n if (snapshot.exists()) {\n const usersData = snapshot.val();\n const usersList = Object.keys(usersData).map(userId => ({\n id: userId,\n ...usersData[userId]\n }));\n const sortedUsers = usersList.filter(user => user.gamesPlayed > 0).sort((a, b) => {\n const aWinRate = (a.gamesWon || 0) / (a.gamesPlayed || 1);\n const bWinRate = (b.gamesWon || 0) / (b.gamesPlayed || 1);\n if (bWinRate !== aWinRate) return bWinRate - aWinRate;\n return (b.gamesWon || 0) - (a.gamesWon || 0);\n }).slice(0, 20).map((user, index) => ({\n rank: index + 1,\n name: user.id === currentUser?.id ? 'You' : user.username,\n wins: user.gamesWon || 0,\n games: user.gamesPlayed || 0,\n winRate: user.gamesPlayed > 0 ? ((user.gamesWon || 0) / user.gamesPlayed * 100).toFixed(1) : 0,\n level: calculateLevel(user.xp || 0).level\n }));\n setLeaderboardData(sortedUsers);\n }\n });\n } catch (error) {\n console.error('Error fetching leaderboard:', error);\n }\n };\n const initializeAchievements = userData => {\n const userXP = userData?.xp || 0;\n const userGamesPlayed = userData?.gamesPlayed || 0;\n const userGamesWon = userData?.gamesWon || 0;\n const userLevel = calculateLevel(userXP).level;\n const achievementsList = [{\n id: 1,\n name: 'First Victory',\n description: 'Win your first game',\n unlocked: userGamesWon >= 1,\n claimed: userData?.claimedAchievements?.includes(1) || false,\n icon: '🏆',\n reward: '100 XP'\n }, {\n id: 2,\n name: 'Card Master',\n description: 'Play 10 games',\n unlocked: userGamesPlayed >= 10,\n claimed: userData?.claimedAchievements?.includes(2) || 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: (userData?.currentWinStreak || 0) >= 5,\n claimed: userData?.claimedAchievements?.includes(3) || false,\n icon: '⚔️',\n reward: '500 XP'\n }, {\n id: 4,\n name: 'Strategic Mind',\n description: 'Win 20 games',\n unlocked: userGamesWon >= 20,\n claimed: userData?.claimedAchievements?.includes(4) || false,\n icon: '🧠',\n reward: '1200 XP'\n }, {\n id: 5,\n name: 'Century Club',\n description: 'Play 100 total games',\n unlocked: userGamesPlayed >= 100,\n claimed: userData?.claimedAchievements?.includes(5) || false,\n icon: '💯',\n reward: '1500 XP'\n }, {\n id: 6,\n name: 'Ultimate Champion',\n description: 'Reach Level 50',\n unlocked: userLevel >= 50,\n claimed: userData?.claimedAchievements?.includes(6) || false,\n icon: '🌟',\n reward: '2000 XP'\n }, {\n id: 7,\n name: 'Legendary Player',\n description: 'Reach Level 75',\n unlocked: userLevel >= 75,\n claimed: userData?.claimedAchievements?.includes(7) || false,\n icon: '👑',\n reward: '3000 XP'\n }, {\n id: 8,\n name: 'Whot Grandmaster',\n description: 'Reach Level 100',\n unlocked: userLevel >= 100,\n claimed: userData?.claimedAchievements?.includes(8) || false,\n icon: '💎',\n reward: '5000 XP'\n }];\n setAchievements(achievementsList);\n };\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 updateUsername = async newUsernameValue => {\n if (!currentUser || !newUsernameValue.trim()) return;\n try {\n const userRef = ref(database, `users/${currentUser.id}`);\n await update(userRef, {\n username: newUsernameValue.trim()\n });\n setCurrentUser(prev => ({\n ...prev,\n username: newUsernameValue.trim()\n }));\n setIsEditingUsername(false);\n setNewUsername('');\n } catch (error) {\n console.error('Error updating username:', error);\n }\n };\n const claimAchievement = async achievementId => {\n if (!currentUser) return;\n const achievement = achievements.find(a => a.id === achievementId);\n if (!achievement || !achievement.unlocked || achievement.claimed) return;\n try {\n const xpReward = parseInt(achievement.reward.replace(' XP', ''));\n const userRef = ref(database, `users/${currentUser.id}`);\n const claimedAchievements = currentUser.claimedAchievements || [];\n await update(userRef, {\n xp: (currentUser.xp || 0) + xpReward,\n claimedAchievements: [...claimedAchievements, achievementId]\n });\n setAchievements(prevAchievements => prevAchievements.map(a => {\n if (a.id === achievementId) {\n return {\n ...a,\n claimed: true\n };\n }\n return a;\n }));\n } catch (error) {\n console.error('Error claiming achievement:', error);\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 useEffect(() => {\n if (gameData && gameData.gamePhase === 'roundEnd' && gameData.roundEndData && !showRoundEndPopup) {\n setRoundEndData(gameData.roundEndData);\n setTimeout(() => {\n setShowRoundEndPopup(true);\n setTimeout(() => startConfetti(), 200);\n }, 2500);\n setTimeout(() => {\n setShowRoundEndPopup(false);\n setRoundEndData(null);\n setConfettiActive(false);\n }, 12500);\n }\n }, [gameData?.gamePhase, gameData?.roundEndData, showRoundEndPopup]);\n useEffect(() => {\n if (currentRoom && gameData && gameData.gamePhase === 'dealingCards' && gameData.players.every(p => p.cards.length === 0)) {\n const activePlayers = gameData.players.filter(p => !p.eliminated);\n const cardsPerPlayer = getCardsPerPlayer(activePlayers.length);\n setTimeout(() => {\n startDealingAnimation([...gameData.drawPile], activePlayers, cardsPerPlayer);\n }, 500);\n }\n }, [gameData?.gamePhase, currentRoom, gameData?.players]);\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 setIsAnyAnimationInProgress(true);\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 let visualPlayerIndex = currentPlayerIndex;\n if (currentRoom && gameData) {\n const mapping = getVisualPlayerMapping();\n visualPlayerIndex = mapping.actualToVisual[currentPlayerIndex] !== undefined ? mapping.actualToVisual[currentPlayerIndex] : currentPlayerIndex;\n }\n const dealingCard = {\n ...cardToDeal,\n id: `dealing-${Date.now()}-${i}`,\n startPos: getTopMarketCardPosition(),\n endPos: {\n ...animationPositions.drawEnds[visualPlayerIndex],\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, 100));\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: {\n ...animationPositions.playPile,\n transform: `${animationPositions.playPile.transform} ${endPosition.transform}`,\n zIndex: endPosition.zIndex\n },\n isPlayerCard: true\n };\n setAnimatingCards(prev => [...prev, playPileCard]);\n playSoundEffect.deal();\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 }, 800);\n });\n }\n setIsAnyAnimationInProgress(false);\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 = async 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 if (currentRoom) {\n const currentUserActualIndex = gameData.players.findIndex(p => p.id === currentUser.id);\n const currentPlayer = newGameData.players[currentUserActualIndex];\n newGameData.lastAction = `${currentPlayer.name} - WHOT → ${shape}`;\n newGameData.gameLog = {\n ...newGameData.gameLog,\n [newGameData.roundNumber]: [...(newGameData.gameLog[newGameData.roundNumber] || []), `${currentPlayer.name} played WHOT and chose ${shape} as the active shape`]\n };\n setShowWhotChoice(false);\n setPendingWhotCard(null);\n if (currentPlayer.cards.length === 0) {\n await handleMultiplayerRoundEnd(newGameData);\n } else {\n const nextPlayerIndex = getNextPlayer(newGameData);\n newGameData.currentPlayer = nextPlayerIndex;\n newGameData.skipNextPlayer = false;\n if (newGameData.generalMarketActive && nextPlayerIndex === newGameData.generalMarketOriginatorId) {\n newGameData.generalMarketActive = false;\n newGameData.generalMarketOriginatorId = null;\n newGameData.lastAction += ' General Market effect ends.';\n newGameData.gameLog = {\n ...newGameData.gameLog,\n [newGameData.roundNumber]: [...(newGameData.gameLog[newGameData.roundNumber] || []), 'General Market effect ended - all players have drawn']\n };\n }\n await update(ref(database, `rooms/${currentRoom.id}/gameData`), newGameData);\n }\n setIsPlayerActionInProgress(false);\n } else {\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 };\n const getVisualPlayerMapping = () => {\n if (!currentRoom || !gameData) {\n return {\n visualToActual: [0, 1, 2, 3],\n actualToVisual: {\n 0: 0,\n 1: 1,\n 2: 2,\n 3: 3\n }\n };\n }\n const currentUserActualIndex = gameData.players.findIndex(p => p.id === currentUser?.id);\n if (currentUserActualIndex === -1) {\n return {\n visualToActual: [0, 1, 2, 3],\n actualToVisual: {\n 0: 0,\n 1: 1,\n 2: 2,\n 3: 3\n }\n };\n }\n const totalPlayers = gameData.players.length;\n const visualToActual = [];\n const actualToVisual = {};\n visualToActual[0] = currentUserActualIndex;\n actualToVisual[currentUserActualIndex] = 0;\n for (let i = 1; i < totalPlayers; i++) {\n const actualIndex = (currentUserActualIndex + i) % totalPlayers;\n visualToActual[i] = actualIndex;\n actualToVisual[actualIndex] = i;\n }\n return {\n visualToActual,\n actualToVisual\n };\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 let visualPlayerIndex = playerIndex;\n if (currentRoom && gameData) {\n const mapping = getVisualPlayerMapping();\n visualPlayerIndex = mapping.actualToVisual[playerIndex] !== undefined ? mapping.actualToVisual[playerIndex] : playerIndex;\n }\n const basePosition = animationPositions.playerDecks[visualPlayerIndex];\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 (visualPlayerIndex === 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 (visualPlayerIndex === 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 (visualPlayerIndex === 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 (visualPlayerIndex === 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 currentUserActualIndex = currentRoom ? gameData.players.findIndex(p => p.id === currentUser?.id) : 0;\n const playerCards = gameData.players[currentUserActualIndex]?.cards || 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) return {\n left: false,\n right: false\n };\n const currentUserActualIndex = currentRoom ? gameData.players.findIndex(p => p.id === currentUser?.id) : 0;\n if (gameData.currentPlayer !== currentUserActualIndex) return {\n left: false,\n right: false\n };\n const player = gameData.players[currentUserActualIndex];\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 handlePlayCard = (cardIndex, clickPosition) => {\n if (!gameData || gameData.gamePhase !== 'playing' || 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 || []).length > 0 ? newGameData.playPile[newGameData.playPile.length - 1] : null;\n if (topCard && 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 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 ...card,\n id: `animating-${Date.now()}-${actualCardIndex}`,\n startPos: clickPosition ? {\n top: `${clickPosition.y}px`,\n left: `${clickPosition.x}px`,\n transform: 'translate(-50%, -50%)',\n position: 'fixed',\n zIndex: 1000\n } : 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 if (card.special === 'pick2') {\n playSoundEffect.specialPlay();\n } else if (card.special === 'whot') {\n playSoundEffect.specialPlay();\n } else if (card.special === 'holdon') {\n playSoundEffect.specialPlay();\n } else if (card.special === 'generalmarket') {\n playSoundEffect.specialPlay();\n } else {\n playSoundEffect.normalPlay();\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 playMultiplayerCard = async cardIndex => {\n return handlePlayMultiplayerCard(cardIndex, null);\n };\n const playCard = cardIndex => {\n return handlePlayCard(cardIndex, null);\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 if (cardToPlay.special === 'whot') {\n playSoundEffect.specialPlay();\n } else if (cardToPlay.special === 'pick2') {\n playSoundEffect.specialPlay();\n } else if (cardToPlay.special === 'holdon') {\n playSoundEffect.specialPlay();\n } else if (cardToPlay.special === 'generalmarket') {\n playSoundEffect.specialPlay();\n } else {\n playSoundEffect.normalPlay();\n }\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 playerActualIndex = gameDataToUse.players.findIndex(p => p.id === player.id);\n let visualPlayerIndex = playerActualIndex;\n if (currentRoom) {\n const mapping = getVisualPlayerMapping();\n visualPlayerIndex = mapping.actualToVisual[playerActualIndex] !== undefined ? mapping.actualToVisual[playerActualIndex] : playerActualIndex;\n }\n const animatingCard = {\n ...drawnCard,\n id: `draw-${Date.now()}-${i}`,\n startPos: getTopMarketCardPosition(),\n endPos: {\n ...animationPositions.drawEnds[visualPlayerIndex],\n opacity: 0\n },\n isPlayerCard: false\n };\n setAnimatingCards(prev => [...prev, animatingCard]);\n playSoundEffect.market();\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 const currentUserActualIndex = currentRoom ? gameDataToUse.players.findIndex(p => p.id === currentUser?.id) : 0;\n if (player.id === currentUserActualIndex || !currentRoom && 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 playSoundEffect.shuffle();\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: 'linear-gradient(135deg, #000000 0%, #1a0a0f 25%, #0a0a0a 50%, #1a0f0a 75%, #000000 100%)',\n position: 'relative'\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 ◆ 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 === 'rooms' ?

\n \n

\n Online Multiplayer\n

\n Join or Create a Room\n

\n {}\n

\n \n

\n {}\n

\n \n Available Rooms ({rooms.length})\n

\n {rooms.length === 0 ?

\n \n

No rooms available

Create a new room to get started!

\n {rooms.map(room => {\n const playerCount = Object.keys(room.players || {}).length;\n const canJoin = playerCount < room.maxPlayers && room.status === 'waiting';\n return

\n \n

{room.ownerUsername}'s Room

\n {playerCount}/{room.maxPlayers} players\n {room.status === 'countdown' && ` • Starting in ${room.countdown}s`}\n

\n {room.status === 'countdown' &&

\n \n {room.countdown}s\n

}\n \n

;\n })}\n

}\n

\n {!currentUser &&

\n Connect your wallet to join or create rooms\n

}\n

: gameState === 'room' && currentRoom ?

\n \n

\n {currentRoom.ownerUsername}'s Room\n

\n {currentRoom.status === 'waiting' && 'Waiting for Players'}\n {currentRoom.status === 'countdown' && `Starting in ${gameCountdown}s`}\n {currentRoom.status === 'playing' && 'Game in Progress'}\n

\n {}\n {currentRoom.status === 'countdown' && gameCountdown &&

{gameCountdown}

Game starting...

}\n {}\n

\n \n Players ({Object.keys(currentRoom.players || {}).length}/4)\n

\n {Object.values(currentRoom.players || {}).map(player =>

\n {player.id === currentRoom.ownerId ? : }\n

{player.username}

\n {player.id === currentRoom.ownerId ? 'Room Owner' : 'Player'}\n

\n {player.id !== currentRoom.ownerId &&

\n {player.ready ? 'Ready' : 'Not Ready'}\n

}\n

)}\n {}\n {Array.from({\n length: 4 - Object.keys(currentRoom.players || {}).length\n }, (_, index) =>

\n \n

Waiting for player...

)}\n

\n {}\n

\n {currentUser?.id === currentRoom.ownerId ? : }\n \n

\n {}\n

\n {currentUser?.id === currentRoom.ownerId && Object.keys(currentRoom.players || {}).length < 2 &&

Need at least 2 players to start the game

}\n {currentUser?.id !== currentRoom.ownerId && !currentRoom.players[currentUser?.id]?.ready &&

Click \"Ready Up\" when you're ready to play

}\n

: gameState === 'menu' ?

\n {}\n

\n {}\n {Array.from({\n length: 8\n }, (_, i) =>

0.5 ? '50%' : '0',\n transform: `rotate(${Math.random() * 360}deg)`,\n boxShadow: '3px 3px 0 rgba(0,0,0,0.8)'\n }} />)}\n \n {}\n {Array.from({\n length: 12\n }, (_, i) =>

\n {['●', '▲', '✚', '■', '★', '0', '1'][Math.floor(Math.random() * 7)]}\n

)}\n \n {}\n

\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 \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 \n Player Info\n

\n Username:\n {isEditingUsername ?

\n setNewUsername(e.target.value)} className=\"bg-gray-700 text-white px-3 py-1 rounded-lg border border-gray-600 focus:border-[#80142C] outline-none\" placeholder={currentUser?.username || 'Enter username'} maxLength={20} />\n \n \n

\n {currentUser?.username || 'Player'}\n \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

{currentUser?.gamesPlayed || 0}

Games Played

{currentUser?.gamesWon || 0}

Games Won

{currentUser?.gamesPlayed > 0 ? ((currentUser?.gamesWon || 0) / currentUser.gamesPlayed * 100).toFixed(1) : 0}%

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 {}\n {isAdmin &&

\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 currentUserActualIndex = currentRoom ? gameData.players.findIndex(p => p.id === currentUser?.id) : 0;\n const isCurrentUserTurn = gameData.currentPlayer === currentUserActualIndex;\n const shouldGlow = !isAnyAnimationInProgress && isCurrentUserTurn && (gameData.pendingPickCount > 0 || gameData.generalMarketActive && gameData.currentPlayer !== gameData.generalMarketOriginatorId || gameData.pendingPickCount === 0 && !gameData.generalMarketActive && (() => {\n const currentUserPlayer = gameData.players[currentUserActualIndex];\n if (!currentUserPlayer) return false;\n const topCard = gameData.playPile[gameData.playPile.length - 1];\n if (!topCard) return false;\n const playableCards = currentUserPlayer.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 currentUserActualIndex = currentRoom ? gameData.players.findIndex(p => p.id === currentUser?.id) : 0;\n const isCurrentUserTurn = gameData.currentPlayer === currentUserActualIndex;\n const shouldGlow = isCurrentUserTurn && (gameData.pendingPickCount > 0 || gameData.generalMarketActive && gameData.currentPlayer !== gameData.generalMarketOriginatorId || gameData.pendingPickCount === 0 && !gameData.generalMarketActive && (() => {\n const currentUserPlayer = gameData.players[currentUserActualIndex];\n if (!currentUserPlayer) return false;\n const topCard = gameData.playPile[gameData.playPile.length - 1];\n if (!topCard) return false;\n const playableCards = currentUserPlayer.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 || gameData.roundEndData) && !showRoundEndPopup && gameData.gamePhase === 'roundEnd' &&

🎉

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 {(() => {\n const currentUserActualIndex = currentRoom ? gameData.players.findIndex(p => p.id === currentUser?.id) : 0;\n const isCurrentUserTurn = gameData.currentPlayer === currentUserActualIndex;\n return gameData.players.map((player, playerIndex) => {\n const mapping = getVisualPlayerMapping();\n const visualPlayerIndex = currentRoom ? mapping.actualToVisual[playerIndex] !== undefined ? mapping.actualToVisual[playerIndex] : playerIndex : playerIndex;\n const isCurrentPlayer = !isAnyAnimationInProgress && gameData.currentPlayer === playerIndex;\n const pos = animationPositions.playerDecks[visualPlayerIndex];\n const maxVisibleCards = visualPlayerIndex === 0 ? maxVisiblePlayerCards : 3;\n const cardSpacing = 6;\n const isCurrentUserPlayer = currentRoom ? playerIndex === currentUserActualIndex : playerIndex === 0;\n const visibleCards = isCurrentUserPlayer ? 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 = isCurrentUserPlayer ? hasPlayableCardsOutsideRange() : {\n left: false,\n right: false\n };\n return

\n {player.eliminated ?

\n \n

ELIMINATED

: <>\n

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

{\n if (isThisCardPlayable && isCurrentUserPlayer && isCurrentUserTurn) {\n if (currentRoom) {\n const clickX = e.clientX;\n const clickY = e.clientY;\n handlePlayMultiplayerCard(cardIndex, {\n x: clickX,\n y: clickY\n });\n } else {\n const clickX = e.clientX;\n const clickY = e.clientY;\n handlePlayCard(cardIndex, {\n x: clickX,\n y: clickY\n });\n }\n }\n }}>\n {isCurrentUserPlayer ?

\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 {visualPlayerIndex !== 0 &&

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

}\n {}\n {isCurrentUserPlayer && }\n

\n {}\n

\n {window.innerWidth < 768 ? `${player.name.split(' ')[0]} (${player.cards.length})` : `${player.name} (${player.cards.length})`}\n {isCurrentUserPlayer && }\n {}\n {currentRoom && isCurrentUserTurn && playerIndex === currentUserActualIndex && !isAnyAnimationInProgress &&

\n {window.innerWidth < 768 ? '●' : 'Your Turn'}\n {turnTimer !== null &&

\n \n {turnTimer}s\n

}\n

}\n {}\n {!currentRoom && isCurrentPlayer && playerIndex === 0 && !isAnyAnimationInProgress && {window.innerWidth < 768 ? '●' : 'Your Turn'}}\n {isAnyAnimationInProgress && gameData.currentPlayer === playerIndex && {window.innerWidth < 768 ? '⏸' : '(Wait...)'}}\n {isCurrentUserPlayer && 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 {}\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 &&

: 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 \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 \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 {}\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 {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 Online Multiplayer\n

Create New Room

\n \n Available Rooms ({rooms.length})\n

{room.ownerUsername}'s Room

\n {currentRoom.ownerUsername}'s Room\n

\n \n Players ({Object.keys(currentRoom.players || {}).length}/4)\n

{player.username}

\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 Player Info\n

\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 || gameData.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 === currentUser?.id ? '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

Round Complete!

ELIMINATED

ELIMINATED

Choose WHOT Shape

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

Round {roundEndData.roundNumber} Complete!

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

say something