From 86e3058c270f350259c3b8bf4163a0cdc527a9d3 Mon Sep 17 00:00:00 2001 From: albdert Date: Fri, 2 Oct 2026 11:04:05 +0200 Subject: [PATCH 01/19] feature: db scripts, apollo install --- backend/package.json | 5 +++-- db/.env.example | 4 ++++ db/database-connect.md | 23 +++++++++++++++++++++++ package.json | 3 ++- scripts/db-tunnel.sh | 15 +++++++++++++++ scripts/test-select.sh | 2 ++ 6 files changed, 49 insertions(+), 3 deletions(-) create mode 100644 db/.env.example create mode 100644 db/database-connect.md create mode 100755 scripts/db-tunnel.sh create mode 100755 scripts/test-select.sh diff --git a/backend/package.json b/backend/package.json index c5121671..e70e316a 100644 --- a/backend/package.json +++ b/backend/package.json @@ -3,16 +3,17 @@ "version": "1.0.0", "description": "", "main": "index.js", + "type": "module", "scripts": { "dev": "tsx watch src/index.ts", + "compile": "tsc", "build": "tsc", - "start": "node dist/index.js", + "start": "pnpm run build && node dist/index.js", "lint": "eslint ." }, "keywords": [], "author": "", "license": "ISC", - "type": "module", "dependencies": { "@apollo/server": "^5.5.1", "dotenv": "^18.0.5", diff --git a/db/.env.example b/db/.env.example new file mode 100644 index 00000000..2f4cadc4 --- /dev/null +++ b/db/.env.example @@ -0,0 +1,4 @@ +VM_USER=brukernavn +VM_HOST=it2810-02.idi.ntnu.no +TUNNEL_PORT=5433 +DATABASE_URL=postgresql://gameapp:PASSORD@localhost:5433/gamesdb diff --git a/db/database-connect.md b/db/database-connect.md new file mode 100644 index 00000000..c701b6c4 --- /dev/null +++ b/db/database-connect.md @@ -0,0 +1,23 @@ + +#### Database-connect + +Scripts for å koble seg til database ligger i `/scripts`. + +###### db-tunnel.sh + +Spesifikt inneholder denne `db-tunnel.sh` som oppretter en ssh tunnel til vm over porten `5432`. Dette gjør at all trafikk som normalt går til `localhost:5432` rutes til postgres på serveren, slik at vi slipper å laste ned hele databasen på hver av pc-ene våre. + +`db-tunnel.sh` scriptet er lagt inn som et script i `/package.json`, og kan kjøres med `pnpm db:tunnel`. + +###### test-select.sh + +Det andre scriptet er `test-select.sh`, dette er et enkelt script som kjører en spørring mot en database på `localhost:5432`. Hvis tunnellen fungerer skal dette returnere dette: + +``` + count +-------- + 120067 +(1 row) +``` + +For å kunne kjøre dette scriptet trenger man postgres-client. Dette kan lastes ned med `sudo apt update && sudo apt install postgresql-client` på debian/ubuntu, og med `brew install libpq` på mac. diff --git a/package.json b/package.json index 9f8245b3..0853878c 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,8 @@ "lint": "pnpm -r lint", "test": "pnpm -r test", "format": "prettier --write .", - "format:check": "prettier --check ." + "format:check": "prettier --check .", + "db:tunnel": "./scripts/db-tunnel.sh" }, "devDependencies": { "prettier": "^3.9.9" diff --git a/scripts/db-tunnel.sh b/scripts/db-tunnel.sh new file mode 100755 index 00000000..908c0089 --- /dev/null +++ b/scripts/db-tunnel.sh @@ -0,0 +1,15 @@ +#!/usr/bin/env bash +set -euo pipefail + +cd "$(dirname "$0")/.." +set -a +source db/.env +set +a + +if lsof -i ":$TUNNEL_PORT" >/dev/null 2>&1; then + echo "Port $TUNNEL_PORT er i bruk, tunnelen kjører antakelig fra før..." + exit 0 +fi + +echo "Tunnel: localhost:$TUNNEL_PORT -> $VM_HOST:5432 (Ctrl+C for å stoppe)" +ssh -N -L "$TUNNEL_PORT:localhost:5432" "$VM_USER@$VM_HOST" diff --git a/scripts/test-select.sh b/scripts/test-select.sh new file mode 100755 index 00000000..c3226c45 --- /dev/null +++ b/scripts/test-select.sh @@ -0,0 +1,2 @@ +#!/bin/bash +psql -h localhost -p 5433 -U gameapp -d gamesdb -c "SELECT count(*) FROM games;" From 4c60d7f043bf936d0a657d9bcfee1b0cd6e207a3 Mon Sep 17 00:00:00 2001 From: albdert Date: Fri, 2 Oct 2026 12:00:57 +0200 Subject: [PATCH 02/19] la til enkelt eksempel med apollo --- backend/src/index.ts | 49 ++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 47 insertions(+), 2 deletions(-) diff --git a/backend/src/index.ts b/backend/src/index.ts index 5a97d4ff..d9926ee3 100644 --- a/backend/src/index.ts +++ b/backend/src/index.ts @@ -1,2 +1,47 @@ -// placeholder, erstattes av apollo server senere -console.log('backend'); +import { ApolloServer } from "@apollo/server"; +import { startStandaloneServer } from "@apollo/server/standalone"; +import { Query } from "pg"; +import { start } from "repl"; + +const typeDefs = `#graphql + # comment + type Book { + title: String + author: String + } + + type Query { + books: [Book] + } +`; + +const books = [ + { + title: 'The awakening', + author: 'Kate Chopin', + }, + { + title: 'City of glass', + author: 'Paul Auster', + }, +]; + +const resolvers = { + Query: { + books: () => books, + }, +}; + + +// apollo server instance +const server = new ApolloServer({ + typeDefs, + resolvers, +}); + +// pass apolloserver to standaloneserver +const { url } = await startStandaloneServer(server, { + listen: { port: 4000 }, +}); + +console.log(`Server ready at: ${url}`); \ No newline at end of file From 4bd45443de8866de6aea03826e49e2916b827db7 Mon Sep 17 00:00:00 2001 From: Albert Paulsen Lindberg Date: Thu, 8 Oct 2026 11:32:47 +0200 Subject: [PATCH 03/19] Create ssh-tunnel.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit liten dokumentasjon på bruk av tunnel-scriptet mot databasen på vm --- db/ssh-tunnel.md | 53 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 db/ssh-tunnel.md diff --git a/db/ssh-tunnel.md b/db/ssh-tunnel.md new file mode 100644 index 00000000..c0f0de44 --- /dev/null +++ b/db/ssh-tunnel.md @@ -0,0 +1,53 @@ +## Felles +#### Konfigurere `.env` +1. Koble til NTNU VPN hvis du er utenfor campus. +2. Kopier `backend/.env.example` til `backend/.env` +3. Fyll inn verdien til `VM_USER`, og `PASSORD` i `DATABASE_URL`. + +`backend/.env` skal da se ut slik: +``` +VM_USER= +VM_HOST=it2810-02.idi.ntnu.no +DATABASE_URL=postgresql://webapp:@localhost:5433/gamesdb +PORT=3001 +TUNNEL_PORT=5433 +``` + +#### Start tunnelen +Gå til rot i repo (dvs. `T02-Project-2` mappen) og kjør kommandoen: +```bash +pnpm db:tunnel +``` + +La terminalen stå åpen, og start backend i en annen terminal med `pnpm --filter backend dev`. + +## Windows + +OpenSSH følger med Windows 10 og 11. Bash-scriptet fungerer ikke via pnpm db:tunnel, fordi pnpm kjører scripts gjennom cmd. + +#### Start tunnelen i PowerShell: +```powershell +ssh -N -L 5433:localhost:5432 brukernavn@it2810-02.idi.ntnu.no +``` +Alternativt kan scriptet kjøres direkte i Git Bash eller WSL med ./scripts/db-tunnel.sh. Portsjekken i scriptet bruker lsof, som ikke finnes i Git Bash, men den hoppes da bare over. + +## Verifiser + +Med tunnelen åpen, fra rot i repoet: + +```bash +pnpm --filter backend exec tsx --env-file=.env -e " +import pg from 'pg'; +const c = new pg.Client(process.env.DATABASE_URL); +await c.connect(); +console.log((await c.query('SELECT count(*Kopier backend/.env.example til backend/.env og fyll inn VM_USER, VM_HOST, TUNNEL_PORT og DATABASE_URL (med webapp-rollen og port 5433).) FROM games')).rows); +await c.end(); +" +``` + +Skal skrive ut `[ { count: '120067' } ]`. + +#### Mulige feil +1. Connection refused på 5433 betyr at tunnelen ikke kjører. +2. Connection timed out mot VM-en betyr som regel at VPN mangler. +3. Password authentication failed betyr feil passord eller rolle i DATABASE_URL. From d532d445b24fa77715701833a2cd8e8f79bae72d Mon Sep 17 00:00:00 2001 From: Albert Paulsen Lindberg Date: Thu, 8 Oct 2026 12:00:55 +0200 Subject: [PATCH 04/19] Update database-usage.md oppdaterte med oversikt over roller, tilkobling, og litt om re-import av databasen --- db/database-usage.md | 53 +++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 52 insertions(+), 1 deletion(-) diff --git a/db/database-usage.md b/db/database-usage.md index b9c6a64e..142ddfa9 100644 --- a/db/database-usage.md +++ b/db/database-usage.md @@ -1,5 +1,32 @@ +## Roller for databasen i postgres -#### Database-usage +|Rolle|Bruk|Rettigheter| +|-|-|-| +|postgres|Administrasjon|Superuser| +|gameapp|Import og schemaendringer|Eier av gamesdb| +|webapp|Backend|SELECT på alt, INSERT på reviews| + +## Koble til postgres +#### Fra vm-en: +```bash +psql -h localhost -U webapp -d gamesdb +psql -h localhost -U gameapp -d gamesdb +sudo -u postgres psql -d gamesdb +``` + +#### Fra egen maskin (`pnpm db:tunnel`): +```bash +psql -h localhost -p 5433 -U webapp -d gamesdb +``` + +#### Backend bruker `DATABASE_URL` i `backend/.env`: +``` +postgresql://webapp:PASSORD@localhost:5433/gamesdb +``` + +Port `5433` lokalt via tunnel, `5432` på VM-en. + +## Bruk av database Under er noen generelle kommandoer som kan brukes i postgres for navigere databasen: @@ -27,3 +54,27 @@ SELECT * FROM games LIMIT 5; SELECT metacritic FROM games WHERE id = 4291; ``` + +## Import og rettigheter + +Filer i `backend/db/`: `schema.sql`, `indexes.sql`, `grants.sql`, `load.py`, `requirements.txt`. + +_Full reimport på VM-en (sletter også reviews)_: +``` +cd backend/db && source .venv/bin/activate +export DATABASE_URL='postgresql://gameapp:PASSORD@localhost:5432/gamesdb' +python load.py --force +psql "$DATABASE_URL" -f grants.sql +``` + +>[!NOTE] +>`grants.sql` må kjøres etter hver reimport, siden tabellene gjenopprettes og mister rettighetene. + +_Sjekk status på tjenesten_: +```bash +sudo systemctl status postgresql +sudo systemctl restart postgresql +sudo ss -tlnp | grep 5432 +``` + +Siste skal kun vise `127.0.0.1:5432` og `[::1]:5432`. From 40b14e4ee33d6375a76bac7d6c847368cbd20cf8 Mon Sep 17 00:00:00 2001 From: Albert Paulsen Lindberg Date: Thu, 8 Oct 2026 12:07:19 +0200 Subject: [PATCH 05/19] Create grants.sql MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit grants for databasen, gir webapp tilgang til å lese til alle tabeller og kun skrive til reviews --- db/grants.sql | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 db/grants.sql diff --git a/db/grants.sql b/db/grants.sql new file mode 100644 index 00000000..3d3f5532 --- /dev/null +++ b/db/grants.sql @@ -0,0 +1,6 @@ +GRANT CONNECT ON DATABASE gamesdb TO webapp; +GRANT USAGE ON SCHEMA public TO webapp; + +GRANT SELECT ON ALL TABLES IN SCHEMA public TO webapp; +GRANT INSERT ON reviews TO webapp; +GRANT USAGE ON SEQUENCE reviews_id_seq TO webapp; From bded41f52261a8bf3e4eb3057b707497cb4379f6 Mon Sep 17 00:00:00 2001 From: LeonaS Date: Thu, 8 Oct 2026 13:32:32 +0200 Subject: [PATCH 06/19] feat(frontend): legg til GameSummary-type for spillkort --- frontend/src/types/game.ts | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 frontend/src/types/game.ts diff --git a/frontend/src/types/game.ts b/frontend/src/types/game.ts new file mode 100644 index 00000000..0829d119 --- /dev/null +++ b/frontend/src/types/game.ts @@ -0,0 +1,13 @@ +//Inneholder dataene ett spillekort trenger. Feltene speiler tabellen 'games' + sjangernavn slik de vil komme fra GraphQL-APIet. + +export interface GameSummary { + id: string; + name: string; + released: string | null; + backgroundImage: string | null; + // RAWG-rating, 0-5 + rating: number | null; + // Metacritic score, 0-100 + metacritic: number | null; + genres: string[]; +} From ac70bf58c55a8ae261a7e87ea4e6a284a4db8011 Mon Sep 17 00:00:00 2001 From: LeonaS Date: Thu, 8 Oct 2026 13:32:43 +0200 Subject: [PATCH 07/19] feat(frontend): legg til GameCard-komponent --- frontend/src/components/GameCard/GameCard.tsx | 64 +++++++++++++++++++ 1 file changed, 64 insertions(+) create mode 100644 frontend/src/components/GameCard/GameCard.tsx diff --git a/frontend/src/components/GameCard/GameCard.tsx b/frontend/src/components/GameCard/GameCard.tsx new file mode 100644 index 00000000..b2deeb3b --- /dev/null +++ b/frontend/src/components/GameCard/GameCard.tsx @@ -0,0 +1,64 @@ +import type { GameSummary } from '../../types/game'; +import './GameCard.css'; + +interface GameCardProps { + game: GameSummary; + isFavorite: boolean; + onToggleFavorite: (id: string) => void; +} + +//Viser ett spill i resultatlista. Lenken i tittelen dekker hele kortet (via CSS), så hele kortet er klikkbart, men skjermlesere hører bare én lenke per kort. + +export function GameCard({ game, isFavorite, onToggleFavorite }: GameCardProps) { + const year = game.released?.slice(0, 4) ?? null; + const meta = [year, game.genres.slice(0, 2).join(', ')].filter(Boolean).join(' · '); + + return ( +
+ {game.backgroundImage ? ( + // alt="" fordi tittelen allerede beskriver kortet. Fast størrelse og lazy + // loading hindrer at layouten hopper og sparer data ved lange lister. + + ) : ( +
+ ); +} From 885d705f2f1e86cfa6cd38fe1bcf4d5159e1efd0 Mon Sep 17 00:00:00 2001 From: LeonaS Date: Thu, 8 Oct 2026 13:33:03 +0200 Subject: [PATCH 08/19] feat(frontend): stil for GameCard --- frontend/src/components/GameCard/GameCard.css | 118 ++++++++++++++++++ 1 file changed, 118 insertions(+) create mode 100644 frontend/src/components/GameCard/GameCard.css diff --git a/frontend/src/components/GameCard/GameCard.css b/frontend/src/components/GameCard/GameCard.css new file mode 100644 index 00000000..8566b789 --- /dev/null +++ b/frontend/src/components/GameCard/GameCard.css @@ -0,0 +1,118 @@ +/* Én rad i resultatlista. Ingen boks, bare en skillelinje under. */ +.game-card { + position: relative; + display: grid; + grid-template-columns: 192px 1fr; + gap: 20px; + padding: 20px 0; + text-align: left; + border-bottom: 1px solid var(--border); +} + +.game-card__image { + display: block; + width: 100%; + height: auto; + aspect-ratio: 16 / 9; + object-fit: cover; + background: var(--code-bg); /* vises mens bildet laster / når det mangler */ +} + +.game-card__body { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 4px; +} + +.game-card__title { + margin: 0; + font-size: 20px; + font-weight: 600; + line-height: 1.25; +} + +.game-card__title a { + color: var(--text-h); + text-decoration: none; +} + +/* Strekker lenken over hele raden, så hele raden er klikkbar */ +.game-card__title a::after { + content: ''; + position: absolute; + inset: 0; +} + +.game-card:hover .game-card__title a { + text-decoration: underline; + text-underline-offset: 3px; +} + +/* Kantete fokusring rundt hele raden ved tastaturnavigasjon */ +.game-card__title a:focus-visible { + outline: none; +} +.game-card:has(.game-card__title a:focus-visible) { + outline: 2px solid var(--text-h); + outline-offset: 4px; +} + +.game-card__meta { + font-size: 15px; +} + +.game-card__scores { + display: flex; + gap: 24px; + margin: 4px 0 8px; + font-size: 15px; +} + +.game-card__scores div { + display: flex; + gap: 6px; +} + +.game-card__scores dd { + margin: 0; + color: var(--text-h); + font-variant-numeric: tabular-nums; /* tallene står rett under hverandre i lista */ +} + +/* Tekstknapp med rett ramme, som [+ Favoritt] i skissen */ +.game-card__favorite { + position: relative; + z-index: 1; /* over den strukne lenken */ + margin-top: auto; + min-height: 44px; /* stort nok trykkmål */ + padding: 0 14px; + font: inherit; + font-size: 15px; + color: var(--text-h); + background: none; + border: 1px solid var(--text-h); + border-radius: 0; + cursor: pointer; +} + +.game-card__favorite:hover { + text-decoration: underline; +} + +.game-card__favorite[aria-pressed='true'] { + color: var(--bg); + background: var(--text-h); +} + +.game-card__favorite:focus-visible { + outline: 2px solid var(--text-h); + outline-offset: 2px; +} + +@media (max-width: 480px) { + .game-card { + grid-template-columns: 1fr; + gap: 12px; + } +} From 759c4515b905dea416a33fa0592fe416f5af9e7e Mon Sep 17 00:00:00 2001 From: LeonaS Date: Fri, 9 Oct 2026 10:54:55 +0200 Subject: [PATCH 09/19] feat(frontend): legg til view-prop i GameCard for liste og rutenett --- frontend/src/components/GameCard/GameCard.tsx | 20 ++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/frontend/src/components/GameCard/GameCard.tsx b/frontend/src/components/GameCard/GameCard.tsx index b2deeb3b..690148d2 100644 --- a/frontend/src/components/GameCard/GameCard.tsx +++ b/frontend/src/components/GameCard/GameCard.tsx @@ -5,16 +5,20 @@ interface GameCardProps { game: GameSummary; isFavorite: boolean; onToggleFavorite: (id: string) => void; + /** 'list' = visning 1 (rad), 'grid' = visning 2 (oppsummert rute) */ + view?: 'list' | 'grid'; } //Viser ett spill i resultatlista. Lenken i tittelen dekker hele kortet (via CSS), så hele kortet er klikkbart, men skjermlesere hører bare én lenke per kort. -export function GameCard({ game, isFavorite, onToggleFavorite }: GameCardProps) { +export function GameCard({ game, isFavorite, onToggleFavorite, view = 'list' }: GameCardProps) { const year = game.released?.slice(0, 4) ?? null; - const meta = [year, game.genres.slice(0, 2).join(', ')].filter(Boolean).join(' · '); + const meta = [year, game.genres.slice(0, view === 'grid' ? 1 : 2).join(', ')] + .filter(Boolean) + .join(' · '); return ( -
+
{game.backgroundImage ? ( // alt="" fordi tittelen allerede beskriver kortet. Fast størrelse og lazy // loading hindrer at layouten hopper og sparer data ved lange lister. @@ -43,10 +47,12 @@ export function GameCard({ game, isFavorite, onToggleFavorite }: GameCardProps)
Rating
{game.rating != null ? `${game.rating.toFixed(1)} / 5` : 'Ingen'}
-
-
Metacritic
-
{game.metacritic ?? 'Ingen'}
-
+ {view === 'list' && ( +
+
Metacritic
+
{game.metacritic ?? 'Ingen'}
+
+ )} - + const toggleFavorite = (id: string) => { + setFavorites((prev) => { + const next = new Set(prev); + if (next.has(id)) next.delete(id); + else next.add(id); + return next; + }); + }; -
+ return ( +
+

Spill

+

Søkeresultater

-
-
- -

Documentation

-

Your questions, answered

- -
-
- -

Connect with us

-

Join the Vite community

- -
-
+ {/* Bytter mellom visning 1 (liste) og visning 2 (rutenett) */} +
+ + +
-
-
- + +
); } From 015fbb87be10e908bab9c01ac267128331f9e34b Mon Sep 17 00:00:00 2001 From: johannes Date: Fri, 9 Oct 2026 11:44:23 +0200 Subject: [PATCH 15/19] feat(frontend): legg til useDebounce-hook --- frontend/src/hooks/useDebounce.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 frontend/src/hooks/useDebounce.ts diff --git a/frontend/src/hooks/useDebounce.ts b/frontend/src/hooks/useDebounce.ts new file mode 100644 index 00000000..de407838 --- /dev/null +++ b/frontend/src/hooks/useDebounce.ts @@ -0,0 +1,12 @@ +import { useEffect, useState } from 'react'; + +export function useDebounce(value: T, delay = 300): T { + const [debounced, setDebounced] = useState(value); + + useEffect(() => { + const timer = setTimeout(() => setDebounced(value), delay); + return () => clearTimeout(timer); + }, [value, delay]); + + return debounced; +} \ No newline at end of file From 1a01103dee802cd83de89ab686eb73690d369ae0 Mon Sep 17 00:00:00 2001 From: johannes Date: Fri, 9 Oct 2026 11:44:43 +0200 Subject: [PATCH 16/19] feat(frontend): legg til SearchBar-komponent --- .../src/components/SearchBar/SearchBar.tsx | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 frontend/src/components/SearchBar/SearchBar.tsx diff --git a/frontend/src/components/SearchBar/SearchBar.tsx b/frontend/src/components/SearchBar/SearchBar.tsx new file mode 100644 index 00000000..e7f504e6 --- /dev/null +++ b/frontend/src/components/SearchBar/SearchBar.tsx @@ -0,0 +1,30 @@ +import './SearchBar.css'; + +interface SearchBarProps { + value: string; + onChange: (value: string) => void; +} + +// Søkefeltet øverst på siden. Komponenten eier ikke state selv: +// forelderen styrer verdien og bestemmer når det faktisk søkes (debounce). +export function SearchBar({ value, onChange }: SearchBarProps) { + return ( + // role="search" gjør at skjermlesere kan hoppe rett til søket. + // preventDefault hindrer at Enter laster siden på nytt. +
e.preventDefault()}> + {/* Skjult visuelt, men lest opp av skjermlesere. Placeholder alene er ikke nok. */} + + onChange(e.target.value)} + autoComplete="off" + /> +
+ ); +} \ No newline at end of file From 567f324faf00d05246de6c25bdef8cf245d55768 Mon Sep 17 00:00:00 2001 From: johannes Date: Fri, 9 Oct 2026 11:44:56 +0200 Subject: [PATCH 17/19] =?UTF-8?q?style(frontend):=20firkantet=20s=C3=B8kef?= =?UTF-8?q?elt=20med=20skjult=20label=20og=20fokusramme?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/SearchBar/SearchBar.css | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 frontend/src/components/SearchBar/SearchBar.css diff --git a/frontend/src/components/SearchBar/SearchBar.css b/frontend/src/components/SearchBar/SearchBar.css new file mode 100644 index 00000000..949cd4b3 --- /dev/null +++ b/frontend/src/components/SearchBar/SearchBar.css @@ -0,0 +1,22 @@ +/* Skjuler labelen visuelt, men beholder den for skjermlesere. */ +.search-bar__label { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; + clip: rect(0 0 0 0); + white-space: nowrap; + border: 0; +} + +.search-bar__input { + width: 100%; + padding: 0.6rem 0.8rem; + font: inherit; + border: 1px solid #767676; + border-radius: 0; + -webkit-appearance: textfield; + appearance: textfield; +} From a72e0897bdc98248fae86bf4a583cdd20c6f82ef Mon Sep 17 00:00:00 2001 From: Albert Paulsen Lindberg Date: Fri, 9 Oct 2026 11:45:17 +0200 Subject: [PATCH 18/19] Update database-setup.md --- db/database-setup.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/db/database-setup.md b/db/database-setup.md index 614dbe08..b786ff44 100644 --- a/db/database-setup.md +++ b/db/database-setup.md @@ -19,7 +19,9 @@ sudo -u postgres psql ```sql CREATE USER gameapp WITH PASSWORD ''; +CREATE ROLE webapp WITH LOGIN PASSWORD ''; CREATE DATABASE gamesdb OWNER gameapp; + \c gamesdb CREATE EXTENSION IF NOT EXISTS pg_trgm; \q @@ -52,7 +54,8 @@ cd backend/db python3 -m venv .venv && source .venv/bin/activate pip install -r requirements.txt export DATABASE_URL='postgresql://gameapp:@localhost:5432/gamesdb' -python load.py +python load.py --force +psql "$DATABASE_URL" -f grants.sql ``` `load.py` leser Parquet-filen med DuckDB, deler opp flerverdi-felter til oppslags- og koblingstabeller, laster alt med `COPY`, oppretter indekser etter lasting og kjører `ANALYZE`. Filstien kan overstyres med `PARQUET_PATH`. Finnes tabellene allerede, avbryter scriptet. `python load.py --force` sletter og laster alt på nytt, inkludert reviews. From 05a0f6f739f2c89458a435a186d69f31329737e6 Mon Sep 17 00:00:00 2001 From: johannes Date: Fri, 9 Oct 2026 11:45:36 +0200 Subject: [PATCH 19/19] =?UTF-8?q?feat(frontend):=20koble=20s=C3=B8k=20til?= =?UTF-8?q?=20spill-lista=20(midlertidig=20klientfiltrering=20av=20mockdat?= =?UTF-8?q?a)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/App.tsx | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 7a024807..84c76beb 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,6 +1,8 @@ import { useState } from 'react'; import { GameList } from './components/GameList/GameList'; import { mockGames } from './mocks/games'; +import { SearchBar } from './components/SearchBar/SearchBar'; +import { useDebounce } from './hooks/useDebounce'; /** * Midlertidig forside: viser spillene med mockdata til GraphQL er klart. @@ -10,6 +12,16 @@ function App() { const [favorites, setFavorites] = useState>(new Set()); const [view, setView] = useState<'list' | 'grid'>('list'); + // Det brukeren skriver nå, og det vi faktisk søker på etter 300 ms pause + const [input, setInput] = useState(''); + const query = useDebounce(input.trim(), 300); + + // MIDLERTIDIG: filtrerer mockdata på klienten for å kunne teste søket. + // Når GraphQL er klart, sendes `query` til backend og filtreres i databasen. + const games = mockGames.filter((g) => + g.name.toLowerCase().includes(query.toLowerCase()), + ); + const toggleFavorite = (id: string) => { setFavorites((prev) => { const next = new Set(prev); @@ -22,6 +34,7 @@ function App() { return (

Spill

+

Søkeresultater

{/* Bytter mellom visning 1 (liste) og visning 2 (rutenett) */} @@ -35,7 +48,7 @@ function App() {