Standings screen

[zippy1978]

Implement the StandingsScreen, which displays the current league standings for all teams in the Betclic Elite league. This screen provides users with a clear view of team rankings, highlighting AS Monaco's position among competitors, and showing essential statistics for each team.

Visual Requirements

• Standard app bar with "Standings" title in Primary Red (#DA2F16)
• League header with "BETCLIC ELITE" text on Secondary Red (#A62818) background
• Column headers for Position, Team, Points, Wins, Losses, and Total Points
• User's team (AS Monaco) highlighted with Tertiary Gold (#D4AB37) background
• White text for user's team row
• Dividers between rows (Light Gray #E0E0E0)
• Team logos displayed at 30px size
• Bottom navigation bar (implemented separately)

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. League Header:

   • Full-width container with Secondary Red background
   • "BETCLIC ELITE" text in white, bold, with appropriate padding
   • Positioned below app bar

3. Column Headers Row:

   • Horizontal row with labels for each column
   • Column headers: POS (Position), TEAM, P (Played), W (Wins), L (Losses), PTS (Points)
   • Light gray text (Black54)
   • Appropriate width constraints for each column

4. Team Standings List:

   • Vertical scrolling list of all teams
   • Rows ordered by team position
   • User's team (AS Monaco) highlighted
   • Consistent height for all rows
   • Dividers between rows

Column Width Specifications

• Position (POS): 30px
• Team: Flexible (Expanded)
• Stats columns (P, W, L, PTS): 35px each
• Horizontal spacing between columns: 16px

Data Requirements

• Complete list of teams in the league
• Current standings data (position, wins, losses, points)
• Team logos for all teams
• Identifier for user's team (AS Monaco)

Functionality

• Vertical scrolling list with proper physics
• Display all teams in rank order
• Highlight user's team row
• Calculate played games from wins + losses
• Display data in tabular format with proper alignment

Performance Considerations

• Efficient loading of the standings table
• Optimize image loading for team logos
• Proper text measurement to handle team names of varying length
• Minimize rebuilds when scrolling

Accessibility Requirements

• Screen content properly labeled for screen readers
• Table structure should be semantically correct
• Highlight user's team with more than just color (bold text)
• Proper heading hierarchy for screen organization
• Clear column headers for data context

Acceptance Criteria

1. App bar displays with correct styling and title
2. League header shows "BETCLIC ELITE" with correct styling
3. Column headers display with correct labels and alignment
4. Teams are listed in correct ranking order
5. User's team (AS Monaco) is properly highlighted
6. All statistics are displayed correctly for each team
7. Team logos render properly at the specified size
8. Layout maintains proper alignment of all columns
9. Scrolling performance is smooth with many teams
10. List maintains proper spacing and dividers between rows
11. Screen adapts appropriately to different device sizes
12. All elements adhere to the design system

Edge Cases

• Handle teams with very long names
• Proper layout on various device sizes and orientations
• Handling tied positions in standings
• Consistent highlighting if user's team is at the top or bottom of the list
• Graceful handling of incomplete team data

Dependencies

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

[alexandrebottero]

API

/cgroup/{id}/standings

Group ID: 68936e0d720c5d0b142053f4

You have to sort using "position" property.