\n 🎮 Hide and Sick\n

A thrilling game of hide and seek for 4 players!

\n\n {/* Create Player */}\n

Add New Player

\n setState(prev => ({ ...prev, newPlayerName: e.target.value }))}\n placeholder=\"Enter player name\"\n className=\"flex-1 px-4 py-2 rounded-lg bg-white/10 border border-white/20 text-white placeholder-gray-400\"\n onKeyPress={(e) => e.key === 'Enter' && createPlayer()}\n />\n \n Add\n \n

\n\n {/* Player Selection */}\n

\n Select 4 Players ({state.selectedPlayers.length}/4)\n

\n \n

\n {state.players.map(player => (\n togglePlayerSelection(player.id)}\n className={`player-card rounded-lg p-4 cursor-pointer transition-all ${\n state.selectedPlayers.includes(player.id) ? 'ring-2 ring-purple-400 pulse-glow' : ''\n }`}\n >\n

{player.name}

\n {player.score} pts\n

\n \n

Games: {player.gamesPlayed}

Hides: {player.successfulHides}/{player.timesHidden}

Seeks: {player.successfulSeeks}/{player.timesSeeker}

\n \n {/* Player Rewards */}\n {state.playerRewards[player.id]?.length > 0 && (\n

\n {state.playerRewards[player.id].slice(0, 3).map(reward => (\n \n {reward.icon}\n \n ))}\n {state.playerRewards[player.id].length > 3 && (\n \n +{state.playerRewards[player.id].length - 3}\n \n )}\n

\n )}\n

\n ))}\n

\n\n {state.selectedPlayers.length === 4 && (\n

\n \n 🚀 Start Game!\n \n

\n )}\n

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

🏆 Leaderboard

\n {state.players\n .sort((a, b) => b.score - a.score)\n .slice(0, 10)\n .map((player, index) => (\n

\n \n {index === 0 ? '🥇' : index === 1 ? '🥈' : index === 2 ? '🥉' : `#${index + 1}`}\n \n {player.name}\n

\n \n {player.score} pts\n \n

\n ))}\n

\n \n );\n }\n\n if (state.gamePhase === 'playing') {\n const seeker = getCurrentSeeker();\n const hiders = getCurrentHiders();\n const isRoundActive = state.currentSession?.gameStatus === 'active';\n\n return (\n

Round {state.currentSession?.currentRound}/4

\n {isRoundActive && (\n

\n {formatTime(state.roundTimer)}\n

\n )}\n

\n\n {/* Current Seeker */}\n {seeker && (\n

🔍 Current Seeker

{seeker.name}

Find the hidden players!

\n )}\n\n {/* Hiders */}\n

👻 Hiders

\n {hiders.map(hider => (\n isRoundActive && toggleFoundPlayer(hider.id)}\n className={`p-4 rounded-lg cursor-pointer transition-all ${\n state.foundPlayers.includes(hider.id)\n ? 'bg-red-500/30 border-2 border-red-400'\n : 'bg-green-500/20 border-2 border-green-400'\n } ${isRoundActive ? 'hover:scale-105' : 'cursor-not-allowed opacity-50'}`}\n >\n

\n {state.foundPlayers.includes(hider.id) ? '😵' : '🫥'}\n

{hider.name}

\n {state.foundPlayers.includes(hider.id) ? 'FOUND!' : 'HIDING'}\n

\n ))}\n

\n\n {/* Game Controls */}\n

\n {!isRoundActive ? (\n \n ▶️ Start Round\n \n ) : (\n \n ⏹️ End Round\n \n )}\n \n

\n \n 🏠 Back to Setup\n \n

\n\n {/* Scoring Info */}\n

📊 Scoring System

Hider Rewards:

• Successful Hide: +{SCORING.SUCCESSFUL_HIDE} pts

Seeker Rewards:

• Find Player: +{SCORING.FIND_PLAYER} pts

• Being Seeker: +{SCORING.SEEKER_BONUS} pts

• Perfect Round: +{SCORING.PERFECT_ROUND_BONUS} pts

\n \n );\n }\n\n if (state.gamePhase === 'finished') {\n const finalPlayers = state.currentSession?.players.sort((a, b) => b.score - a.score) || [];\n\n return (\n

\n 🎉 Game Complete!\n

\n\n {/* Final Results */}\n

🏆 Final Results

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

\n \n {index === 0 ? '🥇' : index === 1 ? '🥈' : index === 2 ? '🥉' : `#${index + 1}`}\n \n

{player.name}

\n Games: {player.gamesPlayed} | Hides: {player.successfulHides}/{player.timesHidden} | Seeks: {player.successfulSeeks}/{player.timesSeeker}\n

\n {player.score} pts\n

\n ))}\n

\n\n {/* Play Again */}\n

\n \n 🔄 Play Again\n \n

\n \n );\n }\n\n return null;\n}\n\n// Initialize the app\nconst root = createRoot(document.getElementById('root')!);\nroot.render();","deleted","label",[170,153],"frontend","permalink","https://www.val.town/x/zalwangojalia/Game/code/frontend/index.tsx","extension","actionData","errors"]