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.
HedgeEm UI Component Inventory
This page catalogues every visual and interactive UI component that makes up a HedgeEm game. Components are grouped into two categories:- Common — present in every HedgeEm game variant (JS, TypeScript, UMA, V7)
- V7-specific — unique to the horse-race skin in hedgeem-v7
Common Components
These components appear in all game variants. The implementation differs per skin but the business function is identical.| Component | Description | Feature ID | V7 Implementation |
|---|---|---|---|
| Hole card display | Two face-up cards shown per hand from deal onwards | F022 | SVG cards in info panel rows, tilted ±5° |
| Community card display | 5 board cards revealed progressively (3 at FLOP, 1 at TURN, 1 at RIVER) | F022 | SVG cards positioned right of fence posts in grass area |
| Odds display | Win probability shown as X:1 ratio per hand, updated each stage | F024 | Gold text in info panel rows (hr-odds) |
| Hand name display | Short hand description (e.g. “Pair of Kings”) per hand per stage | F023 | hr-hand text in info panel rows |
| Stage advance button | Primary CTA to advance game from HOLE→FLOP→TURN→RIVER→new round | F021 | Gold ▶ RUN / ▶ DEAL button below track |
| Stage label | Text description of current game state shown near advance button | F028 | Italic gold label below RUN button |
| Chip selector | Row of betting chip denominations (50p, £1, £2, £5, £10, £20) | F029 | Coloured circular chip buttons, active chip highlighted |
| Bet placement UI | Click a hand to place the selected chip denomination as a bet | F011 | Click horse row in info panel |
| Bet badge | Confirms active bet amount on a hand | F011 | Teal Bet: £X.XX badge inside horse info row |
| Clear bets button | Cancels all bets placed in the current stage | F012 | Outline gold button next to bet hint |
| Credits / wallet display | Running credit total visible at all times | F016 | Credits: £X.XX above chip row |
| Win / payout screen | Full-screen overlay announcing win amount with animation | F027 | Dark overlay with trophy, horse name, amount + coin fall |
| Coin animation | Celebratory coins burst on a win | F048 | 45 animated gold coins falling from top of track |
| Commentator / speech bubble | Character with speech bubble delivering stage commentary | — | Top-hat figure in grass area, right of RIVER sign; bubble appears/fades on each stage |
| Sound / ambient audio | Crowd noise, hoofbeats, bugle call, win fanfare | F060, F061 | Web Audio API; gallop loop, ambient MP3, bugle MP3 |
V7-Specific Components
These components are unique to the horse-race skin and have no equivalent in JS or TypeScript variants.| Component | Description | Source / Notes |
|---|---|---|
| Race track | Sandy dirt track with 4 baked-in lane dividers | course.png — background-size: 100% 100% on .dirt |
| Grass area | Green strip above track, holds community cards and commentator | CSS gradient, top:82px height:80px |
| Crowd stand | Coloured dot crowd at top of track | 230 random-coloured dots, crowd-dots div |
| Fence rail | White rail separating grass from dirt | CSS white bar at top:156px height:12px |
| Starting gates | Gate structure at left edge of track; closed at HOLE, opens at FLOP | gates.png background-image; clipped to 40px (frame only) at HOLE, expands to 90px at FLOP via .open class |
| Horse SVG | Animated horse + jockey sprite per lane | Inline SVG, 116×86px; body, legs, tail, jockey all individually animated |
| Horse gallop animation | Continuous body bounce + leg cycling while race is in progress | CSS @keyframes gallop-bounce, leg-fl/fr/rl/rr, tail-wave at 0.36s cycle |
| Horse jump animation | Leap animation as horse clears each hurdle | CSS @keyframes horse-jump 0.8s; triggered when nose is ~20px before fence post |
| Eliminated horse | Dead horse flipped upside-down in greyscale after 0% win probability | .eliminated class: rotate(180deg), grayscale(.9), opacity:.5; persists until next HOLE |
| Saddle number badge | Coloured rectangle on horse flank showing lane number (gate-panel colours: 1=red, 2=silver, 3=blue, 4=gold) | .horse-num; jiggles in sync with gallop-bounce; hidden behind gate z-index at HOLE |
| Horse info panel | Left panel with one row per horse; rows vertically aligned with track lanes | 220px wide, 166px top spacer, 71px rows (LANE_H) |
| Horse info row | Per-lane display: number badge → horse name → hand name → bet badge → hole cards → odds | .horse-row; clickable to place a bet |
| Hurdles / hedges | SVG fence posts at FLOP (24%), TURN (54%), RIVER (80%) track positions | .hurdle — makeHurdleSVG(), fades to 30% opacity after cleared |
| Stage flags | Circular FLOP / TURN / RIVER signs on poles in the grass, at hurdle positions | .fence-flag — makeFlagSVG(); red/orange/blue |
| Community cards in grass | Board cards displayed in grass area to the right of each fence post | .board-card-spot at translateX(25px) from fence position; FLOP cards tilted ±5° |
| Finish flag | Green flag at right edge of track, appears when race ends | .finish-flag, right:52px |
| Winner label | Gold 🏆 [Horse Name] badge above winning horse after race | .winner-label animated pop, z-index:20 |
| Win screen overlay | Full-screen semi-transparent overlay with winner details | .win-screen, sits inside .track-container at z-index:50 |
Layout Constants (V7)
These values are fixed design constants. Do not change without updating all dependent components.| Constant | Value | Used by |
|---|---|---|
| Track container height | 452px | .track-container, gate height calc |
| Crowd height | 82px | .crowd, spacer, commentator position |
| Grass height | 80px (top 82–162px) | .grass, commentator bottom alignment |
| Fence rail height | 12px (top 156–168px) | .fence-rail |
| Dirt / lane section top | 166px | .dirt, .gate-wrap, .hurdle |
| Dirt height | 286px (452−166) | Gate image height, hurdle height |
| Lane height | 71px (LANE_H) | Horse positioning, info panel rows |
| Number of lanes | 4 (NUM_LANES) | Horse count, gate image |
| Info panel width | 220px | .info-panel, track flex layout |
| Info panel top spacer | 166px | .info-panel-spacer |
| FLOP fence position | 24% | Hurdle, flag, board-card-spot |
| TURN fence position | 54% | Hurdle, flag, board-card-spot |
| RIVER fence position | 80% | Hurdle, flag, board-card-spot, commentator (82%) |
| Horse transition speed | 2800ms | .horse-unit CSS transition + JS TRANSITION |
| Gallop cycle | 0.36s | All gallop / saddle-badge animations |
| Jump duration | 0.8s | horse-jump keyframe |