Initial commit

skills/creating-arcade-games/SKILL.md

@@ -0,0 +1,241 @@
+---
+name: creating-arcade-games
+description: Creates HTML5 canvas arcade games following leapmultix patterns (Multimiam, Multisnake, Invasion). Use when creating new arcade mini-games
+allowed-tools: Read, Write, Grep, Glob, Bash
+---
+
+# Arcade Game Creator
+
+Guide la création de nouveaux jeux arcade canvas pour le mode Arcade.
+
+## Table des matières
+
+- [Quand utiliser](#quand-utiliser)
+- [Jeux existants (références)](#jeux-existants-références)
+- [Patterns architecturaux](#patterns-architecturaux)
+- [Composants essentiels](#composants-essentiels)
+- [Workflow de création](#workflow-de-création)
+- [Patterns de gameplay](#patterns-de-gameplay)
+- [Performance (viser 60 FPS)](#performance-viser-60-fps)
+- [Checklist](#checklist)
+- [Debugging](#debugging)
+- [Outils disponibles](#outils-disponibles)
+- [En cas de doute](#en-cas-de-doute)
+- [Références](#références)
+
+## Quand utiliser
+
+- Création d'un nouveau jeu arcade
+- Extension du mode Arcade
+- Adaptation de jeux existants
+- Prototypage de mini-jeux
+
+## Jeux existants (références)
+
+### Architecture simple
+
+**Arcade Multi Memory** (31 KB) :
+
+- Jeu de memory matching
+- Structure monolithique simple
+- Bon point de départ
+
+**Arcade Invasion** (31 KB) :
+
+- Space Invaders style
+- Gestion d'entités multiples
+- Pattern de vagues d'ennemis
+
+### Architecture décomposée
+
+**Multimiam** (architecture modulaire) :
+
+- Point d'entrée + modules séparés
+- Engine (logique), Renderer (rendu), Controls (inputs), Questions (multiplication)
+- Meilleure maintenabilité
+
+**Multisnake** (38 KB) :
+
+- Structure plus monolithique
+- Gestion de grille
+
+## Patterns architecturaux
+
+### Pattern monolithique
+
+Tout dans un fichier. Simple pour jeux petits.
+
+**Quand utiliser** : Jeux simples, prototypes
+
+### Pattern décomposé
+
+Séparation en modules (Engine, Renderer, Controls, Questions).
+
+**Quand utiliser** : Jeux complexes, maintenance long terme
+
+Examine Multimiam pour voir ce pattern en action.
+
+## Composants essentiels
+
+### Game Loop
+
+Boucle continue : update → render → next frame (requestAnimationFrame)
+
+### Système de rendu Canvas
+
+Clear canvas → Draw entities → Draw UI
+
+### Gestion des inputs
+
+Support clavier ET touch pour mobile
+
+### Intégration questions multiplication
+
+Questions intégrées au gameplay, pas séparées
+
+Cherche ces patterns dans les jeux existants.
+
+## Workflow de création
+
+### Étape 1 : Choisir un jeu de référence
+
+Identifie le jeu existant qui ressemble le plus au tien :
+
+- Jeu de puzzle/memory → arcade-multimemory.js
+- Jeu de tir/action → arcade-invasion.js
+- Jeu de grille → multisnake.js
+
+### Étape 2 : Décider de l'architecture
+
+**Jeu simple** : Fichier unique `arcade-new-game.js`
+
+**Jeu complexe** : Fichiers multiples
+
+- `new-game.js` (point d'entrée)
+- `new-game-engine.js` (logique)
+- `new-game-renderer.js` (rendu)
+- `new-game-controls.js` (inputs)
+
+### Étape 3 : Comprendre le pattern de référence
+
+Examine le jeu choisi :
+
+- Comment l'initialisation fonctionne ?
+- Comment le game loop est structuré ?
+- Comment le rendu est organisé ?
+- Comment les questions sont intégrées ?
+
+Adapte (ne copie pas aveuglément).
+
+### Étape 4 : Intégrer dans mode Arcade
+
+Trouve où les jeux arcade sont enregistrés.
+Ajoute ton jeu suivant le même pattern.
+
+### Étape 5 : Ajouter UI et traductions
+
+- Ajoute bouton dans HTML (cherche structure existante)
+- Crée traductions (fr → en → es)
+- Vérifie synchronisation i18n
+
+## Patterns de gameplay
+
+### Collision detection
+
+Cherche comment les jeux existants détectent les collisions (AABB pattern courant).
+
+### Spawning d'entités
+
+Trouve comment les ennemis/objets sont créés dans les jeux.
+
+### Scoring et progression
+
+Examine les systèmes de score et de niveaux dans les jeux existants.
+
+## Performance (viser 60 FPS)
+
+**Techniques essentielles** :
+
+- `requestAnimationFrame` (pas `setInterval`)
+- Object pooling pour entités
+- Éviter allocations mémoire dans game loop
+- Optimiser opérations canvas
+
+Cherche exemples de ces optimisations dans le code existant.
+
+## Checklist
+
+### Découverte
+
+- [ ] Examiner jeu similaire existant
+- [ ] Comprendre architecture (monolithique ou décomposée)
+- [ ] Identifier patterns de game loop et rendu
+
+### Implémentation
+
+- [ ] Fichiers créés avec convention de nommage
+- [ ] Game loop avec requestAnimationFrame
+- [ ] Rendu canvas fonctionnel
+- [ ] Controls clavier ET touch
+- [ ] Questions multiplication intégrées
+- [ ] Sons joués (correct/wrong)
+
+### Intégration
+
+- [ ] Intégré dans mode Arcade
+- [ ] Bouton ajouté dans HTML
+- [ ] Traductions ajoutées
+- [ ] `npm run i18n:compare` passe
+
+### Qualité
+
+- [ ] Performance 60 FPS (tester sur mobile)
+- [ ] Cleanup des listeners (pas de leaks)
+- [ ] Tests si logique complexe
+- [ ] Code formatté et lint passe
+
+## Debugging
+
+### Problèmes de performance
+
+Utilise Chrome DevTools → Performance tab
+Enregistre pendant le jeu et cherche frame drops
+
+### Problèmes de rendu
+
+Vérifie ordre de rendu (background → entités → UI)
+
+### Problèmes d'inputs
+
+Vérifie event listeners attachés et retirés proprement
+
+## Outils disponibles
+
+Examine le code pour trouver :
+
+- Fonctions audio (playSound)
+- Event bus (communication avec UI)
+- Utils généraux (utils-es6.js)
+- Question generator (questionGenerator.js)
+- Fonctions communes arcade (arcade-common.js, arcade-utils.js)
+
+## En cas de doute
+
+**Code existant = source de vérité**
+
+1. Choisis jeu similaire comme référence
+2. Comprends son architecture avant de coder
+3. Adapte les patterns
+4. Teste fréquemment (surtout performance)
+5. Mobile-first : teste sur touch dès le début
+
+## Références
+
+Cherche dans le code :
+
+- `js/arcade-multimemory.js` - Jeu simple
+- `js/arcade-invasion.js` - Space invaders
+- `js/multimiam*.js` - Architecture décomposée
+- `js/multisnake.js` - Snake
+- `js/arcade-common.js` - Fonctions communes
+- `js/questionGenerator.js` - Génération questions

skills/game-mode/SKILL.md

@@ -0,0 +1,220 @@
+---
+name: creating-game-modes
+description: Creates new game modes by extending the abstract GameMode.js class with lifecycle management, event bus, and lazy loading
+allowed-tools: Read, Write, Grep, Glob, Bash
+---
+
+# New Game Mode Creator
+
+Guide la création de nouveaux modes de jeu suivant l'architecture établie du projet.
+
+## Table des matières
+
+- [Quand utiliser](#quand-utiliser)
+- [Architecture des Game Modes](#architecture-des-game-modes)
+- [Workflow de création](#workflow-de-création)
+- [Patterns et conventions](#patterns-et-conventions)
+- [Checklist de création](#checklist-de-création)
+- [Debugging](#debugging)
+- [En cas de doute](#en-cas-de-doute)
+- [Références](#références)
+
+## Quand utiliser
+
+- Création d'un nouveau mode de jeu
+- Extension de la fonctionnalité arcade
+- Ajout de variantes de modes existants
+- Migration de code legacy vers pattern GameMode
+
+## Architecture des Game Modes
+
+### Principes fondamentaux
+
+**Héritage** : Tous les modes héritent de `GameMode` (classe abstraite)
+
+**Communication** :
+
+- Utilise `eventBus` pour découplage (jamais de couplage direct)
+- Pattern publish/subscribe pour événements
+
+**Chargement** : Lazy loading via le système existant
+
+**Cycle de vie** : `init()` → `start()` → `update()` → `cleanup()`
+
+- Toujours nettoyer les listeners dans `cleanup()`
+
+### Méthodes abstraites requises
+
+À implémenter dans tout mode :
+
+- `init()` - Initialisation
+- `cleanup()` - Nettoyage et libération ressources
+- `handleQuestion()` - Traitement d'une question
+- `handleCorrectAnswer()` - Gestion réponse correcte
+- `handleWrongAnswer()` - Gestion réponse incorrecte
+- `updateUI()` - Mise à jour interface
+- `showResults()` - Affichage résultats
+
+## Workflow de création
+
+### Étape 1 : Explorer les exemples existants
+
+Examine les modes dans `js/modes/` :
+
+- **QuizMode.js** : Mode simple, bon point de départ
+- **ChallengeMode.js** : Mode avec timer, patterns avancés
+- **ArcadeMode.js** : Collection de mini-jeux
+
+Trouve celui qui ressemble le plus à ce que tu veux créer.
+
+### Étape 2 : Localiser la classe abstraite
+
+Trouve et examine `GameMode.js` pour comprendre :
+
+- Les méthodes abstraites obligatoires
+- Les méthodes utilitaires disponibles
+- Le contrat d'interface
+
+### Étape 3 : Comprendre l'intégration
+
+Cherche dans le code existant :
+
+- Comment les modes sont enregistrés (gestionnaire de modes)
+- Comment le lazy loading fonctionne
+- Comment les modes communiquent via eventBus
+
+### Étape 4 : Créer ton mode
+
+**Convention de nommage** : `js/modes/YourMode.js` (PascalCase)
+
+**Structure minimale** :
+
+- Hérite de GameMode
+- Implémente toutes les méthodes abstraites
+- Utilise eventBus pour communication
+- Nettoie proprement dans cleanup()
+
+Adapte un exemple existant à ton besoin.
+
+### Étape 5 : Intégrer
+
+- Enregistre dans le gestionnaire de modes
+- Ajoute au lazy loader
+- Crée les traductions (fr, en, es)
+- Vérifie synchronisation i18n
+
+### Étape 6 : Tester
+
+```bash
+npm test YourMode.test.js
+npm run format:check
+npm run lint
+npm run i18n:compare
+```
+
+## Patterns et conventions
+
+### Communication via Event Bus
+
+**Principe** : Ne jamais coupler directement les composants
+
+**Pattern typique** :
+
+- Émettre : `eventBus.emit('mode:event', data)`
+- Écouter : `eventBus.on('user:action', this.handler)`
+- Nettoyer : `eventBus.off('user:action', this.handler)`
+
+Cherche des exemples dans les modes existants.
+
+### Gestion de l'état
+
+Trouve comment les modes existants gèrent leur état interne.
+Pattern commun : objet `this.state` avec propriétés du jeu.
+
+### Utilisation des utilitaires
+
+Examine `utils-es6.js` pour voir les fonctions disponibles :
+
+- Génération de nombres aléatoires
+- Mélange d'arrays
+- Formatage du temps
+- Etc.
+
+## Checklist de création
+
+### Découverte
+
+- [ ] Examiner au moins 1 mode existant similaire
+- [ ] Comprendre GameMode (classe abstraite)
+- [ ] Identifier où les modes sont enregistrés
+- [ ] Trouver le pattern de lazy loading
+
+### Implémentation
+
+- [ ] Fichier créé dans `js/modes/`
+- [ ] Hérite de GameMode
+- [ ] Toutes méthodes abstraites implémentées
+- [ ] Event bus utilisé (pas de couplage direct)
+- [ ] Cleanup proper (listeners retirés)
+
+### Intégration
+
+- [ ] Enregistré dans gestionnaire
+- [ ] Ajouté au lazy loader
+- [ ] Traductions ajoutées (fr → en → es)
+- [ ] `npm run i18n:compare` passe
+
+### Qualité
+
+- [ ] Tests créés et passent
+- [ ] Code formatté (`npm run format`)
+- [ ] Lint passe (`npm run lint`)
+- [ ] Documentation JSDoc
+- [ ] Testé manuellement
+
+## Debugging
+
+### Vérifier initialisation
+
+Cherche les patterns de logging dans les modes existants.
+
+### Vérifier event bus
+
+Liste tous les événements émis par les modes existants pour comprendre les conventions.
+
+### Problèmes courants
+
+**Mode ne se charge pas** :
+
+- Vérifie enregistrement dans gestionnaire
+- Vérifie configuration lazy loader
+
+**Event bus ne fonctionne pas** :
+
+- Vérifie que cleanup retire les listeners
+- Cherche la bonne signature des événements
+
+**Traductions manquantes** :
+
+```bash
+npm run i18n:compare
+```
+
+## En cas de doute
+
+**Source de vérité = code existant**
+
+1. Explore les modes similaires
+2. Le code réel est plus fiable que toute documentation
+3. Adapte les patterns, ne copie pas aveuglément
+4. Teste fréquemment
+
+## Références
+
+Cherche dans le code :
+
+- `js/core/GameMode.js` - Classe abstraite
+- `js/modes/` - Tous les modes existants
+- `js/core/GameModeManager.js` - Gestionnaire
+- `js/lazy-loader.js` - Configuration lazy loading
+- `js/core/eventBus.js` - Event bus

skills/sound-effect-manager/SKILL.md

@@ -0,0 +1,87 @@
+---
+name: managing-sound-effects
+description: Manages sound effects and audio for user feedback (correct/wrong sounds, music, volume). Use when adding new sounds or managing audio
+allowed-tools: Read, Write, Grep, Glob, Bash
+---
+
+# Sound Effect Manager
+
+Gère effets sonores et feedback audio pour meilleure expérience utilisateur.
+
+## Quand utiliser
+
+- Ajout de nouveaux effets sonores
+- Gestion du volume et mute
+- Musique de fond pour jeux
+- Feedback audio utilisateur
+- Optimisation chargement audio
+
+## AudioManager (js/core/audio.js)
+
+**API :**
+
+- `playSound(soundName, options)` - Jouer son
+- `setVolume(volume)` - Volume global (0.0-1.0)
+- `toggleMute()` / `isMuted()` - Mute control
+
+**Sons disponibles (examine audio.js) :**
+correct, wrong, victory, click, coin, levelup
+
+## Ajouter un nouveau son
+
+1. **Compresser :** < 50 KB (96 kbps pour effets, 128 kbps musique)
+2. **Formats :** MP3, OGG, WebM (fallback)
+3. **Placer :** assets/sounds/
+4. **Enregistrer :** SOUND_CATALOG dans audio.js
+5. **Utiliser :**
+   ```javascript
+   import { playSound } from './core/audio.js';
+   playSound('yourSound');
+   ```
+
+## Patterns essentiels
+
+- **Préchargement :** Sons critiques avant utilisation
+- **Pool audio :** Instances multiples pour chevauchement
+- **Musique fond :** Volume 0.3, loop activé, cleanup dans destroy
+- **Mobile :** Autoplay nécessite interaction utilisateur
+- **Accessibilité :** Respecter prefers-reduced-motion
+
+## Gestion du lifecycle
+
+**Mode avec musique :**
+
+```javascript
+// Lancer musique
+playSound('background-music', { loop: true, volume: 0.3 });
+
+// cleanup() → stopper musique
+```
+
+Examine QuizMode/ChallengeMode pour patterns existants.
+
+## Checklist ajout son
+
+- [ ] Fichier compressé < 50 KB
+- [ ] Formats multiples (MP3, OGG, WebM)
+- [ ] Ajouté au SOUND_CATALOG
+- [ ] Volume testé
+- [ ] Mute fonctionne
+- [ ] Cleanup musique si loop
+- [ ] Mobile autoplay OK
+
+## En cas de doute
+
+**Règles absolues :**
+
+1. Utiliser audio.js API (jamais créer Audio directement)
+2. < 50 KB par fichier
+3. Stopper musique dans cleanup()
+4. Pas d'autoplay sans interaction utilisateur
+5. Volume par défaut ≤ 0.7
+
+**Référence :**
+
+- `js/core/audio.js` - API complète
+- `assets/sounds/` - Catalogues existants
+- Modes (QuizMode, ChallengeMode) - Exemples d'utilisation

skills/sprite-management/SKILL.md

@@ -0,0 +1,212 @@
+---
+name: managing-sprites
+description: Manages sprites, sprite sheets, sprite animations for arcade games (loading, rendering, collisions). Use when creating games or adding animated characters
+allowed-tools: Read, Write, Grep, Glob, Bash
+---
+
+# Gestion des Sprites
+
+Guide la gestion des sprites et sprite sheets pour les jeux arcade.
+
+## Table des matières
+
+- [Quand utiliser](#quand-utiliser)
+- [Sprites dans le projet](#sprites-dans-le-projet)
+- [Types de sprites](#types-de-sprites)
+- [Concepts clés](#concepts-clés)
+- [Classes et structures recommandées](#classes-et-structures-recommandées)
+- [Optimisations](#optimisations)
+- [Workflow de création sprite](#workflow-de-création-sprite)
+- [Checklist sprite](#checklist-sprite)
+- [En cas de doute](#en-cas-de-doute)
+
+## Quand utiliser
+
+- Ajout de nouveaux personnages/ennemis
+- Création de sprite sheets
+- Animations de sprites
+- Détection de collisions
+- Optimisation rendu sprites
+
+## Sprites dans le projet
+
+Trouve dans le code :
+
+- Personnages joueurs
+- Monstres et ennemis
+- Power-ups et collectibles
+- Sprite sheets existants
+
+**Formats :**
+
+- PNG avec transparence
+- Sprite sheets (multiples frames)
+- Résolutions multiples (@1x, @2x, @3x)
+
+Examine le répertoire assets/sprites.
+
+## Types de sprites
+
+### 1. Sprite simple
+
+Image statique, pas d'animation, position et taille fixes.
+
+### 2. Sprite Sheet
+
+**Multiple frames dans une image :**
+
+- Layout horizontal (frames en ligne)
+- Layout grille (frames en grille)
+- Permet animations fluides
+
+**Layouts courants :**
+
+- Horizontal : 8 frames × 64px = 512×64px
+- Grille 4×4 : 16 frames de 64×64px = 256×256px
+- Par row : Chaque ligne = animation différente
+
+Trouve les sprite sheets existants.
+
+### 3. Sprite animé
+
+**Animation frame par frame :**
+
+- FPS configurable
+- Boucle automatique
+- Delta time pour smoothness
+
+### 4. Sprite directionnel
+
+**Différentes animations par direction :**
+
+- Idle, Walk, Jump par direction
+- Row dans sprite sheet par action
+- State machine pour transitions
+
+## Concepts clés
+
+### Chargement d'images
+
+**Asynchrone :**
+
+- `Image.onload` pour savoir quand prêt
+- Précharger avant utilisation
+- Placeholder ou loading si nécessaire
+
+Trouve comment le projet gère le chargement.
+
+### Rendering
+
+**Canvas drawImage() :**
+
+- Source rectangle (quelle partie du sprite sheet)
+- Destination rectangle (où dessiner)
+- Scaling automatique si tailles différentes
+
+Examine les fonctions de rendu dans les jeux.
+
+### Collision Detection
+
+**Techniques disponibles :**
+
+- Bounding box (AABB) - Simple et rapide
+- Collision circulaire - Pour objets ronds
+- Pixel-perfect - Précis mais coûteux
+- Hitbox personnalisée - Compromise
+
+Trouve les fonctions de collision utilisées.
+
+### Animation State Machine
+
+**États et transitions :**
+
+- IDLE → WALK → JUMP → FALL → IDLE
+- Changement frame selon elapsed time
+- Loop ou one-shot selon animation
+
+Examine les state machines dans les jeux arcade.
+
+## Classes et structures recommandées
+
+Trouve dans le code :
+
+- Classe Sprite de base
+- Classe AnimatedSprite
+- Manager de sprites (pool, loading)
+- Helpers de collision
+
+Examine l'architecture existante.
+
+## Optimisations
+
+### Performance
+
+- **Sprite pooling** : Réutiliser instances au lieu de créer/détruire
+- **Dirty flag** : Re-draw seulement si changement
+- **Offscreen culling** : Pas de rendu si hors écran
+- **Batch rendering** : Grouper draw calls
+
+### Mémoire
+
+- **Atlas textures** : Combiner sprites dans une texture
+- **Lazy loading** : Charger sprites au besoin
+- **Image scaling** : Charger résolution appropriée (@1x, @2x)
+- **Cleanup** : Libérer sprites inutilisés
+
+Cherche les optimisations déjà en place.
+
+## Workflow de création sprite
+
+### 1. Design sprite sheet
+
+- Définir taille frame (64×64, 128×128, etc.)
+- Organiser layout (horizontal, grille)
+- Créer frames avec transparence PNG
+
+### 2. Intégration code
+
+- Charger sprite sheet
+- Définir source rectangles par frame
+- Setup animation (FPS, frames, loop)
+- Render à chaque frame du jeu
+
+### 3. Collision setup
+
+- Définir hitbox pour collision
+- Tester collisions avec autres sprites
+- Ajuster hitbox si nécessaire
+
+### 4. Tests et debug
+
+- Afficher hitboxes en mode debug
+- Vérifier timing animations
+- Tester performance avec multiples sprites
+
+## Checklist sprite
+
+- [ ] Sprite sheet créé avec transparence PNG
+- [ ] Layout défini (horizontal/grille)
+- [ ] Frames chargées correctement
+- [ ] Animations fluides (FPS approprié)
+- [ ] Collisions détectées correctement
+- [ ] Hitboxes ajustées
+- [ ] Performance acceptable (60 FPS)
+- [ ] Cleanup mémoire implémenté
+
+## En cas de doute
+
+**Source :** Jeux arcade existants + sprite utils
+
+**Règles absolues :**
+
+1. Toujours précharger sprites avant utilisation
+2. Utiliser delta time pour animations fluides
+3. Bounding box (AABB) pour la plupart des collisions
+4. Sprite pooling si > 10 instances simultanées
+5. Cleanup sprites inutilisés pour éviter memory leaks
+
+**Workflow minimal :**
+
+- Charger sprite sheet avec Image.onload
+- drawImage() avec source/destination rectangles
+- Collision AABB pour détection rapide