9.0 KiB

Raw Blame History

Change Request CR-029 — Deep Field UI Rework

Project: Deadhead: Space Freight Tycoon Applies to: a build with Phase 13 and CR-001 through CR-028 complete Do this: as Phase 29 Status: built (Phase 29); see the notes in DECISIONS.md for where the build differs from this plan Related docs: CR-005-ui-overhaul.md, CR-020-bridge-dashboard.md, CR-028-live-toasts.md, DECISIONS.md Design reference: the Deep Field canvas, https://claude.ai/artifact/LprS2DkuTSf2PfJm7VUSe4 (phone prototype, all 15 phone screens, 15 desktop views)

This change is client-only. It changes no game rules, engine commands or save data, so it needs no save migration.

1. Why

Every screen today is the same neon-edged card over a starfield, amber marks almost everything, and desktop uses a narrow center column. Key decisions are buried: job cards show gross pay, and net profit only appears in the dispatch sheet. Badges count things without saying what they are, and four tabs don't match their screen titles.

The user chose the Deep Field direction with Switchyard's jobs table, for a game played mostly on phones.

2. Rules

The shell

The solar system map is always behind the UI, and it is the Bridge. There is one map canvas for the whole session.
Screens are glass panels over the map: a bottom sheet on phones, a right-hand column from 768 px up.
Bottom tabs on phones, a floating left rail on desktop: Bridge, Jobs, Fleet, More.
Fleet has two views, Ships and Crew. More holds Shipyard, Places & HQs, Logbook, Dispatch Office, While you were away and Settings.
A screen's tab and its title use the same name.

Look

Item	Rule
Color	Navy ground; amber only for the main action and the player's own ship; blue for other flights; mint for money earned; coral for problems.
Type	Michroma for the wordmark and screen titles only; Instrument Sans for everything else, with tabular numerals.
Glass	At least 82% opaque, so text passes contrast with the Sun or a bright star behind it.
Art	Large on Bridge, ship detail, Shipyard and Start; small or absent in lists.
Removed	Corner brackets, glows on ordinary controls, amber on full gauges.

Needs you

The Bridge leads with one list of what needs the player, in this order: radio calls, the player's idle ship with its best job, skill points, goals ready to claim. Tab badges count the same list. The empty Alerts panel goes away.

Jobs table

Columns on phones: job, net, credits per hour. From 768 px, also shipper, weight and hours.
Sorts by net (the default) or credits per hour; the choice is remembered on the device.
Jobs the player can take now come first. Jobs they can't take sit under Can't take yet, each with its reason.
Net keeps the dispatch sheet's definition: payout minus fuel minus the pilot's share, excluding the lender's cut.
Credits per hour is net divided by the job's game hours.
The figures use the best ship that could take the job now. A job with no such ship uses the best ship the company owns, marked as an estimate.

Dispatch

The sheet leads with what the player clears. Payout and fuel sit beside it, ships to choose from follow, and timing facts take one line. On desktop it opens in the side panel and the table stays visible.

Accessibility

Text meets 4.5:1 and tap targets are at least 44 px. The Deep Field colors were measured against the worst-case background; they need re-measuring in the app.
The jobs table is a real <table> with aria-sort.
Reduced motion stops ships moving along routes and the sheet's animation. Ships still show at their true position.

3. Rules for this change

Every step leaves the game playable and the suite green.
Every feature stays. The mockups don't draw all of them: see §6.
Existing URLs keep working, redirecting where a screen has moved.
Keep the accessible names tests rely on unless this document renames them. About 29 test and e2e files mention the old screen names, and about 41 source files use the old color classes.

4. Decisions

Record these in DECISIONS.md and implementation-plan.md §0.5 as 0.5.165–0.5.169.

0.5.165 Deep Field theme, per §2 Look; replaces the "freight terminal HUD" (0.5.47–0.5.48).
0.5.166 Map as the shell. One canvas behind every screen; the Bridge and Map merge. It pauses while the tab is hidden or a panel fully covers it.
0.5.167 Four tabs, per §2 The shell; replaces the eight tabs of CR-005 and the "Bridge" label split of 0.5.118.
0.5.168 Needs you, per §2; replaces the Alerts panel of 0.5.120 and redefines the badges of 0.5.49.
0.5.169 Jobs table and credits per hour, per §2.

