---
title: "Essai UI in-game 2a : topbar, couloirs de degrés, suggestions ancrées"
subtitle: "Reproduire l'écran de design dans le runtime React sans réécrire le monde 3D — et sans confondre les ports"
date: 2026-09-15
time: "00:13"
author: VFG / Rainbow Journey
publishedBy: idea
status: pub
tags: ["rainbowjourney", "devblog", "ui", "design", "essai", "hud", "suggestions"]
---

![Essai UI in-game 2a : topbar, couloirs de degrés, suggestions ancrées](../images/covers/2026-09-14-essai-ui-ingame-2a-topbar-couloirs-suggestions.png)


Après la stabilisation du piano et de la fumée, un autre fil s’est ouvert : coller l’écran de jeu au **design 2a** (cadre 1280×800), sans fusionner tout de suite sur `main`, et sans toucher au rewrite des axes Three.js.

Branche d’essai : `essai/ui-ingame-2a`. Serveur attendu : **http://localhost:5183/** uniquement. Le 14 septembre, le port `5173` a servi un autre projet (« notes-blocs ») — piège de diagnostic classique.

## Mandat en une phrase

T1 → T5 dans le DOM/CSS existant : topbar, couloirs, suggestions ancrées, paquets/climbers, rivière SVG. **Hors essai** : rewrite 3D « rivière qui monte », versionnement du zip / des maquettes `.dc.html`.

## Ce qui est livré (T1–T3)

![Capture essai UI in-game 2a](../images/shots/ui-ingame-2a.png)


### T1 — topbar (livré, commit `d576c65` avec le handoff T1/T2)

- Marque `RAINBOW` / `JOURNEY` (Cinzel), statut MIDI, transport, chip de gamme ASCII.
- Exemple de chip : `DO MAJEURE · 7 DEGRES` via `formatScaleChip`.
- Jetons CSS **scopés** sous `.topbar` (pas de pollution de l’éditeur).
- Témoin REC à côté du timecode ; commandes Panic / Reset / Demo / Connecter / Réglages conservées.

### T2 — couloirs (partiel)

- Pied de jeu : le `Piano` n’est plus monté dans `Journey` ; `DegreeCorridors` le remplace.
- Helpers purs dans `corridorHelpers.ts` (tests inclus) : pitch classes, MIDI A0–C8, gloss de rôle, parts d’usage.
- Jouable pointeur + clavier ; octave UI +/- et molette.
- Le `Piano` de l’éditeur (`ui.tsx`) reste intact.
- Fidélité pixel 2a : **pas encore** ; structure visible, géométrie encore à aligner.

Bug Windows résolu au passage : coexistence `degreeCorridors.ts` / `DegreeCorridors.tsx` sur FS insensible à la casse. Renommage net vers `corridorHelpers.ts`.

### T3 — suggestions ancrées (livré en working tree / handoff UI-T3)

- `SuggestionStrip` ancré sur `laneCenterX` (même géométrie que les couloirs).
- Carte 2a : pastille, note, rôle, st/tons ; score seulement dans l’attribut `title`.
- Panneau DIRECTIONS : liste retirée ; défaut `hidden: true` pour les profils neufs.
- Tranché : **une seule** géométrie (`corridorHelpers`), pas de `laneGeometry.ts` parallèle.

## Ce qui n’est pas fait

| Tranche | Statut |
| --- | --- |
| T4 paquets + climbers | plans prêts, remplissage à l’arrivée non livré |
| T5 rivière SVG | plans prêts, rubans alignés non livrés |
| Rewrite axes 3D | hors essai |
| Gates FG T1/T2/T3 | ouverts (validation visuelle humaine) |

## Contrôles cités dans les handoffs

- T1/T2 : typecheck / lint / tests ciblés couloirs + chip ; UI rendue sur `:5183` (`#root`, topbar, 7 couloirs Do majeure) — l’écran blanc signalé plus tôt **n’était plus reproduit** après le renommage helpers.
- T3 : contrôles listés dans `handoffs/UI-T3.md` (suite locale de la branche d’essai).

Aucune affirmation DP1 ni « le design est pixel-perfect » : l’essai vise la structure jouable fidèle, puis les gates FG.

## Pourquoi publier cet essai maintenant

Parce que le dépôt a déjà un corpus éditorial sur la théorie, l’orchestration et la documentation — mais le **visage** du jeu changeait sans récit public. Le design 2a n’est pas une skin cosmétique : c’est la façon dont les degrés, les suggestions et le transport se lisent pendant qu’on joue.

Prochaine étape produit de l’essai : T4/T5 si les gates T1–T3 passent, sinon corriger l’alignement des couloirs avant d’empiler des paquets.

---

*Sources : `docs/plans/essai-ui-ingame-2a/README.md`, `handoffs/2026-09-14-t1-t2-handoff.md`, `handoffs/UI-T3.md`. Miroir local : `RainbowPiano/docs/devblog/`.*