ayoub/nerdware
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feature/mixed-settings-restyle #12

Merged
ayoub merged 3 commits from feature/mixed-settings-restyle into dev 2026-06-11 13:42:00 +00:00
Conversation 0 Commits 3 Files changed 15 +155 -105
7 changed files with 155 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 879bc5b388 - Show all commits

112
apps/server/src/game/modes/quiz/pool.ts
View file

@ -1,42 +1,22 @@
// File d'attente de questions par room. Préchargée au lancement de la partie
// depuis la DB (si dispo), sinon depuis la banque en dur. Le QuizRound y pioche.
// Les formats servis dépendent du type de partie (quiz / images / mixte).
// File d'attente de questions par room. Préchargée au lancement : on respecte
// le sous-pool de chaque manche quiz (quiz "classique" vs images), dans l'ordre
// 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 {
queue: QuizQuestion[]
/** true si les questions viennent de la DB (→ marquer jouées). */
interface QueueItem {
question: QuizQuestion
fromDb: boolean
formats: QuizFormat[]
}
const poolByRoom = new WeakMap<ServerRoom, RoomPool>()
const poolByRoom = new WeakMap<ServerRoom, QueueItem[]>()
const QUIZ_FORMATS: QuizFormat[] = ["mcq", "truefalse", "free"]
/** 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
}
const IMAGE_FORMATS: QuizFormat[] = ["image_reveal"]
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. */
export async function prepareQuizForRoom(room: ServerRoom): Promise<void> {
const formats = quizFormatsFor(room.settings)
const needed = room.settings.rounds.filter((r) => r.type === "quiz").length
let queue: QuizQuestion[] = []
let fromDb = false
/** Charge un sous-pool (DB puis complément banque en dur) pour `need` manches. */
async function loadGroup(
room: ServerRoom,
need: number,
formats: QuizFormat[],
isImage: boolean
): Promise<QueueItem[]> {
if (need <= 0) {
return []
}
let items: QueueItem[] = []
if (hasDb) {
try {
queue = await loadQuizPool(room.code, Math.max(needed, 1), formats)
fromDb = queue.length > 0
const rows = await loadQuizPool(room.code, need, formats)
items = rows.map((question) => ({ question, fromDb: true }))
} catch (err) {
console.error("[quiz] chargement DB échoué, fallback banque en dur", err)
}
}
if (queue.length === 0) {
queue = shuffle(QUIZ_QUESTIONS.filter((q) => formats.includes(q.format)))
fromDb = false
if (items.length < need && !isImage) {
// Complément depuis la banque en dur (uniquement le quiz, pas d'images en dur).
const bank = shuffle(
QUIZ_QUESTIONS.filter((q) => formats.includes(q.format))
)
for (const question of bank) {
if (items.length >= need) break
items.push({ question, fromDb: false })
}
poolByRoom.set(room, { queue, fromDb, formats })
}
return items
}
/** Pioche la prochaine question. Fallback aléatoire (formats autorisés) si vide. */
/** 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 (banque en dur) si vide. */
export function takeQuestion(room: ServerRoom): {
question: QuizQuestion
fromDb: boolean
} {
const pool = poolByRoom.get(room)
if (pool && pool.queue.length > 0) {
return { question: pool.queue.shift()!, fromDb: pool.fromDb }
}
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 queue = poolByRoom.get(room)
if (queue && queue.length > 0) {
return queue.shift()!
}
const q = QUIZ_QUESTIONS[Math.floor(Math.random() * QUIZ_QUESTIONS.length)]
return { question: q, fromDb: false }
}

2
apps/web/src/components/blindtest-view.tsx
View file

@ -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}

31
apps/web/src/components/game-end-view.tsx
View file

@ -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({

94
apps/web/src/components/lobby-view.tsx
View file

@ -107,24 +107,25 @@ function shuffle<T>(items: T[]): T[] {
return arr
}
/** Construit la séquence de manches selon le type de partie. */
function buildRounds(
gameType: GameType,
quizCount: number,
totalTracks: number
): RoundConfig[] {
if (gameType === "quiz" || gameType === "image") {
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.
/** Construit la séquence de manches (chaque manche quiz porte son sous-pool). */
function buildRounds(opts: {
quiz: number
image: number
tracks: number
shuffleOrder: boolean
}): RoundConfig[] {
const rounds: RoundConfig[] = [
...Array.from({ length: quizCount }, () => ({ type: "quiz" as const })),
...Array.from({ length: totalTracks }, () => ({ type: "blindtest" as const })),
...Array.from({ length: opts.quiz }, () => ({
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.
const wantsQuestions =
effectiveType === "quiz" ||
effectiveType === "image" ||
(isMixed && (mixedModes.includes("quiz") || mixedModes.includes("image")))
const showQuestions = wantsQuestions
// Sous-modes effectivement actifs (un réglage par sous-mode).
const showQuiz =
effectiveType === "quiz" || (isMixed && mixedModes.includes("quiz"))
const showImage =
effectiveType === "image" || (isMixed && mixedModes.includes("image"))
const showBlindtest =
effectiveType === "blindtest" ||
(isMixed && mixedModes.includes("blindtest") && blindtestAvailable)
const rounds = buildRounds(
effectiveType,
showQuestions ? count : 0,
showBlindtest ? totalTracks : 0
)
const rounds = buildRounds({
quiz: showQuiz ? quizCount : 0,
image: showImage ? imageCount : 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) */}
{showQuestions && (
{/* Nombre de questions de quiz */}
{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" />
) : (
<Brain className="size-4" />
)}
{effectiveType === "image" ? "Images" : "Questions"}
<ImageIcon className="size-4" /> Images à deviner
</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>
)
}

2
apps/web/src/components/quiz-view.tsx
View file

@ -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}

13
apps/web/src/pages/room.tsx
View file

@ -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="flex w-full max-w-md flex-col gap-6">
<div className="relative flex min-h-svh items-start justify-center overflow-hidden p-4 pt-10 sm:p-6 sm:pt-12">
{/* 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

2
packages/shared/src/domain.ts
View file

@ -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. */