Spillkort-komponent (GameCard)

[laspark]

Description

Legger til GameCard, komponenten som viser ett spill i resultatlista, basert på skissen i documents/game-showcase.png.

• types/game.ts: GameSummary-type med feltene kortet trenger (speiler games-tabellen + sjangernavn). Holdes smal så lista ikke henter mer data enn den viser.
• GameCard.tsx: viser bilde, navn, år, sjangre (maks 2), rating og Metacritic, og en favorittknapp. Tar inn data som props, så den kan kobles på GraphQL senere uten endringer.
• GameCard.css: enkel radlayout med skillelinje, uten bokser, avrundede hjørner eller skygger. Stables vertikalt på mobil.

Tilgjengelighet og bærekraft:

• Hele raden er klikkbar via én lenke i tittelen, så skjermlesere hører bare én lenke per kort
• Favorittknappen bruker aria-pressed og har et unikt aria-label per spill
• Synlig fokusring ved tastaturnavigasjon, og trykkflate på minst 44px
• Bilder har loading="lazy" og fast størrelse, så siden ikke hopper og det spares data i lange lister

Ikke med ennå:

• Lenken /game/:id er en plassholder til vi har valgt ruting
• Favoritt-state skal håndteres i state management (ikke i komponenten)
• Komponenten brukes ikke i App.tsx ennå
• Vitest-test kommer i egen PR

KI-bruk: Claude (Anthropic) ble brukt til å bistå med og foreslå komponentstruktur og CSS. Koden er gjennomgått og lagt inn manuelt, og layouten er justert etter våre egne designvalg.

Changes made

• Bug fix
• Ny funksjonalitet
• Refactor
• Dokumentasjon
• Testing

Checklist

• Testet lokalt
• Dokumentert endringer
• Sjekket for feilmeldinger