0.3.0-0-pre.4-fix.1

docs/development/010-SNAKE_WEB_FRONTEND.md

@@ -1,5 +1,5 @@
 <!-- file: docs/development/010-SNAKE_WEB_FRONTEND.md -->
-<!-- version: 1 -->
+<!-- version: 2 -->
 
 # Frontend du POC Snake Web direct
 
@@ -33,6 +33,7 @@ Web/game-snake-poc/
 │   │   ├── _app.scss
 │   │   ├── _bootswatch.scss
 │   │   ├── _fontawesome.scss
+│   │   ├── _simplebar.scss
 │   │   ├── _variables.scss
 │   │   └── main.scss
 │   └── ts/
@@ -44,7 +45,7 @@ Web/game-snake-poc/
 └── vite.config.ts
 ```
 
-Les dépendances npm utiles sont alignées sur cette baseline : Bootstrap 5, Font Awesome, `sass-embedded`, TypeScript, Vite et les types nécessaires. Les dépendances propres à Tauri, SimpleBar ou au tracing frontend KSP ne sont pas importées car elles n'ont aucun rôle dans ce host navigateur direct.
+Les dépendances npm utiles sont alignées sur cette baseline : Bootstrap 5, Font Awesome, SimpleBar, `resize-observer-polyfill`, `sass-embedded`, TypeScript, Vite et les types nécessaires. Les dépendances réellement propres à Tauri et au tracing frontend KSP ne sont pas importées dans ce host navigateur direct. SimpleBar et le polyfill restent au contraire pertinents pour le shell Web lui-même.
 
 Le thème reprend la baseline Bootstrap/Bootswatch Pulse des apps Desk KSP, avec un header, un footer et une carte de contenu adaptés au jeu. Cette réutilisation reste une convention de présentation du POC ; elle ne crée aucune dépendance entre les dépôts KSP et games.sasedev.
 
@@ -57,7 +58,8 @@ Le document `frontend/main.html` fournit :
 - les indicateurs de score, longueur et état de chargement ;
 - quatre boutons directionnels tactiles ;
 - une zone d'erreur de démarrage ;
-- un footer léger commun au shell.
+- un footer léger commun au shell ;
+- une zone `app-main` scrollable par SimpleBar entre le header et le footer fixes.
 
 Bootstrap 5 et Font Awesome sont installés comme dépendances npm et intégrés au build Vite/Sass. Aucun CDN n'est nécessaire au POC local.
 
@@ -78,7 +80,9 @@ Une entrée appelle uniquement `left()`, `right()`, `up()` ou `down()` sur `Snak
 
 Le frontend lit la couleur de fond et les rectangles normalisés exposés par `game-snake-poc-wasm`. Les coordonnées sont multipliées par la taille physique courante du Canvas.
 
-Le Canvas suit sa taille CSS et le `devicePixelRatio` du navigateur. Cette tranche couvre le resize visuel nécessaire au shell ; la gestion complète du lifecycle navigateur reste prévue par `0-pre.5`.
+La grille Snake fait `12 × 20` cellules. Le shell conserve donc un ratio CSS `3 / 5` pour le plateau : une cellule normalisée garde la même largeur et la même hauteur visuelles au lieu d'être écrasée verticalement dans un Canvas carré. Le Canvas suit ensuite cette taille CSS et le `devicePixelRatio` du navigateur.
+
+Le header et le footer restent fixes. Si le plateau portrait et les contrôles dépassent la hauteur disponible, `app-main` reste borné à `100vh - header - footer` et SimpleBar porte le scroll interne. Cette tranche couvre le resize visuel nécessaire au shell ; la gestion complète du lifecycle navigateur reste prévue par `0-pre.5`.
 
 ## Build
 
@@ -117,14 +121,16 @@ cd Web/game-snake-poc
 npm run dev
 ```
 
-Ouvrir `http://127.0.0.1:1434/main.html` et vérifier :
+Ouvrir explicitement `http://127.0.0.1:1434/main.html` — le host utilise volontairement `main.html` et ne fournit pas d'`index.html` — puis vérifier :
 
 1. le statut passe à `Prêt` sans erreur ;
 2. Snake est visible dans le Canvas ;
 3. les flèches clavier déplacent Snake ;
 4. `WASD` et `ZQSD` produisent les mêmes directions ;
 5. les quatre boutons tactiles/pointer fonctionnent ;
-6. le shell KSP-derived et le Canvas restent utilisables sur une largeur mobile et Desktop ;
-7. score et longueur restent visibles et évoluent avec l'état WASM.
+6. le plateau conserve son ratio portrait `3 / 5` et les cellules ne sont pas écrasées ;
+7. lorsque le contenu dépasse la hauteur utile, seule la zone centrale défile via SimpleBar tandis que header et footer restent fixes ;
+8. le shell KSP-derived et le Canvas restent utilisables sur une largeur mobile et Desktop ;
+9. score et longueur restent visibles et évoluent avec l'état WASM.
 
 Le lifecycle complet, les assets, le logging structuré et la provenance runtime appartiennent à `0-pre.5`.