add game status to display view

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

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

@@ -2,6 +2,7 @@ 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 { DishResults } from "@/components/dish-results"
 import { RoomHeader } from "@/components/room-header"
 
 export const Route = createFileRoute("/display/$roomCode")({
@@ -11,7 +12,7 @@ export const Route = createFileRoute("/display/$roomCode")({
 function DisplayView() {
 	const { roomCode } = Route.useParams()
 	useWebSocket(roomCode)
-	const { room, connectionStatus } = useRoomStore()
+	const { room, connectionStatus, gameState } = useRoomStore()
 
 	if (!room) {
 		return (
@@ -28,6 +29,21 @@ function DisplayView() {
 			<RoomHeader roomCode={roomCode} currentAct={room.currentAct} connectionStatus={connectionStatus} />
 			<div className="flex flex-1 flex-col items-center justify-center gap-8 p-8">
 				{room.currentAct === "lobby" && <LobbyDisplay roomCode={roomCode} />}
+				{gameState?.dishResults && (
+					<div className="mx-auto max-w-2xl p-8">
+						<DishResults results={gameState.dishResults} countries={gameState.lineup.countries} />
+					</div>
+				)}
+
+				{room.currentAct === "act1" && gameState && !gameState.dishResults && (
+					<div className="flex flex-col items-center gap-4 py-12">
+						<p className="text-2xl text-muted-foreground">Act 1 — Predictions & Dishes</p>
+						<p className="text-lg text-muted-foreground">
+							{gameState.dishes.length} dish(es) added
+						</p>
+					</div>
+				)}
+
 				<PlayerList players={room.players} mySessionId={null} />
 			</div>
 		</div>