[{"_1":2,"_135":-5,"_136":-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,"_55":56,"_57":58,"_59":58,"_60":61,"_62":58,"_63":58,"_64":58,"_65":58,"_66":58,"_67":58,"_68":17,"_69":17,"_70":71,"_72":73,"_74":75,"_76":77,"_78":79,"_97":-5,"_98":17,"_99":100,"_131":31,"_132":133,"_134":17},"id","2a366c14fd7037b18815","isMyApp",false,"name","boardbattle","description","Enter the high-stakes arena where board game enthusiasts duel for glory and tokens! Challenge opponents to your favorite classic games, place your bets in the digital pot, and emerge victorious to claim the entire bounty while climbing the leaderboard of legends.","brief","Stake tokens, battle opponents in classic board games, and win everything in this digital gambling arena!","isLive",true,"isPublic","tags",[29],"💰","cover","https://cdn.dev.fun/snapshot/2a366c14fd7037b18815/78499_69976397.webp","cdnUrl","https://cdn.dev.fun/app/2a366c14fd7037b18815/78499","createdAt",["D",1749457164984],"updatedAt",["D",1749588358880],"lastCommitId",["B","78499"],"tier",1,"credits",65,{"_14":45,"_46":47,"_48":-5,"_49":47,"_50":51,"_52":-5,"_53":54},"4821a798-a32a-4536-86ef-159c9f6583c2","uniqueId","8sE9ck1pqnSM3cABMy9VfRUjKVrsCv9KCcen8isMh6Mv","username","solanaWallet","displayName","8sE...6Mv","bio","avatar","/avatar.svg","commitCount",16,"forkCount",0,"likeCount","runsCount",41,"downvoteCount","upvoteCount","upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","AgYVbX4CueNVrBAXZh84DoFQtZhG6wpi3JgXHyCKpump","code","import { useState, useEffect } from 'react';\nimport { io } from 'socket.io-client';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { Trophy, Swords, Users, Star, Coins, PlusCircle, X, ArrowRight, Bell, Calendar, Award, Shield, Clock, Users2, Gift, Flame, ChevronDown, Sparkles } from 'lucide-react';\nimport { useDevapp, DevappProvider, UserButton } from '@devfunlabs/web-sdk';\nconst socket = io('wss://ws.dev.fun/app-2a366c14fd7037b18815');\nconst GAMES = [{\n id: 1,\n name: 'Chess',\n img: '♟️',\n minBet: 50,\n maxBet: 5000,\n players: 2,\n duration: '10-60 min',\n tournamentEligible: true\n}, {\n id: 2,\n name: 'Checkers',\n img: '⛀',\n minBet: 20,\n maxBet: 2000,\n players: 2,\n duration: '5-30 min',\n tournamentEligible: true\n}, {\n id: 3,\n name: 'Backgammon',\n img: '🎲',\n minBet: 100,\n maxBet: 10000,\n players: 2,\n duration: '15-45 min',\n tournamentEligible: true\n}, {\n id: 4,\n name: 'Connect Four',\n img: '🔴',\n minBet: 10,\n maxBet: 1000,\n players: 2,\n duration: '2-10 min',\n tournamentEligible: true\n}, {\n id: 5,\n name: 'Monopoly',\n img: '🏢',\n minBet: 200,\n maxBet: 20000,\n players: 4,\n duration: '45-180 min',\n tournamentEligible: true\n}, {\n id: 6,\n name: 'Scrabble',\n img: '🔤',\n minBet: 75,\n maxBet: 5000,\n players: 4,\n duration: '30-90 min',\n tournamentEligible: true\n}, {\n id: 7,\n name: 'Risk',\n img: '🌍',\n minBet: 150,\n maxBet: 15000,\n players: 6,\n duration: '60-180 min',\n tournamentEligible: true\n}, {\n id: 8,\n name: 'Catan',\n img: '🌾',\n minBet: 125,\n maxBet: 12500,\n players: 4,\n duration: '45-90 min',\n tournamentEligible: true\n}];\nconst TOURNAMENTS = [{\n id: 201,\n name: \"Weekend Chess Championship\",\n game: \"Chess\",\n img: \"♟️\",\n entryFee: 500,\n prizePool: 8000,\n participants: {\n current: 12,\n max: 16\n },\n status: \"registering\",\n startTime: \"June 10, 2025 - 10:00 AM\",\n endTime: \"June 13, 2025 - 10:00 PM\",\n creator: \"GrandMaster42\",\n tournamentType: \"progression\",\n players: [{\n name: \"GrandMaster42\",\n level: 6,\n avatar: \"👑\"\n }, {\n name: \"ChessTitan\",\n level: 5,\n avatar: \"🏆\"\n }, {\n name: \"QueenGambit\",\n level: 4,\n avatar: \"♕\"\n }, {\n name: \"RiskTaker\",\n level: 3,\n avatar: \"🎯\"\n }, {\n name: \"BoardDestroyer\",\n level: 3,\n avatar: \"💥\"\n }, {\n name: \"GameTheory101\",\n level: 2,\n avatar: \"📊\"\n }, {\n name: \"TokenHunter\",\n level: 2,\n avatar: \"🔍\"\n }, {\n name: \"StrategyKing\",\n level: 1,\n avatar: \"🧠\"\n }]\n}, {\n id: 202,\n name: \"Backgammon Masters\",\n game: \"Backgammon\",\n img: \"🎲\",\n entryFee: 1000,\n prizePool: 12000,\n participants: {\n current: 8,\n max: 8\n },\n status: \"in_progress\",\n startTime: \"June 9, 2025 - 2:00 PM\",\n endTime: \"June 11, 2025 - 8:00 PM\",\n creator: \"StrategyKing\",\n tournamentType: \"progression\",\n players: [{\n name: \"StrategyKing\",\n level: 8,\n avatar: \"🧠\"\n }, {\n name: \"TokenHunter\",\n level: 7,\n avatar: \"🔍\"\n }, {\n name: \"ChessTitan\",\n level: 6,\n avatar: \"🏆\"\n }, {\n name: \"RiskTaker\",\n level: 5,\n avatar: \"🎯\"\n }, {\n name: \"BoardDestroyer\",\n level: 4,\n avatar: \"💥\"\n }, {\n name: \"GameTheory101\",\n level: 3,\n avatar: \"📊\"\n }, {\n name: \"GrandMaster42\",\n level: 2,\n avatar: \"👑\"\n }, {\n name: \"QueenGambit\",\n level: 1,\n avatar: \"♕\"\n }],\n oldBracket: [{\n round: 1,\n matches: [{\n player1: \"StrategyKing\",\n player2: \"TokenHunter\",\n winner: \"StrategyKing\"\n }, {\n player1: \"ChessTitan\",\n player2: \"RiskTaker\",\n winner: \"ChessTitan\"\n }, {\n player1: \"BoardDestroyer\",\n player2: \"GameTheory101\",\n winner: \"BoardDestroyer\"\n }, {\n player1: \"GrandMaster42\",\n player2: \"QueenGambit\",\n winner: \"QueenGambit\"\n }]\n }, {\n round: 2,\n matches: [{\n player1: \"StrategyKing\",\n player2: \"ChessTitan\",\n winner: null\n }, {\n player1: \"BoardDestroyer\",\n player2: \"QueenGambit\",\n winner: null\n }]\n }]\n}, {\n id: 203,\n name: \"Monopoly Millionaires\",\n game: \"Monopoly\",\n img: \"🏢\",\n entryFee: 2000,\n prizePool: 24000,\n participants: {\n current: 7,\n max: 12\n },\n status: \"registering\",\n startTime: \"June 12, 2025 - 6:00 PM\",\n endTime: \"June 16, 2025 - 6:00 PM\",\n creator: \"TokenHunter\",\n tournamentType: \"progression\",\n players: [{\n name: \"TokenHunter\",\n level: 1,\n avatar: \"🔍\"\n }, {\n name: \"BoardDestroyer\",\n level: 1,\n avatar: \"💥\"\n }, {\n name: \"GameTheory101\",\n level: 1,\n avatar: \"📊\"\n }, {\n name: \"RiskTaker\",\n level: 1,\n avatar: \"🎯\"\n }, {\n name: \"StrategyKing\",\n level: 1,\n avatar: \"🧠\"\n }, {\n name: \"ChessTitan\",\n level: 1,\n avatar: \"🏆\"\n }, {\n name: \"QueenGambit\",\n level: 1,\n avatar: \"♕\"\n }]\n}, {\n id: 204,\n name: \"Catan World Cup\",\n game: \"Catan\",\n img: \"🌾\",\n entryFee: 1500,\n prizePool: 18000,\n participants: {\n current: 16,\n max: 16\n },\n status: \"completed\",\n startTime: \"June 5, 2025 - 12:00 PM\",\n endTime: \"June 8, 2025 - 12:00 PM\",\n creator: \"QueenGambit\",\n winner: \"GrandMaster42\",\n tournamentType: \"progression\",\n players: [{\n name: \"GrandMaster42\",\n level: 10,\n avatar: \"👑\"\n }, {\n name: \"QueenGambit\",\n level: 9,\n avatar: \"♕\"\n }, {\n name: \"StrategyKing\",\n level: 8,\n avatar: \"🧠\"\n }, {\n name: \"TokenHunter\",\n level: 7,\n avatar: \"🔍\"\n }, {\n name: \"BoardDestroyer\",\n level: 6,\n avatar: \"💥\"\n }, {\n name: \"ChessTitan\",\n level: 5,\n avatar: \"🏆\"\n }, {\n name: \"GameTheory101\",\n level: 4,\n avatar: \"📊\"\n }, {\n name: \"RiskTaker\",\n level: 3,\n avatar: \"🎯\"\n }],\n oldBracket: [{\n round: 1,\n matches: Array(8).fill().map(() => ({\n player1: \"Player\",\n player2: \"Player\",\n winner: \"Player\"\n }))\n }, {\n round: 2,\n matches: Array(4).fill().map(() => ({\n player1: \"Player\",\n player2: \"Player\",\n winner: \"Player\"\n }))\n }, {\n round: 3,\n matches: Array(2).fill().map(() => ({\n player1: \"Player\",\n player2: \"Player\",\n winner: \"Player\"\n }))\n }, {\n round: 4,\n matches: [{\n player1: \"QueenGambit\",\n player2: \"GrandMaster42\",\n winner: \"GrandMaster42\"\n }]\n }]\n}];\nconst LEADERBOARD = [{\n id: 1,\n name: 'GrandMaster42',\n avatar: '👑',\n wins: 157,\n losses: 23,\n tokensWon: 243750\n}, {\n id: 2,\n name: 'QueenGambit',\n avatar: '♕',\n wins: 134,\n losses: 41,\n tokensWon: 189230\n}, {\n id: 3,\n name: 'StrategyKing',\n avatar: '🧠',\n wins: 128,\n losses: 37,\n tokensWon: 176500\n}, {\n id: 4,\n name: 'BoardDestroyer',\n avatar: '💥',\n wins: 112,\n losses: 45,\n tokensWon: 145780\n}, {\n id: 5,\n name: 'TokenHunter',\n avatar: '🔍',\n wins: 98,\n losses: 52,\n tokensWon: 112900\n}, {\n id: 6,\n name: 'ChessTitan',\n avatar: '🏆',\n wins: 87,\n losses: 39,\n tokensWon: 98670\n}, {\n id: 7,\n name: 'GameTheory101',\n avatar: '📊',\n wins: 76,\n losses: 48,\n tokensWon: 84320\n}, {\n id: 8,\n name: 'RiskTaker',\n avatar: '🎯',\n wins: 72,\n losses: 64,\n tokensWon: 62150\n}];\nconst ACTIVE_CHALLENGES = [{\n id: 101,\n challenger: 'RiskTaker',\n game: 'Chess',\n stake: 1500,\n timeLeft: '5m'\n}, {\n id: 102,\n challenger: 'BoardDestroyer',\n game: 'Monopoly',\n stake: 3000,\n timeLeft: '12m'\n}, {\n id: 103,\n challenger: 'TokenHunter',\n game: 'Checkers',\n stake: 800,\n timeLeft: '3m'\n}, {\n id: 104,\n challenger: 'ChessTitan',\n game: 'Backgammon',\n stake: 2500,\n timeLeft: '8m'\n}];\nfunction AppWithProvider() {\n return \n \n ;\n}\nexport default AppWithProvider;\nfunction App() {\n const {\n userWallet\n } = useDevapp();\n const [activeTab, setActiveTab] = useState('home');\n const [selectedGame, setSelectedGame] = useState(null);\n const [showCreateChallenge, setShowCreateChallenge] = useState(false);\n const [showCreateTournament, setShowCreateTournament] = useState(false);\n const [userTokens, setUserTokens] = useState(10000);\n const [stakeAmount, setStakeAmount] = useState(100);\n const [searchQuery, setSearchQuery] = useState('');\n const [showNotifications, setShowNotifications] = useState(false);\n const [selectedTournament, setSelectedTournament] = useState(null);\n const [showTournamentDetails, setShowTournamentDetails] = useState(false);\n const [tournaments, setTournaments] = useState(TOURNAMENTS);\n const [showWinnerPopup, setShowWinnerPopup] = useState(false);\n const [winnerInfo, setWinnerInfo] = useState(null);\n const [tournamentFormData, setTournamentFormData] = useState({\n name: \"\",\n game: GAMES[0],\n entryFee: 500,\n maxParticipants: 8,\n startTime: new Date(Date.now() + 86400000).toISOString().slice(0, 16),\n endTime: new Date(Date.now() + 86400000 + 3 * 86400000).toISOString().slice(0, 16)\n });\n const [currentTime, setCurrentTime] = useState(new Date());\n const [createTournamentStep, setCreateTournamentStep] = useState(1);\n const [notifications, setNotifications] = useState([{\n id: 1,\n message: 'GrandMaster42 accepted your challenge!',\n time: '2m ago'\n }, {\n id: 2,\n message: 'You won 2500 tokens in Checkers!',\n time: '1h ago'\n }, {\n id: 3,\n message: 'New tournament \"Weekend Chess Championship\" is open for registration!',\n time: '3h ago'\n }, {\n id: 4,\n message: 'Your tournament match starts in 30 minutes',\n time: '5h ago'\n }]);\n const [connectedUsers, setConnectedUsers] = useState(0);\n const [username, setUsername] = useState('');\n const [showLoginModal, setShowLoginModal] = useState(true);\n const [avatar, setAvatar] = useState('😎');\n const [pendingChallenges, setPendingChallenges] = useState([]);\n const [featuredTournament, setFeaturedTournament] = useState(null);\n useEffect(() => {\n function onConnect() {\n console.log('Connected to socket');\n }\n function onDisconnect() {\n console.log('Disconnected from socket');\n }\n function onUserCount(count) {\n setConnectedUsers(count);\n }\n const upcomingTournaments = tournaments.filter(t => t.status === 'registering');\n if (upcomingTournaments.length > 0) {\n const sorted = [...upcomingTournaments].sort((a, b) => b.prizePool - a.prizePool);\n setFeaturedTournament(sorted[0]);\n } else if (tournaments.length > 0) {\n setFeaturedTournament(tournaments[0]);\n }\n const timeInterval = setInterval(() => {\n setCurrentTime(new Date());\n }, 60000);\n function onChallenge(challenge) {\n setPendingChallenges(prev => [...prev, challenge]);\n setNotifications(prev => [{\n id: Date.now(),\n message: `${challenge.challenger} challenged you to ${challenge.game}!`,\n time: 'Just now'\n }, ...prev]);\n }\n function onTournamentUpdate(tournament) {\n setTournaments(prev => {\n const exists = prev.some(t => t.id === tournament.id);\n if (exists) {\n return prev.map(t => t.id === tournament.id ? tournament : t);\n } else {\n return [...prev, tournament];\n }\n });\n setNotifications(prev => [{\n id: Date.now(),\n message: `Tournament \"${tournament.name}\" has been updated!`,\n time: 'Just now'\n }, ...prev]);\n }\n socket.on('connect', onConnect);\n socket.on('disconnect', onDisconnect);\n socket.on('devfun:user_count', onUserCount);\n socket.on('challenge', onChallenge);\n socket.on('tournament_update', onTournamentUpdate);\n return () => {\n socket.off('connect', onConnect);\n socket.off('disconnect', onDisconnect);\n socket.off('devfun:user_count', onUserCount);\n socket.off('challenge', onChallenge);\n socket.off('tournament_update', onTournamentUpdate);\n clearInterval(timeInterval);\n };\n }, []);\n useEffect(() => {\n const checkTournamentsToStart = () => {\n const updatedTournaments = [...tournaments];\n let hasUpdates = false;\n updatedTournaments.forEach(tournament => {\n if (tournament.status === 'registering') {\n let tournamentStartTime;\n if (tournament.startTimeRaw) {\n tournamentStartTime = new Date(tournament.startTimeRaw);\n } else {\n tournamentStartTime = new Date(tournament.startTime);\n }\n if (currentTime >= tournamentStartTime) {\n if (tournament.players.length >= 2) {\n tournament.status = 'in_progress';\n hasUpdates = true;\n if (tournament.players.some(player => player.name === username)) {\n setNotifications(prev => [{\n id: Date.now(),\n message: `Tournament \"${tournament.name}\" has started! You can now play your games against bots to advance through the levels.`,\n time: 'Just now'\n }, ...prev]);\n }\n } else {\n if (tournament.creator === username && !tournament.waitingForPlayersNotified) {\n tournament.waitingForPlayersNotified = true;\n hasUpdates = true;\n setNotifications(prev => [{\n id: Date.now(),\n message: `Tournament \"${tournament.name}\" needs at least 2 players to start. Waiting for more players to join.`,\n time: 'Just now'\n }, ...prev]);\n }\n }\n }\n }\n if (tournament.status === 'in_progress') {\n let tournamentEndTime;\n if (tournament.endTimeRaw) {\n tournamentEndTime = new Date(tournament.endTimeRaw);\n } else {\n tournamentEndTime = new Date(tournament.endTime);\n }\n if (currentTime >= tournamentEndTime) {\n tournament.status = 'completed';\n const sortedPlayers = [...tournament.players].sort((a, b) => b.level - a.level);\n if (sortedPlayers.length > 0) {\n tournament.winner = sortedPlayers[0].name;\n const highestLevel = sortedPlayers[0].level;\n const winners = sortedPlayers.filter(p => p.level === highestLevel);\n const winAmount = tournament.prizePool;\n setWinnerInfo({\n tournamentName: tournament.name,\n tournamentGame: tournament.game,\n tournamentImage: tournament.img,\n winners: winners,\n prizePool: winAmount,\n level: highestLevel\n });\n setShowWinnerPopup(true);\n if (winners.some(w => w.name === username)) {\n setUserTokens(prev => prev + winAmount);\n setNotifications(prev => [{\n id: Date.now(),\n message: `Congratulations! You won the \"${tournament.name}\" tournament and ${winAmount.toLocaleString()} tokens!`,\n time: 'Just now'\n }, ...prev]);\n } else if (tournament.players.some(player => player.name === username)) {\n setNotifications(prev => [{\n id: Date.now(),\n message: `Tournament \"${tournament.name}\" has ended. ${winners.length > 1 ? winners.map(w => w.name).join(' and ') : winners[0].name} won with level ${highestLevel}.`,\n time: 'Just now'\n }, ...prev]);\n }\n }\n hasUpdates = true;\n }\n }\n });\n if (hasUpdates) {\n setTournaments(updatedTournaments);\n updatedTournaments.filter(t => t.status === 'in_progress' || t.status === 'completed').forEach(t => socket.emit('tournament_update', t));\n }\n };\n checkTournamentsToStart();\n }, [currentTime, tournaments, username, setUserTokens]);\n const filteredGames = GAMES.filter(game => game.name.toLowerCase().includes(searchQuery.toLowerCase()));\n const createChallenge = () => {\n if (!selectedGame) return;\n const challenge = {\n id: Date.now(),\n challenger: username,\n game: selectedGame.name,\n stake: stakeAmount,\n timeLeft: '15m'\n };\n socket.emit('challenge', challenge);\n setUserTokens(prev => prev - stakeAmount);\n setPendingChallenges(prev => [...prev, challenge]);\n setShowCreateChallenge(false);\n setSelectedGame(null);\n setNotifications(prev => [{\n id: Date.now(),\n message: `Challenge created for ${selectedGame.name}!`,\n time: 'Just now'\n }, ...prev]);\n };\n const createTournament = () => {\n const game = GAMES.find(g => g.name === tournamentFormData.game.name);\n if (!game) return;\n const startDate = new Date(tournamentFormData.startTime);\n const endDate = new Date(tournamentFormData.endTime);\n if (endDate <= startDate) {\n setNotifications(prev => [{\n id: Date.now(),\n message: `End date must be after start date!`,\n time: 'Just now'\n }, ...prev]);\n return;\n }\n const initialStatus = \"registering\";\n const totalStake = tournamentFormData.entryFee * tournamentFormData.maxParticipants;\n const platformFee = Math.ceil(totalStake * 0.001);\n const actualPrizePool = totalStake - platformFee;\n const newTournament = {\n id: Date.now(),\n name: tournamentFormData.name,\n game: game.name,\n img: game.img,\n entryFee: tournamentFormData.entryFee,\n prizePool: actualPrizePool,\n platformFee: platformFee,\n participants: {\n current: 1,\n max: tournamentFormData.maxParticipants\n },\n status: initialStatus,\n startTime: new Date(tournamentFormData.startTime).toLocaleString('en-US', {\n month: 'long',\n day: 'numeric',\n year: 'numeric',\n hour: 'numeric',\n minute: '2-digit',\n hour12: true\n }),\n endTime: new Date(tournamentFormData.endTime).toLocaleString('en-US', {\n month: 'long',\n day: 'numeric',\n year: 'numeric',\n hour: 'numeric',\n minute: '2-digit',\n hour12: true\n }),\n startTimeRaw: tournamentFormData.startTime,\n endTimeRaw: tournamentFormData.endTime,\n tournamentType: \"progression\",\n creator: username,\n players: [{\n name: username,\n level: 1,\n avatar: avatar\n }]\n };\n socket.emit('tournament_update', newTournament);\n setTournaments(prev => [...prev, newTournament]);\n setUserTokens(prev => prev - tournamentFormData.entryFee);\n setShowCreateTournament(false);\n setCreateTournamentStep(1);\n setNotifications(prev => [{\n id: Date.now(),\n message: `Tournament \"${newTournament.name}\" created successfully!`,\n time: 'Just now'\n }, ...prev]);\n if (initialStatus === \"in_progress\") {\n setNotifications(prev => [{\n id: Date.now(),\n message: `Tournament \"${newTournament.name}\" has started immediately! You can now play your games.`,\n time: 'Just now'\n }, ...prev]);\n }\n setTournamentFormData({\n name: \"\",\n game: GAMES[0],\n entryFee: 500,\n maxParticipants: 8,\n startTime: new Date(Date.now() + 86400000).toISOString().slice(0, 16),\n endTime: new Date(Date.now() + 86400000 + 3 * 86400000).toISOString().slice(0, 16)\n });\n };\n const joinTournament = tournament => {\n if (userTokens < tournament.entryFee) return;\n const updatedPlayers = [...(tournament.players || []), {\n name: username,\n level: 1,\n avatar: avatar\n }];\n const updatedTournament = {\n ...tournament,\n participants: {\n ...tournament.participants,\n current: tournament.participants.current + 1\n },\n players: updatedPlayers\n };\n socket.emit('tournament_update', updatedTournament);\n setTournaments(prev => prev.map(t => t.id === tournament.id ? updatedTournament : t));\n setUserTokens(prev => prev - tournament.entryFee);\n setNotifications(prev => [{\n id: Date.now(),\n message: `You joined the \"${tournament.name}\" tournament!`,\n time: 'Just now'\n }, ...prev]);\n };\n const [currentGame, setCurrentGame] = useState(null);\n const [gameBoard, setGameBoard] = useState(null);\n const [gameState, setGameState] = useState('waiting');\n const [selectedPiece, setSelectedPiece] = useState(null);\n const [possibleMoves, setPossibleMoves] = useState([]);\n const [playerColor, setPlayerColor] = useState('white');\n const [capturedPieces, setCapturedPieces] = useState({\n white: [],\n black: []\n });\n const [turnCount, setTurnCount] = useState(0);\n const [, setKingPositions] = useState({\n white: [7, 4],\n black: [0, 4]\n });\n const [castlingRights, setCastlingRights] = useState({\n white: {\n kingSide: true,\n queenSide: true\n },\n black: {\n kingSide: true,\n queenSide: true\n }\n });\n const [enPassantTarget, setEnPassantTarget] = useState(null);\n const [isCheck, setIsCheck] = useState(false);\n const [promotionChoice, setPromotionChoice] = useState(null);\n const [gameMessage, setGameMessage] = useState('');\n const initializeChessBoard = () => {\n const board = Array(8).fill().map(() => Array(8).fill(null));\n for (let i = 0; i < 8; i++) {\n board[1][i] = {\n type: 'pawn',\n color: 'black',\n symbol: '♟',\n hasMoved: false\n };\n board[6][i] = {\n type: 'pawn',\n color: 'white',\n symbol: '♙',\n hasMoved: false\n };\n }\n const backRowSetup = [{\n type: 'rook',\n symbol: ['♜', '♖'],\n hasMoved: false\n }, {\n type: 'knight',\n symbol: ['♞', '♘']\n }, {\n type: 'bishop',\n symbol: ['♝', '♗']\n }, {\n type: 'queen',\n symbol: ['♛', '♕']\n }, {\n type: 'king',\n symbol: ['♚', '♔'],\n hasMoved: false\n }, {\n type: 'bishop',\n symbol: ['♝', '♗']\n }, {\n type: 'knight',\n symbol: ['♞', '♘']\n }, {\n type: 'rook',\n symbol: ['♜', '♖'],\n hasMoved: false\n }];\n for (let i = 0; i < 8; i++) {\n board[0][i] = {\n type: backRowSetup[i].type,\n color: 'black',\n symbol: backRowSetup[i].symbol[0],\n hasMoved: backRowSetup[i].hasMoved || false\n };\n board[7][i] = {\n type: backRowSetup[i].type,\n color: 'white',\n symbol: backRowSetup[i].symbol[1],\n hasMoved: backRowSetup[i].hasMoved || false\n };\n }\n return board;\n };\n const initializeCheckersBoard = () => {\n const board = Array(8).fill().map(() => Array(8).fill(null));\n for (let row = 0; row < 8; row++) {\n for (let col = 0; col < 8; col++) {\n if ((row + col) % 2 === 1) {\n if (row < 3) {\n board[row][col] = {\n type: 'man',\n color: 'black',\n symbol: '⛂'\n };\n } else if (row > 4) {\n board[row][col] = {\n type: 'man',\n color: 'white',\n symbol: '⛀'\n };\n }\n }\n }\n }\n return board;\n };\n const findKing = (board, color) => {\n for (let row = 0; row < 8; row++) {\n for (let col = 0; col < 8; col++) {\n const piece = board[row][col];\n if (piece && piece.type === 'king' && piece.color === color) {\n return [row, col];\n }\n }\n }\n return null;\n };\n const isSquareAttacked = (board, row, col, byColor) => {\n const pawnDirection = byColor === 'white' ? -1 : 1;\n for (const offset of [-1, 1]) {\n const attackRow = row + pawnDirection;\n const attackCol = col + offset;\n if (attackRow >= 0 && attackRow < 8 && attackCol >= 0 && attackCol < 8) {\n const piece = board[attackRow][attackCol];\n if (piece && piece.type === 'pawn' && piece.color === byColor) {\n return true;\n }\n }\n }\n const knightMoves = [[-2, -1], [-2, 1], [-1, -2], [-1, 2], [1, -2], [1, 2], [2, -1], [2, 1]];\n for (const [dr, dc] of knightMoves) {\n const attackRow = row + dr;\n const attackCol = col + dc;\n if (attackRow >= 0 && attackRow < 8 && attackCol >= 0 && attackCol < 8) {\n const piece = board[attackRow][attackCol];\n if (piece && piece.type === 'knight' && piece.color === byColor) {\n return true;\n }\n }\n }\n const directions = [[1, 0], [-1, 0], [0, 1], [0, -1], [1, 1], [1, -1], [-1, 1], [-1, -1]];\n for (const [dr, dc] of directions) {\n for (let i = 1; i < 8; i++) {\n const attackRow = row + dr * i;\n const attackCol = col + dc * i;\n if (attackRow < 0 || attackRow >= 8 || attackCol < 0 || attackCol >= 8) break;\n const piece = board[attackRow][attackCol];\n if (piece) {\n if (piece.color === byColor) {\n if (Math.abs(dr) === 1 && Math.abs(dc) === 1 && (piece.type === 'bishop' || piece.type === 'queen') || (dr === 0 || dc === 0) && (piece.type === 'rook' || piece.type === 'queen') || i === 1 && piece.type === 'king') {\n return true;\n }\n }\n break;\n }\n }\n }\n return false;\n };\n const isKingInCheck = (board, kingColor) => {\n const kingPos = findKing(board, kingColor);\n if (!kingPos) return false;\n const [kingRow, kingCol] = kingPos;\n return isSquareAttacked(board, kingRow, kingCol, kingColor === 'white' ? 'black' : 'white');\n };\n const getChessPossibleMoves = (board, row, col, includeCastling = true, checkLegality = true) => {\n const piece = board[row][col];\n if (!piece) return [];\n const moves = [];\n const color = piece.color;\n const oppositeColor = color === 'white' ? 'black' : 'white';\n const isMoveValid = (fromRow, fromCol, toRow, toCol) => {\n if (!checkLegality) return true;\n const tempBoard = JSON.parse(JSON.stringify(board));\n tempBoard[toRow][toCol] = tempBoard[fromRow][fromCol];\n tempBoard[fromRow][fromCol] = null;\n const kingPos = piece.type === 'king' ? [toRow, toCol] : findKing(tempBoard, color);\n if (!kingPos) return true;\n return !isSquareAttacked(tempBoard, kingPos[0], kingPos[1], oppositeColor);\n };\n const addMoveIfValid = (toRow, toCol) => {\n if (isMoveValid(row, col, toRow, toCol)) {\n moves.push([toRow, toCol]);\n }\n };\n switch (piece.type) {\n case 'pawn':\n const direction = piece.color === 'white' ? -1 : 1;\n if (row + direction >= 0 && row + direction < 8 && !board[row + direction][col]) {\n addMoveIfValid(row + direction, col);\n const startRow = piece.color === 'white' ? 6 : 1;\n if (row === startRow && !board[row + 2 * direction][col] && !board[row + direction][col]) {\n addMoveIfValid(row + 2 * direction, col);\n }\n }\n for (const offset of [-1, 1]) {\n const newCol = col + offset;\n if (newCol >= 0 && newCol < 8 && row + direction >= 0 && row + direction < 8) {\n const targetPiece = board[row + direction][newCol];\n if (targetPiece && targetPiece.color !== piece.color) {\n addMoveIfValid(row + direction, newCol);\n }\n if (enPassantTarget && enPassantTarget[0] === row + direction && enPassantTarget[1] === newCol) {\n addMoveIfValid(row + direction, newCol);\n }\n }\n }\n break;\n case 'rook':\n for (const [dr, dc] of [[1, 0], [-1, 0], [0, 1], [0, -1]]) {\n for (let i = 1; i < 8; i++) {\n const newRow = row + i * dr;\n const newCol = col + i * dc;\n if (newRow < 0 || newRow >= 8 || newCol < 0 || newCol >= 8) break;\n if (!board[newRow][newCol]) {\n addMoveIfValid(newRow, newCol);\n } else {\n if (board[newRow][newCol].color !== piece.color) {\n addMoveIfValid(newRow, newCol);\n }\n break;\n }\n }\n }\n break;\n case 'knight':\n for (const [dr, dc] of [[2, 1], [2, -1], [-2, 1], [-2, -1], [1, 2], [1, -2], [-1, 2], [-1, -2]]) {\n const newRow = row + dr;\n const newCol = col + dc;\n if (newRow >= 0 && newRow < 8 && newCol >= 0 && newCol < 8) {\n if (!board[newRow][newCol] || board[newRow][newCol].color !== piece.color) {\n addMoveIfValid(newRow, newCol);\n }\n }\n }\n break;\n case 'bishop':\n for (const [dr, dc] of [[1, 1], [1, -1], [-1, 1], [-1, -1]]) {\n for (let i = 1; i < 8; i++) {\n const newRow = row + i * dr;\n const newCol = col + i * dc;\n if (newRow < 0 || newRow >= 8 || newCol < 0 || newCol >= 8) break;\n if (!board[newRow][newCol]) {\n addMoveIfValid(newRow, newCol);\n } else {\n if (board[newRow][newCol].color !== piece.color) {\n addMoveIfValid(newRow, newCol);\n }\n break;\n }\n }\n }\n break;\n case 'queen':\n for (const [dr, dc] of [[1, 0], [-1, 0], [0, 1], [0, -1], [1, 1], [1, -1], [-1, 1], [-1, -1]]) {\n for (let i = 1; i < 8; i++) {\n const newRow = row + i * dr;\n const newCol = col + i * dc;\n if (newRow < 0 || newRow >= 8 || newCol < 0 || newCol >= 8) break;\n if (!board[newRow][newCol]) {\n addMoveIfValid(newRow, newCol);\n } else {\n if (board[newRow][newCol].color !== piece.color) {\n addMoveIfValid(newRow, newCol);\n }\n break;\n }\n }\n }\n break;\n case 'king':\n for (const [dr, dc] of [[1, 0], [-1, 0], [0, 1], [0, -1], [1, 1], [1, -1], [-1, 1], [-1, -1]]) {\n const newRow = row + dr;\n const newCol = col + dc;\n if (newRow >= 0 && newRow < 8 && newCol >= 0 && newCol < 8) {\n if (!board[newRow][newCol] || board[newRow][newCol].color !== piece.color) {\n addMoveIfValid(newRow, newCol);\n }\n }\n }\n if (includeCastling && !isKingInCheck(board, color) && !piece.hasMoved) {\n const rights = castlingRights[color];\n const backRow = color === 'white' ? 7 : 0;\n if (rights.kingSide && !board[backRow][5] && !board[backRow][6] && board[backRow][7]?.type === 'rook' && !board[backRow][7]?.hasMoved) {\n if (!isSquareAttacked(board, backRow, 5, oppositeColor) && !isSquareAttacked(board, backRow, 6, oppositeColor)) {\n moves.push([backRow, 6, 'castle-king']);\n }\n }\n if (rights.queenSide && !board[backRow][1] && !board[backRow][2] && !board[backRow][3] && board[backRow][0]?.type === 'rook' && !board[backRow][0]?.hasMoved) {\n if (!isSquareAttacked(board, backRow, 2, oppositeColor) && !isSquareAttacked(board, backRow, 3, oppositeColor)) {\n moves.push([backRow, 2, 'castle-queen']);\n }\n }\n }\n break;\n }\n return moves;\n };\n const getCheckersPossibleMoves = (board, row, col) => {\n const piece = board[row][col];\n if (!piece) return [];\n const moves = [];\n const captures = [];\n const direction = piece.color === 'white' ? -1 : 1;\n const isKing = piece.type === 'king';\n const directions = isKing ? [[-1, -1], [-1, 1], [1, -1], [1, 1]] : [[direction, -1], [direction, 1]];\n for (const [dr, dc] of directions) {\n const newRow = row + dr;\n const newCol = col + dc;\n if (newRow >= 0 && newRow < 8 && newCol >= 0 && newCol < 8) {\n if (!board[newRow][newCol]) {\n moves.push([newRow, newCol]);\n } else if (board[newRow][newCol].color !== piece.color) {\n const jumpRow = newRow + dr;\n const jumpCol = newCol + dc;\n if (jumpRow >= 0 && jumpRow < 8 && jumpCol >= 0 && jumpCol < 8 && !board[jumpRow][jumpCol]) {\n captures.push([jumpRow, jumpCol, newRow, newCol]);\n }\n }\n }\n }\n return captures.length > 0 ? captures : moves;\n };\n const acceptChallenge = challenge => {\n setUserTokens(prev => prev - challenge.stake);\n setPendingChallenges(prev => prev.filter(c => c.id !== challenge.id));\n setNotifications(prev => [{\n id: Date.now(),\n message: `You accepted ${challenge.challenger}'s challenge!`,\n time: 'Just now'\n }, ...prev]);\n const gameName = challenge.game;\n setCurrentGame({\n id: challenge.id,\n name: gameName,\n challenger: challenge.challenger,\n stake: challenge.stake,\n tournamentGame: challenge.tournamentGame || false,\n tournamentId: challenge.tournamentId || null,\n difficultyLevel: challenge.difficultyLevel || 1\n });\n if (gameName === 'Chess') {\n const board = initializeChessBoard();\n setGameBoard(board);\n setKingPositions({\n white: [7, 4],\n black: [0, 4]\n });\n setCastlingRights({\n white: {\n kingSide: true,\n queenSide: true\n },\n black: {\n kingSide: true,\n queenSide: true\n }\n });\n setEnPassantTarget(null);\n setIsCheck(false);\n } else if (gameName === 'Checkers') {\n setGameBoard(initializeCheckersBoard());\n } else {\n setTimeout(() => {\n const userWon = Math.random() > 0.5;\n const winAmount = challenge.stake * 2;\n if (userWon) {\n setUserTokens(prev => prev + winAmount);\n setNotifications(prev => [{\n id: Date.now(),\n message: `You won ${winAmount} tokens against ${challenge.challenger}!`,\n time: 'Just now'\n }, ...prev]);\n } else {\n setNotifications(prev => [{\n id: Date.now(),\n message: `You lost to ${challenge.challenger}. Better luck next time!`,\n time: 'Just now'\n }, ...prev]);\n }\n setCurrentGame(null);\n }, 5000);\n return;\n }\n setGameState('player-turn');\n setTurnCount(0);\n const randomColor = Math.random() > 0.5 ? 'white' : 'black';\n setPlayerColor(randomColor);\n setCapturedPieces({\n white: [],\n black: []\n });\n if (randomColor === 'black' && gameName === 'Chess') {\n setGameState('opponent-turn');\n setTimeout(() => makeAIMove(initializeChessBoard()), 1500);\n }\n };\n const makeAIMove = board => {\n const aiColor = playerColor === 'white' ? 'black' : 'white';\n const possiblePieces = [];\n const difficultyLevel = currentGame.tournamentGame ? currentGame.difficultyLevel || 1 : 3;\n const skillFactor = Math.min(0.95, 0.3 + difficultyLevel * difficultyLevel / 100);\n let hasMandatoryCaptures = false;\n if (currentGame.name === 'Checkers') {\n for (let r = 0; r < 8; r++) {\n for (let c = 0; c < 8; c++) {\n const piece = board[r][c];\n if (piece && piece.color === aiColor) {\n const moves = getCheckersPossibleMoves(board, r, c);\n if (moves.length > 0 && moves[0].length === 4) {\n hasMandatoryCaptures = true;\n possiblePieces.push({\n row: r,\n col: c,\n moves,\n value: piece.type === 'king' ? 2 : 1\n });\n }\n }\n }\n }\n }\n if (!hasMandatoryCaptures) {\n for (let r = 0; r < 8; r++) {\n for (let c = 0; c < 8; c++) {\n const piece = board[r][c];\n if (piece && piece.color === aiColor) {\n let moves;\n if (currentGame.name === 'Chess') {\n moves = getChessPossibleMoves(board, r, c);\n } else if (currentGame.name === 'Checkers') {\n moves = getCheckersPossibleMoves(board, r, c);\n }\n if (moves.length > 0) {\n possiblePieces.push({\n row: r,\n col: c,\n moves,\n value: currentGame.name === 'Chess' ? piece.type === 'queen' ? 9 : piece.type === 'rook' ? 5 : piece.type === 'bishop' || piece.type === 'knight' ? 3 : piece.type === 'pawn' ? 1 : 0 : piece.type === 'king' ? 2 : 1\n });\n }\n }\n }\n }\n }\n if (possiblePieces.length > 0) {\n let selectedPiece;\n let selectedMove;\n if (Math.random() < skillFactor) {\n possiblePieces.sort((a, b) => b.value - a.value);\n const topPieceCount = Math.max(1, Math.floor(possiblePieces.length * skillFactor));\n selectedPiece = possiblePieces[Math.floor(Math.random() * topPieceCount)];\n const captureMoves = selectedPiece.moves.filter(move => {\n if (move.length === 2) {\n const [toRow, toCol] = move;\n return board[toRow][toCol] && board[toRow][toCol].color === playerColor;\n }\n return false;\n });\n if (captureMoves.length > 0 && Math.random() < skillFactor) {\n selectedMove = captureMoves[Math.floor(Math.random() * captureMoves.length)];\n } else {\n selectedMove = selectedPiece.moves[Math.floor(Math.random() * selectedPiece.moves.length)];\n }\n } else {\n selectedPiece = possiblePieces[Math.floor(Math.random() * possiblePieces.length)];\n selectedMove = selectedPiece.moves[Math.floor(Math.random() * selectedPiece.moves.length)];\n }\n const aiBoard = JSON.parse(JSON.stringify(board));\n const fromRow = selectedPiece.row;\n const fromCol = selectedPiece.col;\n if (currentGame.name === 'Chess') {\n const isSpecialMove = selectedMove.length > 2;\n const toRow = selectedMove[0];\n const toCol = selectedMove[1];\n const specialType = isSpecialMove ? selectedMove[2] : null;\n if (specialType && specialType.startsWith('castle')) {\n const backRow = aiColor === 'white' ? 7 : 0;\n if (specialType === 'castle-king') {\n aiBoard[backRow][6] = aiBoard[backRow][4];\n aiBoard[backRow][6].hasMoved = true;\n aiBoard[backRow][4] = null;\n aiBoard[backRow][5] = aiBoard[backRow][7];\n aiBoard[backRow][5].hasMoved = true;\n aiBoard[backRow][7] = null;\n setKingPositions(prev => ({\n ...prev,\n [aiColor]: [backRow, 6]\n }));\n } else {\n aiBoard[backRow][2] = aiBoard[backRow][4];\n aiBoard[backRow][2].hasMoved = true;\n aiBoard[backRow][4] = null;\n aiBoard[backRow][3] = aiBoard[backRow][0];\n aiBoard[backRow][3].hasMoved = true;\n aiBoard[backRow][0] = null;\n setKingPositions(prev => ({\n ...prev,\n [aiColor]: [backRow, 2]\n }));\n }\n setCastlingRights(prev => ({\n ...prev,\n [aiColor]: {\n kingSide: false,\n queenSide: false\n }\n }));\n } else {\n if (aiBoard[fromRow][fromCol].type === 'pawn' && fromCol !== toCol && !aiBoard[toRow][toCol]) {\n const captureRow = fromRow;\n const captureCol = toCol;\n const capturedPiece = aiBoard[captureRow][captureCol];\n aiBoard[captureRow][captureCol] = null;\n setCapturedPieces(prev => ({\n ...prev,\n [playerColor]: [...prev[playerColor], capturedPiece]\n }));\n }\n if (aiBoard[toRow][toCol]) {\n const capturedPiece = aiBoard[toRow][toCol];\n setCapturedPieces(prev => ({\n ...prev,\n [playerColor]: [...prev[playerColor], capturedPiece]\n }));\n }\n aiBoard[toRow][toCol] = aiBoard[fromRow][fromCol];\n aiBoard[fromRow][fromCol] = null;\n if (aiBoard[toRow][toCol].type === 'pawn' && Math.abs(fromRow - toRow) === 2) {\n const enPassantRow = aiColor === 'white' ? toRow + 1 : toRow - 1;\n setEnPassantTarget([enPassantRow, toCol]);\n } else {\n setEnPassantTarget(null);\n }\n aiBoard[toRow][toCol].hasMoved = true;\n if (aiBoard[toRow][toCol].type === 'pawn') {\n const promotionRow = aiColor === 'white' ? 0 : 7;\n if (toRow === promotionRow) {\n aiBoard[toRow][toCol] = {\n type: 'queen',\n color: aiColor,\n symbol: aiColor === 'white' ? '♕' : '♛',\n hasMoved: true\n };\n }\n }\n if (aiBoard[toRow][toCol].type === 'king') {\n setKingPositions(prev => ({\n ...prev,\n [aiColor]: [toRow, toCol]\n }));\n setCastlingRights(prev => ({\n ...prev,\n [aiColor]: {\n kingSide: false,\n queenSide: false\n }\n }));\n }\n if (aiBoard[toRow][toCol].type === 'rook') {\n const backRow = aiColor === 'white' ? 7 : 0;\n if (fromRow === backRow) {\n if (fromCol === 0) {\n setCastlingRights(prev => ({\n ...prev,\n [aiColor]: {\n ...prev[aiColor],\n queenSide: false\n }\n }));\n } else if (fromCol === 7) {\n setCastlingRights(prev => ({\n ...prev,\n [aiColor]: {\n ...prev[aiColor],\n kingSide: false\n }\n }));\n }\n }\n }\n }\n } else if (currentGame.name === 'Checkers') {\n if (selectedMove.length === 4) {\n const [toRow, toCol, captureRow, captureCol] = selectedMove;\n const capturedPiece = aiBoard[captureRow][captureCol];\n aiBoard[toRow][toCol] = aiBoard[fromRow][fromCol];\n aiBoard[fromRow][fromCol] = null;\n aiBoard[captureRow][captureCol] = null;\n setCapturedPieces(prev => ({\n ...prev,\n [playerColor]: [...prev[playerColor], capturedPiece]\n }));\n if (aiBoard[toRow][toCol].type === 'man') {\n const promotionRow = aiColor === 'white' ? 0 : 7;\n if (toRow === promotionRow) {\n aiBoard[toRow][toCol] = {\n type: 'king',\n color: aiColor,\n symbol: aiColor === 'white' ? '⛁' : '⛃'\n };\n }\n }\n } else {\n const [toRow, toCol] = selectedMove;\n aiBoard[toRow][toCol] = aiBoard[fromRow][fromCol];\n aiBoard[fromRow][fromCol] = null;\n if (aiBoard[toRow][toCol].type === 'man') {\n const promotionRow = aiColor === 'white' ? 0 : 7;\n if (toRow === promotionRow) {\n aiBoard[toRow][toCol] = {\n type: 'king',\n color: aiColor,\n symbol: aiColor === 'white' ? '⛁' : '⛃'\n };\n }\n }\n }\n }\n setGameBoard(aiBoard);\n setTurnCount(prev => prev + 1);\n if (currentGame.name === 'Chess') {\n const isPlayerInCheck = isKingInCheck(aiBoard, playerColor);\n setIsCheck(isPlayerInCheck);\n if (isPlayerInCheck) {\n let playerHasLegalMoves = false;\n outerLoop: for (let r = 0; r < 8; r++) {\n for (let c = 0; c < 8; c++) {\n const piece = aiBoard[r][c];\n if (piece && piece.color === playerColor) {\n const moves = getChessPossibleMoves(aiBoard, r, c);\n if (moves.length > 0) {\n playerHasLegalMoves = true;\n break outerLoop;\n }\n }\n }\n }\n if (!playerHasLegalMoves) {\n setGameMessage('Checkmate! You lost.');\n setNotifications(prev => [{\n id: Date.now(),\n message: `You lost to ${currentGame.challenger} by checkmate. Better luck next time!`,\n time: 'Just now'\n }, ...prev]);\n setGameState('completed');\n setTimeout(() => {\n setCurrentGame(null);\n setGameMessage('');\n }, 3000);\n return;\n } else {\n setGameMessage('Check!');\n }\n } else {\n setGameMessage('');\n }\n }\n if (currentGame.name === 'Checkers') {\n let playerHasMoves = false;\n for (let r = 0; r < 8; r++) {\n for (let c = 0; c < 8; c++) {\n const piece = aiBoard[r][c];\n if (piece && piece.color === playerColor) {\n const moves = getCheckersPossibleMoves(aiBoard, r, c);\n if (moves.length > 0) {\n playerHasMoves = true;\n break;\n }\n }\n }\n if (playerHasMoves) break;\n }\n if (!playerHasMoves) {\n setNotifications(prev => [{\n id: Date.now(),\n message: `You lost to ${currentGame.challenger}. Better luck next time!`,\n time: 'Just now'\n }, ...prev]);\n setGameState('completed');\n setTimeout(() => {\n setCurrentGame(null);\n }, 3000);\n return;\n }\n }\n setGameState('player-turn');\n }\n };\n const handlePieceClick = (row, col) => {\n if (gameState !== 'player-turn') return;\n if (promotionChoice) return;\n const piece = gameBoard[row][col];\n if (!selectedPiece && piece && piece.color === playerColor) {\n setSelectedPiece([row, col]);\n let moves;\n if (currentGame.name === 'Chess') {\n moves = getChessPossibleMoves(gameBoard, row, col);\n } else if (currentGame.name === 'Checkers') {\n moves = getCheckersPossibleMoves(gameBoard, row, col);\n }\n setPossibleMoves(moves);\n } else if (selectedPiece) {\n const [selectedRow, selectedCol] = selectedPiece;\n const selectedPieceObj = gameBoard[selectedRow][selectedCol];\n let isValidMove = false;\n let moveData = null;\n for (const move of possibleMoves) {\n if (currentGame.name === 'Checkers' && move.length === 4) {\n const [moveRow, moveCol, captureRow, captureCol] = move;\n if (moveRow === row && moveCol === col) {\n isValidMove = true;\n moveData = {\n captureRow,\n captureCol\n };\n break;\n }\n } else if (move.length === 3) {\n if (move[0] === row && move[1] === col) {\n isValidMove = true;\n moveData = {\n special: move[2]\n };\n break;\n }\n } else if (move[0] === row && move[1] === col) {\n isValidMove = true;\n break;\n }\n }\n if (isValidMove) {\n const newBoard = JSON.parse(JSON.stringify(gameBoard));\n if (moveData && moveData.special) {\n if (moveData.special.startsWith('castle')) {\n const backRow = playerColor === 'white' ? 7 : 0;\n if (moveData.special === 'castle-king') {\n newBoard[backRow][6] = newBoard[backRow][4];\n newBoard[backRow][6].hasMoved = true;\n newBoard[backRow][4] = null;\n newBoard[backRow][5] = newBoard[backRow][7];\n newBoard[backRow][5].hasMoved = true;\n newBoard[backRow][7] = null;\n setKingPositions(prev => ({\n ...prev,\n [playerColor]: [backRow, 6]\n }));\n } else {\n newBoard[backRow][2] = newBoard[backRow][4];\n newBoard[backRow][2].hasMoved = true;\n newBoard[backRow][4] = null;\n newBoard[backRow][3] = newBoard[backRow][0];\n newBoard[backRow][3].hasMoved = true;\n newBoard[backRow][0] = null;\n setKingPositions(prev => ({\n ...prev,\n [playerColor]: [backRow, 2]\n }));\n }\n setCastlingRights(prev => ({\n ...prev,\n [playerColor]: {\n kingSide: false,\n queenSide: false\n }\n }));\n }\n } else {\n if (currentGame.name === 'Chess' && selectedPieceObj.type === 'pawn' && selectedCol !== col && !gameBoard[row][col]) {\n const captureRow = selectedRow;\n const captureCol = col;\n const capturedPiece = gameBoard[captureRow][captureCol];\n newBoard[captureRow][captureCol] = null;\n setCapturedPieces(prev => ({\n ...prev,\n [capturedPiece.color]: [...prev[capturedPiece.color], capturedPiece]\n }));\n }\n if (currentGame.name === 'Checkers' && moveData && moveData.captureRow !== undefined) {\n const capturedPiece = gameBoard[moveData.captureRow][moveData.captureCol];\n newBoard[moveData.captureRow][moveData.captureCol] = null;\n setCapturedPieces(prev => ({\n ...prev,\n [capturedPiece.color]: [...prev[capturedPiece.color], capturedPiece]\n }));\n } else if (gameBoard[row][col]) {\n const capturedPiece = gameBoard[row][col];\n setCapturedPieces(prev => ({\n ...prev,\n [capturedPiece.color]: [...prev[capturedPiece.color], capturedPiece]\n }));\n }\n newBoard[row][col] = newBoard[selectedRow][selectedCol];\n newBoard[selectedRow][selectedCol] = null;\n if (currentGame.name === 'Chess') {\n newBoard[row][col].hasMoved = true;\n if (newBoard[row][col].type === 'pawn' && Math.abs(selectedRow - row) === 2) {\n const enPassantRow = playerColor === 'white' ? row + 1 : row - 1;\n setEnPassantTarget([enPassantRow, col]);\n } else {\n setEnPassantTarget(null);\n }\n if (newBoard[row][col].type === 'pawn') {\n const promotionRow = playerColor === 'white' ? 0 : 7;\n if (row === promotionRow) {\n setPromotionChoice({\n row,\n col,\n color: playerColor\n });\n setGameBoard(newBoard);\n return;\n }\n }\n if (newBoard[row][col].type === 'king') {\n setKingPositions(prev => ({\n ...prev,\n [playerColor]: [row, col]\n }));\n setCastlingRights(prev => ({\n ...prev,\n [playerColor]: {\n kingSide: false,\n queenSide: false\n }\n }));\n }\n if (newBoard[row][col].type === 'rook') {\n const backRow = playerColor === 'white' ? 7 : 0;\n if (selectedRow === backRow) {\n if (selectedCol === 0) {\n setCastlingRights(prev => ({\n ...prev,\n [playerColor]: {\n ...prev[playerColor],\n queenSide: false\n }\n }));\n } else if (selectedCol === 7) {\n setCastlingRights(prev => ({\n ...prev,\n [playerColor]: {\n ...prev[playerColor],\n kingSide: false\n }\n }));\n }\n }\n }\n } else if (currentGame.name === 'Checkers') {\n if (newBoard[row][col].type === 'man') {\n const promotionRow = playerColor === 'white' ? 0 : 7;\n if (row === promotionRow) {\n newBoard[row][col] = {\n type: 'king',\n color: playerColor,\n symbol: playerColor === 'white' ? '⛁' : '⛃'\n };\n }\n }\n }\n }\n setGameBoard(newBoard);\n setSelectedPiece(null);\n setPossibleMoves([]);\n setTurnCount(prev => prev + 1);\n if (!promotionChoice) {\n continueAfterMove(newBoard);\n }\n }\n }\n };\n const continueAfterMove = board => {\n const opponentColor = playerColor === 'white' ? 'black' : 'white';\n if (currentGame.name === 'Chess') {\n const isOpponentInCheck = isKingInCheck(board, opponentColor);\n let opponentHasLegalMoves = false;\n if (isOpponentInCheck) {\n outerLoop: for (let r = 0; r < 8; r++) {\n for (let c = 0; c < 8; c++) {\n const piece = board[r][c];\n if (piece && piece.color === opponentColor) {\n const moves = getChessPossibleMoves(board, r, c);\n if (moves.length > 0) {\n opponentHasLegalMoves = true;\n break outerLoop;\n }\n }\n }\n }\n if (!opponentHasLegalMoves) {\n const winAmount = currentGame.stake * 2;\n if (currentGame.tournamentGame && currentGame.tournamentId) {\n const tournament = tournaments.find(t => t.id === currentGame.tournamentId);\n if (tournament) {\n const updatedPlayers = tournament.players.map(player => {\n if (player.name === username) {\n return {\n ...player,\n level: Math.min(10, player.level + 1)\n };\n }\n return player;\n });\n const updatedTournament = {\n ...tournament,\n players: updatedPlayers\n };\n socket.emit('tournament_update', updatedTournament);\n setTournaments(prev => prev.map(t => t.id === tournament.id ? updatedTournament : t));\n setNotifications(prev => [{\n id: Date.now(),\n message: `You advanced to Level ${Math.min(10, currentGame.difficultyLevel + 1)} in the \"${tournament.name}\" tournament!`,\n time: 'Just now'\n }, ...prev]);\n }\n }\n setUserTokens(prev => prev + winAmount);\n setNotifications(prev => [{\n id: Date.now(),\n message: `Checkmate! You won ${winAmount} tokens against ${currentGame.challenger}!`,\n time: 'Just now'\n }, ...prev]);\n setGameState('completed');\n setGameMessage('Checkmate! You win!');\n setTimeout(() => {\n setCurrentGame(null);\n setGameMessage('');\n }, 3000);\n return;\n }\n } else {\n let opponentHasAnyMoves = false;\n outerLoop: for (let r = 0; r < 8; r++) {\n for (let c = 0; c < 8; c++) {\n const piece = board[r][c];\n if (piece && piece.color === opponentColor) {\n const moves = getChessPossibleMoves(board, r, c);\n if (moves.length > 0) {\n opponentHasAnyMoves = true;\n break outerLoop;\n }\n }\n }\n }\n if (!opponentHasAnyMoves) {\n const returnAmount = currentGame.stake;\n setUserTokens(prev => prev + returnAmount);\n setNotifications(prev => [{\n id: Date.now(),\n message: `Stalemate! The game against ${currentGame.challenger} ended in a draw.`,\n time: 'Just now'\n }, ...prev]);\n setGameState('completed');\n setGameMessage('Stalemate! Game drawn.');\n setTimeout(() => {\n setCurrentGame(null);\n setGameMessage('');\n }, 3000);\n return;\n }\n }\n }\n if (currentGame.name === 'Checkers') {\n let opponentHasCapturingMoves = false;\n let opponentHasAnyMoves = false;\n for (let r = 0; r < 8; r++) {\n for (let c = 0; c < 8; c++) {\n const piece = board[r][c];\n if (piece && piece.color === opponentColor) {\n const moves = getCheckersPossibleMoves(board, r, c);\n if (moves.length > 0) {\n opponentHasAnyMoves = true;\n if (moves[0].length === 4) {\n opponentHasCapturingMoves = true;\n break;\n }\n }\n }\n }\n if (opponentHasCapturingMoves) break;\n }\n if (!opponentHasAnyMoves) {\n const winAmount = currentGame.stake * 2;\n if (currentGame.tournamentGame && currentGame.tournamentId) {\n const tournament = tournaments.find(t => t.id === currentGame.tournamentId);\n if (tournament) {\n const updatedPlayers = tournament.players.map(player => {\n if (player.name === username) {\n return {\n ...player,\n level: Math.min(10, player.level + 1)\n };\n }\n return player;\n });\n const updatedTournament = {\n ...tournament,\n players: updatedPlayers\n };\n socket.emit('tournament_update', updatedTournament);\n setTournaments(prev => prev.map(t => t.id === tournament.id ? updatedTournament : t));\n setNotifications(prev => [{\n id: Date.now(),\n message: `You advanced to Level ${Math.min(10, currentGame.difficultyLevel + 1)} in the \"${tournament.name}\" tournament!`,\n time: 'Just now'\n }, ...prev]);\n }\n }\n setUserTokens(prev => prev + winAmount);\n setNotifications(prev => [{\n id: Date.now(),\n message: `You won ${winAmount} tokens against ${currentGame.challenger}!`,\n time: 'Just now'\n }, ...prev]);\n setGameState('completed');\n setTimeout(() => {\n setCurrentGame(null);\n }, 3000);\n return;\n }\n }\n setGameState('opponent-turn');\n setTimeout(() => makeAIMove(board), 1500);\n };\n const handlePromotion = pieceType => {\n if (!promotionChoice) return;\n const {\n row,\n col,\n color\n } = promotionChoice;\n const newBoard = JSON.parse(JSON.stringify(gameBoard));\n let symbol;\n switch (pieceType) {\n case 'queen':\n symbol = color === 'white' ? '♕' : '♛';\n break;\n case 'rook':\n symbol = color === 'white' ? '♖' : '♜';\n break;\n case 'bishop':\n symbol = color === 'white' ? '♗' : '♝';\n break;\n case 'knight':\n symbol = color === 'white' ? '♘' : '♞';\n break;\n }\n newBoard[row][col] = {\n type: pieceType,\n color: color,\n symbol: symbol,\n hasMoved: true\n };\n setGameBoard(newBoard);\n setPromotionChoice(null);\n continueAfterMove(newBoard);\n };\n const forfeitGame = () => {\n setNotifications(prev => [{\n id: Date.now(),\n message: `You forfeited the game against ${currentGame.challenger}.`,\n time: 'Just now'\n }, ...prev]);\n setCurrentGame(null);\n setGameMessage('');\n };\n const handleLogin = () => {\n if (userWallet && username.trim()) {\n setShowLoginModal(false);\n socket.emit('user_joined', {\n username,\n avatar,\n wallet: userWallet\n });\n }\n };\n useEffect(() => {\n if (userWallet && showLoginModal) {\n const shortenedAddress = userWallet.slice(0, 4) + '...' + userWallet.slice(-4);\n setUsername(shortenedAddress);\n }\n }, [userWallet, showLoginModal]);\n return

\n {}\n \n {}\n {showWinnerPopup && winnerInfo && \n \n

\n \n 🏆\n \n \n \n Tournament Champion{winnerInfo.winners.length > 1 ? 's' : ''}!\n \n \n \n {winnerInfo.tournamentName} tournament has ended\n \n \n \n

\n {winnerInfo.winners.map((winner, index) =>

\n {winner.avatar || '👑'}\n

{winner.name}

Level {winnerInfo.level}

)}\n

\n \n

Prize:

\n \n {winnerInfo.prizePool.toLocaleString()} tokens\n

\n \n \n \n

\n \n }\n \n {showTournamentDetails && selectedTournament && \n \n

Join BoardBattle

Connect Your Wallet First

\n \n

\n {!userWallet &&

Please connect your wallet to continue

}\n

\n \n {userWallet && <>\n

\n Choose Your Avatar\n

\n {['😎', '🧠', '🦊', '🐱', '🐼', '👑', '🤖', '👽'].map(emoji => )}\n

\n Username\n setUsername(e.target.value)} className=\"w-full p-3 bg-slate-700 rounded-lg focus:ring-2 focus:ring-purple-500 outline-none\" placeholder=\"Enter your username\" />\n

\n \n }\n

\n \n }\n \n {}\n

