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:

/* 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):

/* 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. 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)

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)

Overview

Game Engine

Betting

UI

Config

Bonus

V7 Horse Race

Platform

Lobby

F043 — Config and Sound Controls

F043 — Config and Sound Controls

Business Rule

Layout Mechanism

Sound Button Levels

Acceptance Criteria

Version Parity

​F043 — Config and Sound Controls

​Business Rule

​Layout Mechanism

​UIGameSettings Modal

​Sound Button Levels

​Acceptance Criteria

​Version Parity

​Related Features

F043 — Config and Sound Controls

Business Rule

Layout Mechanism

UIGameSettings Modal

Sound Button Levels

Acceptance Criteria

Version Parity

Related Features