integrate jury voting, bingo tabs in player route

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

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

@@ -4,9 +4,13 @@ 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 { JuryVoting } from "@/components/jury-voting"
+import { BingoCard } from "@/components/bingo-card"
+import { Leaderboard } from "@/components/leaderboard"
 import { RoomHeader } from "@/components/room-header"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 
 export const Route = createFileRoute("/play/$roomCode")({
 	component: PlayerView,
@@ -83,13 +87,7 @@ 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" && !gameState && (
+				{gameState && (room.currentAct === "lobby" || room.currentAct === "pre-show") && (
-					<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 !== "ended" && (
 					<div className="flex flex-col gap-4">
 						<PredictionsForm
 							entries={gameState.lineup.entries}
@@ -102,9 +100,48 @@ function PlayerView() {
 					</div>
 				)}
 
+				{gameState && room.currentAct === "live-event" && (
+					<Tabs defaultValue="jury" className="flex-1">
+						<TabsList className="w-full">
+							<TabsTrigger value="jury" className="flex-1">Jury</TabsTrigger>
+							<TabsTrigger value="bingo" className="flex-1">Bingo</TabsTrigger>
+						</TabsList>
+						<TabsContent value="jury" className="mt-4">
+							{gameState.currentJuryRound ? (
+								<JuryVoting
+									round={gameState.currentJuryRound}
+									myVote={gameState.myJuryVote}
+									onVote={(rating) => send({ type: "submit_jury_vote", rating })}
+								/>
+							) : (
+								<div className="py-8 text-center text-muted-foreground">
+									Waiting for host to open voting...
+								</div>
+							)}
+						</TabsContent>
+						<TabsContent value="bingo" className="mt-4">
+							{gameState.myBingoCard ? (
+								<BingoCard
+									card={gameState.myBingoCard}
+									onTap={(tropeId) => send({ type: "tap_bingo_square", tropeId })}
+								/>
+							) : (
+								<div className="py-8 text-center text-muted-foreground">
+									No bingo card yet
+								</div>
+							)}
+						</TabsContent>
+					</Tabs>
+				)}
+
+				{gameState && room.currentAct === "scoring" && (
+					<Leaderboard entries={gameState.leaderboard} />
+				)}
+
 				{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>
+						{gameState && <Leaderboard entries={gameState.leaderboard} />}
 					</div>
 				)}