Skip to content

Two Fronts: menus as a warship's distressed-metal plates (Thunder Marines first), hill climb to 8/10, rounds 2+ (from #3531) #3546

Closed

Description

@QuinnsCode

Rounds 2+ of the Two Fronts menu climb (from #3531). Round 1 (PR #3542) took the menus from 2.5 to 5.0 by an agent judge: gunmetal plates, bolts, stencilled labels, readout numerals, the insignia on the title, lobby and panel. Shots in apps/two-fronts/docs/shots-2026-11-04/; reshoot with bun apps/two-fronts/scripts/menu-shots.ts <dir>.

Next (from round 1's judge): (1) real distress, an edge-wear and grime texture plus plate thickness; (2) brass instead of the leftover flat orange primaries, the Controls tab and slider fill; (3) inner cards as bolted sub-plates with a stencilled header strip, a bigger panel insignia, and maybe the overview list and the strip above the map as a riveted readout, without covering the map. The eqosys sign-in chip, report form and achievement toast take the skin through the hook (#3530 / #3540 / #3541), not here.


Score: 5/10 (target 8)

The owner's brief (2026-11-04): Two Fronts' menus should feel like we are inside a sci-fi warship: distressed metal, techy readouts, the Thunder Marines front and centre. The feeling is power-armoured legions meets a galactic civil war meets a 2210 risk-your-planet board game. The in-game HUD already has a marines voice (--imperial fonts, brass on steel in apps/two-fronts/src/styles.css, .hud-marines, .cut.marines); the panel, lobby, settings, line-up, vote and title surfaces are still flat house UI. Lore in apps/two-fronts/docs/LORE.md, the redesign in docs/REDESIGN.md and docs/mockups.

Never name a commercial game, studio or its characters anywhere (code, comments, commits, PR, this issue). Describe the mechanic and the look.

Goalpost: 8/10 from the owner on the menus

  1. Distressed metal. Panels are plates: brushed steel with worn edges, rivets or hex bolts at the corners, scuffs and oil shadow, a hazard-stripe or warning-chevron accent used sparingly. Stencilled labels, readout numerals in a monospace or squarish technical face. No flat white cards left in the panel, lobby, settings, line-up or vote.
  2. Thunder Marines are the focus. Their insignia and colour (brass on gunmetal, cold blue readouts) lead the title and lobby; the Wooka side keeps its own warmer material where it is theirs.
  3. Artwork, not just CSS. Backplates, bolts, insignia, screen scanlines as real textures: SVG, tiled PNGs made in Blender (headless, or the Blender MCP if it is on) or generated procedurally. Keep each asset small and the page's weight sane (say what each adds).
  4. Still readable. Contrast stays at or above today; the map and battle view stay unobscured; every screen size (phone to desktop) checked with bun run probe two-fronts --shot before the PR.
  5. eqosys menus wear it too. When the eqosys skin hook lands (eqosys menus: a game injects its skin once and every shared surface wears it, hill climb to 8/10, rounds 1+ #3530), the sign-in chip, report form and achievement toast take this skin through it, not through a second stylesheet.

The loop

Each round is one PR against main that says "Part of #N" and commits before/after shots to apps/two-fronts/docs/shots-<date>/. An agent judge scores it against the five points (judges run about two points above the owner). End the round with a comment here starting Score: x/10 (target 8) and ending Next: ..., then open the "rounds N+" issue and close this one with "Moved up to #new". At the target, file a MANUAL RUN: for the owner's own score.

Activity

  1. QuinnsCode commented on Nov 5, 2026

    @QuinnsCode
    OwnerAuthor

    Score: 6.5/10 (target 8)

    Round 2 is in #3564. A fresh judge scored the previous round at 5.5 and this one at 6.5, so the gain stays.

    New this round, about 3.1 KB of SVG:

    • edge.svg (1.2 KB): a chamfered, worn rim drawn as a 9-slice, with a dark lip for thickness.
    • grime.svg (0.9 KB): oil, soot and scratches over the steel.
    • rivets.svg (0.4 KB): riveted seams on the map's readouts and the panel's headers.
    • insignia.svg (+0.6 KB): the Marines' insignia gains chevrons.

    Primary actions and the Controls card's tabs and sliders are brass now. The phase header is a bolted stencil strip, and the status box is a bolted screen.

    Biggest gains per the judge: brass buttons in place of the flat orange, riveted chamfered rims on the title, lobby and line-up, and the inset readout headers in the panel.

    Shots (before on main, now):

    before now
    title, desk
    panel, desk
    lobby, phone
    settings, desk

    All 26 shots (desk, phone, and the panel at tablet) are in apps/two-fronts/docs/shots-2026-11-05/. The small map at tablet width is on main too; it is filed as #3563.

    Next: stamped sub-plates with stencilled labels for the inner cards (war tiles, fleet presets, vote cards), grime you can actually see, gunmetal secondary buttons, the Wooka's controls in wood, a cleaner lobby button row on phones, and the eqosys chip, form and toast once #3540 lands. Details are in #3565.

  2. QuinnsCode commented on Nov 5, 2026

    @QuinnsCode
    OwnerAuthor

    Moved up to #3565

  3. self-assigned this
    on Nov 5, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions