Skip to main content

Bet Panel Phase 4 — Fixes & Redesign

Branch: feat/bet-panel | Worktree: bet-panel/ Reference: 1exch.com (screenshots in docs/bet-panel/screenshots/) Date: 2026-02-13

1. Auto-show bet panel on odds click​

When addBet() is called, force panelVisible = true regardless of toggle state.

  • betPanelSettingsStore.ts: add ensurePanelVisible() — sets panelVisible = true (never hides)
  • betSlipStore.ts: in addBet(), call useBetPanelSettingsStore.getState().ensurePanelVisible()

2. Collapsible panels — better chevrons​

TossAnalysisPanel chevron update:

  • w-4 h-4 text-slate-400 -> w-5 h-5 text-slate-300
  • Wrap in circle: w-8 h-8 rounded-full bg-white/5 hover:bg-white/10 flex items-center justify-center
  • Add rotation transition: transition-transform duration-200 + rotate-180 when expanded

Note: SessionPanel does not have a collapsible header/chevron pattern, so only TossAnalysisPanel was updated.

3. Remove gap between tabs and content​

Remove spacing between FixtureTabBar and the content below it on fixture page.

  • FixtureTabBar.tsx: removed mb-4 from outer div

4. Match Scoreboard Card​

New component: MatchScoreboard.tsx

Placed between breadcrumbs and FixtureExposure. Replaces previous inline compact header.

+-----------------------------------------------------------+
| [Team A Logo] [bat icon if batting]  In Play  [Team B Logo]|
|                                                            |
|  United States of America      150/3      Netherlands      |
|                                15.2 Ovs                    |
|                                                            |
|              Netherlands bowling · Target: 165     [chevron]|
+-----------------------------------------------------------+
| Vol: 1.2M                                     [AI button] |
+-----------------------------------------------------------+

Design details:

  • Collapsible via chevron (bottom center), starts expanded
  • Team logos from teamLogos.ts (xl size), fallback: first-letter avatar
  • Batting indicator: CricketBatIcon SVG positioned absolutely on batting team's logo
  • "In Play" badge: bg-emerald-500/20 text-emerald-400 border border-emerald-500/30 with glow shadow — glassmorphic pill
  • Score: sport-aware with formatPeriod() helper
    • Cricket: 150/3 + 15.2 Ovs (from CricketMatchContext)
    • Soccer: 2 - 1 + 1st Half / 2nd Half / Full Time
    • Tennis: 6 - 4 + Set 2
    • Basketball: 89 - 76 + 3rd Qtr
    • Ice Hockey: 3 - 1 + 2nd Period
    • Pre-match: start time display
  • Cricket info footer: bowling team + target (from CricketMatchContext)
  • Volume + AI button row at bottom
  • Card: bg-slate-800/50 border border-white/[0.08] rounded-xl

5. Match Info Tab Redesign​

5.1 Eliminate Ball by Ball tab​

Fixture page becomes 2 tabs: Market | Match Info

Delete BallByBallTab.tsx. Move recent balls visualization into Match Info.

5.2 Cricket Match Info — 3 icon sub-tabs​

For live cricket, Match Info shows 3 icon sub-tabs (matching 1exch):

Sub-tab 1: Commentary (speech bubble icon MessageSquare)

  • Recent balls: horizontal row of ~32px circles, grouped by over
    • Dot ball: 0 in muted circle (bg-slate-700/50 text-slate-400)
    • 1, 2, 3 runs: white number in muted circle (bg-slate-700/50 text-white)
    • 4 runs: white 4 in green circle (bg-emerald-500 text-white)
    • 6 runs: white 6 in purple circle (bg-purple-500 text-white)
    • Wicket: white W in red circle (bg-red-500 text-white)
    • Wide/NoBall: small text indicator below circle
  • Over separator: subtle vertical line between overs
  • Auto-scroll to latest
  • Commentary text below balls when available

