141 lines
7.3 KiB
Markdown
141 lines
7.3 KiB
Markdown
---
|
|
phase: 01-tournament-engine
|
|
plan: 11
|
|
subsystem: ui
|
|
tags: [sveltekit, svelte5, catppuccin, clock-display, financials, activity-feed, bubble-prize, chop-deal, websocket]
|
|
|
|
# Dependency graph
|
|
requires:
|
|
- phase: 01-tournament-engine
|
|
provides: Clock engine API (Plan D), Financial engine API (Plan F), Tournament lifecycle API (Plan I), UI shell with layout/header/FAB/toast/DataTable/WS client (Plan J/10/13)
|
|
provides:
|
|
- Overview tab with large clock display, break/pause overlays, player count, table balance status, financial summary, activity feed
|
|
- Financials tab with prize pool breakdown, payout preview, bubble prize flow, chop/deal wizard, transaction list
|
|
- ClockDisplay component with urgent pulse, hand-for-hand badge, next level preview, chip-up indicator
|
|
- ActivityFeed component with type-specific icons/colors and relative timestamps
|
|
- PrizePoolCard component with collapsible breakdown table
|
|
- BubblePrize component with prominent button and preview redistribution flow
|
|
- DealFlow component supporting ICM, chip chop, even chop, custom, and partial chop
|
|
- TransactionList component with type filter chips, search, and swipe-to-undo
|
|
- Extended tournament store types (ClockSnapshot, FinancialSummary, Transaction, Deal types)
|
|
- Derived state: bustedPlayers, averageStack, totalChips
|
|
affects: [01-14]
|
|
|
|
# Tech tracking
|
|
tech-stack:
|
|
added: []
|
|
patterns: [clock-display-responsive-sizing, activity-feed-slide-animation, multi-step-wizard-flow, filter-chips-pattern, collapsible-card-pattern]
|
|
|
|
key-files:
|
|
created:
|
|
- frontend/src/lib/components/ClockDisplay.svelte
|
|
- frontend/src/lib/components/BlindInfo.svelte
|
|
- frontend/src/lib/components/ActivityFeed.svelte
|
|
- frontend/src/lib/components/PrizePoolCard.svelte
|
|
- frontend/src/lib/components/TransactionList.svelte
|
|
- frontend/src/lib/components/BubblePrize.svelte
|
|
- frontend/src/lib/components/DealFlow.svelte
|
|
modified:
|
|
- frontend/src/routes/overview/+page.svelte
|
|
- frontend/src/routes/financials/+page.svelte
|
|
- frontend/src/lib/stores/tournament.svelte.ts
|
|
|
|
key-decisions:
|
|
- "ClockDisplay uses clamp(3rem, 12vw, 6rem) for responsive timer sizing across mobile/desktop"
|
|
- "Unicode escapes in Svelte templates must use HTML entities (&#x...;) not JS escapes (\\u{...}) to avoid Svelte parser treating braces as expression blocks"
|
|
- "BubblePrize is a standalone prominent button (not buried in menus) per CONTEXT.md requirement"
|
|
- "DealFlow uses multi-step wizard pattern (type > input > review > confirm) for all 5 deal types"
|
|
- "Transaction undo uses window.confirm for confirmation (not custom modal) matching touch-first simplicity"
|
|
|
|
patterns-established:
|
|
- "Multi-step wizard: state machine with step variable, each step renders different UI"
|
|
- "Filter chips: scrollable horizontal row of toggleable buttons for data filtering"
|
|
- "Collapsible card: button header with expand/collapse toggle and animated content"
|
|
- "Activity feed: type-icon mapping function returns { icon, color } per entry type"
|
|
|
|
requirements-completed: [CHIP-03, CHIP-04, MULTI-02]
|
|
|
|
# Metrics
|
|
duration: 8min
|
|
completed: 2026-03-01
|
|
---
|
|
|
|
# Phase 01 Plan 11: Overview + Clock + Financials Views Summary
|
|
|
|
**Overview tab with responsive clock display, real-time activity feed, and Financials tab with prize pool breakdown, bubble prize flow, ICM/custom chop-deal wizard, and filterable transaction list**
|
|
|
|
## Performance
|
|
|
|
- **Duration:** 8 min
|
|
- **Started:** 2026-03-01T07:15:06Z
|
|
- **Completed:** 2026-03-01T07:23:35Z
|
|
- **Tasks:** 2
|
|
- **Files modified:** 10
|
|
|
|
## Accomplishments
|
|
- Overview tab assembles all priority items from CONTEXT.md: large clock (40% viewport), break countdown, player count with avg stack, table balance status, financial summary card, activity feed
|
|
- Financials tab with collapsible prize pool breakdown, payout preview table, prominent bubble prize button, 5-type chop/deal wizard, and filterable transaction list with swipe-to-undo
|
|
- Extended tournament store with detailed clock fields (bb_ante, game_type, hand_for_hand, next level info), financial breakdown fields, Transaction type, and Deal types
|
|
|
|
## Task Commits
|
|
|
|
Each task was committed atomically:
|
|
|
|
1. **Task K1: Overview tab with clock display and activity feed** - `e7da206` (feat)
|
|
2. **Task K2: Financials tab with prize pool, bubble prize, and chop/deal** - `5e18bbe` (feat)
|
|
|
|
## Files Created/Modified
|
|
- `frontend/src/lib/components/ClockDisplay.svelte` - Large countdown timer with break/pause overlays, urgent pulse, next level preview
|
|
- `frontend/src/lib/components/BlindInfo.svelte` - Time-to-break countdown display
|
|
- `frontend/src/lib/components/ActivityFeed.svelte` - Recent actions with type icons, relative timestamps, slide-in animation
|
|
- `frontend/src/lib/components/PrizePoolCard.svelte` - Collapsible prize pool breakdown with rake and guarantee
|
|
- `frontend/src/lib/components/TransactionList.svelte` - DataTable-based transaction list with type filter and swipe undo
|
|
- `frontend/src/lib/components/BubblePrize.svelte` - Prominent bubble prize button with preview redistribution flow
|
|
- `frontend/src/lib/components/DealFlow.svelte` - Multi-step chop/deal wizard (ICM, chip chop, even, custom, partial)
|
|
- `frontend/src/routes/overview/+page.svelte` - Full overview page with all priority components
|
|
- `frontend/src/routes/financials/+page.svelte` - Full financials page with all sub-components
|
|
- `frontend/src/lib/stores/tournament.svelte.ts` - Extended types and derived state properties
|
|
|
|
## Decisions Made
|
|
- ClockDisplay uses `clamp(3rem, 12vw, 6rem)` for responsive timer sizing that adapts to screen width
|
|
- Unicode escapes in Svelte HTML templates require HTML entities (`&#x...;`) instead of JS escapes (`\u{...}`) because Svelte parser treats `{` as expression start
|
|
- BubblePrize placed as prominent standalone button per CONTEXT.md ("not buried in menus")
|
|
- DealFlow implements state-machine wizard pattern for clean multi-step flows
|
|
- Transaction undo uses `window.confirm()` for simplicity in a touch-first TD interface
|
|
|
|
## Deviations from Plan
|
|
|
|
### Auto-fixed Issues
|
|
|
|
**1. [Rule 3 - Blocking] Fixed Svelte template unicode escape parsing**
|
|
- **Found during:** Task K2 (BubblePrize and DealFlow components)
|
|
- **Issue:** `\u{1F3C6}` in Svelte template HTML was parsed as `\u` + Svelte expression `{1F3C6}`, causing "Identifier directly after number" errors
|
|
- **Fix:** Replaced all `\u{...}` in HTML template sections with HTML entities `&#x...;`
|
|
- **Files modified:** BubblePrize.svelte, DealFlow.svelte
|
|
- **Verification:** svelte-check passes with 0 errors
|
|
- **Committed in:** 5e18bbe (Task K2 commit)
|
|
|
|
---
|
|
|
|
**Total deviations:** 1 auto-fixed (1 blocking)
|
|
**Impact on plan:** Trivial syntax fix required for Svelte template compatibility. No scope creep.
|
|
|
|
## Issues Encountered
|
|
None beyond the unicode escape fix above.
|
|
|
|
## User Setup Required
|
|
None - no external service configuration required.
|
|
|
|
## Next Phase Readiness
|
|
- Overview and Financials tabs are fully built and reactive from WebSocket state
|
|
- All components ready for real-time data from the Go backend
|
|
- Plan 14 (integration/action flows) can wire up the FAB actions to these views
|
|
- Pre-existing type errors in BuyInFlow.svelte and players page are from other plans and unrelated
|
|
|
|
## Self-Check: PASSED
|
|
|
|
All 10 files verified present. Both commit hashes (e7da206, 5e18bbe) verified in git log. svelte-check: 0 errors.
|
|
|
|
---
|
|
*Phase: 01-tournament-engine*
|
|
*Completed: 2026-03-01*
|