F044 — Info Modal (i + ? tabs)

Field	Value
ID	F044
Phase	3 — UI
Jira	HEDGE-78 (parent), HEDGE-[i-ticket] (i tab), HEDGE-[?-ticket] (? tab)
Status	TS partial ⬜ · JS ⬜ · UMA ✅

Business Rule

The INFO modal is opened by clicking the info button (top-right corner, below the sound button). It contains two tabs accessible via buttons at the bottom-left of the overlay:

“i” tab — 12-page illustrated tutorial. Each page shows a graphical diagram on the left and descriptive text on the right. This is a step-by-step visual walkthrough of how to play.
”?” tab — 4-page text-based rules. Covers game description, how to play, hand rankings, hand signs, and RTP.

Navigation between pages uses ◀ (previous) and ▶ (next) buttons at the bottom-right. A return/close button (↩) also appears bottom-right. Page position is shown by dot indicators at the bottom-centre.

”i” Tab — 12-page Illustrated Tutorial

Page Structure

Page	Title	Illustration	Text
1	Intro	Texas Hedge’Em branding/logo	”Watch, Predict… Win!” + 3 bullet points
2	DEAL	Game table with DEAL button highlighted	”Watch games of Texas Hold’em unfold.” + “Click DEAL as often as you want.”
3	Predict	Table with hands + chip being placed	”Predict which hand (or hands) will rank best at end of game.” + “Click on the hand (or hands) to make your prediction and place your bet (or bets).“
4	Win	Winner screen / winning hand	”Win when you predict correctly!“
5	Bet	Chip selector + odds display	”Bet on Any Hand, Any Amount” + “Payout = Odds × Wager” + “Max bet: £100.00 per hand/round”
6	Stages	PRE-FLOP → FLOP → TURN progression	”Bet at any stage: PRE-FLOP, FLOP or TURN” + “Odds/Payouts taken at bet-placement are honoured at end of game.”
7	All-win	Example: all hands tied (Straight)	“All hands can win, as in this example.” + “Draw/Tie pays full-odds.” Caption: “Example: All Hands win! – Straight”
8	Combinations	10-hand grid with card illustrations	Hand names + tie-breaker rules
9	Signs I	Can’t Lose crown + Dead skull	Descriptions for each
10	Signs II	Strongest Hand + Best RTP indicators	Descriptions + “Can be activated/deactivated in Settings”
11	Signs III	Max Bet odometer + Padlock	Descriptions for each
12	Rules	Text only	”Wins are paid for highest-ranking hand… Malfunction voids all plays and pays.”

Source Locale Strings

From source/client_source/src/locale/en_US/locale.json (hp_ prefix):

Key	Text
hp_page1_text1	– Watch games of Texas Hold’em unfold,
hp_page1_text2	– Predict which hands will rank best at end,
hp_page1_text3	– Win when you predict correctly!
hp_page2_text1	Watch games of Texas Hold’em unfold.
hp_page2_text2	Click DEAL as often as you want.
hp_page3_text1	Predict which hand (or hands) will rank best at end of game.
hp_page3_text2	Click on the hand (or hands) to make your prediction and place your bet (or bets).
hp_page4_text1	Win when you predict correctly!
hp_page5_text1	Bet on Any Hand, Any Amount*
hp_page5_text2	Payout = Odds x Wager
hp_page5_text3_small	*Max bet: £100.00 per hand/round
hp_page6_text1	Bet at any stage: PRE-FLOP, FLOP or TURN
hp_page6_text2	Odds/Payouts taken at bet-placement are honoured at end of game.
hp_page7_text1	All hands can win, as in this example.
hp_page7_text2	Draw/Tie pays full-odds.
hp_page7_text3_image	Example: All Hands win! – Straight
hp_page8_text1	Standard poker-hand-ranking determines winning hand(s).
hp_page9_text1	[Can’t Lose] This sign appears on the hand with 100% winning chance. Wagering on this hand is prohibited.
hp_page9_text2	[Dead] This sign appears on the hand, which cannot win. Wagering on this hand is prohibited.
hp_page9_text3	[Max Bet] This sign appears near the bet string, when Max Bet value is reached.
hp_page9_text4	[Padlock] This sign appears near the bet strings of previous game stages, indicating that bet cannot be changed.
hp_page10_text1	[Strongest Hand] This sign marks the strongest hand. It has the highest win chance.
hp_page10_text2	[Best RTP] The ‘Best RTP’ highlighting marks the ‘fairest’ hand.
hp_page10_text3	*Can be activated/deactivated in Settings
hp_page11_text1	Wins are paid for highest-ranking hand (or hands if two or more tie)…
hp_page11_text2	Wins are displayed in currency. Malfunction voids all plays and pays.

Source HTML Templates

From source/client_source/src/html/game_slideN.html:

Pages 1–7: two-column layout (col l5 image / col l6 text)
Page 8 (combinations.html): 4-column grid of hand combinations
Pages 9–11: badge row layout (col l2 icon / col l8 text)
Page 12 (generalRules.html): full-width text

v5 Atlas References

Illustrations use the help atlas: help_01.png through help_07.png, combination_01.png through combination_10.png, cant_lose.png, dead.png, odds_on.png, best_value.png, help_max_bet.png, lock.png. These atlas frames are not yet ported to v6. The v6 implementation uses programmatic Phaser Graphics illustrations as placeholders.

”?” Tab — 4-page Text Rules

Page Structure

Page	Title	Content
1	About + Stages	Game description + 4 stage descriptions (PRE-FLOP, FLOP, TURN, RIVER)
2	How to Play	5-step instructions + payout rules
3	Hand Rankings	10 hand ranks + 3 tie-breaker rules
4	Hand Signs + RTP	4 indicator descriptions + RTP info + connectivity disclaimer

