Schedule screen

[zippy1978]

Implement the ScheduleScreen, which displays a complete list of upcoming games for AS Monaco Basket. This screen provides users with a chronological view of all scheduled games, allowing them to see the full season schedule at a glance.

Visual Requirements

• Standard app bar with "Schedule" title in Primary Red (#DA2F16)
• White background for the main content area
• Vertical scrolling list of GameCard components
• Each game card displays opponent, date, time, and location
• Cards must maintain consistent height and spacing
• Bottom navigation bar (implemented separately)
• Proper spacing between cards (8px vertical margins)

Structural Components

1. App Bar:

   • Fixed position at top of screen
   • Title centered
   • Primary Red background
   • White text with appropriate font style (Title Large)

2. Game List:

   • Full-width list filling the remaining screen space
   • GameCard components for each upcoming game
   • Proper padding around the list (16px horizontal, 8px top)
   • Maintains scroll position when returning from other tabs

Data Requirements

• List of upcoming games (sorted by date)
• Team data for all opponents
• Game location information
• Game date and time information

Functionality

• Vertical scrolling list with proper physics
• Display all upcoming games in chronological order
• Filter to only show future games (not past games)
• GameCards should be properly configured to show upcoming format
• Maintain scroll position when navigating away and back

Performance Considerations

• Efficient loading of potentially long list of games
• Proper list recycling to handle large datasets
• Optimize image loading for team logos
• Minimize rebuilds when scrolling

Accessibility Requirements

• App bar and content properly labeled for screen readers
• Game information should be semantically structured
• Proper heading hierarchy for screen organization
• Sufficient touch targets for interactive elements
• Support for larger text sizes through the system

Acceptance Criteria

1. App bar displays with correct styling and title
2. List of upcoming games displays in chronological order
3. Each game card shows the correct game information
4. Only upcoming games are displayed (no past games)
5. Games are displayed with the appropriate upcoming game styling
6. Scrolling performance is smooth even with many games
7. Layout adapts appropriately to different device sizes
8. All elements adhere to the design system
9. List maintains proper spacing between items
10. Screen is properly accessible to screen readers

Edge Cases

• Handle empty state (no upcoming games)
• Handle very long schedule with many games
• Proper layout on various device sizes and orientations
• Consistent behavior during screen rotation
• Graceful handling of missing game data

Dependencies

• Design Style Guide implementation
• GameCard component
• API implementation
• Navigation system implementation