0.3.0-0-pre.4-fix.1
This commit is contained in:
@@ -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`.
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<!-- file: docs/plans/001-V0_3_0_WEB_SNAKE_POC_PLAN.md -->
|
||||
<!-- version: 6 -->
|
||||
<!-- version: 7 -->
|
||||
|
||||
# Plan v0.3.0 — baseline Snake et premier POC Web direct
|
||||
|
||||
@@ -67,12 +67,14 @@ Gate : audits statiques, `cargo check --workspace`, Clippy ciblé, tests de l'ad
|
||||
|
||||
### `0-pre.4` — frontend Web/Vite, shell Bootstrap 5 et contrôles
|
||||
|
||||
Créer `Web/game-snake-poc/`, package Vite/TypeScript autonome consommant les bindings `game-snake-poc-wasm` générés hors dépôt. Le frontend reprend le template des applications Desk KSP pour sa structure HTML/Sass/TypeScript et ses dépendances npm pertinentes : Bootstrap 5, thème Bootswatch Pulse, Font Awesome et `sass-embedded`, sans dépendances Tauri. Le rendu reste dans un Canvas et les règles de gameplay restent dans Rust/WASM. Brancher flèches clavier, `WASD`/`ZQSD`, quatre boutons directionnels tactiles/pointer, chargement/erreur, score et longueur.
|
||||
Créer `Web/game-snake-poc/`, package Vite/TypeScript autonome consommant les bindings `game-snake-poc-wasm` générés hors dépôt. Le frontend reprend le template des applications Desk KSP pour sa structure HTML/Sass/TypeScript et ses dépendances npm pertinentes : Bootstrap 5, thème Bootswatch Pulse, Font Awesome, SimpleBar, `resize-observer-polyfill` et `sass-embedded`, sans dépendances Tauri. Le rendu reste dans un Canvas et les règles de gameplay restent dans Rust/WASM. Brancher flèches clavier, `WASD`/`ZQSD`, quatre boutons directionnels tactiles/pointer, chargement/erreur, score et longueur.
|
||||
|
||||
Livraison candidate : le shell utilise `frontend/main.html`, `frontend/sass/` et `frontend/ts/` sur le modèle KSP ; le Canvas suit sa taille CSS et le `devicePixelRatio`, le frontend cadence `tick()` sans avancer la simulation au moment d'une entrée et Vite écrit `dist/`/cache uniquement sous `../builds/sasedev-games/game-snake-poc-web/`. Aucun CDN, SDL3, Tauri ni duplication de gameplay n'est introduit. Le lifecycle complet, les assets, le logging et la provenance restent réservés à `0-pre.5`.
|
||||
Livraison candidate : le shell utilise `frontend/main.html`, `frontend/sass/` et `frontend/ts/` sur le modèle KSP ; SimpleBar porte le scroll interne de `app-main` entre header et footer fixes ; le Canvas conserve le ratio logique Snake `12 / 20`, suit sa taille CSS et le `devicePixelRatio`, le frontend cadence `tick()` sans avancer la simulation au moment d'une entrée et Vite écrit `dist/`/cache uniquement sous `../builds/sasedev-games/game-snake-poc-web/`. Aucun CDN, SDL3, Tauri ni duplication de gameplay n'est introduit. Le lifecycle complet, les assets, le logging et la provenance restent réservés à `0-pre.5`.
|
||||
|
||||
Gate : audits statiques, build WASM + `wasm-bindgen`, `npm run build` du package Web direct et smoke navigateur couvrant Canvas, clavier, contrôles tactiles/pointer et comportement responsive du shell.
|
||||
|
||||
Suivi `0-pre.4.fix.1` : la validation utilisateur de `0-pre.4` a confirmé le fonctionnement clavier/pointer sous `vite dev`, mais a révélé trois défauts de candidate : `baseUrl` supprimé par TypeScript 7, omission de SimpleBar/`resize-observer-polyfill` du template repris et Canvas carré incompatible avec la grille logique `12 × 20`. Le fix retire `baseUrl`, rétablit le scroll shell KSP-derived et passe le plateau au ratio `3 / 5` avant réexécution de la gate frontend.
|
||||
|
||||
### `0-pre.5` — intégration plateforme complète
|
||||
|
||||
Fermer resize/lifecycle, assets, logging et provenance runtime du POC ; vérifier que Desktop SDL reste intact.
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<!-- file: docs/rules/RULES_PROJECT.md -->
|
||||
<!-- version: 13 -->
|
||||
<!-- version: 14 -->
|
||||
|
||||
# Règles spécifiques games.sasedev
|
||||
|
||||
@@ -85,6 +85,7 @@
|
||||
- **GAME-PLATFORM-019** — Une plateforme réservée n'est ni implémentée ni planifiée tant qu'une ligne ROADMAP ou un delta ne l'engage explicitement.
|
||||
- **GAME-PLATFORM-020** — Un host Web navigateur possède un shell HTML/CSS/TypeScript explicite autour du Canvas/WASM. Le framework de présentation éventuel reste une dépendance frontend et ne fuit ni dans la crate de gameplay ni dans le bridge WASM ; pour le premier POC Snake `0.3.0`, Bootstrap 5 est la baseline de présentation retenue.
|
||||
- **GAME-PLATFORM-021** — Les dépendances de présentation nécessaires au runtime Web versionné sont déclarées dans le package frontend et intégrées au build Vite ; un CDN externe n'est pas requis pour exécuter le POC local et ne devient une dépendance de distribution qu'après décision explicite.
|
||||
- **GAME-PLATFORM-022** — SimpleBar et `resize-observer-polyfill` sont des dépendances de shell Web, pas des dépendances Tauri. Lorsqu'un host conserve header et footer fixes, la zone centrale bornée à la hauteur disponible peut les utiliser pour fournir un scroll interne personnalisé sans déplacer les éléments fixes.
|
||||
|
||||
## Version d'en-tête des fichiers
|
||||
|
||||
|
||||
Reference in New Issue
Block a user