Source Locale Strings

From source/client_source/src/locale/en_US/locale.json (r_ prefix): Section titles: r_title_1 through r_title_6 Text entries: r_text_1_1, r_text_2_1 through r_text_6_1, hand rankings r_text_3_2_bullet through r_text_3_11_bullet

Technical Design

┌─────────────────────────────────────┐
│  [i] [?]      INFO      [←] [→] [↩] │  ← header row (v5 pattern)
├─────────────────────────────────────┤
│                                     │
│  [illustration]    [text content]   │
│                                     │
├─────────────────────────────────────┤
│  [i][?]   ● ○ ○ ○ ○ ○     [←][→][↩]│  ← footer
└─────────────────────────────────────┘

In v5, the “i”/”?” tab buttons and navigation are all in the footer bar. The header just shows “INFO”.

State

private _infoMode: 'i' | '?';  // active tab
private _infoPage: number;      // current page (0-indexed)

Page Counts

Tab	Pages
i	12
?	4

Acceptance Criteria

”i” tab (12 ACs)

AC1: Page 1 displays branding/logo area + “Watch, Predict… Win!” tagline + 3 bullet points
AC2: Page 2 displays game table illustration with DEAL button + 2 lines of instruction
AC3: Page 3 displays table-with-hands illustration + 2 lines of predict/bet instruction
AC4: Page 4 displays win-screen illustration + “Win when you predict correctly!”
AC5: Page 5 displays chip/odds illustration + bet-any-hand text + Payout = Odds × Wager + max bet note
AC6: Page 6 displays stage-progression illustration + bet-at-any-stage text + odds-lock rule
AC7: Page 7 displays all-hands-win illustration + “All hands can win” + “Draw/Tie pays full-odds” + image caption
AC8: Page 8 displays 10 poker hand combination names in a grid with card representations + 3 tie-breaker rules
AC9: Page 9 displays Can’t Lose icon + description and Dead icon + description
AC10: Page 10 displays Strongest Hand icon + description and Best RTP icon + description + settings note
AC11: Page 11 displays Max Bet icon + description and Padlock icon + description
AC12: Page 12 displays 2 paragraphs of general rules including malfunction disclaimer

”?” tab (4 ACs)

AC13: Page 1 displays game description + “one deck” note + 4 named stage descriptions with PRE-FLOP, FLOP, TURN, RIVER labels
AC14: Page 2 displays 5 numbered how-to-play steps + “Payout rules” section with locked-odds rule
AC15: Page 3 displays all 10 hand rankings in gold text + 3 tie-breaker rules
AC16: Page 4 displays 4 hand indicator descriptions (Can’t Lose, Dead, Padlock, Max Bet) + RTP ~97% + optimal strategy + malfunction disclaimer

AC17: Clicking “i” tab button switches to i-mode; clicking ”?” switches to ?-mode; mode change resets to page 1
AC18: ◀ Prev decrements page; ▶ Next increments page; buttons are hidden/shown at boundaries
AC19: Page dot indicators update to show current page position
AC20: Clicking outside the panel or pressing the ↩ Close button closes the overlay
AC21: Opening the overlay always starts on the “i” tab page 1

Version Parity

Version	i tab	? tab
JavaScript (v4)	⬜ Not audited	⬜ Not audited
TypeScript (v6)	⬜ Implemented (programmatic illustrations, no atlas assets)	✅ Implemented (4 pages)
UMA (v5)	✅ Full atlas illustrations (help_01–07, combinations, badge icons)	✅ Full text rules (8 slides)

Known Gaps

v6 “i” tab uses programmatic Phaser Graphics illustrations; v5 atlas frames (help atlas) not yet ported
v6 page dots show “N / M” text counter; v5 shows individual clickable dot indicators
v5 allows clicking page dots to jump directly to a page; v6 prev/next only

Test Coverage

No Playwright spec yet. Add tests/e2e/info-modal.spec.ts covering ACs 17–21.

Overview

Game Engine

Betting

UI

Config

Bonus

V7 Horse Race

Platform

Lobby

F044 — Info Modal (i + ? tabs)

Business Rule

”i” Tab — 12-page Illustrated Tutorial

Page Structure

Source Locale Strings

Source HTML Templates

v5 Atlas References

”?” Tab — 4-page Text Rules

Page Structure

Source Locale Strings

Technical Design

State

Page Counts

Acceptance Criteria

”i” tab (12 ACs)

”?” tab (4 ACs)

Navigation (shared)

Version Parity

Known Gaps

Test Coverage

​F044 — Info Modal

​Business Rule

​”i” Tab — 12-page Illustrated Tutorial

​Page Structure

​Source Locale Strings

​Source HTML Templates

​v5 Atlas References

​”?” Tab — 4-page Text Rules

​Page Structure

​Source Locale Strings

​Technical Design

​Modal Layout

​State

​Page Counts

​Acceptance Criteria

​”i” tab (12 ACs)

​”?” tab (4 ACs)

​Navigation (shared)

​Version Parity

​Known Gaps

​Test Coverage

F044 — Info Modal

Business Rule

”i” Tab — 12-page Illustrated Tutorial

Page Structure

Source Locale Strings

Source HTML Templates

v5 Atlas References

”?” Tab — 4-page Text Rules

Page Structure

Source Locale Strings

Technical Design

Modal Layout

State

Page Counts

Acceptance Criteria

”i” tab (12 ACs)

”?” tab (4 ACs)

Navigation (shared)

Version Parity

Known Gaps

Test Coverage