Skip to main content

​
F043 — Config and Sound Controls

FieldValue
IDF043
Phase3 — UI Controls
JiraHEDGE-78, HEDGE-79
StatusJS ✅ · TS ⬜ · UMA ✅ (2026-04-11)

​
Business Rule

The game provides two persistent icon buttons rendered as HTML overlay elements outside the Phaser canvas:
ButtonClassPositionAction
Config (gear)btnMenuLeftLeft of canvas, near topOpens UIGameSettings modal (sound on/off toggles, spacebar, etc.)
Sound levelbtnMenuRightThirdLeft of canvas, near topCycles sound volume level (UI.SOUND.PLUS)
InfobtnMenuRightFirstRight of canvas, near topOpens 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.

​
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

#CriterionJSTSUMA
AC1Config gear button visible near top-left of canvas✅⬜✅
AC2Sound button visible near top-left of canvas✅⬜✅
AC3Info button visible near top-right of canvas✅⬜✅
AC4Clicking config gear opens UIGameSettings modal✅⬜✅
AC5Sound button cycles volume levels✅⬜⬜ (audio stub)
AC6Modal closes via return button✅⬜✅

​
Version Parity

VersionStatusNotes
JS✅ WorkingFull audio + config modal
TS⬜ Not implementedHTML 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)