0.3.0-0-pre.4-fix.1

This commit is contained in:
2026-09-20 13:26:07 +02:00
parent c4b68b8a60
commit f433e99a12
15 changed files with 400 additions and 27 deletions

View File

@@ -1,5 +1,5 @@
# file: Cargo.toml
# version: 63
# version: 64
[workspace]
resolver = "3"
@@ -20,7 +20,7 @@ members = [
]
[workspace.package]
version = "0.3.0-0-pre.4"
version = "0.3.0-0-pre.4.fix.1"
edition = "2024"
license = "MIT"
repository = "https://git.sasedev.com/Sasedev/games"

View File

@@ -1,5 +1,5 @@
<!-- file: README.md -->
<!-- version: 31 -->
<!-- version: 32 -->
# games.sasedev
@@ -26,7 +26,7 @@ Workspace expérimental puis productif pour des jeux multiplateformes principale
Version stable de référence : `0.2.0`.
Version de développement : `0.3.0-0-pre.4`.
Version de développement : `0.3.0-0-pre.4.fix.1`.
Les deux premiers jeux sont des POC structurels : `game-reflex-poc` et `game-snake-poc`. Ils existent d'abord pour valider les frontières du workspace, le moteur, les assets et le packaging multiplateforme.

View File

@@ -1,5 +1,5 @@
<!-- file: Web/game-snake-poc/frontend/main.html -->
<!-- version: 1 -->
<!-- version: 2 -->
<!DOCTYPE html>
<html lang="fr">
@@ -31,9 +31,9 @@
</nav>
</header>
<main class="app-main container-fluid p-0">
<section class="app-content h-100">
<div class="container-fluid px-3 px-md-4 py-3 py-md-4 h-100">
<main class="app-main container-fluid p-0" data-simplebar>
<section class="app-content">
<div class="container-fluid px-3 px-md-4 py-3 py-md-4">
<div class="card app-shell-card mx-auto shadow-sm border-0">
<div class="card-body p-3 p-md-4">
<div class="d-flex align-items-start justify-content-between gap-3 flex-wrap mb-3">

View File

