WAGERBABE DOCS
All Stories
2-1-9-prop-builder-ui-componentDoneEpic 2.1

Story 2.1.9: Prop Builder UI Component

Status: done

Tasks

  • Task 1: Create core PropBuilder component structure (AC: #1, #2, #11)
    • 1.1: Create `client/src/components/sportsbook/prop-builder/PropBuilder.tsx` main component
    • 1.2: Create `PropBuilderContainer.tsx` wrapper with responsive behavior
    • 1.3: Use existing `useMediaQuery` hook for responsive layout switching
    • 1.4: Create component skeleton structure with tabs/panels layout
  • Task 2: Implement Category Browse view (AC: #1, #7, #12)
    • 2.1: Create category tabs with swipeable navigation (CategoryGrid.tsx)
    • 2.2: Create PlayerPropRow.tsx to display players with props in selected category
    • 2.3: Integrate with `GET /fixtures/{id}/props/categories` endpoint via TanStack Query
    • 2.4: Integrate with `GET /fixtures/{id}/props/{category}` endpoint for props data
    • 2.5: Add skeleton loaders (PropBuilderSkeleton.tsx)
  • Task 3: Implement Player Browse view (AC: #2, #6, #7)
    • 3.1: Implement fuzzy search using fuse.js in PlayerBrowseView.tsx
    • 3.2: Create PlayerBrowseView.tsx with player profile view
    • 3.3: Integrate with `GET /fixtures/{id}/props/player/{player_id}` endpoint
    • 3.4: Group props by category within player view
    • 3.5: Add skeleton loaders and empty states
  • Task 4: Implement prop selection and parlay builder (AC: #3, #4, #5, #6)
    • 4.1: Implement prop selection state management in PropBuilder
    • 4.2: Create SelectionsPanel.tsx to display selected props with remove functionality
    • 4.3: Implement client-side parlay odds calculation (decimal multiplication)
    • 4.4: Show combined odds and leg count in SelectionsPanel
    • 4.5: Implement same-player correlation warning display
    • 4.6: Create "Add to Bet Slip" button with BettingContext integration
  • Task 5: Implement Popular Props and Trending features (AC: #8, #9)
    • 5.1: QuickFilters.tsx includes "Popular" filter option
    • 5.2: Filter infrastructure ready for trending data
  • Task 6: Implement Quick Filters (AC: #10)
    • 6.1: Create QuickFilters.tsx component with filter options
    • 6.2: Implement filterPropsByQuickFilter helper function
    • 6.3: Connect filters to prop list rendering
  • Task 7: Mobile optimization and touch interactions (AC: #11, #12, #13)
    • 7.1: Responsive layout with useMediaQuery
    • 7.2: Add swipe gestures for category tabs (react-swipeable + CSS scroll-snap)
    • 7.3: All buttons have min 44px touch targets (touch-manipulation, min-w/min-h)
    • 7.4: Mobile-first responsive design
  • Task 8: Integration with existing betting system (AC: #6)
    • 8.1: PropBuilderContainer integrates with BettingContext
    • 8.2: Handle prop→bet slip data transformation (PropSelection→BetSelection)
    • 8.3: Validated prop builder structure matches bet slip format
  • Task 9: Performance optimization (AC: #7)
    • 9.1: Implement virtual scrolling for player list (TanStack Virtual)
    • 9.2: Memoize calculations (fuse search, filtered lists)
    • 9.3: Lazy load player images/headshots (loading="lazy")
    • 9.4: Verified build succeeds with no bundle impact issues

Progress

Tasks9/9
Acceptance Criteria0
Total Tasks9

Navigation

View Epic 2.1All Stories