Insert menu redesign: toggles, selectors, sections, detail panel, menu position (mockup + spec) #783

Closed

opened 2026-11-08 21:04:28 +00:00 by EjianYT · 1 comment

EjianYT commented

2026-11-08 21:04:28 +00:00

(Migrated from github.com)

The idea

A redesign of the Insert menu so it reads like a finished game options screen, without changing what any option
does. Mockup attached. Original design: no game assets, logos, frames or fonts.

Layout (all sizes at 1080p; scale by u = window height / 1080, not scale_of()'s integer h/720,

which would double everything at 1440p)

Panel 1240x820, opaque, centered (see "Menu position" below). 1px border bronze, plus a 1px inner line 6px inside.
Corner ticks: L-shapes 26px long, 3px thick, gold, on the 4 corners.
Header 86px: small gold diamond + "HOOKSHOT" (30px, letter-spaced), a 1px divider, then tabs "OPTIONS" / "CONTROLS"
(17px semibold uppercase; active tab has a 3px gold underline). Version right-aligned (15px, dim).
The tabs replace the "Controls" row: the Controls page becomes the second tab.
Body: list column 800px wide | 1px divider | detail panel.
Footer 64px: keyboard hints left (key caps: 1px bronze border, 3px bottom border), gamepad hints right
(D-pad and face-button glyphs drawn as small squares/dots, the active one gold).

List column

Section headers: GRAPHICS (Quality preset, Resolution, Upscaling, Sharpness, Ultrawide, Fullscreen),
PERFORMANCE (Frame generation, Frame pacing, Game speed, FPS counter),
GAME (Text speed, Handheld profile, Controller in background).
15px letter-spaced bronze text followed by a 1px line to the column's edge.
Rows 38px high, label 19px at x=40. Control cell 300x30, right-aligned 32px from the column's edge.
Selected row: background fill + a 5px gold bar on the left edge; its control gets a 2px gold border.
Options that need a restart get a small "RESTART" tag (11px, 1px border) left of the control, instead of
"(restart)" in the value text.

Which control each row gets (from the existing Row fields, no new data needed)

text == tx_onoff -> toggle: two segments "On | Off", the current one filled.
lo == 0 && hi == 1, any other text -> two segments with text(0) | text(1) (strip " (restart)"), e.g. Ultrawide
"16:9 | Monitor", Game speed "Per frame | Real time".
text == tx_percent (Sharpness) -> bar: filled to value%, ticks every 10%, value right-aligned inside.
everything else -> selector: "◀ value ▶". On the selected row the whole cell is filled gold
with dark text.
Left/Right keep working exactly as now for all of them.

Detail panel (right)

Section name (13px, bronze, letter-spaced), option name (34px).
For toggles/selectors: every choice listed as a row 52px high (loop lo..hi by step, text(v)), the current one with a
filled gold diamond and a lighter background, the others with an outlined diamond. Optional short note per choice
(would need a new field; can be left out).
Then the existing help text (18px, wrapped with wrap_help) and "Default: ".

Colours (RGB)

Implementation notes

Everything is filled rectangles and text, so it stays within what paint_menu uses today and what the POSIX GDI
stand-in supports (FillRect, TextOutA, CreateFontA). The diamonds and ◀ ▶ arrows can be drawn as stacked 1px
FillRects instead of glyphs, so they look the same on Linux.
Fonts in the mockup are Marcellus SC (titles) and Source Sans 3 (body), both SIL OFL. Keeping Segoe UI is fine
if bundling fonts is not wanted.
The menu bitmap is still copied opaque over the picture, as now.

(Claude Code Generated)

Anything else

No response

