Base site

.github/workflows/deploy.yml

@@ -0,0 +1,41 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 24
+      - run: npm ci
+      # base må matche repo-navnet fordi Pages serverer på /<repo>/
+      - run: npm run build -- --base=/${{ github.event.repository.name }}/
+      - uses: actions/configure-pages@v5
+      - uses: actions/upload-pages-artifact@v3
+        with:
+          path: dist
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -0,0 +1,37 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Environment variables
+.env
+.env.*
+!.env.example
+
+# Local Claude Code config
+.claude/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+
+#ETC
+# NB: filnavnet under var tidligere feilstavet ("prosjektbeksrivelse.txt"),
+# som gjorde at filen faktisk IKKE ble ignorert. Rettet til riktig navn.

CHANGES.md

@@ -0,0 +1,110 @@
+# Endringslogg – redesign + favoritter
+
+Dette dokumentet beskriver endringene som ble gjort i denne omgangen: en
+visuell make-over av søkesiden, en ny favoritt-funksjon lagret i
+`localStorage`, og et forslag til hva `sessionStorage` kan brukes til videre.
+
+## 1. Nytt utseende (playful Pokémon-tema)
+
+**Hvor:** `src/index.css`, `src/App.css`, `index.html`
+
+**Hva:**
+- Byttet fargepalett fra generisk lilla til et Pokéball-inspirert tema:
+  rødt (`--accent`) og gult (`--gold`) som aksentfarger, definert som
+  CSS-variabler i `:root` (både lys og mørk modus er oppdatert).
+- Lagt til `Nunito`-fonten fra Google Fonts (lenket i `index.html`) for et
+  litt rundere, mer lekent uttrykk enn systemfonten.
+- Søkefeltet, søkeknappen og alle Pokémon-kortene («song»-elementene) har
+  fått avrundede hjørner, en myk hover-animasjon (kortene løfter seg litt
+  og får skygge) og tydeligere fokus-ring på input-feltet for
+  tilgjengelighet.
+- Fjernet en fast venstre/høyre-kant (`border-inline`) på `#root` siden
+  den så rar ut sammen med den nye favoritt-sidebaren.
+
+**Hvorfor:** Det opprinnelige designet var funksjonelt, men nøytralt og
+lite «Pokémon». Siden dette er en Pokedex, gir det mer identitet å bruke
+farger og form som minner om selve merkevaren.
+
+## 2. Fjernet rå debug-liste
+
+**Hvor:** `src/App.tsx`
+
+**Hva:** Fjernet `<section className="list">`-blokken som viste *alle*
+Pokémon i en ustylet `<ul>` (rød tekst, sirkel-bullets), samt
+`allPokemon`-state og `useEffect`-kallet som hentet hele listen
+(`listAllPokemon()`) ved oppstart.
+
+**Hvorfor:** Dette så ut som en debug-rest og ikke en tiltenkt del av
+brukeropplevelsen. Å fjerne den lar søk + favoritter være hele
+sideopplevelsen, og sparer også en unødvendig nettverkskall på ~10 000
+rader hver gang siden lastes. `listAllPokemon` ligger fortsatt i
+`src/Api.tsx` i tilfelle den trengs igjen senere (f.eks. en «bla
+gjennom alle»-visning).
+
+## 3. Favoritter (ny funksjon, lagret i `localStorage`)
+
+**Hvor:**
+- `src/useFavorites.ts` (ny fil) – egen hook som eier all lagringslogikk.
+- `src/FavoritesSidebar.tsx` (ny fil) – komponenten som viser favorittene.
+- `src/App.tsx` – bruker hooken, viser en ★-knapp på hvert søkeresultat,
+  og rendrer `<FavoritesSidebar />`.
+- `src/App.css` – styling for ★-knappen og favoritt-baren, inkl.
+  mobiltilpasning.
+
+**Hva:**
+- Brukeren kan trykke på en ★-knapp på et hvilket som helst søkeresultat
+  for å legge det til eller fjerne det fra favorittene sine.
+- Favorittene lagres i `localStorage` under nøkkelen `pokedex-favorites`
+  som en liste av `{ id, name, imageUrl, apiUrl }`-objekter, og lastes inn
+  igjen automatisk neste gang siden åpnes (persisterer på tvers av
+  økter/faner/nettleser-omstart).
+- Favorittene vises i en egen «Favoritter»-liste:
+  - **Store skjermer (≥ 900px):** fast (`position: fixed`) sidebar til
+    høyre på skjermen, alltid synlig mens man scroller i søkeresultatene.
+  - **Mobil / smale skjermer (< 900px):** samme komponent, men CSS-en
+    (`@media max-width: 900px`) gjør den om til en fast bunn-bar med
+    horisontal scroll, slik at favorittene fortsatt er lett tilgjengelige
+    uten å ta opp all skjermplassen på en liten skjerm. Det er altså
+    *ingen* egen mobil-komponent – responsiviteten løses kun med CSS.
+- Hver favoritt kan fjernes direkte fra sidebaren med en ×-knapp.
+
+**Hvorfor `localStorage`:** Favoritter er noe brukeren typisk vil ha
+tilgjengelig neste gang de besøker siden, ikke bare i det ene besøket.
+`localStorage` er laget nettopp for denne typen data – det er enkelt,
+synkront, og krever ingen backend.
+
+**Robusthet:** Lesing og skriving til `localStorage` er pakket inn i
+`try/catch` i `useFavorites.ts`, slik at appen ikke krasjer i nettlesere
+eller moduser (f.eks. streng privat nettlesing i enkelte nettlesere) der
+`localStorage` kan kaste feil eller mangle.
+
+## 4. Forslag til bruk av `sessionStorage`
+
+Vi har **ikke** implementert dette – bare et forslag til neste steg:
+
+**Forslag:** Lagre det **gjeldende søket og søkeresultatene** i
+`sessionStorage` (f.eks. under nøkkelen `pokedex-last-search`).
+
+**Hvorfor dette passer godt til `sessionStorage` og ikke `localStorage`:**
+- `sessionStorage` overlever en side-oppdatering (F5), men blir tømt når
+  fanen lukkes. Det er akkurat riktig levetid for et søk: nyttig å
+  beholde om brukeren ved et uhell laster siden på nytt midt i en
+  søkeøkt, men det gir ikke mening at et gammelt søk skal ligge og vente
+  neste gang brukeren åpner siden i en ny fane uker senere (i motsetning
+  til favoritter, som *skal* vare).
+- Det er en pedagogisk fin kontrast til favoritt-funksjonen: samme
+  mønster (les/skriv til Web Storage), men bevisst forskjellig levetid
+  fordi dataene har forskjellig «naturlig» levetid.
+
+**Alternativt forslag:** en liste over «nylig sette» Pokémon (de siste
+5–10 man har åpnet), også i `sessionStorage` av samme grunn – nyttig
+under én økt, men ikke noe som trenger å hope seg opp permanent slik
+favoritter gjør.
+
+## Verifisering
+
+- `npm run lint` – ingen feil.
+- `npm run build` – bygger uten TypeScript- eller Vite-feil.
+- Manuell test i dev-server (`npm run dev`): la til/fjernet favoritter og
+  bekreftet at de overlever en side-oppdatering, og sjekket layout i både
+  full bredde og smalt (mobil) vindu.