\n \n 🎮\n \n

\n BoardBattle\n

\n {userWallet && <>\n

\n \n {userTokens.toLocaleString()}\n

\n \n {showNotifications &&

\n Notifications\n \n

\n {notifications.length === 0 ?

No notifications

: notifications.map(notification =>

{notification.message}

{notification.time}

)}\n

}\n

\n {avatar}\n

\n {username}\n

\n }\n \n {!userWallet && }\n

\n {}\n

\n \n \n \n \n \n

\n \n {connectedUsers} online\n

\n {}\n

\n {}\n {activeTab === 'home' && !currentGame &&

\n {}\n

\n \n

\n \n \n The Ultimate Board Game Arena\n \n \n \n Compete, Conquer &
\n Claim the Tokens\n \n \n \n Battle through 10 levels of increasingly difficult opponents, stake your tokens, and emerge victorious to claim the entire prize pool.\n \n

\n \n \n \n \n \n \n

\n \n {featuredTournament && \n

\n {featuredTournament.img}\n {featuredTournament.game}\n

\n {featuredTournament.status === 'registering' ? 'Registering' : featuredTournament.status === 'in_progress' ? 'In Progress' : 'Completed'}\n

\n \n

{featuredTournament.name}

\n \n

\n \n \n Starts:\n \n {featuredTournament.startTime}\n

\n \n \n Players:\n \n \n {featuredTournament.participants.current}/{featuredTournament.participants.max}\n \n

\n \n \n Entry Fee:\n \n {featuredTournament.entryFee}\n

\n \n \n Prize Pool:\n \n {featuredTournament.prizePool.toLocaleString()}\n

\n \n \n

\n }\n

\n\n {}\n

Why Players Love BoardBattle

\n \n

Progressive Tournaments

Conquer increasingly difficult AI opponents as you level up, earning your place at the top of the leaderboard.

\n \n

Stake to Win

Stake your tokens to enter tournaments and win big! The champion takes home the entire prize pool.

\n \n

Classic Games

Play timeless board games like Chess, Checkers, Backgammon and more with competitive stakes.

\n\n {}\n

Latest Tournaments

\n \n

\n {tournaments.slice(0, 3).map(tournament => {\n setSelectedTournament(tournament);\n setShowTournamentDetails(true);\n }}>\n

\n {tournament.img}\n {tournament.game}\n

\n {tournament.status === 'registering' ? 'Registering' : tournament.status === 'in_progress' ? 'In Progress' : 'Completed'}\n

\n \n

{tournament.name}

\n \n

\n \n \n Start:\n \n {tournament.startTime}\n

\n \n \n Players:\n \n \n {tournament.participants.current}/{tournament.participants.max}\n \n

\n \n \n Prize Pool:\n \n {tournament.prizePool.toLocaleString()}\n

\n \n \n

\n )}\n

}\n {}\n {currentGame && gameBoard &&

\n \n {currentGame.name === 'Chess' ? '♟️' : currentGame.name === 'Checkers' ? '⛀' : '🎲'}\n \n {currentGame.name} Match\n

vs. {currentGame.challenger}

\n \n {currentGame.stake * 2} token pot\n

\n Playing as:\n \n {playerColor.charAt(0).toUpperCase() + playerColor.slice(1)}\n \n

\n \n

\n {}\n

\n {gameBoard.map((row, rowIndex) => row.map((cell, colIndex) =>

handlePieceClick(rowIndex, colIndex)} className={`\n relative aspect-square flex items-center justify-center text-3xl cursor-pointer\n ${(rowIndex + colIndex) % 2 === 0 ? 'bg-slate-500' : 'bg-slate-700'}\n ${selectedPiece && selectedPiece[0] === rowIndex && selectedPiece[1] === colIndex ? 'bg-purple-600' : ''}\n ${possibleMoves.some(move => move.length >= 3 ? move[0] === rowIndex && move[1] === colIndex : move[0] === rowIndex && move[1] === colIndex) ? 'bg-green-600/50' : ''}\n ${isCheck && gameBoard[rowIndex][colIndex]?.type === 'king' && gameBoard[rowIndex][colIndex]?.color === playerColor ? 'bg-red-600/70' : ''}\n hover:opacity-90\n `}>\n {cell && \n {cell.symbol}\n }\n \n {}\n {colIndex === 0 && \n {8 - rowIndex}\n }\n {rowIndex === 7 && \n {String.fromCharCode(97 + colIndex)}\n }\n

))}\n