### The idea A redesign of the Insert menu so it reads like a finished game options screen, without changing what any option does. Mockup attached. Original design: no game assets, logos, frames or fonts. ## Layout (all sizes at 1080p; scale by u = window height / 1080, not scale_of()'s integer h/720, ## which would double everything at 1440p) - Panel 1240x820, opaque, centered (see "Menu position" below). 1px border bronze, plus a 1px inner line 6px inside. - Corner ticks: L-shapes 26px long, 3px thick, gold, on the 4 corners. - Header 86px: small gold diamond + "HOOKSHOT" (30px, letter-spaced), a 1px divider, then tabs "OPTIONS" / "CONTROLS" (17px semibold uppercase; active tab has a 3px gold underline). Version right-aligned (15px, dim). The tabs replace the "Controls" row: the Controls page becomes the second tab. - Body: list column 800px wide | 1px divider | detail panel. - Footer 64px: keyboard hints left (key caps: 1px bronze border, 3px bottom border), gamepad hints right (D-pad and face-button glyphs drawn as small squares/dots, the active one gold). ## List column - Section headers: GRAPHICS (Quality preset, Resolution, Upscaling, Sharpness, Ultrawide, Fullscreen), PERFORMANCE (Frame generation, Frame pacing, Game speed, FPS counter), GAME (Text speed, Handheld profile, Controller in background). 15px letter-spaced bronze text followed by a 1px line to the column's edge. - Rows 38px high, label 19px at x=40. Control cell 300x30, right-aligned 32px from the column's edge. - Selected row: background fill + a 5px gold bar on the left edge; its control gets a 2px gold border. - Options that need a restart get a small "RESTART" tag (11px, 1px border) left of the control, instead of "(restart)" in the value text. ## Which control each row gets (from the existing Row fields, no new data needed) - text == tx_onoff -> toggle: two segments "On | Off", the current one filled. - lo == 0 && hi == 1, any other text -> two segments with text(0) | text(1) (strip " (restart)"), e.g. Ultrawide "16:9 | Monitor", Game speed "Per frame | Real time". - text == tx_percent (Sharpness) -> bar: filled to value%, ticks every 10%, value right-aligned inside. - everything else -> selector: "◀ value ▶". On the selected row the whole cell is filled gold with dark text. Left/Right keep working exactly as now for all of them. ## Detail panel (right) - Section name (13px, bronze, letter-spaced), option name (34px). - For toggles/selectors: every choice listed as a row 52px high (loop lo..hi by step, text(v)), the current one with a filled gold diamond and a lighter background, the others with an outlined diamond. Optional short note per choice (would need a new field; can be left out). - Then the existing help text (18px, wrapped with wrap_help) and "Default: <value>". ## Colours (RGB) panel 29,23,16 | rules/dividers 59,47,32 | outer border (bronze) 140,106,60 | inner line 42,32,22 selected row 58,43,25 | gold 227,182,96 | text 239,228,204 | labels 216,204,178 | muted 163,146,122 dim 111,98,79 | control background 18,13,8 | control border 74,58,36 | active segment / bar fill 160,123,58 dark text on gold 26,18,8 | help text 196,182,156 | detail choice background 36,28,19 ## Implementation notes - Everything is filled rectangles and text, so it stays within what paint_menu uses today and what the POSIX GDI stand-in supports (FillRect, TextOutA, CreateFontA). The diamonds and ◀ ▶ arrows can be drawn as stacked 1px FillRects instead of glyphs, so they look the same on Linux. - Fonts in the mockup are Marcellus SC (titles) and Source Sans 3 (body), both SIL OFL. Keeping Segoe UI is fine if bundling fonts is not wanted. - The menu bitmap is still copied opaque over the picture, as now. (Claude Code Generated) <img width="1920" height="1080" alt="Image" src="https://github.com/user-attachments/assets/f9064065-1d5d-4825-8560-a560d3e890eb" /> ### Anything else _No response_

👍 1

NotRexed commented

2026-11-09 05:57:00 +00:00

(Migrated from github.com)

Thanks for the idea. Feature requests are now collected in #1007, which lists this one with a link back here, so closing it in favour of that list (this is not a decision against the idea).

👍 1

Commenting is not possible because the repository is archived.