5. Steps — Phase 29

Step 29.1 — Theme tokens and type

Add the fonts; retune the @theme tokens in index.css; replace the starfield body background with the Deep Field ground; add semantic tokens for action, own ship, flight, earned and problem.
Test: The suite stays green with no markup changes. Measured contrast passes for each text color on the glass.

Step 29.2 — UI kit

Restyle Button, Panel, Sheet, Pill, Meter, StatTile and Eyebrow; remove brackets and glows; set the 44 px minimums. Move literal amber-* and cyan-* classes in screens to the new tokens.
Apply font-title to the wordmark and screen titles.
Fix the phone text wraps the wider body font caused in Step 29.1: "Find work here" on the Bridge and "When you send them" on Pilots.
Test: ui-kit.test.tsx updated. Screenshots of all screens at 390 and 1280 px.

Step 29.3 — The map shell

Lift MapCanvas from MapScreen into Layout, so it survives route changes. Add the panel host: a bottom sheet with drag detents on phones, a right column on desktop. Settle how dragging the sheet and panning the map share gestures.
Keep tap-to-select, zoom, Reset view and the location and flight panels.
Test: Navigating doesn't recreate the canvas. The canvas pauses when hidden. Frame rate and battery checked on a real mid-range phone, with the blur reduced or dropped if it can't hold up.

Move to four tabs and the More screen; add Fleet's Ships and Crew views; rename titles to match tabs; add redirects from /pilots, /hqs, /market, /locations and /map.
Test: layout.test.tsx and affected tests and e2e helpers updated. Each old URL lands on the right screen.

Step 29.5 — Bridge

Build the Needs you list and move badge counts onto it; add the next-move card; list flights; keep Fleet Asleep, loan, goals, Dispatch Office and the tutorial panel.
Test: Each kind of item appears, opens the right place, and leaves when done. The badge equals the list's count.

Step 29.6 — Jobs table

Extract net and fuel from pairOptions into a shared function, so the table and sheet can't disagree. Build the table, sorting and the Can't take yet group; keep New, Priority, First contact, Yours for and board refresh.
Test: Table and sheet show the same net. Sorting works and is remembered. Each blocked reason shows. Column sets match each width.

Step 29.7 — Dispatch, Fleet and Crew

Restyle the dispatch and deadhead sheets; build ship detail, including fuel, service bookings and upgrades; rebuild pilot cards with skills, duty, rest and independent controls.
Test: Existing dispatch, fleet, service and pilot tests pass with updated selectors.

Step 29.8 — Everything else

Shipyard, Places & HQs, Logbook, Settings and its sub-screens, Start, Welcome, the deal, tutorial board, skill-point prompt, radio calls, While you were away, toasts, and developer tools.
Test: Existing tests pass with updated selectors. Screenshots of every screen and state at 390 and 1280 px.

Step 29.9 — Regression

Run the full suite, type check and e2e. Audit keyboard use, screen reader labels and contrast in the built app.
Test: CI is green. Manual check on a phone and on desktop through a full game: tutorial, deal, first ship, and a radio call.

6. Not yet designed

The canvas shows a mid-game company. These need designing during their steps, and the user reviews them there: the tutorial and deal, Welcome cards, Fleet Asleep, loan payment, service bookings, refuel flows, the deadhead sheet, independent pilot controls, empty and error states, and a large fleet (20 or more ships and long job boards).

7. Open questions

Shipyard placement: the canvas puts it under More, but buying ships is a main goal. Reconsider if it feels buried in play.
Estimated figures: whether a job with no available ship should show net at all, or only the reason it's blocked.

8. Amendments

Where	Change
CR-005	Theme and eight-tab navigation replaced by this document.
CR-020	The Bridge's layout and Alerts panel replaced; its content moves per Step 29.5.
CR-028	Toast styling follows the new theme; toast rules unchanged.

9. Out of scope

Game rules and balance, new art, a light theme, and moving away from the Pixi map.

9.0 KiB Raw Blame History Unescape Escape