🎯 Mister Mölkky

Compteur de scores PWA pour vos parties de Mölkky : offline-first, multi-device, sans pub. Suivi des erreurs (Sentry) dès l'ouverture, mesure d'audience (PostHog) seulement après votre accord.

🚀 Tester la démo en ligne →

---

✨ Pourquoi Mister Mölkky ?

Parce que compter les scores au Mölkky sur papier finit toujours mal après le 4ᵉ tour. Mister Mölkky vous donne :

• 🎯 Saisie en 2 taps : tapez sur les quilles tombées, validez. Le score est calculé tout seul (overshoot → 25, victoire pile à 50, élimination après 3 ratés).
• 📱 Hors ligne : installable comme une app ; une fois ouverte la première fois, elle compte les points sans internet (le direct et la sync cloud, eux, demandent une connexion).
• 🌍 Multi-device en temps réel : un téléphone hôte saisit, les autres suivent via un QR code ou un code à 6 caractères.
• 📊 Stats par joueur : taux de victoire, précision, séries, achievements, comparatifs tête-à-tête, tendance temporelle.
• 🌑 Dark mode + mode extérieur (gros boutons) + mode daltonien.
• 🔊 Sons + haptique gradé + annonceur vocal (TTS) optionnel pour le mains-libres en extérieur.

---

🎮 Les modes de jeu

Mode	Description
Classique	Règle FIM officielle : 0 → 50 pile pour gagner
Inversée	50 → 0 pile pour gagner, overshoot = +5
Libre	Pas de retour à 25 sur dépassement, passe juste au tour suivant
Équipes	Duo ou trio, score partagé par équipe, rotation auto entre membres
Pratique solo	Vise une quille spécifique tour après tour, stats de précision par cible

Sanction configurable après X ratés : élimination (officiel), remise à zéro (kids-friendly), ou aucune.

---

🌟 Features

• Roster de joueurs persistant avec avatars + couleurs
• Templates de règles sauvegardables (relancer en 1 tap)
• Joueurs invités one-shot (pas sauvés dans le roster)
• Mode équipes (duo/trio) avec composition auto
• 3 variantes de règles + sanction-après-ratés configurable
• Handicap par joueur (départ avantagé)
• Mélange de l'ordre de passage (bouton "Aléatoire")

• Saisie pin-par-pin via PinsBoard : boutons HTML placés en pourcentages (CSS seul, marche sur tout)
• Coach in-match : quille / combo optimal pour gagner pile
• Call-your-shot : annonce la quille avant le tir, badge ✓/✗ après
• Highlights : marque les moments forts d'une étoile
• Chrono live (mm:ss / hh:mm)
• Mode outdoor (gros boutons + contraste poussé)
• Mode daltonien (symboles en plus des couleurs)
• Photo de la situation (caméra native pour les litiges)
• Annonceur vocal (TTS) hands-free
• Forfait individuel d'un joueur (les autres continuent)
• Pronostics, depuis le menu de la partie : qui prédit le gagnant ?
• Swipe-down sur le scoreboard → rouvre le throws log
• Undo + édition rétroactive d'un lancer
• Toast d'élimination + confetti à la victoire

