sokko-g/docs/FEATURE_CHECKLIST.md

Feature Checklist

Checklist à suivre lors de l'ajout ou de la modification d'un outil, d'une page jeu ou d'un format de données.

Outil Toolbox

• Ajouter ou modifier le composant dans website/src/features/toolboxes/modules/.
• Déclarer ses métadonnées et son chargeur dans website/src/features/toolboxes/toolboxModuleRegistry.js. Le registre React modules/toolboxModuleComponents.jsx est partagé par la toolbox et la Librairie ; modules/index.jsx expose le shell.
• Vérifier le chargement à la demande en toolbox et dans chaque catégorie de la Librairie.
• Dans la Librairie, vérifier les liens directs vers un outil, les changements d'ancre et le retour navigateur ; une nouvelle sélection ou une sortie de page doit annuler les défilements différés précédents.
• Ajouter les textes nécessaires dans website/public/data/site.json.
• Mettre à jour la validation de site.json dans tests/helpers/data-validation.mjs.
• Mettre à jour la normalisation et le stockage compact dans website/src/features/toolboxes/storage/modules/<outil>.js, puis vérifier l'export public dans website/src/features/toolboxes/storage/toolboxStorage.js.
• Mettre à jour docs/STORAGE_SCHEMA.md.
• Vérifier l'import et l'export si l'outil stocke des données.
• Pour une modification de persistance, vérifier les écritures successives en succès/échec, les suppressions, ainsi qu'un import concurrent avec une édition ; un échec ne doit pas restaurer une valeur jamais confirmée.
• Vérifier qu'une erreur d'ouverture ou de lecture au démarrage bloque les écritures, créations, imports et exports sans afficher une fausse liste vide ; plusieurs tentatives puis une reprise réussie doivent retrouver les données initiales sans recharger la page ni les effacer.
• Pour Images et Annotation d'images, vérifier la lecture différée en page complète et panneau latéral, la reprise après échec local et l'absence d'écrasement pendant le chargement. Les alertes des autres outils doivent rester actives sans ouvrir les médias.
• Vérifier qu'une création, un import ou une suppression préserve les médias non lus des autres outils ; les exports doivent les inclure et refuser un téléchargement partiel en cas d'échec. Une lecture en cours ne doit pas réintroduire des données supprimées.
• Si l'outil a un contenu représentable en texte, ajouter ou vérifier l'import/export texte round-trip depuis le toggle import/export du header.
• Si l'outil porte un état de progression, vérifier que l'import texte repart de l'état initial attendu.
• Vérifier l'affichage dans la page toolbox complète.
• Vérifier l'affichage dans le panneau latéral.
• Pour le tutoriel toolbox, vérifier le démarrage unique, la fermeture et le changement de toolbox en cours de visite ; une autre toolbox doit démarrer à la première étape et ne pas consommer les indicateurs de la précédente.
• Pour le Bloc Note, vérifier la sélection, l'ajout, le renommage et la suppression de pages en page complète, panneau latéral et mobile.
• Vérifier qu'un changement de page avec le focus actif remplace immédiatement le contenu de l'éditeur ; une mise à jour externe de la même page attend le blur sans déplacer la sélection pendant la saisie ni reprendre le focus ensuite.
• Pour les dessins temporaires et l'historique du simulateur de chance, vérifier l'isolation par clé de session lors des changements de page/outil et après rechargement ; une navigation seule ne doit pas écraser les données de l'autre clé.
• Pour le simulateur de chance, vérifier que les brouillons suivent le taux et l'outil actifs, restent intacts lors d'un rendu sans rapport et se valident au blur selon le champ.
• Pour le visualiseur d'images, vérifier la remise à zéro des marqueurs et des modes dessin/gomme au remplacement de l'image.
• Pour la galerie d'images, vérifier les boutons de taille − / +, leur blocage aux limites, le switch de ratio 4:3 / 1:1, la persistance de ces préférences après rechargement, les images et libellés contenus dans les deux formats, la redistribution centrée des vignettes, le padding périphérique et l'absence de scroll horizontal.
• Pour l'éditeur de couverture, vérifier les décodages concurrents, les erreurs après fermeture et la libération des bitmaps/URLs ; une image en chargement ne doit pas permettre de valider la couverture précédente.
• Les parcours e2e/toolbox-cover.spec.js vérifient le choix d'icône, l'enregistrement d'une couverture 620 × 248, sa persistance après rechargement et import/export, l'annulation et les fichiers illisibles. L'association à un jeu doit afficher sa couverture sans perdre l'image personnalisée, restaurée après dissociation ; choisir une icône doit supprimer la couverture personnalisée.
• Les parcours e2e/table.spec.js vérifient les en-têtes éditables sans changer les références des formules, le redimensionnement sans restauration des cellules supprimées, la navigation et la sélection clavier, la copie des valeurs TSV, le collage et l'effacement de blocs, le déplacement à la souris et l'insertion d'une plage dans une formule. Les valeurs et dimensions doivent survivre au rechargement.
• Les parcours e2e/text-exchange.spec.js vérifient les modales partagées via Tableau et Calculateur : export désactivé à vide, validation des imports, conservation des données après erreur, brouillon effacé à la réouverture, export en lecture seule et copie exacte. L'import doit persister avec ses formules, libellés et relations ; Annuler, Fermer, Échap et le fond de modale doivent fermer correctement, avec restitution du défilement.
• Les parcours e2e/task-planner.spec.js couvrent création, renommage, description multiligne, catégorie, suppression et persistance. Un parent transmet sa catégorie ; un prérequis manquant avertit sans bloquer la validation. Supprimer un parent doit conserver l'enfant sans relation orpheline. Avec une horloge contrôlée, les tâches quotidiennes et hebdomadaires se réinitialisent, les ponctuelles restent cochées ; masquage et nettoyage doivent préserver les autres tâches.
• Pour Mémos, vérifier l'édition courte, les couleurs, la réorganisation et la bande déroulante.
• Les parcours e2e/calculator.spec.js vérifient la validation des formules, l'édition parent/enfant avec recalcul et persistance, la suppression d'une branche active, le retour à un calcul racine, la réinitialisation du brouillon sans effacer les résultats, la copie pour checklist et la persistance du défilement. La réorganisation des racines doit conserver leurs descendants et refuser de changer le parent d'un enfant.
• Vérifier qu'une notification ou une mise à jour sans rapport ne remplace pas un brouillon Mémos avant sa validation au blur.
• Pour l'arbre d'objectifs, vérifier la sélection après suppression/import et le retour à Base quand le nœud sélectionné devient une étape sans onglet Contenu.
• Vérifier le mode une colonne et deux colonnes.
• Vérifier que l'ajout, la suppression et la réorganisation respectent les moduleOrder.one et moduleOrder.two de l'espace actif.
• Pour les espaces toolbox, vérifier la conversion de l'ancien ordre vers « Défaut », la limite de cinq, l'espace actif partagé avec le panneau jeu, l'ajout dans l'espace actif, le renommage, le réordonnancement hors défaut et la suppression avec rapatriement des outils.
• Vérifier le déplacement d'un outil par sélecteur et par dépôt sur onglet : dépôt rapide sans changement d'espace, activation après 600 ms, dépôt précis après activation et pointercancel sans déplacement.
• Pour les déplacements par pointeur, vérifier les dépôts avant/après, le rejet des cibles interdites et l'annulation navigateur (pointercancel) sans modification de l'ordre ; le démontage doit retirer les listeners actifs.
• Vérifier le quota de stockage si l'outil manipule des données lourdes.
• Pour la sauvegarde locale, vérifier la feature detection, les permissions sans popup au démarrage, le nommage en date locale, la déduplication quotidienne, le remplacement manuel, la rétention de dix fichiers et la conservation des fichiers étrangers.

