Skip to content

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

Closed

Description

@QuinnsCode

Score: 0/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: 5/10 (target 8)

    Round 1, PR #3542 (CI green). An agent judge scored BEFORE 2.5 and NOW 5.0 against the five points, so the round stays. Judges run about two points high, so read this as direction.

    What's in: the panel (and the sheet under the map on a phone), the title, lobby, line-up, vote and Controls card are brushed-gunmetal plates with hex bolts, a worn bevel and an oil-shadow vignette. Choices sit in recessed screens with cold-blue scanlines, labels are stencilled, numerals are readouts and titles are brass. The Thunder Marines insignia (a brass winged shield, blue lightning) leads the title, lobby and panel; the Wooka card keeps warm wood. One hazard stripe per screen. Assets: steel.svg 0.9 KB, bolt.svg 0.6 KB, insignia.svg 1.2 KB, plus one stencil font (about 15 KB).

    Readable: contrast measured off the panel shot went up (main text 12.7 to 14.2:1, dim text 6.2 to 7.3:1). Nothing new sits on the map. The judge found regressions (the lobby overflowed on a desk, bolts floated over scrolled content, the stripe crowded the phone sheet, the vote label wrapped). They're fixed in the same PR and re-shot.

    Shots (before and now, desk and phone; bun apps/two-fronts/scripts/menu-shots.ts <dir> reshoots all twelve):

    Next: (1) Real distress: an edge-wear and grime texture (chipped lighter rims, oil pooling by the bolts and bottom edges) and plate thickness, so the plates read as worn rather than just brushed. (2) Swap the leftover flat orange primaries (Against the AI, Hold the line, Use this fleet, Later, Deploy, the Controls tab and slider fill) for brass plates with engraved labels and a pressed state; keep warm orange only where the Wooka own it. (3) Turn the inner cards (presets, vote cards, war options, Controls sections) into bolted sub-plates with a stencilled header strip, make the panel's insignia bigger, and consider the overview list and the strip above the map as a riveted readout, without covering the map. Leave the eqosys sign-in chip, report form and achievement toast to the skin hook (#3530 / #3540 / #3541) instead of restyling them here.

  2. QuinnsCode commented on Nov 5, 2026

    @QuinnsCode
    OwnerAuthor

    Moved up to #3546

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions