feat: detaljside for spill (#37)

[laspark]

Description

Hvert spill har nå en egen detaljside på /project2/game/<id>. Det er en egen side med egen URL, ikke en overlay, så den kan deles og bokmerkes, og tilbakeknappen i nettleseren virker.

Man kommer til detaljsiden ved å klikke på et spillkort, eller ved å velge et forslag i søkefeltet (det erstatter den midlertidige løsningen som bare søkte på navnet).

Hva som er endret

• react-router (v8) er lagt til. BrowserRouter bruker basename fra BASE_URL, så alle ruter og lenker fungerer under /project2/ både lokalt og på VM-en.
• App.tsx: ruter for forsiden (/) og detaljsiden (/game/:id). Ukjente adresser sendes til forsiden.
  • Søk, filtre, visning og favoritter ligger fortsatt i App, så de huskes når man går tilbake til lista.
  • Filtrene vises bare på forsiden.
  • Søker man eller trykker «favoritter» fra detaljsiden, kommer man tilbake til lista.
• GameCard.tsx: <a href> er byttet til <Link>. Den gamle lenken manglet /project2 og lastet hele appen på nytt.
• Ny graphql/game.ts: spørringen GAME mot game(id). Den henter bare feltene siden viser.
• Ny pages/GameDetail/: selve siden.
  • Tittel, bilde, rating, Metacritic, spilletid, aldersgrense, beskrivelse og fakta (utgitt, plattformer, utvikler, utgiver, nettside).
  • Opptil 6 skjermbilder.
  • Favorittknapp, og «Fant ikke spillet» hvis id-en ikke finnes.

Tilgjengelighet

• Når siden åpnes, settes fanetittelen, og fokus flyttes til overskriften, så skjermlesere merker sidebyttet.
• Siden starter øverst.
• Skjermbildene har alt-tekst.

Bærekraft

• Spillista og filtervalgene hentes ikke på detaljsiden.
• Går man tilbake, kommer lista fra Apollo-cachen uten ny forespørsel.
• Skjermbildene lastes først når man scroller ned til dem (loading="lazy"), og det vises maks 6.

Må gjøres på VM-en ⚠️
Å klikke seg inn på et spill virker uten endringer. Men oppdaterer man siden eller åpner en delt lenke til /project2/game/123, gir Apache 404. Det løses med denne linjen i Apache-oppsettet for /project2:
FallbackResource /project2/index.html

Related Issue

Closes: #37

Changes made

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

Checklist

• Testet lokalt
• Dokumentert endringer
• Sjekket for feilmeldinger

Slik tester du: pnpm dev, klikk på et spill, prøv tilbakeknappen og «← tilbake til resultatene», velg et forslag i søkefeltet, og åpne /project2/game/1 (et spill som ikke finnes).

KI-bruk: Koden er laget med hjelp av Claude, og jeg har gått gjennom og testet den selv.