Sub-tab 2: Stats (people icon Users)

  • Stats row: 4 equal columns
    • CRR (current run rate) | P'SHIP runs (balls) | RRR (required run rate) | LAST WKT
    • Bold values, muted labels
  • Batsmen table: Batsmen | R | B | 4s | 6s | SR
    • Striker marked with *
    • Data: CricketMatchContext.currentBatsmen[]
  • Bowler table: Bowler | O | M | R | W | Eco
    • Data: CricketMatchContext.currentBowler
  • Clean horizontal dividers, left-aligned labels, right-aligned numbers

Sub-tab 3: Scorecard (bar chart icon BarChart3)

  • Innings header: team name, innings number, score (overs), run rate
  • Current batsmen at crease (same data as Stats, scorecard layout)
  • Current bowler stats
  • Extras breakdown: b, lb, w, nb
  • Current partnership: runs (balls)
  • Fall of wickets summary: 1-15 (Player A, 2.3 ov)
  • 2nd innings: target info panel with runs needed + required rate
  • Data: from CricketMatchContext.fallOfWickets[], extras, currentBatsmen, currentBowler

5.3 Non-cricket / pre-match​

No sub-tabs. Show match details, AI analysis prompt, markets below.

5.4 Backend changes​

Extended ballByBallService.ts MatchContext and clientWs.ts CricketMatchContext with:

  • currentBatsmen[] (playerName, runs, balls, fours, sixes, strikeRate, onStrike)
  • currentBowler (playerName, overs, maidens, runs, wickets, economy)
  • partnershipDetail (runs, balls)
  • lastWicket (formatted string)
  • overs (e.g., "15.2")
  • fallOfWickets[] (wicketNumber, playerName, runs, score, overs)
  • extras (total, wides, noBalls, byes, legByes)

Data extraction in updateContextFromMatchState() from event.live.* fields. FoW accumulated in handleWicketEvent() and also extracted from event.live.fall_of_wickets. Both reset on innings change in updateContextForInningsChange().

Frontend types in cricketApi.ts CricketMatchContext — matches backend 1:1.

6. Sport Selector on Fixture Page​

New component: SportSelector.tsx

Horizontal scrollable pill bar placed ABOVE breadcrumbs.

[All Live] [Cricket*] [Soccer] [Tennis] [Basketball] ...
  • Active: bg-red-500 text-white filled pill
  • Inactive: bg-slate-800 border border-white/10 text-slate-300 hover:bg-slate-700
  • Clicking navigates to /live?sportId=X
  • Current fixture's sportId pre-selected
  • Overflow: overflow-x-auto scrollbar-hide CSS
  • Compact: h-8 text-sm rounded-lg px-3
  • Data: static from sportInfo.ts

Back button in breadcrumb: w-9 h-9 rounded-xl bg-white/5 hover:bg-white/10 with ArrowLeft w-5 h-5.

Files Summary​

New files​

FilePurpose
MatchScoreboard.tsxCollapsible match card with team logos, score, live badge, sport-specific period formatting
SportSelector.tsxHorizontal sport pill selector for fixture page
CricketBatIcon.tsxSmall SVG bat icon component

Modified files​

FileChanges
betPanelSettingsStore.tsAdd ensurePanelVisible() action
betSlipStore.tsCall ensurePanelVisible() in addBet()
fixture/[id]/page.tsxAdd SportSelector + MatchScoreboard, remove compact header, remove Ball by Ball tab, remove spacing
FixtureTabBar.tsxRemove ball-by-ball tab, 2 tabs only, remove mb-4
MatchInfoTab.tsxMajor rewrite: 3 icon sub-tabs for cricket (Commentary, Stats, Scorecard)
FixtureBreadcrumb.tsxLarger back button
TossAnalysisPanel.tsxBetter chevron styling (circle container + rotation)
cricketApi.ts (frontend)Extended CricketMatchContext with batsmen/bowler/partnership/FoW/extras
ballByBallService.ts (backend)Extended MatchContext, extract batsmen/bowler/partnership/FoW/extras from Roanuz
clientWs.ts (backend)Extended CricketMatchContext type to match

Deleted files​

FileReason
BallByBallTab.tsxMerged into MatchInfoTab