> ## Documentation Index
> Fetch the complete documentation index at: https://hedgeem-api.qeetoto.com/llms.txt
> Use this file to discover all available pages before exploring further.

# F043 — Config and Sound Controls

> Gear (settings) and sound-level buttons rendered as HTML overlay on the game canvas

# F043 — Config and Sound Controls

| Field  | Value                            |
| ------ | -------------------------------- |
| ID     | F043                             |
| Phase  | 3 — UI Controls                  |
| Jira   | HEDGE-78, HEDGE-79               |
| Status | JS ✅ · TS ⬜ · UMA ✅ (2026-04-11) |

## Business Rule

The game provides two persistent icon buttons rendered as HTML overlay elements outside the Phaser canvas:

| Button        | Class               | Position                  | Action                                                              |
| ------------- | ------------------- | ------------------------- | ------------------------------------------------------------------- |
| Config (gear) | `btnMenuLeft`       | Left of canvas, near top  | Opens `UIGameSettings` modal (sound on/off toggles, spacebar, etc.) |
| Sound level   | `btnMenuRightThird` | Left of canvas, near top  | Cycles sound volume level (`UI.SOUND.PLUS`)                         |
| Info          | `btnMenuRightFirst` | Right of canvas, near top | Opens `UIInfo` modal (help / paytable)                              |

These buttons are always visible during gameplay. They are NOT part of the Phaser canvas — they live in `#fugaGameUI`, a zero-height HTML div positioned at the canvas bottom.

## Layout Mechanism

The game (game.min.js) adds class `desktop` to `#fugaGame` at boot. CSS in `game.css` then positions the buttons:

```css theme={null}
/* game.css */
.desktop #fugaGameUI {
  position: absolute;
  left: 50%;
  width: 1280px;
  margin-left: -640px;
  height: 0;       /* intentionally zero — buttons float outward */
  /* bottom: 0 required — NOT present in game.css, must be supplied by platform */
}

.desktop #fugaGameUI .btnMenuLeft      { top: -702px; left: -78px; }
.desktop #fugaGameUI .btnMenuRightFirst { top: -650px; right: -69px; }
.desktop #fugaGameUI .btnMenuRightThird { top: -650px; left: -78px; }
```

**Critical:** `game.css` does not supply `bottom: 0`. Without it, `#fugaGameUI` defaults to `top: 0` and all buttons render at `y = -702px` — completely clipped by `#fugaGame { overflow: hidden }`.

**Platform fix** (`index-live.html`):

```css theme={null}
/* Platform override — anchors #fugaGameUI to canvas bottom */
.desktop #fugaGameUI { bottom: 0; }
```

With this, `#fugaGameUI` sits at the canvas bottom and the `top: -702px` buttons appear near the canvas top corners.

## UIGameSettings Modal

`btnMenuLeft` fires `UI.MODALTOGGLE "UIGameSettings"`, which opens the settings panel. The panel includes:

* Sound Music on/off (`UISoundMusicSetting`)
* Sound SFX on/off (`UISoundSFXSetting`)
* Spacebar spin toggle
* Double-up, turbo, cashier button enable/disable (suppressed via null in `SetData` patch)

## Sound Button Levels

`btnSound` is `type: "multilevel"` — each click fires `UI.SOUND.PLUS`, cycling through icon states (`sound_icon_level_0` → `_1` → `_2` → `_3`). The level adjusts the GDK sound volume.

## Acceptance Criteria

| #   | Criterion                                          | JS | TS | UMA            |
| --- | -------------------------------------------------- | -- | -- | -------------- |
| AC1 | Config gear button visible near top-left of canvas | ✅  | ⬜  | ✅              |
| AC2 | Sound button visible near top-left of canvas       | ✅  | ⬜  | ✅              |
| AC3 | Info button visible near top-right of canvas       | ✅  | ⬜  | ✅              |
| AC4 | Clicking config gear opens UIGameSettings modal    | ✅  | ⬜  | ✅              |
| AC5 | Sound button cycles volume levels                  | ✅  | ⬜  | ⬜ (audio stub) |
| AC6 | Modal closes via return button                     | ✅  | ⬜  | ✅              |

## Version Parity

| Version | Status                         | Notes                                           |
| ------- | ------------------------------ | ----------------------------------------------- |
| JS      | ✅ Working                      | Full audio + config modal                       |
| TS      | ⬜ Not implemented              | HTML overlay buttons not yet added              |
| UMA     | ✅ Buttons visible (2026-04-11) | Config modal works; sound stub only (HEDGE-142) |

## Related Features

* F022 — Card Display (canvas rendering, Phaser setup)
* HEDGE-78 — Menu and help screens
* HEDGE-79 — Config button
* HEDGE-142 — UMA sounds (sound button cycles levels but no audio yet)