first prototype

2026-09-27 09:52:00 +02:00
parent 4635199a41
commit 6d011d474f
109 changed files with 6354 additions and 507 deletions
@@ -0,0 +1,51 @@
+import type { LobbyPlayer, Observation } from '../../api/types'
+import { Button } from '../../components/Button/Button'
+import styles from './GameOver.module.css'
+
+interface GameOverProps {
+  observation: Observation
+  players: LobbyPlayer[]
+  isHost: boolean
+  onShowScores: () => void
+  onBackToLobby: () => void
+  onLeave: () => void
+}
+
+export function GameOver({ observation, players, isHost, onShowScores, onBackToLobby, onLeave }: GameOverProps) {
+  const ranking = observation.scores
+    .map((score, seat) => ({ seat, score }))
+    .sort((a, b) => b.score - a.score)
+  const winners = new Set(observation.winners)
+  const youWon = winners.has(observation.player)
+
+  return (
+    <div className={styles.content}>
+      <p className={styles.headline}>{youWon ? 'You win! ✦' : `${players[ranking[0].seat]?.name ?? 'Someone'} wins!`}</p>
+      <ol className={styles.ranking}>
+        {ranking.map(({ seat, score }, index) => (
+          <li key={seat} className={`${styles.row} ${winners.has(seat) ? styles.winner : ''}`}>
+            <span className={styles.place}>{index + 1}.</span>
+            <span className={styles.name}>
+              {players[seat]?.name ?? `Player ${seat + 1}`}
+              {seat === observation.player && <span className={styles.muted}> (you)</span>}
+            </span>
+            <span className={styles.score}>{score}</span>
+          </li>
+        ))}
+      </ol>
+      <div className={styles.actions}>
+        <Button variant="ghost" onClick={onShowScores}>
+          Scoreboard
+        </Button>
+        <Button variant="danger" onClick={onLeave}>
+          Leave
+        </Button>
+        {isHost ? (
+          <Button onClick={onBackToLobby}>Back to lobby</Button>
+        ) : (
+          <span className={styles.muted}>The host can start a new game.</span>
+        )}
+      </div>
+    </div>
+  )
+}