feat: per-submode mixed settings, fastest award, wider desktop layout

Mixed settings fix:
- RoundConfig carries a `pool` hint (quiz | image) per quiz round; lobby shows
  a separate count for each selected sub-mode (Quiz, Images) and the blindtest
  config — not just the quiz one
- server pool composes the queue per round's pool (quiz formats vs image_reveal),
  in order; verified e2e (2 quiz + 2 images honored)

Awards:
- "⚡ Le plus rapide" — derived client-side from the speed bonus baked into
  quiz/image points (points above the 100 base on correct answers)

Desktop restyle:
- room page gets an ambient halo background and a responsive container
  (lobby max-w-3xl with a 2-column players|settings grid, game/end max-w-lg)
- game/end views widened to max-w-lg

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

apps/server/src/game/modes/quiz/pool.ts

@@ -1,42 +1,22 @@
-// File d'attente de questions par room. Préchargée au lancement de la partie
+// File d'attente de questions par room. Préchargée au lancement : on respecte
-// depuis la DB (si dispo), sinon depuis la banque en dur. Le QuizRound y pioche.
+// le sous-pool de chaque manche quiz (quiz "classique" vs images), dans l'ordre
-// Les formats servis dépendent du type de partie (quiz / images / mixte).
+// de la séquence. DB si dispo, sinon banque en dur (pas d'images en dur).
 
-import type { QuizFormat, RoomSettings } from "@nerdware/shared"
+import type { QuizFormat } from "@nerdware/shared"
 import { hasDb } from "../../../db"
 import { loadQuizPool } from "../../../db/quiz-repo"
 import type { ServerRoom } from "../../../rooms"
 import { QUIZ_QUESTIONS, type QuizQuestion } from "./questions"
 
