add game UI to host view

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

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

@@ -2,6 +2,10 @@ 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 { DishHost } from "@/components/dish-host"
+import { DishResults } from "@/components/dish-results"
 import { RoomHeader } from "@/components/room-header"
 import { Button } from "@/components/ui/button"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
@@ -22,7 +26,7 @@ const nextActLabels: Partial<Record<Act, string>> = {
 function HostView() {
 	const { roomCode } = Route.useParams()
 	const { send } = useWebSocket(roomCode)
-	const { room, mySessionId, connectionStatus } = useRoomStore()
+	const { room, mySessionId, connectionStatus, gameState } = useRoomStore()
 
 	if (!room) {
 		return (
@@ -47,8 +51,30 @@ function HostView() {
 					</TabsTrigger>
 				</TabsList>
 				<TabsContent value="play" className="p-4">
+					{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} />
+					)}
 					<PlayerList players={room.players} mySessionId={mySessionId} />
-					{/* Game UI will be added in later plans */}
 				</TabsContent>
 				<TabsContent value="host" className="p-4">
 					<div className="flex flex-col gap-4">
@@ -78,6 +104,16 @@ function HostView() {
 								)}
 							</CardContent>
 						</Card>
+						{gameState && (room.currentAct === "lobby" || room.currentAct === "act1") && (
+							<DishHost
+								dishes={gameState.dishes}
+								countries={gameState.lineup.countries}
+								onAddDish={(name, correctCountry) =>
+									send({ type: "add_dish", name, correctCountry })
+								}
+								onReveal={() => send({ type: "reveal_dishes" })}
+							/>
+						)}
 						<PlayerList players={room.players} mySessionId={mySessionId} />
 					</div>
 				</TabsContent>