34 Rôles jouables
4-20 Joueurs
Vue 3 Framework
TypeScript Langage

Télécharger l’APK Android Code source

Présentation

Loup-Garous est une application qui remplace le maître du jeu dans le célèbre jeu de société des Loups-Garous de Thiercelieux. Elle gère automatiquement toutes les phases de jeu, distribue les rôles, narre les événements grâce à la synthèse vocale, et suit les éliminations.

L’application supporte de 4 à 20 joueurs avec 34 rôles différents répartis en 3 camps.

Déroulement d’une partie

1. Configuration

Choix du nombre de joueurs et sélection des rôles. Le nombre de loups-garous est calculé automatiquement (1 pour ~5-6 joueurs), et les places restantes sont remplies avec des villageois simples.

2. Distribution des rôles

Chaque joueur entre son nom et découvre son rôle avec une animation de carte retournée. Un message “Ne montrez pas votre écran aux autres !” s’affiche pour la discrétion.

3. Phase de nuit

Le narrateur vocal appelle chaque rôle dans l’ordre. Les loups choisissent leur victime, la voyante identifie un joueur, la sorcière décide d’utiliser ses potions, etc. Un fond étoilé avec effet ambiant accompagne cette phase.

4. Phase de jour

Le village se réveille et découvre les éliminations de la nuit. Discussion entre les joueurs pour identifier les loups.

5. Vote

Les joueurs votent pour éliminer un suspect. Un timer visuel accompagne la phase de délibération.

6. Fin de partie

Détection automatique des conditions de victoire. Écran de célébration avec confettis, statistiques détaillées (durée, nombre de nuits, éliminations par les loups vs par vote, survivants).

Les 34 rôles

Camp des Loups (7 rôles)

Rôle Pouvoir
Loup-Garou 🐺 Élimine un villageois chaque nuit
Grand Méchant Loup 🐺 Peut tuer 2 victimes si aucun loup n’est mort
Loup Alpha 🐺 Chef de meute, décide en cas d’égalité
Loup Chamane 🐺 Découvre le rôle d’un joueur une fois par partie
Loup Blanc 🐺 Joue seul, peut tuer un joueur toutes les 2 nuits
Infect Père des Loups 🧟 Peut transformer une victime en loup
Chien-Loup 🐕 Choisit son camp la première nuit

Camp du Village (24 rôles)

Rôle Pouvoir
Villageois 👨‍🌾 Aucun pouvoir, vote uniquement
Voyante 🔮 Découvre le rôle d’un joueur chaque nuit
Sorcière 🧙‍♀️ 2 potions : une de guérison, une d’empoisonnement
Cupidon 💘 Lie 2 joueurs : si l’un meurt, l’autre aussi
Chasseur 🏹 Emporte quelqu’un avec lui s’il est éliminé
Petite Fille 👧 Espionne les loups la nuit (meurt si repérée)
L’Ancien 👴 2 vies contre les loups
Garde 🛡️ Protège un joueur chaque nuit
L’Idiot du Village 🤡 Survit au vote mais perd son droit de vote
Chevalier ⚔️ Tue le loup qui l’attaque
L’Enfant Sauvage 👦 Devient loup si son idole meurt
Les Deux Sœurs 👭 Se reconnaissent la première nuit
Les Trois Frères 👨‍👦‍👦 Se reconnaissent la première nuit
Voleur 🕵️‍♂️ Échange son rôle la première nuit
Montreur d’Ours 🐻 Grognement si un loup est à côté
Renard 🦊 Sonde 3 joueurs pour trouver un loup
Le Juge ⚖️ Peut annuler un vote
Noctambule 🌙 Désactive les pouvoirs d’un joueur
Servante Dévouée 🧹 Peut se sacrifier pour une victime
Médium 🔮 Interroge les morts (oui/non)
Le Fantôme 👻 Révèle le rôle d’un mort
Le Vengeur Désigne une victime s’il meurt la nuit
Le Fossoyeur ⚰️ Peut ressusciter un mort
Corbeau 🐦‍⬛ Ajoute 2 votes contre un joueur
Bouc Émissaire 🐐 Meurt en cas d’égalité au vote

Camp Solitaire (3 rôles)

Rôle Pouvoir
Loup Blanc 🐺 Doit éliminer tout le monde seul
Joueur de Flûte 🎶 Charme des joueurs, gagne si tous sont charmés
Ange 👼 Doit mourir au premier vote pour gagner

Narrateur vocal

L’application utilise l’API Web Speech pour narrer automatiquement les instructions de chaque phase :

  • Voix françaises prioritaires avec débit ajusté (0.85x pour la clarté)
  • Pauses naturelles dans le texte
  • Contrôles play/pause/stop pendant la narration
  • Chaque rôle est appelé dans son ordre de nuit (nightOrder 0-11)

Architecture technique

src/
├── views/
│   ├── HomePage.vue        # Sélection du nombre de joueurs
│   ├── RolesPage.vue       # Configuration des rôles
│   └── NamesPage.vue       # Distribution, nuit, vote, fin
├── stores/
│   ├── gameStore.ts        # État du jeu (machine à états)
│   └── historyStore.ts     # Historique des parties (50 max)
├── composables/
│   ├── useSpeech.ts        # Synthèse vocale
│   └── useTimer.ts         # Timers de phase
├── data/
│   ├── roles.ts            # 34 définitions de rôles
│   └── narratorScript.ts   # Scripts de narration
└── utils/
    ├── validation.ts       # Validation des entrées
    └── shuffle.ts          # Mélange cryptographique (Fisher-Yates)

Technologies utilisées

Technologie Utilisation
Vue 3 Framework frontend avec Composition API
TypeScript Typage strict sur tout le projet
Pinia Gestion d’état centralisée (gameStore, historyStore)
Vue Router Navigation entre les 3 vues principales
Capacitor 6 Déploiement Android natif depuis le code web
Vite 7 Build rapide avec Hot Module Replacement
Web Speech API Synthèse vocale pour le narrateur
Crypto API Mélange sécurisé des cartes (crypto.getRandomValues)

Design

  • Thème sombre immersif : fond dégradé bleu-violet (#050510)
  • Effets glassmorphisme : cartes semi-transparentes avec flou
  • Couleurs par camp : rouge (#ef4444) pour les loups, vert (#22c55e) pour le village, violet (#a855f7) pour les solitaires
  • Animations : transitions de pages, retournement de cartes, confettis, étoiles animées
  • Responsive : optimisé mobile avec zones de touche 44px minimum

Ce que j’ai appris

  • Développement d’une SPA complète avec Vue 3 et TypeScript strict
  • Machine à états complexe pour gérer les 6 phases de jeu avec Pinia
  • Intégration de la synthèse vocale native du navigateur
  • Mélange cryptographiquement sécurisé avec Fisher-Yates
  • Déploiement cross-platform web + Android avec Capacitor
  • Design d’interface immersif avec glassmorphisme et animations CSS