-interface RoomPool {
+interface QueueItem {
-  queue: QuizQuestion[]
+  question: QuizQuestion
-  /** true si les questions viennent de la DB (→ marquer jouées). */
   fromDb: boolean
-  formats: QuizFormat[]
 }
 
-const poolByRoom = new WeakMap<ServerRoom, RoomPool>()
+const poolByRoom = new WeakMap<ServerRoom, QueueItem[]>()
 
 const QUIZ_FORMATS: QuizFormat[] = ["mcq", "truefalse", "free"]
-
+const IMAGE_FORMATS: QuizFormat[] = ["image_reveal"]
-/** Formats de quiz autorisés selon le type de partie (et les sous-modes mixtes). */
-function quizFormatsFor(settings: RoomSettings): QuizFormat[] {
-  if (settings.gameType === "image") {
-    return ["image_reveal"]
-  }
-  if (settings.gameType === "mixed") {
-    const formats: QuizFormat[] = []
-    if (settings.mixedModes.includes("quiz")) {
-      formats.push(...QUIZ_FORMATS)
-    }
-    if (settings.mixedModes.includes("image")) {
-      formats.push("image_reveal")
-    }
-    return formats.length > 0 ? formats : QUIZ_FORMATS
-  }
-  // quiz, ou blindtest retombé sur du quiz (<3 joueurs)
-  return QUIZ_FORMATS
-}
 
 function shuffle<T>(items: T[]): T[] {
   const arr = [...items]
@@ -47,44 +27,68 @@ function shuffle<T>(items: T[]): T[] {
   return arr
 }
 
-/** Précharge les questions de la partie. À appeler avant de lancer le moteur. */
+/** Charge un sous-pool (DB puis complément banque en dur) pour `need` manches. */
-export async function prepareQuizForRoom(room: ServerRoom): Promise<void> {
+async function loadGroup(
-  const formats = quizFormatsFor(room.settings)
+  room: ServerRoom,
-  const needed = room.settings.rounds.filter((r) => r.type === "quiz").length
+  need: number,
-  let queue: QuizQuestion[] = []
+  formats: QuizFormat[],
-  let fromDb = false
+  isImage: boolean
-
+): Promise<QueueItem[]> {
+  if (need <= 0) {
+    return []
+  }
+  let items: QueueItem[] = []
   if (hasDb) {
     try {
-      queue = await loadQuizPool(room.code, Math.max(needed, 1), formats)
+      const rows = await loadQuizPool(room.code, need, formats)
-      fromDb = queue.length > 0
+      items = rows.map((question) => ({ question, fromDb: true }))
     } catch (err) {
       console.error("[quiz] chargement DB échoué, fallback banque en dur", err)
     }
   }
-
+  if (items.length < need && !isImage) {
-  if (queue.length === 0) {
+    // Complément depuis la banque en dur (uniquement le quiz, pas d'images en dur).
-    queue = shuffle(QUIZ_QUESTIONS.filter((q) => formats.includes(q.format)))
+    const bank = shuffle(
-    fromDb = false
+      QUIZ_QUESTIONS.filter((q) => formats.includes(q.format))
+    )
+    for (const question of bank) {
+      if (items.length >= need) break
+      items.push({ question, fromDb: false })
+    }
+  }
+  return items
 }
 
-  poolByRoom.set(room, { queue, fromDb, formats })
+/** Précharge les questions de la partie. À appeler avant de lancer le moteur. */
+export async function prepareQuizForRoom(room: ServerRoom): Promise<void> {
+  const quizRounds = room.settings.rounds.filter((r) => r.type === "quiz")
+  const needImage = quizRounds.filter((r) => r.pool === "image").length
+  const needQuiz = quizRounds.length - needImage
+
+  const quizGroup = await loadGroup(room, needQuiz, QUIZ_FORMATS, false)
+  const imageGroup = await loadGroup(room, needImage, IMAGE_FORMATS, true)
+
+  // On assemble la file dans l'ordre des manches (chacune pioche dans son sous-pool).
+  const queue: QueueItem[] = []
+  for (const r of quizRounds) {
+    const group = r.pool === "image" ? imageGroup : quizGroup
+    const item = group.shift()
+    if (item) {
+      queue.push(item)
+    }
+  }
+  poolByRoom.set(room, queue)
 }
 
-/** Pioche la prochaine question. Fallback aléatoire (formats autorisés) si vide. */
+/** Pioche la prochaine question. Fallback aléatoire (banque en dur) si vide. */
 export function takeQuestion(room: ServerRoom): {
   question: QuizQuestion
   fromDb: boolean
 } {
-  const pool = poolByRoom.get(room)
+  const queue = poolByRoom.get(room)
-  if (pool && pool.queue.length > 0) {
+  if (queue && queue.length > 0) {
-    return { question: pool.queue.shift()!, fromDb: pool.fromDb }
+    return queue.shift()!
-  }
-  const formats = pool?.formats ?? ["mcq", "truefalse", "free"]
-  const candidates = QUIZ_QUESTIONS.filter((q) => formats.includes(q.format))
-  const bank = candidates.length > 0 ? candidates : QUIZ_QUESTIONS
-  return {
-    question: bank[Math.floor(Math.random() * bank.length)],
-    fromDb: false,
   }
+  const q = QUIZ_QUESTIONS[Math.floor(Math.random() * QUIZ_QUESTIONS.length)]
+  return { question: q, fromDb: false }
 }

apps/web/src/components/blindtest-view.tsx

@@ -65,7 +65,7 @@ export function BlindtestView({ snapshot }: { snapshot: RoomSnapshot }) {
   }, [showReveal, ready, api])
 
   return (
-    <div className="flex w-full max-w-md flex-col gap-5">
+    <div className="flex w-full max-w-lg flex-col gap-5">
       <header className="flex items-center justify-between">
         <span className="text-muted-foreground text-xs uppercase">
           Blindtest {snapshot.currentRound + 1} / {snapshot.totalRounds}

apps/web/src/components/game-end-view.tsx

@@ -180,7 +180,7 @@ export function GameEndView({ snapshot }: { snapshot: RoomSnapshot }) {
   const rest = ranked.slice(3)
 
   return (
-    <div className="flex w-full max-w-md flex-col gap-6 text-center">
+    <div className="flex w-full max-w-lg flex-col gap-6 text-center">
       <header>
         <p className="text-muted-foreground text-xs uppercase">
           Partie terminée
@@ -354,8 +354,12 @@ interface PlayerStat {
   correct: number
   answered: number
   decoy: number
+  speed: number
 }
 
+// Points de base d'une bonne réponse quiz/image ; le surplus = bonus de vitesse.
+const QUIZ_BASE_POINTS = 100
+
 function FunStats({
   recap,
   snapshot,
@@ -364,15 +368,25 @@ function FunStats({
   snapshot: RoomSnapshot
 }) {
   const stats = new Map<string, PlayerStat>(
-    snapshot.players.map((p) => [p.id, { correct: 0, answered: 0, decoy: 0 }])
+    snapshot.players.map((p) => [
+      p.id,
+      { correct: 0, answered: 0, decoy: 0, speed: 0 },
+    ])
   )
   for (const r of recap) {
     const answered = new Set(r.answers.map((a) => a.playerId))
+    const pointsBy = new Map(r.scorers.map((sc) => [sc.playerId, sc.points]))
     for (const a of r.answers) {
       const s = stats.get(a.playerId)
       if (s) {
         s.answered++
-        if (a.correct) s.correct++
+        if (a.correct) {
+          s.correct++
+          // Bonus de vitesse = points au-dessus de la base (quiz/images).
+          if (r.type !== "blindtest") {
+            s.speed += Math.max(0, (pointsBy.get(a.playerId) ?? 0) - QUIZ_BASE_POINTS)
+          }
+        }
       }
     }
     if (r.type === "blindtest") {
@@ -388,7 +402,8 @@ function FunStats({
   const players = snapshot.players
   const total = recap.length
   const nameOf = (id: string) => players.find((p) => p.id === id)?.name ?? "?"
-  const stat = (id: string) => stats.get(id) ?? { correct: 0, answered: 0, decoy: 0 }
+  const stat = (id: string) =>
+    stats.get(id) ?? { correct: 0, answered: 0, decoy: 0, speed: 0 }
   const winners = (pick: (s: PlayerStat) => number, min = 1) => {
     const max = Math.max(0, ...players.map((p) => pick(stat(p.id))))
     return max >= min ? players.filter((p) => pick(stat(p.id)) === max) : []
@@ -405,6 +420,14 @@ function FunStats({
   if (brains.length && brains.length < players.length) {
     awards.push({ emoji: "🧠", label: "Le cerveau", ids: brains.map((p) => p.id) })
   }
+  const fastest = winners((s) => s.speed)
+  if (fastest.length && fastest.length < players.length) {
+    awards.push({
+      emoji: "⚡",
+      label: "Le plus rapide",
+      ids: fastest.map((p) => p.id),
+    })
+  }
   const decoy = winners((s) => s.decoy)
   if (decoy.length) {
     awards.push({

apps/web/src/components/lobby-view.tsx

@@ -107,24 +107,25 @@ function shuffle<T>(items: T[]): T[] {
   return arr
 }
 
-/** Construit la séquence de manches selon le type de partie. */
+/** Construit la séquence de manches (chaque manche quiz porte son sous-pool). */
-function buildRounds(
+function buildRounds(opts: {
-  gameType: GameType,
+  quiz: number
-  quizCount: number,
+  image: number
-  totalTracks: number
+  tracks: number
-): RoundConfig[] {
+  shuffleOrder: boolean
-  if (gameType === "quiz" || gameType === "image") {
+}): RoundConfig[] {
-    return Array.from({ length: quizCount }, () => ({ type: "quiz" }))
-  }
-  if (gameType === "blindtest") {
-    return Array.from({ length: totalTracks }, () => ({ type: "blindtest" }))
-  }
-  // Mixte : ordre mélangé pour qu'on ne sache pas ce qui vient ensuite.
   const rounds: RoundConfig[] = [
-    ...Array.from({ length: quizCount }, () => ({ type: "quiz" as const })),
+    ...Array.from({ length: opts.quiz }, () => ({
-    ...Array.from({ length: totalTracks }, () => ({ type: "blindtest" as const })),
+      type: "quiz" as const,
+      pool: "quiz" as const,
+    })),
+    ...Array.from({ length: opts.image }, () => ({
+      type: "quiz" as const,
+      pool: "image" as const,
+    })),
+    ...Array.from({ length: opts.tracks }, () => ({ type: "blindtest" as const })),
   ]
-  return shuffle(rounds)
+  return opts.shuffleOrder ? shuffle(rounds) : rounds
 }
 
 export function LobbyView({ snapshot }: { snapshot: RoomSnapshot }) {
@@ -135,7 +136,8 @@ export function LobbyView({ snapshot }: { snapshot: RoomSnapshot }) {
   const { gameType, mixedModes, blindtestMode, tracksPerPlayer } =
     snapshot.settings
 
-  const [count, setCount] = useState(5)
+  const [quizCount, setQuizCount] = useState(5)
+  const [imageCount, setImageCount] = useState(5)
   const [busy, setBusy] = useState(false)
   const [error, setError] = useState<string | null>(null)
 
@@ -152,21 +154,21 @@ export function LobbyView({ snapshot }: { snapshot: RoomSnapshot }) {
     gameType === "blindtest" && !blindtestAvailable ? "quiz" : gameType
   const isMixed = effectiveType === "mixed"
 
-  // Sous-modes effectivement actifs.
+  // Sous-modes effectivement actifs (un réglage par sous-mode).
-  const wantsQuestions =
+  const showQuiz =
-    effectiveType === "quiz" ||
+    effectiveType === "quiz" || (isMixed && mixedModes.includes("quiz"))
-    effectiveType === "image" ||
+  const showImage =
-    (isMixed && (mixedModes.includes("quiz") || mixedModes.includes("image")))
+    effectiveType === "image" || (isMixed && mixedModes.includes("image"))
-  const showQuestions = wantsQuestions
   const showBlindtest =
     effectiveType === "blindtest" ||
     (isMixed && mixedModes.includes("blindtest") && blindtestAvailable)
 
-  const rounds = buildRounds(
+  const rounds = buildRounds({
-    effectiveType,
+    quiz: showQuiz ? quizCount : 0,
-    showQuestions ? count : 0,
+    image: showImage ? imageCount : 0,
-    showBlindtest ? totalTracks : 0
+    tracks: showBlindtest ? totalTracks : 0,
-  )
+    shuffleOrder: isMixed,
+  })
   // Blindtest : tout le monde doit avoir soumis son quota de titres.
   const allSubmitted =
     !showBlindtest ||
@@ -197,7 +199,7 @@ export function LobbyView({ snapshot }: { snapshot: RoomSnapshot }) {
   }
 
   return (
-    <div className="flex w-full max-w-md flex-col gap-6">
+    <div className="grid w-full gap-6 md:grid-cols-2 md:items-start">
       <section className="flex flex-col gap-2">
         <h2 className="text-muted-foreground text-sm font-medium">
           Joueurs ({snapshot.players.length})
@@ -226,6 +228,7 @@ export function LobbyView({ snapshot }: { snapshot: RoomSnapshot }) {
         </ul>
       </section>
 
+      <div className="flex flex-col gap-6">
       {isHost && (
         <section className="flex flex-col gap-4 rounded-xl border p-4">
           <h2 className="text-muted-foreground text-xs font-medium uppercase tracking-wide">
@@ -292,25 +295,33 @@ export function LobbyView({ snapshot }: { snapshot: RoomSnapshot }) {
             </div>
           )}
 
-          {/* Nombre de questions (quiz / images / mixte) */}
+          {/* Nombre de questions de quiz */}
-          {showQuestions && (
+          {showQuiz && (
+            <div className="flex items-center justify-between">
+              <span className="flex items-center gap-1.5 text-sm font-medium">
+                <Brain className="size-4" /> Questions de quiz
+              </span>
+              <Stepper value={quizCount} min={1} max={20} onChange={setQuizCount} />
+            </div>
+          )}
+
+          {/* Nombre d'images */}
+          {showImage && (
             <div className="flex flex-col gap-1">
               <div className="flex items-center justify-between">
                 <span className="flex items-center gap-1.5 text-sm font-medium">
-                  {effectiveType === "image" ? (
+                  <ImageIcon className="size-4" /> Images à deviner
-                    <ImageIcon className="size-4" />
-                  ) : (
-                    <Brain className="size-4" />
-                  )}
-                  {effectiveType === "image" ? "Images" : "Questions"}
                 </span>
-                <Stepper value={count} min={1} max={20} onChange={setCount} />
+                <Stepper
+                  value={imageCount}
+                  min={1}
+                  max={20}
+                  onChange={setImageCount}
+                />
               </div>
-              {effectiveType === "image" && (
               <p className="text-muted-foreground text-xs">
-                  Crée des questions « Image » dans le back-office au préalable.
+                Nécessite des questions « Image » créées dans le back-office.
               </p>
-              )}
             </div>
           )}
 
@@ -374,6 +385,7 @@ export function LobbyView({ snapshot }: { snapshot: RoomSnapshot }) {
 
       {error && <p className="text-destructive text-center text-sm">{error}</p>}
       </div>
+    </div>
   )
 }
 

apps/web/src/components/quiz-view.tsx

@@ -59,7 +59,7 @@ export function QuizView({ snapshot }: { snapshot: RoomSnapshot }) {
   }
 
   return (
-    <div className="flex w-full max-w-md flex-col gap-5">
+    <div className="flex w-full max-w-lg flex-col gap-5">
       <header className="flex items-center justify-between">
         <span className="text-muted-foreground text-xs uppercase">
           Question {snapshot.currentRound + 1} / {snapshot.totalRounds}

apps/web/src/pages/room.tsx

@@ -63,8 +63,17 @@ export function RoomPage({ code }: { code: string }) {
         : "game"
 
   return (
-    <div className="flex min-h-svh items-start justify-center p-6 pt-12">
+    <div className="relative flex min-h-svh items-start justify-center overflow-hidden p-4 pt-10 sm:p-6 sm:pt-12">
-      <div className="flex w-full max-w-md flex-col gap-6">
+      {/* Halo d'ambiance en fond */}
+      <div
+        aria-hidden
+        className="pointer-events-none absolute top-[-20vmin] -z-10 size-[90vmin] rounded-full bg-gradient-to-br from-fuchsia-500/10 via-purple-500/5 to-cyan-400/10 blur-3xl"
+      />
+      <div
+        className={`flex w-full flex-col gap-6 transition-[max-width] ${
+          phase === "lobby" ? "max-w-3xl" : "max-w-lg"
+        }`}
+      >
         <header className="flex items-center justify-between">
           <RoomCode code={snapshot.code} />
           <span

packages/shared/src/domain.ts

@@ -29,6 +29,8 @@ export interface Player {
 /** Configuration d'une épreuve planifiée dans la séquence de la partie. */
 export interface RoundConfig {
   type: RoundType
+  /** Pour une manche quiz : dans quel sous-pool piocher (quiz "classique" ou images). */
+  pool?: "quiz" | "image"
 }
 
 /** Réglages de la room, modifiables dans le lobby par l'hôte. */