Crypt-0n Jeopardy 🎮

Une application de jeu Jeopardy moderne, interactive et temps réel, conçue pour des animations en direct avec buzzer, gestion sonore avancée et résilience des connexions.

🚀 Fonctionnalités

• Écran Géant (Board) : Une interface immersive pour afficher la grille de questions, les scores et les animations.
• Interface Maître du Jeu : Contrôle total sur le flux du jeu, validation des réponses, gestion de l'audio et éditeur de questions intégré.
• Interface Joueurs : Buzzer ultra-réactif sur smartphone/tablette avec gestion de pénalités configurables en cas de buzz prématuré.
• Bibliothèque Audio : Système complet de gestion de sons (Jeu et Buzzers) avec ensemencement automatique.
• Résilience : Reconnexion automatique et transparente des joueurs après un rafraîchissement ou une perte de connexion.
• Compte à Rebours : Minuteur configurable globalement ou par salon.

🛠️ Installation & Lancement

L'application est conteneurisée avec Docker pour un déploiement simple et rapide.

Prérequis

• Docker
• Docker Compose

Démarrage Rapide

1. Cloner le projet :

   git clone https://github.com/jlequen/Crypt-0n_jeopardy.git
   cd Crypt-0n_jeopardy

2. Lancer avec Docker Compose :

   docker compose up --build -d

L'application sera accessible sur : http://localhost:3300

🔑 Configuration

Vous pouvez configurer le mot de passe Super Admin dans le fichier docker-compose.yml ou via une variable d'environnement :

environment:
  - ADMIN_PASSWORD=votre_mot_de_passe

📂 Structure du Projet

• /client : Application Vue.js 3 (Vite, Tailwind CSS, Socket.io).
• /server : Serveur Node.js / TypeScript (Express, Socket.io, SQLite).
• /data : Persistance de la base de données SQLite.

📝 Utilisation

1. Accès Admin : Rendez-vous sur /admin pour créer des salles et gérer la bibliothèque sonore.
2. Création de Salle : Le Maître du Jeu crée une salle avec un code et un mot de passe.
3. Rejoindre le Jeu : Les joueurs scannent le QR code ou entrent l'URL de la salle pour rejoindre une équipe.
4. C'est parti ! : Le Maître du Jeu lance les questions depuis son panneau de contrôle.

🎨 Design system & UI (refonte)

L'UI repose sur un design system « flat terminal » (vert sur noir, police mono) :

• Tokens : définis dans client/src/style.css via @theme (Tailwind v4). Couleurs (surface-1/2/3, accent, rôles role-player/master/admin, sémantique success/warn/danger/info, texte fg/muted/faint), typo fluide en clamp (--text-xs … --text-display), radius plats, lueurs réservées aux états « live ».
• Composables (client/src/composables/) : logique partagée — useGameSocket (cycle socket + reconnexion), useGameTimer (compte à rebours + resync skew), useSounds, useGameComputeds, types useGameState.
• Composants (client/src/components/) : primitives ui/ (Button, Card, Input, Badge, ProgressBar…) et domaine game/ (Buzzer, QuestionBoardGrid, Scoreboard, Timer, Podium, QrJoin, CurrentQuestion).
• Responsive : fluide du téléphone (portrait/paysage) à la TV 4K. L'effet CRT (scanlines) est opt-in par rôle (activé sur l'écran géant, désactivé sur le téléphone) via client/src/App.vue.

Développement front (sans Docker)

cd client
npm install      # installe Tailwind v4, @tailwindcss/postcss, vite-plugin-pwa
npm run dev      # serveur Vite (HMR)
npm run build    # build de production -> client/dist (servi par le serveur Node)

📱 PWA (installable)

L'app est installable sur l'écran d'accueil et s'ouvre en plein écran « standalone » (buzzer immersif, wake-lock plus fiable). ⚠️ Le jeu reste injouable hors-ligne : il nécessite une connexion socket.io live au serveur ; le service worker ne précache que le shell statique (jamais l'état de jeu).

• iOS : « Ajouter à l'écran d'accueil » fonctionne dès maintenant, même en HTTP (manifest + meta apple présents — client/index.html, client/public/manifest.webmanifest).
• Android / install prompt + service worker : nécessite un contexte sécurisé (HTTPS). Terminer le TLS au Nginx Proxy Manager existant (le serveur Node reste en HTTP en interne). Configuration SW : client/vite.config.ts (vite-plugin-pwa).

Icônes (à générer pour finir le polish)

Une icône SVG est fournie (client/public/icons/icon.svg). Pour les PNG (apple-touch-icon iOS + maskable Android) :

cd client
npx pwa-asset-generator public/icons/icon.svg public/icons \
  --background "#050505" --padding "12%" --type png
# puis pointer /icons/apple-touch-icon.png dans index.html si le nom diffère

---

Développé avec ❤️ pour des soirées mémorables.