From 5cc9113b8c6ba0f2b268d16e1decd1c9e9fa0d20 Mon Sep 17 00:00:00 2001 From: AyoubBenziza Date: Mon, 8 Jun 2026 15:43:17 +0200 Subject: [PATCH] feat(quiz): quiz game mode end-to-end (server mode + playable client UI) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Server: - quiz mode (GameRound): in-memory FR question bank (mcq + truefalse), per-room anti-repeat, first-vote lock, score = base + speed bonus ∝ time left; registered via registerRound, loaded at startup - shared: typed quiz payloads (QuizQuestionPayload / reveal truth / result) - tests: quiz scoring, vote lock, bounds, reveal (bun test) Client: - room store handles round:start / voteAck / reveal / game:end - RoomPage dispatches by status: lobby (host start controls) → quiz view (question, countdown, vote, reveal + scoreboard) → game-end view - replaces standalone lobby page Roadmap V1 step 4. Verified end-to-end over the wire (start→vote→reveal→ score→next round→game:end, no answer leaked, anti-repeat works). Co-Authored-By: Claude Opus 4.8 (1M context) --- apps/server/src/game/modes/index.ts | 4 + apps/server/src/game/modes/quiz/index.ts | 7 ++ apps/server/src/game/modes/quiz/questions.ts | 110 +++++++++++++++++ .../src/game/modes/quiz/quiz-round.test.ts | 59 +++++++++ apps/server/src/game/modes/quiz/quiz-round.ts | 115 ++++++++++++++++++ apps/server/src/index.ts | 1 + apps/web/src/App.tsx | 4 +- apps/web/src/components/countdown.tsx | 19 +++ apps/web/src/components/game-end-view.tsx | 37 ++++++ apps/web/src/components/lobby-view.tsx | 87 +++++++++++++ apps/web/src/components/quiz-view.tsx | 113 +++++++++++++++++ apps/web/src/components/scoreboard.tsx | 37 ++++++ apps/web/src/pages/lobby.tsx | 71 ----------- apps/web/src/pages/room.tsx | 50 ++++++++ apps/web/src/store/room.ts | 98 ++++++++++++++- packages/shared/src/index.ts | 1 + packages/shared/src/quiz.ts | 30 +++++ 17 files changed, 767 insertions(+), 76 deletions(-) create mode 100644 apps/server/src/game/modes/index.ts create mode 100644 apps/server/src/game/modes/quiz/index.ts create mode 100644 apps/server/src/game/modes/quiz/questions.ts create mode 100644 apps/server/src/game/modes/quiz/quiz-round.test.ts create mode 100644 apps/server/src/game/modes/quiz/quiz-round.ts create mode 100644 apps/web/src/components/countdown.tsx create mode 100644 apps/web/src/components/game-end-view.tsx create mode 100644 apps/web/src/components/lobby-view.tsx create mode 100644 apps/web/src/components/quiz-view.tsx create mode 100644 apps/web/src/components/scoreboard.tsx delete mode 100644 apps/web/src/pages/lobby.tsx create mode 100644 apps/web/src/pages/room.tsx create mode 100644 packages/shared/src/quiz.ts diff --git a/apps/server/src/game/modes/index.ts b/apps/server/src/game/modes/index.ts new file mode 100644 index 0000000..d413056 --- /dev/null +++ b/apps/server/src/game/modes/index.ts @@ -0,0 +1,4 @@ +// Point d'enregistrement de toutes les épreuves. Importé une fois au démarrage +// pour ses effets de bord (registerRound). Ajouter un mode = une ligne ici. + +import "./quiz" diff --git a/apps/server/src/game/modes/quiz/index.ts b/apps/server/src/game/modes/quiz/index.ts new file mode 100644 index 0000000..4c45f97 --- /dev/null +++ b/apps/server/src/game/modes/quiz/index.ts @@ -0,0 +1,7 @@ +import { registerRound } from "../../registry" +import { QuizRound } from "./quiz-round" + +// Brancher l'épreuve = un seul registerRound, aucune plomberie à toucher. +registerRound("quiz", () => new QuizRound()) + +export { QuizRound } diff --git a/apps/server/src/game/modes/quiz/questions.ts b/apps/server/src/game/modes/quiz/questions.ts new file mode 100644 index 0000000..3c4af08 --- /dev/null +++ b/apps/server/src/game/modes/quiz/questions.ts @@ -0,0 +1,110 @@ +// Banque de questions en dur pour la V1 (mode quiz culture geek). +// Le seed Open Trivia DB + le back-office manuel arrivent aux étapes 5 et 7 ; +// d'ici là, ce petit jeu suffit à jouer une partie complète de bout en bout. + +import type { QuizFormat } from "@nerdware/shared" + +export interface QuizQuestion { + id: string + format: QuizFormat + prompt: string + choices: string[] + correctIndex: number + category: string + difficulty: number +} + +const TRUE_FALSE = ["Vrai", "Faux"] + +export const QUIZ_QUESTIONS: QuizQuestion[] = [ + { + id: "q-zelda-princess", + format: "mcq", + prompt: "Dans la saga The Legend of Zelda, quel est le nom du héros ?", + choices: ["Zelda", "Link", "Ganon", "Navi"], + correctIndex: 1, + category: "Jeux vidéo", + difficulty: 1, + }, + { + id: "q-mario-plumber", + format: "truefalse", + prompt: "Mario est plombier de profession.", + choices: TRUE_FALSE, + correctIndex: 0, + category: "Jeux vidéo", + difficulty: 1, + }, + { + id: "q-onepiece-captain", + format: "mcq", + prompt: "Qui est le capitaine de l'équipage du Chapeau de paille dans One Piece ?", + choices: ["Zoro", "Sanji", "Luffy", "Usopp"], + correctIndex: 2, + category: "Manga", + difficulty: 1, + }, + { + id: "q-pokemon-first", + format: "mcq", + prompt: "Quel Pokémon porte le numéro 001 dans le Pokédex national ?", + choices: ["Salamèche", "Carapuce", "Pikachu", "Bulbizarre"], + correctIndex: 3, + category: "Jeux vidéo", + difficulty: 2, + }, + { + id: "q-naruto-village", + format: "mcq", + prompt: "De quel village ninja Naruto est-il originaire ?", + choices: ["Konoha", "Suna", "Kiri", "Iwa"], + correctIndex: 0, + category: "Manga", + difficulty: 2, + }, + { + id: "q-minecraft-creeper", + format: "truefalse", + prompt: "Dans Minecraft, le Creeper explose au contact du joueur.", + choices: TRUE_FALSE, + correctIndex: 0, + category: "Jeux vidéo", + difficulty: 1, + }, + { + id: "q-starwars-vador", + format: "mcq", + prompt: "Dans Star Wars, qui est le père de Luke Skywalker ?", + choices: ["Obi-Wan Kenobi", "Dark Vador", "Yoda", "Palpatine"], + correctIndex: 1, + category: "Pop culture", + difficulty: 1, + }, + { + id: "q-dbz-kamehameha", + format: "mcq", + prompt: "Dans Dragon Ball, quelle attaque emblématique Sangoku utilise-t-il ?", + choices: ["Genkidama", "Kamehameha", "Final Flash", "Makankosappo"], + correctIndex: 1, + category: "Manga", + difficulty: 1, + }, + { + id: "q-tetris-origin", + format: "truefalse", + prompt: "Le jeu Tetris a été créé par un développeur soviétique.", + choices: TRUE_FALSE, + correctIndex: 0, + category: "Jeux vidéo", + difficulty: 2, + }, + { + id: "q-matrix-pill", + format: "mcq", + prompt: "Dans Matrix, quelle pilule Neo doit-il prendre pour découvrir la vérité ?", + choices: ["La bleue", "La rouge", "La verte", "La jaune"], + correctIndex: 1, + category: "Pop culture", + difficulty: 1, + }, +] diff --git a/apps/server/src/game/modes/quiz/quiz-round.test.ts b/apps/server/src/game/modes/quiz/quiz-round.test.ts new file mode 100644 index 0000000..6d5bbe6 --- /dev/null +++ b/apps/server/src/game/modes/quiz/quiz-round.test.ts @@ -0,0 +1,59 @@ +import { describe, expect, test } from "bun:test" +import { RoomManager } from "../../../rooms" +import type { RoundContext } from "../../round" +import { QuizRound } from "./quiz-round" +import { QUIZ_QUESTIONS } from "./questions" + +const question = QUIZ_QUESTIONS[0] // "Link" → correctIndex 1 + +function makeCtx(): { ctx: RoundContext; p1: string; p2: string } { + const rooms = new RoomManager() + const { room, player: a } = rooms.create("Alice", "sa") + const { player: b } = rooms.join(room.code, "Bob", "sb") + const ctx: RoundContext = { + room, + djId: null, + votes: new Map(), + startedAt: 0, + endsAt: 10_000, + data: { question, votedAt: new Map() }, + } + return { ctx, p1: a.id, p2: b.id } +} + +describe("QuizRound", () => { + test("verrouille le premier vote (idempotent)", () => { + const round = new QuizRound(() => 1000) + const { ctx, p1 } = makeCtx() + round.submitAnswer(ctx, p1, { choiceIndex: 1 }) + round.submitAnswer(ctx, p1, { choiceIndex: 0 }) // ignoré + expect(ctx.votes.get(p1)).toEqual({ choiceIndex: 1 }) + }) + + test("ignore un index hors bornes", () => { + const round = new QuizRound(() => 1000) + const { ctx, p1 } = makeCtx() + round.submitAnswer(ctx, p1, { choiceIndex: 99 }) + expect(ctx.votes.has(p1)).toBe(false) + }) + + test("reveal expose la vérité + le résultat par joueur", () => { + const round = new QuizRound(() => 1000) + const { ctx, p1, p2 } = makeCtx() + round.submitAnswer(ctx, p1, { choiceIndex: 1 }) // juste + round.submitAnswer(ctx, p2, { choiceIndex: 0 }) // faux + const { truth, perPlayerResult } = round.reveal(ctx) + expect(truth.correctIndex).toBe(question.correctIndex) + expect(perPlayerResult[p1]).toEqual({ choiceIndex: 1, correct: true }) + expect(perPlayerResult[p2]).toEqual({ choiceIndex: 0, correct: false }) + }) + + test("score = base + bonus rapidité pour les bonnes réponses uniquement", () => { + const round = new QuizRound(() => 1000) // vote à t=1000 sur 10000 → reste 90% + const { ctx, p1, p2 } = makeCtx() + round.submitAnswer(ctx, p1, { choiceIndex: 1 }) // juste, rapide + round.submitAnswer(ctx, p2, { choiceIndex: 0 }) // faux + const deltas = round.score(ctx) + expect(deltas).toEqual([{ playerId: p1, delta: 190 }]) // 100 + round(100 * 0.9) + }) +}) diff --git a/apps/server/src/game/modes/quiz/quiz-round.ts b/apps/server/src/game/modes/quiz/quiz-round.ts new file mode 100644 index 0000000..55116e8 --- /dev/null +++ b/apps/server/src/game/modes/quiz/quiz-round.ts @@ -0,0 +1,115 @@ +// Épreuve Quiz : une question = une manche. Pas de DJ, pas d'audio. +// Implémente le contrat GameRound ; le moteur fait tout le reste. + +import type { + Answer, + QuizPerPlayerResult, + QuizQuestionPayload, + QuizRevealTruth, + ScoreDelta, +} from "@nerdware/shared" +import type { GameRound, RoundContext, RoundStart } from "../../round" +import type { ServerRoom } from "../../../rooms" +import { QUIZ_QUESTIONS, type QuizQuestion } from "./questions" + +const BASE_POINTS = 100 +const SPEED_BONUS_MAX = 100 + +/** Données privées de la manche (jamais diffusées). */ +interface QuizRoundData { + question: QuizQuestion + /** Premier instant de vote par joueur, pour le bonus rapidité. */ + votedAt: Map +} + +// Anti-répétition à l'échelle d'une partie : questions déjà jouées par room. +const playedByRoom = new WeakMap>() + +function pickQuestion(room: ServerRoom): QuizQuestion { + let played = playedByRoom.get(room) + if (!played) { + played = new Set() + playedByRoom.set(room, played) + } + let pool = QUIZ_QUESTIONS.filter((q) => !played.has(q.id)) + if (pool.length === 0) { + // Banque épuisée sur cette partie : on autorise à nouveau les répétitions. + played.clear() + pool = QUIZ_QUESTIONS + } + const question = pool[Math.floor(Math.random() * pool.length)] + played.add(question.id) + return question +} + +function isQuizAnswer(answer: Answer): answer is { choiceIndex: number } { + return ( + typeof (answer as { choiceIndex?: unknown }).choiceIndex === "number" + ) +} + +export class QuizRound implements GameRound { + readonly type = "quiz" as const + + constructor(private readonly now: () => number = Date.now) {} + + start(room: ServerRoom): RoundStart { + const question = pickQuestion(room) + const payload: QuizQuestionPayload = { + format: question.format, + prompt: question.prompt, + choices: question.choices, + category: question.category, + difficulty: question.difficulty, + } + const data: QuizRoundData = { question, votedAt: new Map() } + return { djId: null, payload, data } + } + + submitAnswer(ctx: RoundContext, playerId: string, answer: Answer): void { + // Premier vote verrouillé (idempotent) : on ignore les votes suivants. + if (ctx.votes.has(playerId)) { + return + } + if (!isQuizAnswer(answer)) { + return + } + const { question, votedAt } = ctx.data as QuizRoundData + if (answer.choiceIndex < 0 || answer.choiceIndex >= question.choices.length) { + return + } + ctx.votes.set(playerId, { choiceIndex: answer.choiceIndex }) + votedAt.set(playerId, this.now()) + } + + reveal(ctx: RoundContext): { truth: QuizRevealTruth; perPlayerResult: QuizPerPlayerResult } { + const { question } = ctx.data as QuizRoundData + const perPlayerResult: QuizPerPlayerResult = {} + for (const player of ctx.room.players.values()) { + const vote = ctx.votes.get(player.id) as { choiceIndex: number } | undefined + const choiceIndex = vote ? vote.choiceIndex : null + perPlayerResult[player.id] = { + choiceIndex, + correct: choiceIndex === question.correctIndex, + } + } + return { truth: { correctIndex: question.correctIndex }, perPlayerResult } + } + + score(ctx: RoundContext): ScoreDelta[] { + const { question, votedAt } = ctx.data as QuizRoundData + const total = ctx.endsAt - ctx.startedAt + const deltas: ScoreDelta[] = [] + for (const [playerId, vote] of ctx.votes) { + if ((vote as { choiceIndex: number }).choiceIndex !== question.correctIndex) { + continue + } + // Bonus rapidité : proportionnel au temps restant au moment du vote. + const at = votedAt.get(playerId) ?? ctx.endsAt + const remaining = Math.max(0, Math.min(1, (ctx.endsAt - at) / total)) + const bonus = Math.round(SPEED_BONUS_MAX * remaining) + deltas.push({ playerId, delta: BASE_POINTS + bonus }) + } + return deltas + } +} diff --git a/apps/server/src/index.ts b/apps/server/src/index.ts index b613840..5990a3f 100644 --- a/apps/server/src/index.ts +++ b/apps/server/src/index.ts @@ -2,6 +2,7 @@ import Fastify from "fastify" import cors from "@fastify/cors" import { env, isDev } from "./env" import { createSocketServer } from "./socket" +import "./game/modes" // enregistre les épreuves (registerRound) const app = Fastify({ logger: isDev diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx index dce07e3..3aca4dd 100644 --- a/apps/web/src/App.tsx +++ b/apps/web/src/App.tsx @@ -1,13 +1,13 @@ import { Route, Switch } from "wouter" import { HomePage } from "@/pages/home" -import { LobbyPage } from "@/pages/lobby" +import { RoomPage } from "@/pages/room" export function App() { return ( - {(params) => } + {(params) => }
diff --git a/apps/web/src/components/countdown.tsx b/apps/web/src/components/countdown.tsx new file mode 100644 index 0000000..fe53b7f --- /dev/null +++ b/apps/web/src/components/countdown.tsx @@ -0,0 +1,19 @@ +import { useEffect, useState } from "react" + +/** Secondes restantes jusqu'à `endsAt` (timestamp serveur). */ +function secondsLeft(endsAt: number): number { + return Math.max(0, Math.ceil((endsAt - Date.now()) / 1000)) +} + +export function Countdown({ endsAt }: { endsAt: number }) { + const [left, setLeft] = useState(() => secondsLeft(endsAt)) + + useEffect(() => { + const id = setInterval(() => setLeft(secondsLeft(endsAt)), 250) + return () => clearInterval(id) + }, [endsAt]) + + return ( + {left} + ) +} diff --git a/apps/web/src/components/game-end-view.tsx b/apps/web/src/components/game-end-view.tsx new file mode 100644 index 0000000..0d8c8fe --- /dev/null +++ b/apps/web/src/components/game-end-view.tsx @@ -0,0 +1,37 @@ +import { Link } from "wouter" +import type { PlayerScore, RoomSnapshot } from "@nerdware/shared" +import { Button } from "@workspace/ui/components/button" +import { useRoomStore } from "@/store/room" +import { Scoreboard } from "@/components/scoreboard" + +export function GameEndView({ snapshot }: { snapshot: RoomSnapshot }) { + const playerId = useRoomStore((s) => s.playerId) + const finalScores = useRoomStore((s) => s.finalScores) + const reset = useRoomStore((s) => s.reset) + + const scores: PlayerScore[] = finalScores ?? snapshot.scores + const winner = [...scores].sort((a, b) => b.score - a.score)[0] + const winnerName = + snapshot.players.find((p) => p.id === winner?.playerId)?.name ?? "?" + + return ( +
+
+

+ Partie terminée +

+

+ 🏆 {winnerName} l'emporte ! +

+
+ + + + + + +
+ ) +} diff --git a/apps/web/src/components/lobby-view.tsx b/apps/web/src/components/lobby-view.tsx new file mode 100644 index 0000000..d4c5eab --- /dev/null +++ b/apps/web/src/components/lobby-view.tsx @@ -0,0 +1,87 @@ +import { useState } from "react" +import type { RoomSnapshot } from "@nerdware/shared" +import { Button } from "@workspace/ui/components/button" +import { useRoomStore } from "@/store/room" + +const QUESTION_OPTIONS = [3, 5, 10] + +export function LobbyView({ snapshot }: { snapshot: RoomSnapshot }) { + const playerId = useRoomStore((s) => s.playerId) + const startGame = useRoomStore((s) => s.startGame) + const isHost = snapshot.hostId === playerId + + const [count, setCount] = useState(5) + const [busy, setBusy] = useState(false) + const [error, setError] = useState(null) + + async function handleStart() { + setError(null) + setBusy(true) + try { + await startGame(count) + } catch (err) { + setError((err as { message?: string }).message ?? "Erreur") + } finally { + setBusy(false) + } + } + + return ( +
+
+

+ Joueurs ({snapshot.players.length}) +

+
    + {snapshot.players.map((p) => ( +
  • + + {p.name} + {p.id === playerId && ( + (toi) + )} + + + {p.id === snapshot.hostId ? "Hôte" : ""} + {!p.connected && " · hors ligne"} + +
    • + ))} +
+
+ + {isHost ? ( +
+
+ Questions de quiz +
+ {QUESTION_OPTIONS.map((n) => ( + + ))} +
+
+ + {error && ( +

{error}

+ )} +
+ ) : ( +

+ En attente du lancement de la partie par l'hôte… +

+ )} +
+ ) +} diff --git a/apps/web/src/components/quiz-view.tsx b/apps/web/src/components/quiz-view.tsx new file mode 100644 index 0000000..d255a3b --- /dev/null +++ b/apps/web/src/components/quiz-view.tsx @@ -0,0 +1,113 @@ +import type { + QuizPerPlayerResult, + QuizQuestionPayload, + QuizRevealTruth, + RoomSnapshot, +} from "@nerdware/shared" +import { useRoomStore } from "@/store/room" +import { Countdown } from "@/components/countdown" +import { Scoreboard } from "@/components/scoreboard" + +export function QuizView({ snapshot }: { snapshot: RoomSnapshot }) { + const round = useRoomStore((s) => s.round) + const reveal = useRoomStore((s) => s.reveal) + const voteProgress = useRoomStore((s) => s.voteProgress) + const myChoiceIndex = useRoomStore((s) => s.myChoiceIndex) + const playerId = useRoomStore((s) => s.playerId) + const vote = useRoomStore((s) => s.vote) + + if (!round) { + return ( +

Préparation de la manche…

+ ) + } + + const question = round.payload as QuizQuestionPayload + const truth = reveal ? (reveal.truth as QuizRevealTruth) : null + const showReveal = truth !== null + const myResult = reveal + ? (reveal.perPlayerResult as QuizPerPlayerResult)[playerId ?? ""] + : undefined + + function choiceClass(index: number): string { + const base = + "w-full rounded-lg border px-4 py-3 text-left text-sm transition-colors" + if (showReveal) { + if (index === truth?.correctIndex) { + return `${base} border-green-500 bg-green-500/15 font-medium` + } + if (index === myChoiceIndex) { + return `${base} border-red-500 bg-red-500/10` + } + return `${base} border-input opacity-60` + } + if (index === myChoiceIndex) { + return `${base} border-primary bg-primary/10 font-medium` + } + return `${base} border-input hover:bg-muted/60` + } + + return ( +
+
+ + Question {snapshot.currentRound + 1} / {snapshot.totalRounds} + {question.category ? ` · ${question.category}` : ""} + + {!showReveal && ( + + )} +
+ +

+ {question.prompt} +

+ +
+ {question.choices.map((choice, index) => ( + + ))} +
+ + {!showReveal && + (myChoiceIndex !== null ? ( +

+ Réponse envoyée — en attente des autres + {voteProgress ? ` (${voteProgress.count}/${voteProgress.total})` : ""} +

+ ) : ( + voteProgress && ( +

+ {voteProgress.count}/{voteProgress.total} ont répondu +

+ ) + ))} + + {showReveal && ( +
+

+ {myResult?.correct + ? "Bonne réponse ! 🎉" + : myResult?.choiceIndex == null + ? "Pas de réponse 😴" + : "Raté 💥"} +

+ +
+ )} +
+ ) +} diff --git a/apps/web/src/components/scoreboard.tsx b/apps/web/src/components/scoreboard.tsx new file mode 100644 index 0000000..7758bb0 --- /dev/null +++ b/apps/web/src/components/scoreboard.tsx @@ -0,0 +1,37 @@ +import type { PlayerScore, RoomSnapshot } from "@nerdware/shared" + +interface ScoreboardProps { + scores: PlayerScore[] + snapshot: RoomSnapshot + playerId: string | null +} + +export function Scoreboard({ scores, snapshot, playerId }: ScoreboardProps) { + const nameOf = (id: string) => + snapshot.players.find((p) => p.id === id)?.name ?? "?" + const ranked = [...scores].sort((a, b) => b.score - a.score) + + return ( +
    + {ranked.map((s, i) => ( +
  1. + + + {i + 1} + + + {nameOf(s.playerId)} + {s.playerId === playerId && ( + (toi) + )} + + + {s.score} +
    2. + ))} +
+ ) +} diff --git a/apps/web/src/pages/lobby.tsx b/apps/web/src/pages/lobby.tsx deleted file mode 100644 index 4e763ba..0000000 --- a/apps/web/src/pages/lobby.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import { Link } from "wouter" -import { Button } from "@workspace/ui/components/button" -import { useRoomStore } from "@/store/room" - -export function LobbyPage({ code }: { code: string }) { - const snapshot = useRoomStore((s) => s.snapshot) - const playerId = useRoomStore((s) => s.playerId) - const connected = useRoomStore((s) => s.connected) - - // Pas de snapshot pour ce code (accès direct / refresh) : on renvoie à l'accueil. - if (!snapshot || snapshot.code !== code) { - return ( -
-

- Room introuvable ou session perdue. -

- - - -
- ) - } - - return ( -
-
-
-
-

Code room

-

- {snapshot.code} -

-
- -
- -
-

- Joueurs ({snapshot.players.length}) -

-
    - {snapshot.players.map((p) => ( -
  • - - {p.name} - {p.id === playerId && ( - (toi) - )} - - - {p.id === snapshot.hostId ? "Hôte" : ""} - {!p.connected && " · hors ligne"} - -
    • - ))} -
-
- -

- En attente du lancement de la partie par l'hôte… -

-
-
- ) -} diff --git a/apps/web/src/pages/room.tsx b/apps/web/src/pages/room.tsx new file mode 100644 index 0000000..949bd77 --- /dev/null +++ b/apps/web/src/pages/room.tsx @@ -0,0 +1,50 @@ +import { Link } from "wouter" +import { Button } from "@workspace/ui/components/button" +import { useRoomStore } from "@/store/room" +import { LobbyView } from "@/components/lobby-view" +import { QuizView } from "@/components/quiz-view" +import { GameEndView } from "@/components/game-end-view" + +export function RoomPage({ code }: { code: string }) { + const snapshot = useRoomStore((s) => s.snapshot) + const connected = useRoomStore((s) => s.connected) + + // Pas de snapshot pour ce code (accès direct / refresh) : retour à l'accueil. + if (!snapshot || snapshot.code !== code) { + return ( +
+

+ Room introuvable ou session perdue. +

+ + + +
+ ) + } + + return ( +
+
+
+
+

Code room

+

+ {snapshot.code} +

+
+ +
+ + {snapshot.status === "lobby" && } + {(snapshot.status === "in_round" || + snapshot.status === "reveal" || + snapshot.status === "scores") && } + {snapshot.status === "ended" && } +
+
+ ) +} diff --git a/apps/web/src/store/room.ts b/apps/web/src/store/room.ts index 09ba400..ca91a02 100644 --- a/apps/web/src/store/room.ts +++ b/apps/web/src/store/room.ts @@ -1,30 +1,62 @@ import { create } from "zustand" import type { ErrorPayload, + PlayerScore, RoomCreatedPayload, RoomSnapshot, + RoundStartPayload, + VoteAckPayload, } from "@nerdware/shared" import { socket } from "@/lib/socket" +/** Manche en cours côté client (depuis round:start). */ +export interface ActiveRound { + type: RoundStartPayload["type"] + djId?: string + endsAt: number + payload: unknown +} + +/** Reveal reçu (round:reveal), payloads typés par mode au moment de l'affichage. */ +export interface RoundReveal { + truth: unknown + perPlayerResult: unknown +} + interface RoomState { connected: boolean - /** Identité locale, persistée pour reconnaître "moi" dans le snapshot. */ + /** Identité locale, pour reconnaître "moi" dans le snapshot. */ playerId: string | null roomCode: string | null snapshot: RoomSnapshot | null lastError: ErrorPayload | null + + // État de jeu (poussé par le moteur serveur). + round: ActiveRound | null + voteProgress: VoteAckPayload | null + reveal: RoundReveal | null + myChoiceIndex: number | null + finalScores: PlayerScore[] | null + createRoom: (playerName: string) => Promise joinRoom: (roomCode: string, playerName: string) => Promise + startGame: (questionCount: number) => Promise + vote: (choiceIndex: number) => void clearError: () => void reset: () => void } -export const useRoomStore = create((set) => ({ +export const useRoomStore = create((set, get) => ({ connected: socket.connected, playerId: null, roomCode: null, snapshot: null, lastError: null, + round: null, + voteProgress: null, + reveal: null, + myChoiceIndex: null, + finalScores: null, createRoom: (playerName) => new Promise((resolve, reject) => { @@ -52,8 +84,47 @@ export const useRoomStore = create((set) => ({ }) }), + startGame: (questionCount) => + new Promise((resolve, reject) => { + const rounds = Array.from({ length: questionCount }, () => ({ + type: "quiz" as const, + })) + // On pousse la séquence de manches, puis on lance. + socket.emit("lobby:updateSettings", { + blindtestMode: get().snapshot?.settings.blindtestMode ?? "title_artist", + roundDuration: 20, + rounds, + }) + socket.emit("game:start", (res) => { + if (res.ok) { + resolve() + } else { + set({ lastError: res.error }) + reject(res.error) + } + }) + }), + + vote: (choiceIndex) => { + if (get().myChoiceIndex !== null) { + return // vote déjà émis pour cette manche + } + set({ myChoiceIndex: choiceIndex }) + socket.emit("round:vote", { answer: { choiceIndex } }) + }, + clearError: () => set({ lastError: null }), - reset: () => set({ roomCode: null, snapshot: null, lastError: null }), + reset: () => + set({ + roomCode: null, + snapshot: null, + lastError: null, + round: null, + voteProgress: null, + reveal: null, + myChoiceIndex: null, + finalScores: null, + }), })) // Listeners socket → on pousse l'état serveur dans le store (source de vérité). @@ -61,3 +132,24 @@ socket.on("connect", () => useRoomStore.setState({ connected: true })) socket.on("disconnect", () => useRoomStore.setState({ connected: false })) socket.on("room:state", (snapshot) => useRoomStore.setState({ snapshot })) socket.on("error", (error) => useRoomStore.setState({ lastError: error })) + +socket.on("round:start", (payload) => + useRoomStore.setState({ + round: { + type: payload.type, + djId: payload.djId, + endsAt: payload.endsAt, + payload: payload.payload, + }, + voteProgress: null, + reveal: null, + myChoiceIndex: null, + }) +) +socket.on("round:voteAck", (voteProgress) => + useRoomStore.setState({ voteProgress }) +) +socket.on("round:reveal", (reveal) => useRoomStore.setState({ reveal })) +socket.on("game:end", ({ finalScores }) => + useRoomStore.setState({ finalScores }) +) diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts index 313fded..dece734 100644 --- a/packages/shared/src/index.ts +++ b/packages/shared/src/index.ts @@ -1,2 +1,3 @@ export * from "./domain" export * from "./events" +export * from "./quiz" diff --git a/packages/shared/src/quiz.ts b/packages/shared/src/quiz.ts new file mode 100644 index 0000000..a2156a6 --- /dev/null +++ b/packages/shared/src/quiz.ts @@ -0,0 +1,30 @@ +// Types concrets de l'épreuve Quiz, partagés client/serveur. +// Le payload générique du moteur est `unknown` ; le client le narrow via type === "quiz". +// V1 : formats mcq + truefalse (free / image_reveal arrivent avec la DB). + +import type { QuizFormat } from "./domain" + +/** Payload diffusé au lancement d'une manche quiz (round:start), SANS la réponse. */ +export interface QuizQuestionPayload { + format: QuizFormat + prompt: string + /** Choix proposés (truefalse = ["Vrai", "Faux"]). */ + choices: string[] + category?: string + /** 1 (facile) .. 3 (difficile). */ + difficulty?: number +} + +/** Vérité révélée à tous (round:reveal → truth). */ +export interface QuizRevealTruth { + correctIndex: number +} + +/** Résultat d'un joueur sur la manche. */ +export interface QuizPlayerResult { + choiceIndex: number | null + correct: boolean +} + +/** round:reveal → perPlayerResult : playerId → résultat. */ +export type QuizPerPlayerResult = Record