Game card component

[zippy1978]

Implement the GameCard component used throughout the application to display both upcoming and past games.

Visual Requirements

• Card height: 130px
• Background: Subtle gradient using Tertiary Gold (#D4AB37) with opacity from 3% to 12%
• Corner radius: 12px
• Elevation/shadow: 2px
• Team logos: 48px size, centered in their respective areas
• Team names: Below logos, Body Small text style (12px)
• Winner indication:
  • Bold text for winning team name
  • Primary Red color for winning team score
  • 4px colored strip on the card edge of winning team's side
• Location strip at bottom: Light gray background (10% opacity), small text with location icon
• Margin: 8px vertical, 16px horizontal

Past game

Incoming game

Data Requirements

The component should accept the following data:

• Home team name
• Home team logo
• Away team name
• Away team logo
• Game date and time
• Location
• Game status (upcoming or finished)
• Scores (home and away) for finished games
• Boolean flag to determine display mode (showAsUpcoming)

Functionality

• Toggle between two display modes:
  • Upcoming game: Shows date and time
  • Past game: Shows score with winner highlighted
• Properly format date, according to current locale (e.g., "Jan 15")
• Properly format scores for completed games
• Highlight the winning team appropriately
• Hide future games when showing results and vice versa
• Handle long team names with ellipsis

Interactions

• No click interactions required for v1 (static display only)
• Future enhancement: Tap to see game details

Accessibility Requirements

• Scores and results should be properly announced by screen readers
• Winner indication should not rely solely on color
• Game status should be clear to all users
• Proper semantic structure for dates, teams, and scores

Acceptance Criteria

1. Card renders with proper subtle gradient background
2. Team logos and names display correctly
3. Date/time shows properly for upcoming games
4. Scores display correctly for past games with winner highlighted
5. Location information appears in the bottom strip
6. Card properly filters to show only relevant games (past or upcoming)
7. Winner is clearly indicated through visual cues
8. Long text properly truncates with ellipsis
9. Card maintains proper sizing across different device sizes
10. Card adheres to the design system (colors, typography, spacing)

Edge Cases

• Handle games with no scores yet
• Handle tied games (no winner)
• Handle various date formats
• Ensure consistent appearance with different team names/logo sizes

Dependencies

• Design Style Guide implementation
• TeamLogo component