Overlay opacity: global setting + apply to all panels #16

New Issue

claude · 2026-03-21T15:41:52Z

claude commented

2026-03-21 15:41:52 +00:00

Feature

All UI overlays (build menu, villager panel, context menu, ESC menu, confirm dialog, Nisse info panel, debug panel) should use a consistent, slightly transparent background. The opacity should be controllable via a global setting.

Scope

1 — Settings screen (new)

The ESC menu already has a "Settings" button that shows a "coming soon" toast. Replace that with a real Settings overlay containing at least:

Overlay opacity slider or step buttons (e.g. 10 % steps, range 40 %–100 %, default 80 %)

The setting must be persisted (localStorage) and read at scene startup.

2 — Central opacity constant

Introduce a uiOpacity value (read from settings) that is passed to — or read by — all overlay constructors. All panel backgrounds currently use hardcoded alpha values (e.g. 0.88, 0.92, 0.95); replace those with uiOpacity.

3 — Apply to all overlays

Build menu background
Villager panel (V) background
Context menu background
ESC menu background
Confirm dialog background
Nisse info panel background
Debug panel background (F3)

Notes

The setting lives in a new UISettings / settings object in localStorage (separate from game save so a New Game does not wipe it).
Changing the slider should take effect immediately (panels rebuild on next open).
Default opacity: 80 % (visually transparent enough to see the world behind, readable enough to use the UI).

## Feature All UI overlays (build menu, villager panel, context menu, ESC menu, confirm dialog, Nisse info panel, debug panel) should use a consistent, slightly transparent background. The opacity should be controllable via a global setting. ## Scope ### 1 — Settings screen (new) The ESC menu already has a "Settings" button that shows a "coming soon" toast. Replace that with a real Settings overlay containing at least: - **Overlay opacity** slider or step buttons (e.g. 10 % steps, range 40 %–100 %, default 80 %) The setting must be persisted (localStorage) and read at scene startup. ### 2 — Central opacity constant Introduce a `uiOpacity` value (read from settings) that is passed to — or read by — all overlay constructors. All panel backgrounds currently use hardcoded alpha values (e.g. `0.88`, `0.92`, `0.95`); replace those with `uiOpacity`. ### 3 — Apply to all overlays - Build menu background - Villager panel (V) background - Context menu background - ESC menu background - Confirm dialog background - Nisse info panel background - Debug panel background (F3) ## Notes - The setting lives in a new `UISettings` / `settings` object in localStorage (separate from game save so a New Game does not wipe it). - Changing the slider should take effect immediately (panels rebuild on next open). - Default opacity: **80 %** (visually transparent enough to see the world behind, readable enough to use the UI).

tekki added the

feature

improvement

labels 2026-03-21 20:21:11 +00:00

tekki added the

status: in discussion

label 2026-03-21 20:39:35 +00:00

claude commented

2026-03-22 09:25:24 +00:00

A few questions before starting implementation:

Slider vs. step buttons: Phaser has no native slider widget. I'd use − / + step buttons (10 % steps) to match the existing UI style — is that fine, or do you want a draggable slider?
Settings overlay layout: Should the Settings screen appear as a new panel on top of the ESC menu, or should it replace the ESC menu content while open?
Live update: The issue says "panels rebuild on next open". Should an already-open panel (e.g. build menu) immediately reflect the new opacity, or only on next open?
UISettings location: Should the settings object live in a new src/utils/settings.ts module, or be integrated into StateManager?

A few questions before starting implementation: 1. **Slider vs. step buttons:** Phaser has no native slider widget. I'd use `−` / `+` step buttons (10 % steps) to match the existing UI style — is that fine, or do you want a draggable slider? 2. **Settings overlay layout:** Should the Settings screen appear as a new panel on top of the ESC menu, or should it replace the ESC menu content while open? 3. **Live update:** The issue says "panels rebuild on next open". Should an already-open panel (e.g. build menu) immediately reflect the new opacity, or only on next open? 4. **UISettings location:** Should the settings object live in a new `src/utils/settings.ts` module, or be integrated into `StateManager`?

tekki commented

2026-03-22 11:07:59 +00:00

Try it with a slider. This slider would be used at various point, so do it in a way to reuse it.
As an other layer or a seperate scene. ESC Menu can be closed. If ESC is pressed in the Settings (or Button 'Save' or on X) back to the ESC Menu.
If you can make it live make it live. No need to wait.
Settings must be persistent throu multible games. Make it extra. But may do an ref from StateManager to have easy access from the code without needing another class.

1. Try it with a slider. This slider would be used at various point, so do it in a way to reuse it. 2. As an other layer or a seperate scene. ESC Menu can be closed. If ESC is pressed in the Settings (or Button 'Save' or on X) back to the ESC Menu. 3. If you can make it live make it live. No need to wait. 4. Settings must be persistent throu multible games. Make it extra. But may do an ref from StateManager to have easy access from the code without needing another class.

claude referenced this issue from a commit

2026-03-23 09:36:55 +00:00

✨ overlay opacity: global setting + settings screen (Issue #16)

claude referenced a pull request that will close this issue

2026-03-23 09:37:52 +00:00

✨ Overlay opacity: global setting + settings screen #19

claude added

status: review

and removed

status: in discussion

labels 2026-03-23 09:37:59 +00:00

claude referenced this issue from a commit