\n \n {}\n

\n {gameMessage || gameState === 'player-turn' && 'Your turn' || gameState === 'opponent-turn' && 'Opponent\\'s turn...' || gameState === 'completed' && 'Game completed!'}\n

\n \n {}\n {promotionChoice &&

Choose Promotion

\n {[{\n type: 'queen',\n symbol: promotionChoice.color === 'white' ? '♕' : '♛'\n }, {\n type: 'rook',\n symbol: promotionChoice.color === 'white' ? '♖' : '♜'\n }, {\n type: 'bishop',\n symbol: promotionChoice.color === 'white' ? '♗' : '♝'\n }, {\n type: 'knight',\n symbol: promotionChoice.color === 'white' ? '♘' : '♞'\n }].map(piece => )}\n

}\n

\n \n

\n {}\n

\n Turn:\n {turnCount}\n

\n \n

Captured Pieces

White

\n {capturedPieces.white.map((piece, i) => {piece.symbol})}\n {capturedPieces.white.length === 0 && None}\n

Black

\n {capturedPieces.black.map((piece, i) => {piece.symbol})}\n {capturedPieces.black.length === 0 && None}\n

\n \n {gameState === 'player-turn' && currentGame.name === 'Chess' &&

Click on your piece to select it, then click on a highlighted square to move.

\n {currentGame.tournamentGame &&

\n Tournament Game: Level {currentGame.difficultyLevel} Bot\n {currentGame.difficultyLevel < 10 && ` - Win to advance to Level ${currentGame.difficultyLevel + 1}!`}\n {currentGame.difficultyLevel === 10 && ` - Final Level!`}\n

}\n {isCheck &&

Your king is in check! You must move out of check.

}\n

\n \n {}\n

\n \n {gameState === 'completed' && }\n

}\n \n {}\n {activeTab === 'games' && !currentGame &&

Game Gallery

\n setSearchQuery(e.target.value)} className=\"w-full p-2 bg-slate-800 rounded-lg border border-slate-700 focus:border-purple-500 outline-none\" />\n

\n {filteredGames.map(game => {\n setSelectedGame(game);\n setShowCreateChallenge(true);\n setStakeAmount(game.minBet);\n }}>\n

\n {game.img}\n

{game.name}

\n Stakes:\n {game.minBet} - {game.maxBet}\n

\n Players:\n {game.players}\n

\n Duration:\n {game.duration}\n

\n \n

\n )}\n

}\n {}\n {activeTab === 'challenges' && !currentGame &&

Your Challenges

View your pending challenges and create new ones

\n \n Pending Challenges\n

\n \n

\n {pendingChallenges.length === 0 ?

You have no pending challenges

\n \n

\n {pendingChallenges.map(challenge =>

{challenge.game} Challenge

Stake: {challenge.stake} tokens

\n Waiting for opponent\n

)}\n

}\n

\n \n Active Challenges\n

\n {ACTIVE_CHALLENGES.map(challenge => \n

\n {GAMES.find(g => g.name === challenge.game)?.img || '🎲'}\n

{challenge.game} Challenge

From: {challenge.challenger}

Stake: {challenge.stake} tokens

\n {challenge.timeLeft} left to accept\n

\n \n

\n )}\n {ACTIVE_CHALLENGES.length === 0 &&

No active challenges available

}\n

}\n {}\n {activeTab === 'tournaments' && !currentGame &&

Tournaments

Join or create board game tournaments

\n \n

\n {tournaments.map(tournament => {\n setSelectedTournament(tournament);\n setShowTournamentDetails(true);\n }}>\n

\n {tournament.img}\n {tournament.game}\n

\n {tournament.status === 'registering' ? 'Registering' : tournament.status === 'in_progress' ? 'In Progress' : 'Completed'}\n

\n \n

{tournament.name}

\n \n

\n \n \n Start:\n \n {tournament.startTime}\n

\n \n \n Players:\n \n \n {tournament.participants.current}/{tournament.participants.max}\n \n

\n \n \n Entry Fee:\n \n {tournament.entryFee}\n

\n \n \n Prize Pool:\n \n {tournament.prizePool.toLocaleString()}\n

\n \n {tournament.status === 'registering' && tournament.participants.current < tournament.participants.max ? : tournament.status === 'completed' ?

Tournament Winner

\n \n {tournament.winner || 'GrandMaster42'}\n

: tournament.status === 'in_progress' && tournament.players?.some(p => p.name === username) ? : }\n

\n )}\n

}\n \n {}\n {activeTab === 'leaderboard' && !currentGame &&

Leaderboard

Top players by tokens won

Player

W/L

Win Rate

Tokens Won

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

\n {index === 0 ? : index === 1 ? : index === 2 ? : {index + 1}}\n

\n {player.avatar}\n

\n {player.name}\n {index < 3 && \n Elite\n }\n

\n {player.wins}\n /\n {player.losses}\n

\n {Math.round(player.wins / (player.wins + player.losses) * 100)}%\n

\n {player.tokensWon.toLocaleString()}\n

\n )}\n

}\n

