Undercover 🕵️ — jeu de mots entre amis (V2 · React + TypeScript + Vite)

Jeu de déduction sociale en mode pass-and-play (un seul appareil qui circule entre les joueurs). Base React + TypeScript + Vite, tests Vitest, transitions Framer Motion, installable en PWA et disponible en fichier unique hors-ligne.

▶️ Jouer

1. En ligne (n'importe quel appareil, rien à installer) 👉 https://elyogl.github.io/undercover/

2. Installer comme une app (PWA) Ouvre le lien ci-dessus sur ton téléphone → menu du navigateur → « Ajouter à l'écran d'accueil ». L'icône s'installe, ça s'ouvre en plein écran et ça marche hors-ligne après la première visite.

3. Fichier unique hors-ligne (double-clic) Un seul fichier HTML autonome, sans installation ni internet :

• dans le dépôt : standalone/undercover.html (bouton Download raw)
• ou en ligne : https://elyogl.github.io/undercover/undercover.html (clic droit → Enregistrer)

Télécharge-le, ouvre-le dans n'importe quel navigateur → tu joues, même sans connexion.

Développer

npm install
npm run dev          # serveur de dev (http://localhost:5173)
npm run typecheck    # vérifie les types TypeScript
npm test             # tests (Vitest)
npm run build        # build de production (dist/, avec PWA)
npm run build:standalone  # génère le fichier unique (standalone/undercover.html)
npm run icons        # régénère les icônes PWA (public/*.png) depuis les SVG
npm run preview      # sert le build de production en local

⚠️ Le dossier dist/ s'ouvre via un serveur (npm run preview), pas en file://. Le fichier unique standalone/undercover.html, lui, s'ouvre en double-clic.

Le principe (rappel)

Un mot secret circule. La plupart des joueurs ont le même mot (les Civils), mais des intrus se cachent :

• 🕵️ Undercover — reçoit un mot proche mais différent qu'il ignore.
• 🎭 Monsieur Blanc — n'a aucun mot ; il bluffe et tente de deviner celui des civils.

Chaque manche : chacun décrit son mot avec un seul mot → discussion → vote d'élimination → révélation du rôle. Victoire : Civils (tous les imposteurs éliminés), Imposteurs (parité atteinte), ou Monsieur Blanc (devine le mot des civils).

Options : 3 à 20 joueurs, noms personnalisables, nombre d'Undercover réglable + interrupteur Monsieur Blanc, sélecteur de 11 thèmes (241 paires, sans répétition).

Architecture

src/
├─ main.tsx            point d'entrée React
├─ App.tsx             routeur d'écrans + transitions Framer Motion
├─ index.css           design system (repris tel quel de la V1)
├─ types.ts            types du jeu (Role, Player, GameState…)
├─ data/categories.ts  11 thèmes, 241 paires
├─ game/
│  ├─ logic.ts         règles pures (testables) : tirage, rôles, victoire
│  ├─ reducer.ts       état + transitions (useReducer)
│  ├─ context.tsx      Context React (state + dispatch)
│  └─ logic.test.ts    tests Vitest
├─ components/         TopBar, HelpModal, Stepper, Pill
└─ screens/            Setup, Reveal, Discuss, Vote, Eliminated, GameOver

👉 Nouveau ici ? Lis LEARNING.md : il explique l'architecture et fait le pont entre la V1 (vanilla) et cette V2 (React), concept par concept.