felixfoertsch/esc
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

show actual results summary on display in scoring/ended

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Felix Förtsch
2026-03-12 22:18:57 +01:00
parent 6cc164dfe5
commit 48986137db
1 changed files with 50 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
packages/client/src/routes/display.$roomCode.tsx
View File

@@ -7,6 +7,7 @@ import { JuryDisplay } from "@/components/jury-display"
import { BingoDisplay } from "@/components/bingo-display"
import { Leaderboard } from "@/components/leaderboard"
import { RoomHeader } from "@/components/room-header"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
export const Route = createFileRoute("/display/$roomCode")({
component: DisplayView,
@@ -49,21 +50,67 @@ function DisplayView() {
results={gameState.juryResults}
/>
<BingoDisplay announcements={gameState.bingoAnnouncements} />
<Leaderboard entries={gameState.leaderboard} />
<Leaderboard entries={gameState.leaderboard} resultsEntered={!!gameState?.actualResults} />
</div>
)}
{room.currentAct === "scoring" && gameState && (
<div className="flex flex-col items-center gap-8">
<p className="text-2xl text-muted-foreground">Scoring</p>
<Leaderboard entries={gameState.leaderboard} />
{gameState?.actualResults && (
<Card>
<CardHeader>
<CardTitle>Actual Results</CardTitle>
</CardHeader>
<CardContent className="flex flex-col gap-1 text-sm">
{[
{ label: "Winner", code: gameState.actualResults.winner },
{ label: "2nd", code: gameState.actualResults.second },
{ label: "3rd", code: gameState.actualResults.third },
{ label: "Last", code: gameState.actualResults.last },
].map(({ label, code }) => {
const entry = gameState.lineup.entries.find((e) => e.country.code === code)
return (
<div key={label} className="flex items-center gap-2">
<span className="w-16 text-xs font-medium text-muted-foreground">{label}</span>
<span>{entry ? `${entry.country.flag} ${entry.country.name}` : code}</span>
</div>
)
})}
</CardContent>
</Card>
)}
<Leaderboard entries={gameState.leaderboard} resultsEntered={!!gameState?.actualResults} />
</div>
)}
{room.currentAct === "ended" && (
<div className="flex flex-col items-center gap-4 py-12">
<p className="text-2xl text-muted-foreground">The party has ended. Thanks for playing!</p>
{gameState && <Leaderboard entries={gameState.leaderboard} />}
{gameState?.actualResults && (
<Card>
<CardHeader>
<CardTitle>Actual Results</CardTitle>
</CardHeader>
<CardContent className="flex flex-col gap-1 text-sm">
{[
{ label: "Winner", code: gameState.actualResults.winner },
{ label: "2nd", code: gameState.actualResults.second },
{ label: "3rd", code: gameState.actualResults.third },
{ label: "Last", code: gameState.actualResults.last },
].map(({ label, code }) => {
const entry = gameState.lineup.entries.find((e) => e.country.code === code)
return (
<div key={label} className="flex items-center gap-2">
<span className="w-16 text-xs font-medium text-muted-foreground">{label}</span>
<span>{entry ? `${entry.country.flag} ${entry.country.name}` : code}</span>
</div>
)
})}
</CardContent>
</Card>
)}
{gameState && <Leaderboard entries={gameState.leaderboard} resultsEntered={!!gameState?.actualResults} />}
</div>
)}