73 lines
2.6 KiB
TypeScript
73 lines
2.6 KiB
TypeScript
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")({
|
|
component: DisplayView,
|
|
})
|
|
|
|
function DisplayView() {
|
|
const { roomCode } = Route.useParams()
|
|
useWebSocket(roomCode)
|
|
const { room, connectionStatus, gameState } = useRoomStore()
|
|
|
|
if (!room) {
|
|
return (
|
|
<div className="flex min-h-screen items-center justify-center">
|
|
<p className="text-muted-foreground">
|
|
{connectionStatus === "connecting" ? "Connecting..." : "Room not found"}
|
|
</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="flex min-h-screen flex-col">
|
|
<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>
|
|
)
|
|
}
|
|
|
|
function LobbyDisplay({ roomCode }: { roomCode: string }) {
|
|
const joinUrl = `${window.location.origin}/play/${roomCode}`
|
|
|
|
return (
|
|
<div className="flex flex-col items-center gap-6">
|
|
<h2 className="text-2xl text-muted-foreground">Join the party!</h2>
|
|
<div className="rounded-lg border-4 border-dashed border-muted p-8">
|
|
<span className="font-mono text-8xl font-bold tracking-[0.3em]">{roomCode}</span>
|
|
</div>
|
|
<p className="text-muted-foreground">
|
|
Go to <span className="font-mono font-medium">{joinUrl}</span>
|
|
</p>
|
|
<p className="text-sm text-muted-foreground">or scan the QR code</p>
|
|
{/* QR code will be added in Plan 5 (polish) */}
|
|
<div className="flex h-48 w-48 items-center justify-center rounded-lg border-2 border-dashed border-muted">
|
|
<span className="text-sm text-muted-foreground">QR code</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|