Page Jeu

• Ajouter les données dans website/public/data/.
• Ajouter les images dans website/public/static/img/games/<gameId>/.
• Déclarer le jeu dans website/public/data/site.json.
• Vérifier la page /games.
• Vérifier la page /games/<gameId>.
• Vérifier le chargement à la première visite, la conservation des données pendant la navigation et les erreurs réseau ; sous StrictMode, les requêtes abandonnées ne doivent pas remplacer les données actuelles ni afficher d'erreur d'annulation.
• Vérifier que le bouton texte « Afficher la toolbox » devient « Masquer la toolbox » avec le panneau latéral ouvert.
• Sans toolbox liée, vérifier la création ainsi que l'association directe d'une toolbox existante ; le sélecteur ne doit proposer que les toolboxes qui ne sont liées à aucun jeu.
• Vérifier le breadcrumb.
• Vérifier les textes avec retours à la ligne.
• Pour les guides à cartes, vérifier le toggle de lien à côté du « + » dans l'en-tête de chaque checklist compatible : il affiche les commandes, masquées par défaut. Vérifier l'association exclusive, le masquage désactivé sur les autres listes et la mise à jour immédiate depuis le panneau latéral. Refermer les commandes conserve l'association. La checkbox des cartes met à jour toutes les lignes exactes correspondantes, respecte les quantités cibles et ne retourne pas les cartes.
• Vérifier le changement de checklist, la dissociation, la restauration de session, la suppression d'un module et le changement de toolbox. La réinitialisation des filtres conserve la liaison ; une liste devenue sans correspondance reste sélectionnée avec un message.
• Pour les résultats filtrables Aniimo, MHW et Diablo, vérifier que l'action checklist ouvre une modale rappelant que seuls les éléments visibles sont utilisés. La copie reste disponible sans toolbox liée ; la création est alors désactivée avec une indication explicite. Avec une toolbox liée, la création ajoute une nouvelle checklist dans son espace actif sans remplacer l'association guide/checklist existante.
• Pour Aniimo, vérifier la copie et la création des espèces ou des formes selon l'affichage, les noms français/anglais, la priorité des formes et le masquage avant regroupement. Compteurs, copie et création doivent correspondre aux résultats affichés.