README.md

@@ -1,24 +1,33 @@
-# T18-Project-1
+# Pokedex
 
-Repository for team IT2810-H26-T18 in IT2810-H26.
+## Koble til VM (hosting)
+Hvordan koble til VM:
 
-## Working in this repository
+``` ssh <brukernavn>@it2810-18.idi.ntnu.no ```
+
+
+
+## Nettside:
+<a href="http://it2810-18.idi.ntnu.no/project1/index.html" target="_blank">http://it2810-18.idi.ntnu.no/project1/index.html</a>
+
+Filene ligger i vm under ```/var/www/html/project1```
 
-`main` is protected — you cannot push to it directly. Work on a branch and
-open a pull request:
 
-```bash
-git checkout -b my-feature
-git push -u origin my-feature
-```
 
-Before a pull request can be merged:
+## Har du gjort endringer du vil ha på nettsiden live?
 
-1. **A member of IT2810-H26-T18 must approve it.** You cannot approve your own pull
-   request, and approvals from staff do not count — you review each other's
-   code.
-2. **Every review comment must be marked resolved.** Reply to each one, fix it
-   or explain why not, then click *Resolve conversation*.
-3. **Pushing new commits dismisses the approval**, so if you change something
-   after being approved, ask for another review. This is deliberate: what was
-   approved is what gets merged.
+```npm run build``` inni prosjekt mappen, deretter flytt filene som er inni ```dist``` mappen til ```/var/www/html/project1```
+
+Da vil de vises på nettsiden. 
+
+
+## Script for å deploye endringer til nettside hosting (OBS OBS, dette er ikke til git, men bare fra VM directory til nettside hosting directory) prosjekt -> /var/www/html/
+```
+#!/bin/bash
+cd ~/T18-Project-1
+git pull
+npm install
+npm run build
+sudo rsync -av --delete dist/ /var/www/html/project1/
+echo "Deploy ferdig!" 
+```