mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-18 21:16:47 +00:00
Maurice
64b190862e
Every one of these passed when its own file was run alone and failed when all of them ran against one seeded trip, because another screen's fixture had put something in the way. - The Bookings fixture names a booking after a place, so the Assign File dialog offered two entries opening with the same words. - The Lists tab has a Shared button, which the loose name of the navbar's Share also matches, so opening a trip on that tab never settled. - A traveller's avatar is named by the initial it draws, not by the username; the title carries the name. - Departure and Arrival are what a booking gets when it crosses days, so the guide about them points at the flight, not at the train that starts and ends on one day. - The What's Next stop was timed from the wall clock of whoever runs this, while the browser's clock is pinned to the day the pictures are taken on. Both now come from the same constant. - The map was panned with the arrow keys, which Leaflet only reads while its container has focus, and focusing it from here did not take. It is dragged now, from a point checked to be free of markers, because a press on a marker drags the place onto a day instead.
Help-center media
Every picture the help center shows is made here, by Playwright, against the real app. Nothing is drawn or cropped by hand, so a new screen gets pictures in exactly the same style by following the same path.
The style, in one place
Everything visual is fixed in guide.ts and promote.mjs; change it there, never
in a script.
| What | Where | Value |
|---|---|---|
| Viewport | guide.ts VIEWPORT |
1920 × 1080, device scale 2 (playwright.config.ts, project help-media) |
| Step picture frame | guide.ts frameFor |
16:10, at least 960 px wide, 64 px padding around the target, centred on it; a target taller than the frame is shown from its top |
| Ring around the target | guide.ts ring |
3 px in the app's --accent, 12 px radius, 6 px outside the element, the rest dimmed 30 %; a numbered badge (step number) at the top-left corner |
| Drag & drop | guide.ts ringDrag (a step with dropTo) |
source ringed and numbered, destination ringed dashed, a bowed arrow from the one to the other, both undimmed |
| Hover | captureGuide |
the target is hovered before the shot (tooltips, hover-only buttons show); hover overrides where the centre is wrong |
| Result picture | guide.media.result |
the full frame after the last step, pointer parked in the corner |
| Hero (screen overview) | captureHero |
the full frame of the screen as the reader finds it |
| Output | promote.mjs |
PNG → WebP quality 84; steps 1440 px wide, heroes and results 1920 px; into public/help-media/<guide-id>/step-<n>.webp, result.webp, ctx/<screen-id>.webp |
| No videos | stills only, by decision |
The app's own appearance is the default theme, English, light mode, the seeded
demo data (e2e/screenshots/seed.ts) plus the fixtures in fixtures.ts. Do not
change the theme, the language or the zoom for a picture.
How a screen gets its pictures
- Register the screen and its guides in
src/help/contexts/<screen>.tsandsrc/help/registry.ts; write the English texts as a block inshared/src/i18n/en/help.ts(// ── Screen: <id>). Guide ids are global: one id, one picture directory, so never reuse an id from another screen (registry.test.tsrefuses duplicates). - Write
e2e/help/<screen>.guide.ts: oneGuideScriptper guide, exactly oneStepActionper registered step,startthat opens the screen,cleanupthat puts the seed back. A step'stargetis the element the text tells the reader to use;preparegets there,actdoes what the text says. - Run
npm run help:media -- <screen>.guide.ts(own ports 5183/3011, fresh database, the seed, then the file). Fix until every guide passes; a failing step is a text that no longer matches the UI. - Look at the pictures in
e2e/.tmp/help-media/, thennode e2e/help/promote.mjs. - Translate the block into all 22 locales (
i18n:parity:strictis the gate) and runsrc/help/registry.test.ts, which checks every promised picture is on disk.
Rules learned the hard way
- Never edit
shared/while a media run is going: the watcher rebuildsdistmid-run and the pictures show raw i18n keys. - Never
npm run build --workspace=sharedwhilenpm run devis running; restart the dev server if it happened. - Each run boots a fresh server (~2 min); batch fixes, and dump the accessibility
tree once (
page.locator('body').ariaSnapshot()) instead of guessing locators. - A plugin installed by a run lives in
server/data/plugins/; the dev server imports it on its next restart. Guides that install one uninstall it incleanup. - The trip is running on the seed's dates: the plan opens on today's (empty) day;
openTripintrip-shared.tsselects day 1 and closes its details panel.