Listes de jeu

• Ajouter la liste JSON dans website/public/data/<gameId>/lists/.
• Lancer npm run lists:index.
• Vérifier que index.json est régénéré.
• Vérifier que nom est présent sur chaque élément.
• Vérifier que description et quantite restent facultatifs.
• Vérifier la copie au format checklist.
• Vérifier la création directe de checklist quand une toolbox est associée.

Style

• Réutiliser les tokens existants avant d'ajouter une nouvelle couleur ou taille.
• Réutiliser les classes de boutons existantes.
• Vérifier les boutons icon, danger, primary et secondary.
• Vérifier les cartes, panels et scrollbars.
• Vérifier les états hover/focus.
• Vérifier mobile et desktop quand le changement touche la mise en page.
• Les tests e2e/card-surfaces.spec.js compilent le Sass complet et vérifient les styles calculés des cartes NDS, home jeux et MHW en desktop/mobile : fonds, bordures, séparateurs dorés, hover sans redimensionnement, focus clavier NDS et faces MHW. Ils ne créent pas de snapshots visuels et ne remplacent pas les parcours des pages réelles.
• Les suites nds-controls, nds-patterns, style-layouts et tool-style-states complètent cette couverture : tailles et états NDS, panneaux, feedbacks, modales/drawers/toasts, scrollbars, mouvement réduit, états des outils et masques d'icônes décodables. Les layouts home/À propos/librairie sont aussi vérifiés sur les pages réelles en desktop, tablette et mobile.
• tests/static-styles.test.mjs conserve les frontières d'architecture, les conventions publiques et les limites de taille des fichiers, pas des preuves de rendu basées sur la présence d'un nom de classe ou de mixin dans le Sass.

Validation avant push

npm run check

Le check doit passer avant de pousser :

• syntaxe serveur et Vite ;
• génération des index de listes ;
• tests Node ;
• build de production.

npm run check:full ajoute les parcours navigateur de développement puis de production. Pour la prise en main de la home, vérifier sa présence sans toolbox, sa disparition après création en production, son retour après suppression de la dernière toolbox et la persistance de ces états après rechargement. Elle reste visible en développement et sur la page À propos.