\n {}\n \n {showCreateChallenge && selectedGame && \n \n

Create Challenge

\n \n

{selectedGame.img}

{selectedGame.name}

{selectedGame.players} Players • {selectedGame.duration}

\n Stake Amount (Min: {selectedGame.minBet}, Max: {selectedGame.maxBet})\n setStakeAmount(parseInt(e.target.value))} className=\"w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer\" />\n

\n {selectedGame.minBet}\n {stakeAmount}\n {Math.min(selectedGame.maxBet, userTokens)}\n

\n Your stake:\n {stakeAmount} tokens\n

\n Opponent stake:\n {stakeAmount} tokens\n

\n Potential win:\n {stakeAmount * 2} tokens\n

\n \n \n

\n {userTokens < stakeAmount &&

\n You don't have enough tokens for this stake\n

}\n \n }\n \n {}\n \n {showCreateTournament && \n \n

Create Tournament

\n \n

\n {createTournamentStep}\n

\n 3\n

\n \n {}\n {createTournamentStep === 1 && \n

\n \n Tournament Name *\n \n setTournamentFormData({\n ...tournamentFormData,\n name: e.target.value\n })} className={`w-full p-3 rounded-lg focus:ring-2 outline-none ${!tournamentFormData.name.trim() ? 'bg-red-900/20 border border-red-500/50 focus:ring-red-500' : 'bg-slate-700 focus:ring-purple-500'}`} placeholder=\"Enter a catchy tournament name\" />\n {!tournamentFormData.name.trim() &&

Tournament name is required to proceed

}\n {tournamentFormData.name.length > 0 && tournamentFormData.name.length < 4 &&

Tournament name should be at least 4 characters

}\n

