Vue Réseau du codex : la constellation en deux rives #91

Constat / besoin

Le codex montre des cartes isolées : le joueur ne voit pas que géo- a donné trois mots et que -logie en relie cinq. Le besoin est une vue « Réseau » du codex qui montre les familles, préfixe ↔ mot ↔ suffixe. Elle doit rester lisible, sans chevauchement, et ne pas bouger à chaque découverte.

Piste 3 de la page de travail pistes-retention.html (Design#51), retenue par le propriétaire.

Vérification faite

• Code : web/src/composants/Codex.tsx et web/src/services/codex.ts n’offrent qu’une grille de cartes ; aucune vue relationnelle.

• ADR : rien d’équivalent. La vue doit respecter :

  • 0043 : légendaires secrètes ;
  • 0051 : une carte inconnue ne montre rien gratuitement ;
  • 0069 : aucun total pour un fascicule verrouillé ;
  • 0047 : la difficulté n’est jamais affichée.

• Doublons : aucune issue équivalente parmi les 42 du dépôt.

• Prototype mesuré sur les données réelles des fascicules 1 à 6 :

  • 0 chevauchement ;
  • 0 courbe sous une brique ou un texte ;
  • 0 px de déplacement des briques existantes à chaque découverte, hors insertion alphabétique.

  La disposition par forces a été rejetée : elle déplaçait 27 briques sur 30 à chaque découverte.

• Verdict : confirmé.

Comportement attendu

Disposition « deux rives »

• Les préfixes sont sur la rive gauche et les suffixes sur la rive droite. Les mots sont des courbes qui traversent la « rivière » entre les deux.
• Une bande par fascicule, dans l’ordre de parution. Dans chaque bande, les briques suivent l’ordre alphabétique, en rangées de 44 px.
• Les courbes restent dans la rivière et ne passent jamais sous une brique ni sous un texte.
• La dernière découverte est en Corail. Sous chaque brique, une barre Rosée indique la taille de sa famille.
• Seules les briques trouvées apparaissent : aucun emplacement réservé pour une brique inconnue (ADR 0051).

Téléphone	Téléphone, famille ouverte	Ordinateur
	````

Interactions

• La vue s’ouvre sur le dernier fascicule débloqué. Un sélecteur permet de passer d’un fascicule à l’autre ou à « Tous ».
• Dans la vue « Tous », un lien plus long que 640 px devient une antenne : un court départ avec un compteur, au lieu d’une courbe qui traverserait l’écran.
• Toucher une brique ouvre sa famille dans un panneau collant et repliable : les mots formés et les briques partenaires.
• Vue liste de repli : la même information en texte, pour l’accessibilité et les petits écrans.
• Animations : insertion d’une nouvelle brique en 240 ms, rien sous prefers-reduced-motion.

Ordinateur, tous	Six fascicules, tous	Nocturne
	```````

Règles

• Les totaux et les compteurs ne portent que sur les fascicules débloqués.
• Les légendaires n’apparaissent pas. Plus tard, une bande à part leur sera réservée ; c’est hors périmètre ici.
• La difficulté n’est jamais affichée ; la rareté peut colorer le mot dans le panneau famille.

Piste

Handoff.

0. ADR et maquette (dépôt Design) : « Vue Réseau du codex », avec la disposition en deux rives, les antennes, le panneau famille et la vue liste. Ajouter une maquette dans maquettes.html, mettre à jour l’interface Codex dans interfaces.html et documenter le composant dans design-system.html.
1. PWA seulement, sans changement d’API ni de contrat :
   • La disposition se calcule côté client sur la projection du codex déjà chargée (web/src/services/codex.ts). Dans le prototype, elle prend de 3 à 5 ms pour 6 fascicules.
   • Nouveau module web/src/services/reseau.ts : une fonction pure disposer(codex, fascicule | "tous", largeur) renvoie les positions des briques, les courbes et les antennes. Elle est déterministe : même codex, même rendu.
   • Nouveau composant web/src/composants/CodexReseau.tsx en SVG. L’onglet « Réseau » s’ajoute à Codex.tsx, à côté de la grille.
   • Les styles viennent de web/src/styles.css, avec les jetons du design système uniquement. Une brique s’affiche avec son trait d’union (« géo- », « -logie »).
2. Tests de disposer :
   • aucun chevauchement ;
   • aucune courbe hors de la rivière ;
   • stabilité : une découverte ne déplace pas les briques existantes, hors insertion ;
   • aucun légendaire ;
   • aucun fascicule verrouillé.

Prototype de référence : la fonction disposer() de la démo « constellation » de pistes-retention.html, sur les données réelles des fascicules 1 à 6.

Critères d’acceptation

• L’ADR est accepté et la maquette est publiée dans Design.
• L’onglet « Réseau » du codex s’ouvre sur le dernier fascicule débloqué ; le sélecteur couvre les fascicules débloqués et « Tous ».
• Sur les données des fascicules parus : 0 chevauchement et 0 courbe sous une brique ou un texte, vérifiés par test.
• Une nouvelle découverte ne déplace aucune brique existante, hors insertion alphabétique, vérifié par test.
• Aucune brique inconnue, légendaire ou d’un fascicule verrouillé n’apparaît, ni dans les totaux.
• Le panneau famille et la vue liste sont utilisables au clavier et au lecteur d’écran ; cibles d’au moins 44 px.
• À 390 px et 1440 px, en atelier et en nocturne : pas de débordement horizontal, check_identity sans erreur. Animation vérifiée avec animation-check, rien sous prefers-reduced-motion.