Plateau jouable en PWA : interface, Web Worker, stockage, service worker

L'application est à la racine du site : plateau en SVG, saisie au toucher
(pion puis case d'arrivée, proposées à partir du moteur), boutons du jet,
du videau et de nouvelle partie, coup de l'ordinateur affiché avec son
temps, fin de partie, reprise depuis localStorage, aide lue dans les
copies de docs/. Le moteur tourne dans le Web Worker existant ; main.ts
est le seul assembleur (nouvelles règles dependency-cruiser). Le service
worker met tout le site en cache, avec une empreinte du contenu comme
version. Les pages de test du moteur passent sous /moteur/. Politique de
sécurité du contenu dans le Caddyfile ; make test-browser joue une partie
dans Chromium et Firefox sans écran (Playwright, hors de make test).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

docs/deploiement.md

@@ -1,7 +1,9 @@
 # Déploiement
 
 Ustagammon est un site statique (PWA, ADR 0009) : des fichiers HTML,
-JavaScript, le moteur en WebAssembly et ses données. Il est publié sur
+JavaScript, le moteur en WebAssembly et ses données. L'application est à la
+racine ; les pages de test du moteur de l'étape 0b restent publiées sous
+`/moteur/` (test du moteur) et `/moteur/bench.html` (mesure). Il est publié sur
 CapRover, machine `sans-pub` (https://captain.cloud.sans.pub), app
 `ustagammon`, sur https://ustagammon.sans.pub.
 
@@ -46,31 +48,67 @@ make deploy-prod`.
 
 ## Ce qui est publié
 
-- `make site` assemble `build/site/` : le contenu de `web/` à la racine, le
-  moteur (`engine.mjs`, `engine.wasm`, `engine.data`, `positions.json`) sous
-  `wasm/`, et `version.json` avec le commit publié.
+- `make site` assemble `build/site/` (9 Mo) :
+  - le contenu de `web/` à la racine : la page de l'application
+    (`index.html`, `app.css`), le manifeste (`manifest.webmanifest`), les
+    icônes (`icons/`), le service worker (`sw.js`), le Web Worker du moteur
+    (`engine-worker.mjs`, `engine-wasm.mjs`) et les pages de test sous
+    `moteur/` ;
+  - l'application TypeScript compilée (`build/web/src/`) sous `app/` ;
+  - le moteur (`engine.mjs`, `engine.wasm`, `engine.data`, `positions.json`)
+    sous `wasm/` ;
+  - des copies de `docs/glossaire/` et `docs/scenarios/` sous `docs/`, lues
+    par l'aide de l'application (ADR 0008) ;
+  - `version.json` avec le commit publié ;
+  - enfin, `scripts/service-worker.sh` écrit en tête de `sw.js` la liste de
+    tous ces fichiers et une empreinte de leur contenu.
 - `make package` ajoute `deploy/` et produit `build/ustagammon.tar` (environ
-  9 Mo).
+  9 Mo, 7,3 Mo transférés grâce à la compression).
 - `tests/test_site.sh` (dans `make test`) construit l'image de production en
-  local, la lance et vérifie ce que reçoit un navigateur : pages, types MIME
-  (`application/wasm` pour le moteur), compression gzip des données, en-têtes,
-  et commit de `version.json`.
+  local, la lance et vérifie ce que reçoit un navigateur : application, pages
+  de test, aide, manifeste et icônes, liste du service worker, types MIME
+  (`application/wasm` pour le moteur), compression gzip des données,
+  en-têtes dont la politique de sécurité, et commit de `version.json`.
+- `make test-browser` (hors de `make test`, plusieurs minutes) joue une
+  partie complète par l'interface dans Chromium et Firefox sans écran, sur
+  la même image, puis vérifie la reprise, l'aide et le hors ligne.
+
+**Hors ligne et mises à jour.** Le service worker met tous les fichiers du
+site en cache à la première visite (environ 9 Mo), puis sert tout depuis ce
+cache, avec ou sans réseau. À chaque publication, l'empreinte écrite dans
+`sw.js` change dès qu'un fichier a changé : le navigateur, qui revérifie
+`sw.js` à chaque ouverture, installe la nouvelle version (tout le site est
+retéléchargé), qui prend la main et efface l'ancien cache. La page déjà
+ouverte continue sur l'ancienne version ; le lancement suivant utilise la
+nouvelle. Une publication sans changement de fichier garde le même `sw.js` :
+rien n'est retéléchargé. Le service worker exige https (ou `localhost`) :
+avec `make deploy`, en http sur le réseau local, l'application fonctionne,
+mais pas hors ligne.
 
 Réglages du serveur (`deploy/Caddyfile`) : compression zstd ou gzip, y compris
 pour les données du moteur ; `Cache-Control: no-cache` (les noms de fichiers ne
 changent pas d'une version à l'autre, le navigateur revalide chaque fichier) ;
-`X-Content-Type-Options: nosniff` ; `Referrer-Policy: no-referrer`.
+`X-Content-Type-Options: nosniff` ; `Referrer-Policy: no-referrer` ; et une
+politique de sécurité du contenu (`Content-Security-Policy`) : tout vient du
+site lui-même, aucun script ni style en ligne, aucun `eval`, seule la
+compilation du WebAssembly est permise (`'wasm-unsafe-eval'`). Elle est
+vérifiée par `tests/test_site.sh` (en-tête présent) et par
+`make test-browser` (aucune violation signalée par Chromium ni Firefox
+pendant une partie).
 
 ## Vérifier
 
 ```bash
 curl -s https://ustagammon.sans.pub/version.json      # commit publié
 curl -sI https://ustagammon.sans.pub/wasm/engine.wasm  # application/wasm
+curl -sI https://ustagammon.sans.pub/ | grep -i content-security  # CSP
+curl -s https://ustagammon.sans.pub/sw.js | head -2             # version du cache
 ssh sans.pub 'sudo docker service ps srv-captain--ustagammon --format "{{.Image}} {{.CurrentState}}" | head -2'
 ```
 
-Puis ouvrir le site sur le téléphone : la page de test doit afficher « Moteur
-prêt ».
+Puis ouvrir le site sur le téléphone : le plateau s'affiche et une consigne
+remplace « Chargement du moteur… ». La page de test du moteur
+(https://ustagammon.sans.pub/moteur/) doit afficher « Moteur prêt ».
 
 ## Retour arrière
 

docs/guide-test-etape-0.md

@@ -1,38 +1,124 @@
-# Guide de test : le moteur sur le Fairphone 4 (étape 0b)
+# Guide de test : Ustagammon sur le Fairphone 4 (étape 0)
 
 Document temporaire de l'étape 0 : il sera supprimé avec `docs/etape-0.md`.
 
+Deux tests sur le téléphone :
+
+- **Étape 0d : jouer une partie** (section suivante), sur le site publié ;
+- **Étape 0b : mesurer le moteur** (déjà fait le 2026-11-02), sur une page servie par
+  le PC.
+
+## Étape 0d : jouer une partie sur le téléphone
+
+Le but : installer l'application sur le Fairphone 4, jouer une partie
+complète contre l'ordinateur, vérifier qu'elle marche sans réseau, et
+rapporter ce que vous avez constaté. Comptez une demi-heure.
+
+### Ouvrir et installer l'application
+
+1. Sur le Fairphone, ouvrez Chrome et allez sur https://ustagammon.sans.pub.
+2. Attendez que le plateau s'affiche et que le message « Chargement du
+   moteur… » laisse place à une consigne (par exemple « À vous : lancez les
+   dés. » ou « L'ordinateur réfléchit… »). La première fois, le moteur se
+   télécharge (environ 7 Mo) : quelques secondes en Wi-Fi.
+3. Installez l'application : menu de Chrome (les trois points), puis
+   « Installer l'application » ou « Ajouter à l'écran d'accueil ». Une icône
+   (deux pions sur du bois) apparaît sur l'écran d'accueil.
+4. Fermez Chrome et ouvrez Ustagammon depuis cette icône : l'application
+   s'ouvre en plein écran, sans barre d'adresse.
+
+### Jouer une partie complète
+
+Suivez le scénario « Jouer une partie contre l'ordinateur »
+(`docs/scenarios/jouer-une-partie.feature`), qui est aussi l'aide de
+l'application : bouton « Aide », en haut.
+
+1. Une partie commence d'elle-même au premier lancement, par le jet
+   d'ouverture (un dé chacun) : le message dit qui commence. « Nouvelle
+   partie », en haut, en recommence une.
+2. Quand c'est à vous : touchez « Lancer les dés » (ou « Doubler », pour
+   proposer de doubler avant de lancer).
+3. Pour jouer : touchez un pion entouré de vert, puis l'une des cases
+   d'arrivée en surbrillance ; recommencez pour chaque dé. Pour sortir un
+   pion, touchez le bac à droite, en bas. « Annuler » remet les pions du coup
+   en cours à leur place.
+4. Le coup est envoyé dès qu'il est complet ; l'ordinateur joue ensuite, et
+   le message dit son coup et son temps de calcul, par exemple
+   « L'ordinateur a joué 6-4 : 24/18 13/9 (0,3 s) ». Les petits points
+   orange marquent ses cases de départ et d'arrivée (dans sa numérotation :
+   sa case 24 est votre case 1).
+5. Si l'ordinateur vous propose de doubler : « Prendre » ou « Passer ».
+   Essayez au moins une fois de doubler vous-même.
+6. En fin de partie, le message donne le gagnant, la sorte de victoire
+   (simple, gammon ou backgammon) et les points.
+
+En cours de partie, fermez l'application (balayez-la dans la liste des
+applications ouvertes), puis rouvrez-la : la partie doit reprendre là où vous
+en étiez.
+
+### Vérifier le hors ligne
+
+1. Après avoir ouvert l'application au moins une fois (attendez une
+   vingtaine de secondes après le premier chargement, le temps que tout soit
+   mis de côté), fermez-la.
+2. Passez le téléphone en mode avion.
+3. Rouvrez Ustagammon depuis son icône : le plateau, l'ordinateur et l'aide
+   doivent fonctionner comme avant.
+4. Repassez en mode normal.
+
+### Ce qu'il faut rapporter
+
+Dans la conversation avec Claude Code :
+
+- les **temps des coups de l'ordinateur** : ceux affichés dans les messages
+  (le plus long que vous avez vu), et votre ressenti (attente gênante ou
+  non) ;
+- si la partie est allée **jusqu'au bout**, et son résultat ;
+- si la **reprise** après fermeture et le **mode avion** ont marché ;
+- tout ce qui gêne : plateau trop petit, case difficile à toucher, texte
+  incompréhensible, bouton qui ne répond pas, couleurs peu lisibles (thème
+  clair ou sombre du téléphone) ;
+- une **capture d'écran** (bouton marche + volume bas) de tout problème.
+
+Si vous le pouvez, refaites l'essai dans Firefox sur le téléphone (sans
+l'installer) et dites si les temps de l'ordinateur sont nettement plus longs.
+
+## Étape 0b : mesurer le moteur
+
 Le but : ouvrir sur le téléphone une page web où le moteur de backgammon
 calcule, puis lancer une mesure et coller son rapport dans la conversation.
 Comptez un quart d'heure.
 
-## 1. Préparer le PC
+### 1. Préparer le PC
 
 1. Ouvrez un terminal dans le dossier du projet (`~/Code/ustagammon`).
 2. Si ce n'est pas déjà fait, tapez `make setup` puis Entrée. Cela prépare les
    outils. La première fois, c'est long ; ensuite, c'est immédiat.
 3. Le PC et le téléphone doivent être sur **le même Wi-Fi** (la même box).
 
-## 2. Lancer la page
+### 2. Lancer la page
 
-1. Tapez `make deploy-web` puis Entrée.
+1. Tapez `make deploy` puis Entrée.
 2. La première fois, le moteur se compile : quelques minutes.
 3. Le terminal affiche deux adresses, par exemple :
 
    ```
-   Page de test : http://192.168.1.21:8080/
-   Page de mesure : http://192.168.1.21:8080/bench.html
+   Application : http://192.168.1.21:8080/
+   Test du moteur : http://192.168.1.21:8080/moteur/
+   Page de mesure : http://192.168.1.21:8080/moteur/bench.html
    ```
 
    Vos chiffres peuvent être différents : notez ceux de votre écran.
 4. Laissez ce terminal ouvert pendant tout le test. Pour arrêter la page à la
    fin : Ctrl+C dans le terminal.
 
-## 3. Essayer un meilleur coup
+### 3. Essayer un meilleur coup
 
 1. Sur le Fairphone, ouvrez le navigateur (Chrome ou Firefox).
-2. Tapez l'adresse de la **page de test** dans la barre d'adresse, exactement
-   comme affichée (avec `http://` et `:8080`).
+2. Tapez l'adresse du **test du moteur** dans la barre d'adresse, exactement
+   comme affichée (avec `http://` et `:8080`). Les pages de test sont aussi
+   publiées : https://ustagammon.sans.pub/moteur/ et
+   https://ustagammon.sans.pub/moteur/bench.html.
 3. Attendez le message « Moteur prêt, chargé en … ms ».
 4. Dans « Exemple », choisissez une position, par exemple « middlegame-1 ».
 5. Dans « Niveau », choisissez « fort (2 plis) ».
@@ -40,7 +126,7 @@ Comptez un quart d'heure.
 7. La page affiche le coup conseillé et le **temps de calcul**. Notez ce temps
    si vous voulez, il sera aussi dans le rapport.
 
-## 4. Lancer la mesure
+### 4. Lancer la mesure
 
 1. En bas de la page, touchez « Page de mesure » (ou tapez l'adresse de la
    page de mesure).
@@ -50,7 +136,7 @@ Comptez un quart d'heure.
 4. Un tableau résume les résultats : « OK » si le seuil est respecté,
    « dépassé » sinon.
 
-## 5. Envoyer le rapport
+### 5. Envoyer le rapport
 
 1. Touchez « Copier les résultats ».
 2. Si la page dit « Rapport copié », c'est bon.
@@ -65,7 +151,7 @@ sont stables. Si les deux navigateurs sont installés, faites la mesure dans
 Chrome **et** dans Firefox : sur le PC, Firefox s'est montré nettement plus
 lent, et le rapport indique le navigateur utilisé.
 
-## Si la page ne s'ouvre pas
+### Si la page ne s'ouvre pas
 
 - **Vérifiez l'adresse** : `http://` (et non `https://`), les chiffres exacts,
   et `:8080` à la fin.
@@ -73,7 +159,7 @@ lent, et le rapport indique le navigateur utilisé.
   pas sur la 4G ni sur un Wi-Fi invité.
 - **Vérifiez que la page tourne** : sur le PC, ouvrez
   `http://localhost:8080/` dans un navigateur. Si elle ne s'ouvre pas non
-  plus, relancez `make deploy-web` et lisez le message d'erreur.
+  plus, relancez `make deploy` et lisez le message d'erreur.
 - **Le pare-feu du PC** peut bloquer le téléphone. S'il est actif
   (`sudo ufw status` affiche « Status: active »), autorisez le port le temps
   du test : `sudo ufw allow 8080/tcp`, puis à la fin `sudo ufw delete allow
@@ -82,4 +168,4 @@ lent, et le rapport indique le navigateur utilisé.
   collez-le dans la conversation. Essayez aussi l'autre navigateur (Chrome ou
   Firefox), à jour.
 - **Le port 8080 est déjà pris** : un autre programme l'utilise. Lancez
-  `make deploy-web WEB_PORT=8081` et utilisez `:8081` dans l'adresse.
+  `make deploy WEB_PORT=8081` et utilisez `:8081` dans l'adresse.