Skip to content

Reserve the UI bar height when scaling the game area - #37

Open
soulrap wants to merge 1 commit into
engineio:mainfrom
soulrap:layout-safe-area-bottom
Open

Reserve the UI bar height when scaling the game area#37
soulrap wants to merge 1 commit into
engineio:mainfrom
soulrap:layout-safe-area-bottom

Conversation

@soulrap

@soulrap soulrap commented Aug 28, 2026

Copy link
Copy Markdown

The game area and the UI bar are laid out in two design boxes that happen to share the same 1.78 ratio - the board in the game's mainSizesMap (1422x800 for scatter), the bar in STANDARD_MAIN_SIZES_MAP (1920x1080), bottom-aligned via <MainContainer standard alignVertical=bottom>. Once the canvas is wider than that ratio the height binds for both. The board takes the full canvas height and centres; the bar is anchored to the bottom of the same canvas; the bottom row of the board renders behind it. Reproduced on scatter at 1194x518 (ratio 2.31) - the last symbol row is completely covered. At 984x858 (ratio 1.15) width binds instead and there is no overlap, which is why this is easy to miss on a normal desktop window. Add an optional safeAreaBottomMap to createLayout. The reserved strip is subtracted before the scale is derived, and the game area centres in what is left rather than in the whole canvas. It defaults to 0, so a layout that does not set it produces identical numbers to before. scatter opts in here as a worked example. The other five samples have the same latent overlap and can adopt it with their own values. Co-Authored-By: Claude Opus 5 noreply@anthropic.com

The game area and the UI bar are laid out in two design boxes that happen to
share the same 1.78 ratio - the board in the game's `mainSizesMap`
(1422x800 for scatter), the bar in `STANDARD_MAIN_SIZES_MAP` (1920x1080),
bottom-aligned via `<MainContainer standard alignVertical="bottom">`.

Once the canvas is wider than that ratio the height binds for both. The board
takes the full canvas height and centres; the bar is anchored to the bottom of
the same canvas; the bottom row of the board renders behind it. Reproduced on
scatter at 1194x518 (ratio 2.31) - the last symbol row is completely covered.
At 984x858 (ratio 1.15) width binds instead and there is no overlap, which is
why this is easy to miss on a normal desktop window.

Add an optional `safeAreaBottomMap` to `createLayout`. The reserved strip is
subtracted before the scale is derived, and the game area centres in what is
left rather than in the whole canvas. It defaults to 0, so a layout that does
not set it produces identical numbers to before.

scatter opts in here as a worked example. The other five samples have the same
latent overlap and can adopt it with their own values.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant