add game UI to player view

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

packages/client/src/routes/play.$roomCode.tsx

@@ -3,6 +3,9 @@ import { createFileRoute } from "@tanstack/react-router"
 import { useWebSocket } from "@/hooks/use-websocket"
 import { useRoomStore } from "@/stores/room-store"
 import { PlayerList } from "@/components/player-list"
+import { PredictionsForm } from "@/components/predictions-form"
+import { DishList } from "@/components/dish-list"
+import { DishResults } from "@/components/dish-results"
 import { RoomHeader } from "@/components/room-header"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
@@ -14,7 +17,7 @@ export const Route = createFileRoute("/play/$roomCode")({
 function PlayerView() {
 	const { roomCode } = Route.useParams()
 	const { send } = useWebSocket(roomCode)
-	const { room, mySessionId, connectionStatus } = useRoomStore()
+	const { room, mySessionId, connectionStatus, gameState } = useRoomStore()
 	const joinSentRef = useRef(false)
 	const [manualName, setManualName] = useState("")
 
@@ -85,17 +88,43 @@ function PlayerView() {
 		<div className="flex min-h-screen flex-col">
 			<RoomHeader roomCode={roomCode} currentAct={room.currentAct} connectionStatus={connectionStatus} />
 			<div className="flex-1 p-4">
-				{room.currentAct === "lobby" && (
+				{room.currentAct === "lobby" && !gameState && (
 					<div className="flex flex-col items-center gap-4 py-8">
 						<p className="text-lg text-muted-foreground">Waiting for the host to start...</p>
 					</div>
 				)}
+
+				{gameState && (room.currentAct === "lobby" || room.currentAct === "act1") && (
+					<div className="flex flex-col gap-4">
+						<PredictionsForm
+							countries={gameState.lineup.countries}
+							existingPrediction={gameState.myPrediction}
+							locked={gameState.predictionsLocked}
+							onSubmit={(prediction) =>
+								send({ type: "submit_prediction", ...prediction })
+							}
+						/>
+						<DishList
+							dishes={gameState.dishes}
+							myGuesses={gameState.myDishGuesses}
+							countries={gameState.lineup.countries}
+							onGuess={(dishId, guessedCountry) =>
+								send({ type: "submit_dish_guess", dishId, guessedCountry })
+							}
+						/>
+					</div>
+				)}
+
+				{gameState?.dishResults && (
+					<DishResults results={gameState.dishResults} countries={gameState.lineup.countries} />
+				)}
+
 				{room.currentAct === "ended" && (
 					<div className="flex flex-col items-center gap-4 py-8">
 						<p className="text-lg text-muted-foreground">The party has ended. Thanks for playing!</p>
 					</div>
 				)}
-				{/* Game UI will be added in later plans */}
+
 				<PlayerList players={room.players} mySessionId={mySessionId} />
 			</div>
 		</div>