\n \n

\n Select Game\n

\n {GAMES.filter(game => game.tournamentEligible).map(game =>

setTournamentFormData({\n ...tournamentFormData,\n game\n })} className={`p-3 rounded-lg cursor-pointer flex items-center gap-2 ${tournamentFormData.game.id === game.id ? 'bg-purple-700 border-2 border-purple-400' : 'bg-slate-700 border-2 border-transparent hover:bg-slate-600'}`}>\n {game.img}\n {game.name}\n

)}\n

\n \n

\n \n Tournament System\n

\n Players will compete against AI bots of increasing difficulty (levels 1-10).\n The first player to defeat each level bot will top the tournament leaderboard.\n When the tournament ends, the player at the highest level wins all tokens!\n

\n }\n \n {}\n {createTournamentStep === 2 && \n

\n Entry Fee\n setTournamentFormData({\n ...tournamentFormData,\n entryFee: parseInt(e.target.value)\n })} className=\"w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer\" />\n

\n 100\n {tournamentFormData.entryFee}\n 5000\n

\n \n

\n Maximum Participants\n

\n {[4, 8, 16, 32].map(num =>

setTournamentFormData({\n ...tournamentFormData,\n maxParticipants: num\n })} className={`p-3 rounded-lg cursor-pointer text-center ${tournamentFormData.maxParticipants === num ? 'bg-purple-700 border-2 border-purple-400' : 'bg-slate-700 border-2 border-transparent hover:bg-slate-600'}`}>\n {num}\n

)}\n