• L'hôte génère un code à 6 caractères + un QR code
• Les viewers rejoignent via /join (l'ancien /rejoindre redirige) ou en scannant le QR
• Temps réel via Supabase Realtime (Broadcast, WebSocket) : l'hôte signale chaque lancer, les viewers relisent la partie par son code
• Seul le code ouvre la partie, seul le téléphone hôte l'écrit, et elle est effacée 24 h après le dernier lancer : voir « Vos données »
• Auto-reconnexion en cas de drop réseau (jusqu'à 5 tentatives)
• Notifications browser : lancer / élimination / victoire
• Voir docs/live-supabase.md pour activer Supabase

• Historique des parties avec filtres (variante, taille, durée, recherche par nom)
• Suppression annulable 8 secondes au lieu d'une confirmation préalable
• Replay animé : scrubable, play/pause, frame-by-frame
• Carte résultat partageable en image (Web Share API → Insta / WhatsApp / etc.)
• Stats par joueur : matches, victoires, taux, podiums, précision, séries
• Comparateur tête-à-tête entre deux joueurs
• 6 achievements (premier 50, triplé, partie parfaite, vétéran, etc.)
• Sparkline du score in-match + tendance taux victoire sur les N dernières parties

• Une clé de synchro partagée par QR entre vos appareils : ni compte, ni connexion
• Push / pull manuel : les joueurs, les parties terminées et les modèles de tous vos appareils sont réunis, jamais remplacés
• Fusion par identifiant ; à identifiant égal, le plus récent gagne ; un envoi devancé par un autre appareil relit et refusionne au lieu d'écraser
• La partie en cours reste sur son appareil, et l'écran le dit
• « Oublier la clé ici » et « Effacer du cloud », chacun avec sa confirmation
• Le cloud efface une synchro restée un an sans envoi ni récupération
• Voir docs/cloud-sync.md

---

Vos données

Joueurs, parties et réglages restent dans le navigateur de l'appareil. Ce qui en sort :

• Suivi des erreurs (Sentry) : sur l'app publiée, Sentry (région UE) démarre à l'ouverture, sans consentement, et ne reçoit un rapport technique que lorsqu'une erreur survient.
• Mesure d'audience (PostHog, nuage européen) : rien n'est chargé avant votre accord dans le bandeau. Ensuite : pages vues, parties démarrées et terminées, nombre de joueurs ; jamais les noms ni les scores.
• Mode direct : la partie diffusée, noms des joueurs compris, part vers Supabase. Elle n'est lisible qu'avec son code à 6 caractères, donc par quiconque vous le donnez ; seul le téléphone hôte peut l'écrire ; elle est effacée 24 h après le dernier lancer.
• Sync cloud (opt-in) : joueurs, parties terminées, modèles et réglages partent vers Supabase (sans les avatars ni les photos), sous une clé de synchro que seuls vos appareils détiennent. Qui a la clé lit ces données ; elles sont effacées après un an sans envoi ni récupération, ou dès que vous les effacez depuis les Paramètres.

---

🚀 Quickstart

En tant qu'utilisateur

Ouvrez la démo : mister-guiiug.github.io/mister-molkky

Sur mobile, le navigateur proposera d'installer l'app sur l'écran d'accueil. Elle fonctionne ensuite hors ligne, sauf le direct et la sync cloud.

En tant que développeur

Prérequis : la version de Node de .nvmrc, et un jeton GitHub Packages (read:packages) exporté en NODE_AUTH_TOKEN : le socle @mister-guiiug/dev-pwa-config n'est publié que là (voir .npmrc).

git clone https://github.com/mister-guiiug/mister-molkky.git
cd mister-molkky
npm install
npm run dev          # vite dev server, http://localhost:5173
npm run test         # vitest --run
npm run build        # tsc -b && vite build && pwa-bundle-budget
npm run lint

Pour activer le mode direct + cloud sync, créez un projet Supabase et exposez les variables d'environnement :

# .env.local
VITE_SUPABASE_URL=https://xxx.supabase.co
VITE_SUPABASE_ANON_KEY=eyJxxx...

Puis appliquez les migrations de supabase/migrations/ (supabase db push, voir supabase/README.md) ; sur le projet de ce dépôt, la CI s'en charge (supabase-migrations.yml). Aucun réglage du tableau de bord n'est nécessaire : ni compte, ni connexion anonyme.

---

🧱 Stack

Catégorie	Technos
Framework	Vite 8 · React 19 · TypeScript strict
State	Zustand 5 + persist middleware + IndexedDB pour les blobs
Validation	Zod 4 (branded types : PlayerId, MatchId)
Styling	Tailwind CSS 4 + CSS variables pour le theming
Icons	lucide-react (sized + wrapped centralement)
PWA	vite-plugin-pwa (Workbox precache, prompt registration)
Routing	React Router 7 (BrowserRouter + 404.html SPA fallback)
Live	Supabase Realtime (Broadcast) + fonctions RPC par code
Sync	Fonctions RPC Supabase par clé de synchro (QR)
Audio	Web Audio API (synth offline) + Web Speech API (TTS)
Caméra	<input capture="environment"> (native)
Partage	Canvas → Web Share API (avec fallback download)
Tests	Vitest + jsdom + Testing Library ; Playwright + axe (e2e)
CI	GitHub Actions (CI + Deploy GH Pages + Lighthouse + pgTAP)

---

📐 Architecture

src/
├── molkky/              # Domain pur (TypeScript, zéro React) — rules, ranking, stats, achievements
├── schemas.ts           # Zod schemas pour Player, MatchConfig, Throw, etc.
├── store/               # 6 stores Zustand (match, players, settings, templates, live, sync)
├── live/                # Supabase Realtime + notifications browser
├── react/
│   ├── components/      # Composants partagés (PinsBoard, ScoreTicker, Modal, …)
│   └── views/           # 9 vues (Home, Match, History, Stats, Players, Settings, JoinLive, Spectator, Practice)
├── i18n/                # FR + EN (templates literals → MessageKey union TS-safe)
├── tts.ts               # Voice announcer (Web Speech API)
├── shareCard.ts         # Canvas → PNG export
├── cloudSync.ts         # Clé de synchro + transport du blob (RPC Supabase)
└── sounds.ts            # Table des sons (le synthé Web Audio est au socle : `audio`)

Principe directeur : le moteur de règles dans src/molkky/ est 100 % pur — zéro dépendance React, zéro state, zéro I/O. Le store recompose tout l'état dérivé (scores, classement, joueur courant) à partir de la seule liste ordonnée de lancers. Conséquences :

• L'undo = drop le dernier lancer + recompute
• L'édition rétroactive = remplace un lancer + recompute
• Les tests sont triviaux : replayThrows(playerIds, throws, settings) → MatchOutcome

---

🛣️ Roadmap & inspirations

• Le brief de conception complet (objectif produit, design system, règles de scoring, modèle de données, animations Rive, critères d'acceptation) est dans PROMPT.md.
• Documentation Supabase : docs/live-supabase.md, docs/cloud-sync.md
• Documentation animations Rive : docs/rive-pins.md
• Règles officielles : molkky.com (FIM)
• Apps inspirantes : Mölkky® Game Tracker · Mölkky Champion

---

👨‍👩‍👧 Famille mister-guiiug

Projet	Rôle
dev-pwa-config	Le socle : configs, composants React, workflows réutilisables
pwa-starter-kit	Squelette de référence pour les PWA mister-* / miss-*
mister-molkky	Ce projet

---

☕ Soutenir

Si l'app vous a évité une dispute "tu avais marqué combien déjà ?" pendant un BBQ, vous pouvez offrir un café à l'auteur : buymeacoffee.com/guiiug ☕

📄 Licence

MIT — fork, modifie, redistribue, héberge où tu veux. Aucun warranty, aucune obligation.