Feature/spillkort

[laspark]

Description

Legger til spillkortet og resultatlista, basert på skissen i documents/game-showcase.png, med to visninger brukeren kan bytte mellom.

GameCard (components/GameCard/)

• Viser bilde, navn, år, sjanger, rating og favorittknapp
• Ny view-prop: 'list' (standard) eller 'grid'
• Visning 1 (liste): ett spill per rad, lite bilde til venstre, Metacritic vises
• Visning 2 (rutenett): bilde øverst, maks to linjer tittel, én sjanger og bare rating, så kortet blir mer oppsummerende

GameList (components/GameList/)

• Viser spillene som <ul>/<li>, så skjermlesere sier hvor mange spill som vises
• Rutenett: 4 per rad på PC, 3 på nettbrett og 2 på mobil
• Like høye ruter i samme rad, så bunnlinjene står likt

Midlertidig

• mocks/games.ts: testdata til GraphQL er koblet på
• App.tsx: viser lista med knapper for Liste/Rutenett. Favoritter og valgt visning ligger i useState til vi har valgt state management.

Tilgjengelighet og bærekraft:

• Hele kortet er klikkbart via én lenke i tittelen (én lenke per kort for skjermlesere)
• Favoritt- og visningsknappene bruker aria-pressed
• Synlig fokusring ved tastaturnavigasjon
• Bilder har loading="lazy" og fast størrelse, så siden ikke hopper og det spares data

KI-bruk: Claude ble brukt til forslag til komponentstruktur og CSS, og til feilsøking. Koden er gjennomgått og lagt inn manuelt, og design er justert etter våre egne valg.

Related Issue

Includes: #21

Changes made

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

Checklist

• Testet lokalt
• Dokumentert endringer
• Sjekket for feilmeldinger

[laspark]

Closes: #21