\n \n

\n Start Time\n setTournamentFormData({\n ...tournamentFormData,\n startTime: e.target.value\n })} className=\"w-full p-3 bg-slate-700 rounded-lg focus:ring-2 focus:ring-purple-500 outline-none\" min={new Date().toISOString().slice(0, 16)} />\n

\n\n

\n End Time\n setTournamentFormData({\n ...tournamentFormData,\n endTime: e.target.value\n })} className=\"w-full p-3 bg-slate-700 rounded-lg focus:ring-2 focus:ring-purple-500 outline-none\" min={tournamentFormData.startTime} />\n

\n \n

Tournament Format

\n In this progressive tournament, players compete against increasingly difficult AI bots (levels 1-10). \n Win a game to advance to the next level. The first player to conquer each level tops the tournament \n leaderboard! At the end of the tournament period, the player who reached the highest level \n takes home {(100 - 0.1).toFixed(1)}% of all staked tokens!\n

\n \n BoardBattle takes a 0.1% platform fee from the total prize pool\n

\n \n A minimum of 2 players is required for a tournament to start\n

\n }\n \n {}\n {createTournamentStep === 3 && \n

Tournament Summary

\n \n

Tournament Summary

\n \n

{tournamentFormData.game.img}

{tournamentFormData.name || \"Untitled Tournament\"}

{tournamentFormData.game.name} Tournament

\n \n

\n \n Schedule\n

\n Starts:\n {new Date(tournamentFormData.startTime).toLocaleString()}\n

\n Ends:\n {new Date(tournamentFormData.endTime).toLocaleString()}\n

\n Duration:\n \n {Math.ceil((new Date(tournamentFormData.endTime) - new Date(tournamentFormData.startTime)) / (1000 * 60 * 60 * 24))} days\n \n

\n \n

\n \n Participants\n

\n Max Players:\n {tournamentFormData.maxParticipants}\n

\n Min Level:\n 1\n

\n Max Level:\n 10\n

\n \n

\n \n Economics\n

\n Entry Fee:\n {tournamentFormData.entryFee.toLocaleString()} tokens\n

\n Total Stake:\n {(tournamentFormData.entryFee * tournamentFormData.maxParticipants).toLocaleString()} tokens\n

\n Platform Fee (0.1%):\n -{Math.ceil(tournamentFormData.entryFee * tournamentFormData.maxParticipants * 0.001).toLocaleString()} tokens\n

\n Final Prize Pool:\n {(tournamentFormData.entryFee * tournamentFormData.maxParticipants - Math.ceil(tournamentFormData.entryFee * tournamentFormData.maxParticipants * 0.001)).toLocaleString()} tokens\n

\n \n

Tournament Economics

\n Your Balance:\n {userTokens.toLocaleString()} tokens\n

\n Entry Fee:\n {tournamentFormData.entryFee.toLocaleString()} tokens\n

\n Max Participants:\n {tournamentFormData.maxParticipants}\n

\n Total Prize Pool:\n {(tournamentFormData.entryFee * tournamentFormData.maxParticipants).toLocaleString()} tokens\n

\n Platform Fee (0.1%):\n -{Math.ceil(tournamentFormData.entryFee * tournamentFormData.maxParticipants * 0.001).toLocaleString()} tokens\n

\n \n {userTokens < tournamentFormData.entryFee &&

\n You don't have enough tokens to create this tournament\n

}\n }\n

\n \n

\n {createTournamentStep > 1 ? : }\n \n {createTournamentStep < 3 ? : }\n

\n \n }\n \n \n \n {showTournamentDetails && selectedTournament && \n \n

{selectedTournament.img}

{selectedTournament.name}

{selectedTournament.game} Tournament

\n \n

\n \n Tournament Info\n

\n \n

\n Status:\n \n {selectedTournament.status === 'registering' ? 'Registering' : selectedTournament.status === 'in_progress' ? 'In Progress' : 'Completed'}\n \n

\n Start Time:\n {selectedTournament.startTime}\n

\n End Time:\n {selectedTournament.endTime}\n

\n Creator:\n {selectedTournament.creator}\n

\n Tournament Type:\n Progressive Levels\n

\n \n

\n \n Participants\n

\n \n

\n Registered:\n {selectedTournament.participants.current}/{selectedTournament.participants.max}\n

\n \n {selectedTournament.status === 'registering' &&

\n Registration:\n \n Open\n \n \n

}\n \n {selectedTournament.status === 'completed' && selectedTournament.winner &&

Tournament Winner

\n \n {selectedTournament.winner}\n

}\n

\n \n

\n \n Prize Pool\n

\n \n

\n Entry Fee:\n {selectedTournament.entryFee} tokens\n

\n Total Prize:\n {selectedTournament.prizePool.toLocaleString()} tokens\n

\n \n

Prize Distribution

\n 1st Place:\n {Math.floor(selectedTournament.prizePool * 0.7).toLocaleString()}\n

\n 2nd Place:\n {Math.floor(selectedTournament.prizePool * 0.2).toLocaleString()}\n

\n 3rd Place:\n {Math.floor(selectedTournament.prizePool * 0.1).toLocaleString()}\n

\n Platform Fee (0.1%):\n {selectedTournament.platformFee || Math.ceil(selectedTournament.prizePool * 0.001).toLocaleString()} tokens\n

How Prizes Work

\n At tournament end, the player who reached the highest bot level wins all tokens.\n In case of a tie, the first player to reach that level takes the prize.\n

\n \n

\n \n Tournament Progress\n

\n \n {selectedTournament.status === 'registering' &&

\n \n

This tournament will start at {selectedTournament.startTime}

\n {selectedTournament.players && selectedTournament.players.length < 2 ? `Waiting for more players - minimum 2 players required (${selectedTournament.players.length}/2)` : \"You'll be notified when it begins\"}\n

}\n \n

\n Players compete against AI opponents at increasing difficulty levels (1-10). \n Win a game to advance to the next level. The first player to reach each level\n tops the tournament leaderboard! At the end of the tournament, \n players are rewarded based on their highest level reached.\n

\n \n

\n {selectedTournament.players && [...selectedTournament.players].sort((a, b) => b.level - a.level).map((player, index) => \n

\n {index === 0 && selectedTournament.status === 'in_progress' &&

\n \n

}\n

\n {player.avatar || '👤'}\n

\n {player.name}\n {player.name === username && You}\n

\n Level {player.level}\n {selectedTournament.players.filter(p => p.level > player.level).length === 0 && player.level === Math.max(...selectedTournament.players.map(p => p.level)) && }\n

\n )}\n

\n \n

\n \n \n {selectedTournament.status === 'registering' && selectedTournament.participants.current < selectedTournament.participants.max && userTokens >= selectedTournament.entryFee && !selectedTournament.players?.some(p => p.name === username) && }\n \n {selectedTournament.status === 'in_progress' && selectedTournament.players?.some(p => p.name === username) && }\n

\n \n }\n \n \n {}\n \n

;\n}","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"framer-motion\":\"10.16.4\",\"lucide-react\":\"0.441.0\",\"socket.io-client\":\"4.0.0\",\"recharts\":\"2.8.0\",\"react-dom\":\"18.2.0\",\"@devfunlabs/web-sdk\":\"0.5.5\"}}","appFunctions",[],"token",{"_18":80,"_81":82,"_83":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_70":71},"vibecode.fun","symbol","rick","price",0.000125,"marketcap",124476.408,"image","https://pump.mypinata.cloud/ipfs/QmdiVAhd3kBiCNCc559HT5hQGeoP742a9BGML1qod45c8j?img-width=256&img-dpr=2","website","https://dev.fun/p/93870176b0b04c03015d","twitter","https://x.com/crabbylions/status/1898018929869832580?s=46","devCount",66,"appCount",96,"upstreamApp","isLordOfDev","analytics",[101,105,107,109,111,113,115,117,119,121,123,125,127,129],{"_102":103,"_104":58},"day","2025-07-13","runCount",{"_102":106,"_104":58},"2025-07-14",{"_102":108,"_104":58},"2025-07-15",{"_102":110,"_104":58},"2025-07-16",{"_102":112,"_104":58},"2025-07-17",{"_102":114,"_104":58},"2025-07-18",{"_102":116,"_104":58},"2025-07-19",{"_102":118,"_104":58},"2025-07-20",{"_102":120,"_104":58},"2025-07-21",{"_102":122,"_104":58},"2025-07-22",{"_102":124,"_104":58},"2025-07-23",{"_102":126,"_104":58},"2025-07-24",{"_102":128,"_104":58},"2025-07-25",{"_102":130,"_104":58},"2025-07-26","snapshot","ogImage","https://cdn.dev.fun/og/image/2a366c14fd7037b18815/01772483.webp","isDevbase","actionData","errors"]

say something