Skip to main content

​
F044 — Info Modal

FieldValue
IDF044
Phase3 — UI
JiraHEDGE-78 (parent), HEDGE-[i-ticket] (i tab), HEDGE-[?-ticket] (? tab)
StatusTS 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

PageTitleIllustrationText
1IntroTexas Hedge’Em branding/logo”Watch, Predict… Win!” + 3 bullet points
2DEALGame table with DEAL button highlighted”Watch games of Texas Hold’em unfold.” + “Click DEAL as often as you want.”
3PredictTable 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).“
4WinWinner screen / winning hand”Win when you predict correctly!“
5BetChip selector + odds display”Bet on Any Hand, Any Amount*” + “Payout = Odds × Wager” + “*Max bet: £100.00 per hand/round”
6StagesPRE-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.”
7All-winExample: all hands tied (Straight)“All hands can win, as in this example.” + “Draw/Tie pays full-odds.” Caption: “Example: All Hands win! – Straight”
8Combinations10-hand grid with card illustrationsHand names + tie-breaker rules
9Signs ICan’t Lose crown + Dead skullDescriptions for each
10Signs IIStrongest Hand + Best RTP indicatorsDescriptions + “Can be activated/deactivated in Settings”
11Signs IIIMax Bet odometer + PadlockDescriptions for each
12RulesText 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):
KeyText
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_text1Watch games of Texas Hold’em unfold.
hp_page2_text2Click DEAL as often as you want.
hp_page3_text1Predict which hand (or hands) will rank best at end of game.
hp_page3_text2Click on the hand (or hands) to make your prediction and place your bet (or bets).
hp_page4_text1Win when you predict correctly!
hp_page5_text1Bet on Any Hand, Any Amount*
hp_page5_text2Payout = Odds x Wager
hp_page5_text3_small*Max bet: £100.00 per hand/round
hp_page6_text1Bet at any stage: PRE-FLOP, FLOP or TURN
hp_page6_text2Odds/Payouts taken at bet-placement are honoured at end of game.
hp_page7_text1All hands can win, as in this example.
hp_page7_text2Draw/Tie pays full-odds.
hp_page7_text3_imageExample: All Hands win! – Straight
hp_page8_text1Standard 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_text1Wins are paid for highest-ranking hand (or hands if two or more tie)…
hp_page11_text2Wins 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

PageTitleContent
1About + StagesGame description + 4 stage descriptions (PRE-FLOP, FLOP, TURN, RIVER)
2How to Play5-step instructions + payout rules
3Hand Rankings10 hand ranks + 3 tie-breaker rules
4Hand Signs + RTP4 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

TabPages
i12
?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

Versioni 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.