\n 🎯 Word Race\n

\n \n {error && (\n

\n {error}\n

\n )}\n \n

\n \n Game ID\n \n setGameId(e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500\"\n placeholder=\"Enter game ID (e.g., 'room1')\"\n />\n

\n \n

\n \n Your Name\n \n setPlayerName(e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500\"\n placeholder=\"Enter your name\"\n onKeyPress={(e) => e.key === 'Enter' && joinGame()}\n />\n

\n \n \n {isLoading ? 'Joining...' : 'Join Game'}\n \n

\n \n

How to play:

Take turns flipping tiles to reveal letters
Spot words using the revealed letters
Select tiles and submit words to claim them
First to submit a valid word gets the points!

\n );\n }\n\n const currentPlayer = gameState.players[gameState.currentPlayerIndex];\n const isMyTurn = currentPlayer?.id === playerId;\n const myPlayer = gameState.players.find(p => p.id === playerId);\n const opponent = gameState.players.find(p => p.id !== playerId);\n\n return (\n

\n {/* Header */}\n

🎯 Word Race

\n Game: {gameId} | Players: {gameState.players.length}/2\n

\n \n {gameState.phase === 'waiting' && (\n

\n Waiting for {2 - gameState.players.length} more player(s)...\n

\n )}\n \n {gameState.phase === 'finished' && (\n

\n 🎉 Game Over! Winner: {gameState.winner}\n

\n )}\n

\n\n {/* Players */}\n

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

\n {player.name} {player.id === playerId && '(You)'}\n {currentPlayer?.id === player.id && gameState.phase === 'playing' && (\n \n Current Turn\n \n )}\n

\n {player.score} pts\n

\n \n

\n {player.claimedWords.map((claimedWord, idx) => (\n

\n {claimedWord.word}\n {claimedWord.points} pts\n

\n {claimedWord.letters.join(' • ')}\n

\n ))}\n {player.claimedWords.length === 0 && (\n

No words claimed yet

\n )}\n

\n ))}\n

\n\n {/* Game Board */}\n

Letter Tiles

\n \n {gameState.phase === 'playing' && (\n

\n {isMyTurn ? (\n

\n 🎯 Your turn! Click a face-down tile to flip it.\n

\n ) : (\n

\n Waiting for {currentPlayer?.name}'s turn...\n

\n )}\n

\n )}\n \n

\n {gameState.tiles.map((tile) => (\n tile.isFlipped ? toggleTileSelection(tile.id) : flipTile(tile.id)}\n disabled={gameState.phase !== 'playing' || (!tile.isFlipped && !isMyTurn)}\n className={`\n tile aspect-square rounded-lg font-bold text-lg flex items-center justify-center\n transition-all duration-200 border-2\n ${tile.isFlipped ? 'flipped' : 'face-down cursor-pointer hover:scale-105'}\n ${selectedTiles.includes(tile.id) ? 'border-yellow-400 ring-2 ring-yellow-300' : 'border-transparent'}\n ${!tile.isFlipped && isMyTurn && gameState.phase === 'playing' ? 'hover:shadow-lg' : ''}\n disabled:cursor-not-allowed disabled:opacity-50\n `}\n >\n {tile.isFlipped ? (\n

{tile.letter}

{tile.points}

\n ) : (\n '?'\n )}\n \n ))}\n

\n\n {/* Word Input */}\n {gameState.phase === 'playing' && (\n

Claim a Word

\n \n {error && (\n

\n {error}\n

\n )}\n \n

\n \n Word (select tiles or type manually)\n \n setWordInput(e.target.value.toUpperCase())}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500\"\n placeholder=\"Enter word...\"\n onKeyPress={(e) => e.key === 'Enter' && submitWord()}\n />\n

\n \n \n Submit Word\n \n \n \n Clear\n \n

\n \n {selectedTiles.length > 0 && (\n

\n Selected tiles ({selectedTiles.length}):\n

\n {selectedTiles.map(tileId => {\n const tile = gameState.tiles.find(t => t.id === tileId);\n return tile ? (\n \n {tile.letter} ({tile.points}pts)\n \n ) : null;\n })}\n

\n )}\n

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