@@ -1,5 +1,5 @@
// file: Web/game-snake-poc/frontend/sass/_app.scss
// version: 1
// version: 2
$app-header-height: 72px;
$app-footer-height: 42px;
@@ -40,6 +40,7 @@ body {
.app-main {
position: relative;
width: 100%;
height: calc(100vh - $app-header-height - $app-footer-height);
margin-top: $app-header-height;
margin-bottom: $app-footer-height;
@@ -47,7 +48,7 @@ body {
}
.app-content {
overflow: auto;
min-height: 100%;
}
.app-logo {
@@ -64,7 +65,9 @@ body {
.game-stage {
width: 100%;
aspect-ratio: 1 / 1;
max-width: 520px;
margin-inline: auto;
aspect-ratio: 3 / 5;
overflow: hidden;
background: $black;
border: 1px solid rgba($primary, 0.35);

View File

@@ -0,0 +1,248 @@
// file: Web/game-snake-poc/frontend/sass/_simplebar.scss
// version: 1
/* Rtl support */
[data-simplebar] {
position: relative;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
align-items: flex-start;
}
.simplebar-wrapper {
overflow: hidden;
width: inherit;
height: inherit;
max-width: inherit;
max-height: inherit;
}
.simplebar-mask {
direction: inherit;
position: absolute;
overflow: hidden;
padding: 0;
margin: 0;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: auto !important;
height: auto !important;
// z-index: 0;
inset: 0;
}
.simplebar-offset {
direction: inherit !important;
box-sizing: inherit !important;
resize: none !important;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding: 0;
margin: 0;
-webkit-overflow-scrolling: touch;
inset: 0;
}
.simplebar-content-wrapper {
direction: inherit;
box-sizing: border-box !important;
position: relative;
display: block;
height: 100%;
width: auto;
max-width: 100%;
max-height: 100%;
overflow: auto;
scrollbar-width: none;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
}
.simplebar-hide-scrollbar {
&::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
position: fixed;
left: 0;
visibility: hidden;
overflow-y: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
}
.simplebar-content {
&:before {
content: ' ';
display: table;
}
&:after {
content: ' ';
display: table;
}
}
.simplebar-placeholder {
max-height: 100%;
max-width: 100%;
width: 100%;
pointer-events: none;
}
.simplebar-height-auto-observer-wrapper {
box-sizing: inherit !important;
height: 100%;
width: 100%;
max-width: 1px;
position: relative;
float: left;
max-height: 1px;
overflow: hidden;
// z-index: -1;
padding: 0;
margin: 0;
pointer-events: none;
flex-grow: inherit;
flex-shrink: 0;
flex-basis: 0;
}
.simplebar-height-auto-observer {
box-sizing: inherit;
display: block;
opacity: 0;
position: absolute;
top: 0;
left: 0;
height: 1000%;
width: 1000%;
min-height: 1px;
min-width: 1px;
overflow: hidden;
pointer-events: none;
// z-index: -1;
}
.simplebar-track {
// z-index: 1;
position: absolute;
right: 0;
bottom: 0;
pointer-events: none;
overflow: hidden;
}
[data-simplebar].simplebar-dragging {
pointer-events: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
.simplebar-content {
pointer-events: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.simplebar-track {
pointer-events: all;
}
}
.simplebar-scrollbar {
position: absolute;
left: 0;
right: 0;
min-height: 10px;
&:before {
position: absolute;
content: '';
background: black;
border-radius: 7px;
left: 2px;
right: 2px;
opacity: 0;
transition: opacity 0.2s 0.5s linear;
top: 2px;
bottom: 2px;
}
}
.simplebar-scrollbar.simplebar-visible {
&:before {
opacity: 0.5;
transition-delay: 0s;
transition-duration: 0s;
}
}
.simplebar-track.simplebar-vertical {
top: 0;
width: 11px;
}
.simplebar-track.simplebar-horizontal {
left: 0;
height: 11px;
.simplebar-scrollbar {
right: auto;
left: 0;
top: 0;
bottom: 0;
min-height: 0;
min-width: 10px;
width: auto;
}
}
[data-simplebar-direction='rtl'] {
.simplebar-track.simplebar-vertical {
right: auto;
left: 0;
}
}
.simplebar-dummy-scrollbar-size {
direction: rtl;
position: fixed;
opacity: 0;
visibility: hidden;
height: 500px;
width: 500px;
overflow-y: hidden;
overflow-x: scroll;
-ms-overflow-style: scrollbar !important;
>div {
width: 200%;
height: 200%;
margin: 10px 0;
}
}
.simplebar-hover {
cursor: pointer;
}

View File

@@ -1,9 +1,10 @@
// file: Web/game-snake-poc/frontend/sass/main.scss
// version: 1
// version: 2
@import "bootstrap/scss/functions";
@import "variables";
@import "fontawesome";
@import "simplebar";
@import "bootstrap/scss/bootstrap";
@import "bootswatch";
@import "app";

View File

@@ -1,9 +1,13 @@
// file: Web/game-snake-poc/frontend/ts/main.ts
// version: 1
// version: 2
import ResizeObserver from "resize-observer-polyfill";
import "simplebar";
import { startGame } from "./game";
import { bindInputs } from "./input";
(window as Window & typeof globalThis & { ResizeObserver?: typeof ResizeObserver }).ResizeObserver = ResizeObserver;
function requireElement<T extends Element>(selector: string): T {
const element = document.querySelector<T>(selector);
if (element === null) {

View File

@@ -10,7 +10,9 @@
},
"dependencies": {
"@fortawesome/fontawesome-free": "^7.3",
"bootstrap": "^5.3"
"bootstrap": "^5.3",
"resize-observer-polyfill": "^1.5",
"simplebar": "^6.3"
},
"devDependencies": {
"@types/bootstrap": "^5.2",

View File

@@ -23,7 +23,6 @@
"vite/client",
"node"
],
"baseUrl": ".",
"paths": {
"@snake-wasm": [
"../../../builds/sasedev-games/game-snake-poc-web/wasm/game_snake_poc_wasm.js"

View File

@@ -0,0 +1,56 @@
<!-- file: deltas/0.3.0/0-pre.4.fix.1.md -->
<!-- version: 1 -->
# Delta 0.3.0-0-pre.4.fix.1
## Objectif
Fermer les défauts découverts pendant la validation utilisateur de `0-pre.4` sans ouvrir le scope `0-pre.5`.
## Corrigé
- suppression de `compilerOptions.baseUrl`, retiré par TypeScript 7, tout en conservant le mapping `paths` et l'alias Vite `@snake-wasm` ;
- réintégration de `simplebar` et `resize-observer-polyfill` depuis le template KSP comme dépendances runtime du shell navigateur ;
- ajout du Sass SimpleBar KSP-derived et activation de `data-simplebar` sur `app-main` ;
- maintien du header et du footer fixes avec scroll interne de la zone centrale lorsque son contenu dépasse la hauteur disponible ;
- retrait des contraintes `h-100` internes qui empêchaient le contenu du shell de prendre sa hauteur naturelle ;
- correction du plateau Snake de `1 / 1` vers `3 / 5`, cohérente avec la grille logique `12 × 20`, afin de conserver des cellules visuellement carrées ;
- conservation du resize haute densité via `devicePixelRatio` à l'intérieur du ratio CSS corrigé ;
- correction de la documentation qui classait à tort SimpleBar et le polyfill parmi les dépendances propres à Tauri ;
- ajout d'une règle durable sur le scroll shell Web et extension de l'audit de distribution au Sass SimpleBar ;
- consignation sous `history/0.3.0/0-pre.4.md` des validations réussies et de l'échec `TS5102` ayant déclenché ce fix.
## Non modifié
- gameplay Snake ;
- adapter WASM et cadence `tick()` ;
- mappings clavier/pointer ;
- lifecycle complet, assets, logging et provenance prévus pour `0-pre.5` ;
- route de smoke : `http://127.0.0.1:1434/main.html`.
## Validation demandée
Depuis la racine :
```bash
cargo fmt --all
cargo fmt --all -- --check
python3 scripts/audit_rust_workspace_rules.py
python3 scripts/audit_markdown_tables.py README.md RULES.md ROADMAP.md CHANGELOG.md docs prompts crates Android Web deltas history
python3 scripts/audit_distribution_layout.py
cargo check --workspace
cargo clippy -p game-snake-poc-wasm --all-targets --all-features -- -D warnings
cargo test -p game-snake-poc-wasm
cargo build -p game-snake-poc-wasm --target wasm32-unknown-unknown
wasm-bindgen ../builds/sasedev-games/target/wasm32-unknown-unknown/debug/game_snake_poc_wasm.wasm --target web --out-dir ../builds/sasedev-games/game-snake-poc-web/wasm --out-name game_snake_poc_wasm
cd Web/game-snake-poc
npm install
npm run build
npm run dev
```
Smoke navigateur sur `http://127.0.0.1:1434/main.html` : vérifier clavier, boutons pointer/tactiles, cellules non déformées, scroll SimpleBar lorsque nécessaire et fixation du header/footer.
## Suite
Après validation du fix, `0-pre.5` peut fermer lifecycle/resize, assets, logging, provenance runtime et non-régression Desktop SDL3 conformément au plan actif.

View File

@@ -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`.

View File

@@ -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.

View File

@@ -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

50
history/0.3.0/0-pre.4.md Normal file
View File

@@ -0,0 +1,50 @@
<!-- file: history/0.3.0/0-pre.4.md -->
<!-- version: 1 -->
# Historique 0.3.0-0-pre.4
## Statut
Candidate Web fonctionnelle en smoke navigateur mais non validée comme tranche fermée le 2026-09-20 : la gate `npm run build` a échoué et a déclenché `0-pre.4.fix.1`.
## Validation utilisateur
Les validations suivantes ont passé sur `0.3.0-0-pre.4` :
```text
cargo fmt --all: clean
cargo fmt --all -- --check: clean
General Rust rule audit: clean
Rust export completeness audit: 0 candidate(s)
games.sasedev workspace audit: clean
Markdown table audit: clean (5 table(s), 181 file(s))
Distribution layout audit: clean (26 required path(s), 1 forbidden path(s) absent)
cargo check --workspace: clean
cargo clippy -p game-snake-poc-wasm --all-targets --all-features -- -D warnings: clean
cargo test -p game-snake-poc-wasm: 2 passed, 0 failed
cargo build -p game-snake-poc-wasm --target wasm32-unknown-unknown: clean
wasm-bindgen --target web: clean
npm install: 43 packages added, 0 vulnerability
npm run dev: Vite started on 127.0.0.1:1434
manual smoke: keyboard controls clean
manual smoke: on-page pointer controls clean
```
La page de smoke est volontairement `http://127.0.0.1:1434/main.html`; l'absence d'`index.html` rend la racine `/` non navigable et n'est pas considérée comme un défaut de cette tranche.
## Défauts observés
`npm run build` a échoué sous TypeScript 7 avec :
```text
TS5102: Option 'baseUrl' has been removed. Please remove it from your configuration.
```
Deux écarts visuels/structurels ont aussi été confirmés pendant le smoke :
- SimpleBar et `resize-observer-polyfill` avaient été omis à tort alors qu'ils appartiennent au shell Web KSP-derived et doivent porter le scroll de la zone centrale entre header et footer fixes ;
- le Canvas carré déformait la grille Snake `12 × 20`, produisant des cellules visuellement écrasées en hauteur.
## Suite
`0-pre.4.fix.1` corrige ces trois points puis rejoue la gate frontend avant ouverture de `0-pre.5`.

View File

@@ -1,6 +1,6 @@
#!/usr/bin/env python3
# file: scripts/audit_distribution_layout.py
# version: 3
# version: 4
"""Audit the static distribution layout expected by supported POCs."""
@@ -34,6 +34,7 @@ REQUIRED_PATHS = (
"Web/game-snake-poc/tsconfig.json",
"Web/game-snake-poc/vite.config.ts",
"Web/game-snake-poc/frontend/main.html",
"Web/game-snake-poc/frontend/sass/_simplebar.scss",
"Web/game-snake-poc/frontend/sass/main.scss",
"Web/game-snake-poc/frontend/ts/main.ts",
"Android/game-reflex-poc/build.gradle",