60 lines
2.9 KiB
Markdown
60 lines
2.9 KiB
Markdown
 
|
# ADR 0003 — Frontière stricte entre Svelte et Phaser
|
||
|
|
|
||
|
|
- **Statut :** accepté
|
||
|
|
- **Date :** 2026-07-27
|
||
|
|
- **Session :** 0 — cadre et données
|
||
|
|
|
||
|
|
## Contexte
|
||
|
|
|
||
|
|
Le pack d'origine supposait que le jeu entier serait porté par le moteur de jeu. Or trois
|
||
|
|
des cinq modes — Rekonèt, Kaché, Sézon — sont des interfaces de cartes et de boutons. Un
|
||
|
|
canvas les rendrait moins accessibles, plus lourds et plus difficiles à rendre lisibles
|
||
|
|
sans JavaScript, pour aucun gain.
|
||
|
|
|
||
|
|
Le public visé lit parfois mal, navigue sur Android d'entrée de gamme, et une partie de
|
||
|
|
l'usage se fera en classe, potentiellement au clavier ou avec un lecteur d'écran.
|
||
|
|
|
||
|
|
## Décision
|
||
|
|
|
||
|
|
Architecture **hybride à frontière stricte** : Svelte porte la coquille, Phaser porte un
|
||
|
|
seul îlot.
|
||
|
|
|
||
|
|
```
|
||
|
|
Svelte 5 (coquille) Phaser 4 (îlot)
|
||
|
|
├─ routes, i18n, SEO └─ scène « Ranmasé » uniquement
|
||
|
|
├─ menus, HUD, album · import dynamique dans (jeu)/ranmase
|
||
|
|
├─ fiches encyclopédiques · jamais au layout racine
|
||
|
|
├─ données, progression · game.destroy(true) au démontage
|
||
|
|
├─ audio, réglages · communication par événements
|
||
|
|
└─ Rekonèt · Kaché · Sézon · aucun état Svelte partagé par frame
|
||
|
|
```
|
||
|
|
|
||
|
|
Règles de frontière, non négociables :
|
||
|
|
|
||
|
|
1. **Import dynamique uniquement**, dans la route de la scène. Un `import` statique de
|
||
|
|
Phaser au layout racine ferait entrer 300 à 400 Ko dans le chemin critique de toutes
|
||
|
|
les pages, y compris de l'encyclopédie.
|
||
|
|
2. **Destruction symétrique** : `game.destroy(true)` au démontage du composant. Un moteur
|
||
|
|
de jeu qui survit à sa route fuit de la mémoire et continue de consommer du rAF.
|
||
|
|
3. **Communication par événements**, jamais par état Svelte lu ou écrit à chaque frame.
|
||
|
|
Le playbook §3 l'interdit explicitement : les états réactifs par frame passent par des
|
||
|
|
variables plain et un flush rAF.
|
||
|
|
4. **Miroir DOM sémantique obligatoire** pour la scène (playbook §2.8, point 4) : le canvas
|
||
|
|
est `aria-hidden`, et l'état du jeu est doublé en DOM lisible au clavier et au lecteur
|
||
|
|
d'écran.
|
||
|
|
|
||
|
|
## Conséquences
|
||
|
|
|
||
|
|
- Les quatre modes non-arcade sont **jouables au clavier** et dégradent proprement.
|
||
|
|
- La session 2 doit produire un jeu **déjà amusant sans Phaser**. C'est la porte de sortie
|
||
|
|
de cette session : si le jeu n'est pas plaisant en Svelte pur, ajouter un moteur de jeu
|
||
|
|
ne le sauvera pas — cela ajoutera du poids à un problème de game design.
|
||
|
|
- L'encyclopédie `/zerbaj/` ne dépend d'aucune brique de jeu et reste prérendue, lisible
|
||
|
|
sans JavaScript.
|
||
|
|
|
||
|
|
## Alternative écartée
|
||
|
|
|
||
|
|
**Tout en Phaser.** Aurait unifié le rendu au prix de l'accessibilité clavier, du
|
||
|
|
référencement de l'encyclopédie, de la lisibilité sans JS et du budget. Le playbook P3 est
|
||
|
|
explicite : DOM d'abord, WebGL seulement où ça paie. Ici, il ne paie que sur une scène.
|