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

# F044 — Info Modal (i + ? tabs)

> Two-tab information overlay: illustrated tutorial ('i') and text rules ('?')

# F044 — Info Modal

| 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

### Modal Layout

```
┌─────────────────────────────────────┐
│  [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

```typescript theme={null}
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

### Navigation (shared)

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