diff --git a/backend/.env.example b/backend/.env.example index 6aed5c03..68799a7d 100644 --- a/backend/.env.example +++ b/backend/.env.example @@ -1,2 +1,9 @@ -DATABASE_URL=postgresql://gameapp:@localhost:5432/gamesdb +# tunnel script env vars +VM_USER= +VM_HOST=it2810-02.idi.ntnu.no +TUNNEL_PORT=5433 + +# backend server env vars +DATABASE_URL=postgresql://webapp:@localhost:5433/gamesdb PORT=3001 +JWT_TOKEN= \ No newline at end of file diff --git a/backend/backend-api.md b/backend/backend-api.md new file mode 100644 index 00000000..edb1e946 --- /dev/null +++ b/backend/backend-api.md @@ -0,0 +1,293 @@ +# Backend-API +## Queries +### game + +Henter informasjon om ett enkelt spill ved ID. + +```graphql +game(id: ID!): Game +``` + +#### Argumenter + +| Navn | Type | Default | Beskrivelse | +| ---- | ----- | ------- | --------------- | +| `id` | `ID!` | — | ID til spillet. | + +#### Returnerer + +[`Game`](#game-1). Returnerer `null` hvis spillet ikke finnes eller id-en er ugyldig. + +#### Eksempel + +```graphql +{ + game(id: "3498") { + name + esrbRating + genres { name } + } +} +``` + +```json +{ + "data": { + "game": { + "name": "Grand Theft Auto V", + "esrbRating": "Mature", + "genres": [{ "name": "Action" }] + } + } +} +``` + +--- + +### games + +Henter en side med spill, med valgfritt søk og filtre. Resultatet er sortert etter popularitet. + +```graphql +games(search: String, filter: GameFilter, first: Int = 20): GameConnection! +``` + +#### Argumenter + +| Navn | Type | Default | Beskrivelse | +| -------- | --------------------------- | ------- | --------------------------------------------------------------------------------------------- | +| `search` | `String` | — | Søk i tittel og alternative navn. Skiller ikke mellom store og små bokstaver, og matcher deler av navnet. | +| `filter` | [`GameFilter`](#gamefilter) | — | Filtrering på sjanger, plattform og utgivelsesår. | +| `first` | `Int` | `20` | Antall spill på siden. Begrenset til 1–50. | + +Alle argumenter er valgfrie og kan kombineres. + +#### Returnerer + +[`GameConnection`](#gameconnection) med spillene på siden og totalt antall treff. + +#### Eksempel: søk + +```graphql +{ + games(search: "zelda", first: 3) { + totalCount + edges { node { name } } + } +} +``` + +```json +{ + "data": { + "games": { + "totalCount": 55, + "edges": [ + { "node": { "name": "The Legend of Zelda: Breath of the Wild" } }, + { "node": { "name": "The Legend of Zelda: Ocarina of Time" } }, + { "node": { "name": "The Legend of Zelda: Tears of the Kingdom" } } + ] + } + } +} +``` + +#### Eksempel: filtre + +Action- og RPG-spill på PC, utgitt 2015–2020: + +```graphql +{ + games( + filter: { genreIds: ["1", "14"], platformIds: ["9"], releasedFrom: 2015, releasedTo: 2020 } + first: 3 + ) { + totalCount + edges { node { name released } } + } +} +``` + +```json +{ + "data": { + "games": { + "totalCount": 2006, + "edges": [ + { "node": { "name": "The Witcher 3: Wild Hunt", "released": "2015-05-18" } }, + { "node": { "name": "Fallout 4", "released": "2015-11-09" } }, + { "node": { "name": "Cyberpunk 2077", "released": "2020-12-10" } } + ] + } + } +} +``` + +--- + +### genres + +Henter alle sjangre, sortert alfabetisk. + +```graphql +genres: [Facet!]! +``` + +#### Argumenter + +Ingen. + +#### Returnerer + +Liste med [`Facet`](#facet). + +#### Eksempel + +```graphql +{ + genres { id name } +} +``` + +```json +{ + "data": { + "genres": [ + { "id": "1", "name": "Action" }, + { "id": "2", "name": "Adventure" }, + { "id": "3", "name": "Arcade" } + ] + } +} +``` + +--- + +### platforms + +Henter alle plattformfamilier (PC, PlayStation, Xbox, …), sortert alfabetisk. + +```graphql +platforms: [Facet!]! +``` + +#### Argumenter + +Ingen. + +#### Returnerer + +Liste med [`Facet`](#facet). + +Merk: ID-ene her er plattformfamilier og er ikke de samme som ID-ene i `Game.platforms`, som er enkeltkonsoller. + +#### Eksempel + +```graphql +{ + platforms { id name } +} +``` + +```json +{ + "data": { + "platforms": [ + { "id": "9", "name": "PC" }, + { "id": "10", "name": "PlayStation" }, + { "id": "13", "name": "Xbox" } + ] + } +} +``` + +## Mutations +> Dette skal legges til når funksjonalitet for brukere blir lagt til + +## Types +### Game + +Et spill med detaljer og relasjoner. + +| Felt | Type | Beskrivelse | +| --------------------------- | ------------------- | ----------------------------------------------------------------- | +| `id` | `ID!` | ID til spillet. | +| `name` | `String!` | Tittel. | +| `description` | `String` | Beskrivelse i ren tekst. | +| `released` | `String` | Utgivelsesdato, `YYYY-MM-DD`. | +| `website` | `String` | Offisiell nettside. | +| `added` | `Int!` | Antall RAWG-brukere som har lagt spillet til i en liste. Brukes som mål på popularitet. | +| `metacritic` | `Int` | Metacritic-score, 0–100. | +| `esrbRating` | `String` | Amerikansk aldersgrense, f.eks. `Mature`. | +| `dominantColor` | `String` | Hovedfargen i forsidebildet som hex, f.eks. `0f0f0f`. | +| `backgroundImage` | `String` | URL til forsidebildet. | +| `backgroundImageAdditional` | `String` | URL til et ekstra bilde. | +| `screenshots` | `[String!]!` | URL-er til skjermbilder. Tom liste hvis ingen. | +| `genres` | [`[Facet!]!`](#facet) | Sjangre. | +| `platforms` | [`[Facet!]!`](#facet) | Enkeltkonsoller, f.eks. PlayStation 4. | +| `stores` | [`[Facet!]!`](#facet) | Butikker spillet selges i. | +| `developers` | [`[Facet!]!`](#facet) | Utviklere. | +| `publishers` | [`[Facet!]!`](#facet) | Utgivere. | +| `tags` | [`[Facet!]!`](#facet) | Tagger fra RAWG, f.eks. Open World. | + +Relasjonene returnerer en tom liste hvis spillet ikke har noen. + +--- + +### Facet + +Felles type for sjangre, plattformer, butikker, utviklere, utgivere og tagger. + +| Felt | Type | Beskrivelse | +| ------ | --------- | ----------- | +| `id` | `ID!` | ID. | +| `name` | `String!` | Navn. | + +--- + +### GameConnection + +Resultatet av [`games`](#games). Følger Relay-mønsteret for paginering (se [dokumentasjon](https://graphql.org/learn/pagination/)). + +| Felt | Type | Beskrivelse | +| ------------ | --------------------------- | --------------------------------------------------- | +| `edges` | [`[GameEdge!]!`](#gameedge) | Spillene på denne siden. | +| `pageInfo` | [`PageInfo!`](#pageinfo) | Informasjon for å hente neste side. | +| `totalCount` | `Int!` | Totalt antall spill som matcher søk og filtre. | + +--- + +### GameEdge + +Ett spill i en [`GameConnection`](#gameconnection). + +| Felt | Type | Beskrivelse | +| -------- | -------------------- | ------------------------------------ | +| `node` | [`Game!`](#game-1) | Spillet. | +| `cursor` | `String!` | Posisjonen til spillet i listen. | + +--- + +### PageInfo + +| Felt | Type | Beskrivelse | +| ------------- | ---------- | ------------------------------------------------------------- | +| `hasNextPage` | `Boolean!` | `true` hvis det finnes flere spill etter denne siden. | +| `endCursor` | `String` | Cursor til siste spill på siden. Sendes som `after` for neste side. | + +--- + +### GameFilter + +Input-type for filtrering i [`games`](#games). Alle felt er valgfrie. + +| Felt | Type | Beskrivelse | +| -------------- | -------- | ------------------------------------------------------------------------------ | +| `genreIds` | `[ID!]` | Spill som har **alle** de valgte sjangrene. ID-er fra [`genres`](#genres). | +| `platformIds` | `[ID!]` | Spill på **minst én** av de valgte plattformfamiliene. ID-er fra [`platforms`](#platforms). | +| `releasedFrom` | `Int` | Utgitt dette året eller senere, f.eks. `2015`. | +| `releasedTo` | `Int` | Utgitt dette året eller tidligere, f.eks. `2020`. | + +Merk: Spill uten utgivelsesdato utelates når `releasedFrom` eller `releasedTo` er satt. ID-er som ikke er tall ignoreres. + + diff --git a/backend/package.json b/backend/package.json index c5121671..17b9e076 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", + "dev": "tsx watch --env-file=.env 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/backend/src/auth.ts b/backend/src/auth.ts new file mode 100644 index 00000000..7816c105 --- /dev/null +++ b/backend/src/auth.ts @@ -0,0 +1,3 @@ + +// server jwt secret +// const secret = process.env.JWT_SECRET; \ No newline at end of file diff --git a/backend/src/db.ts b/backend/src/db.ts new file mode 100644 index 00000000..ead91fad --- /dev/null +++ b/backend/src/db.ts @@ -0,0 +1,7 @@ +import pg from 'pg'; + +const url = process.env.DATABASE_URL; +if (!url) throw new Error("DATABASE_URL not set in .env ...") + +//pg pool +export const pool = new pg.Pool({ connectionString: process.env.DATABASE_URL}) diff --git a/backend/src/index.ts b/backend/src/index.ts index 5a97d4ff..ba22d187 100644 --- a/backend/src/index.ts +++ b/backend/src/index.ts @@ -1,2 +1,21 @@ -// placeholder, erstattes av apollo server senere -console.log('backend'); +import { ApolloServer } from "@apollo/server"; +import { startStandaloneServer } from "@apollo/server/standalone"; +import { pool } from './db.js'; +import { typeDefs } from './schema.js'; +import { resolvers } from './resolvers.js'; + +// apollo-server port number [default port 3001] +const port = Number(process.env.PORT ?? 3001) + +// tester db tilkobling med en query +await pool.query('SELECT 1'); + +// apollo server instance +const server = new ApolloServer({ typeDefs, resolvers }); + +// pass apolloserver to standaloneserver +const { url } = await startStandaloneServer(server, { + listen: { port }, +}); + +console.log(`Server ready at: ${url}`); \ No newline at end of file diff --git a/backend/src/resolvers.ts b/backend/src/resolvers.ts new file mode 100644 index 00000000..9a9e10ae --- /dev/null +++ b/backend/src/resolvers.ts @@ -0,0 +1,175 @@ +import { assertName } from 'graphql'; +import { pool } from './db.js'; + +// type definitions +type GamesArgs = { + search?: string | null; + filter?: GameFilter | null; + first: number; +}; + +type GameFilter = { + genreIds?: string[] | null; + platformIds?: string[] | null; + releasedFrom?: number | null; + releasedTo?: number | null; +} + +// const vars and func +const VALID_ID_REGEX = /^\d{1,18}$/; +const MAX_PAGE_SIZE = 50; +const escapeChars = (s: string) => s.replace(/[\\%_]/g, '\\$&') + +// definerer hvilke kolonner som skal hentes for en generell +// forespørsel om et spill, inkludert oversetting fra databasen +// sin navnekonvensjon til GraphQL, og konvertering av typer +const GAME_COLS = ` + id, + name, + description, + released::text AS "released", + website, + added, + metacritic, + esrb_rating AS "esrbRating", + dominant_color AS "dominantColor", + background_image AS "backgroundImage", + background_image_additional AS "backgroundImageAdditional", + COALESCE(screenshots, '{}') AS "screenshots" +`; + +// SQL filtrering +const WHERE_SEARCH = ` + ($1::text IS NULL OR + search_names ILIKE $1) +`; +const WHERE_GENRES = ` + ($2::int[] IS NULL OR ( + SELECT count(*) FROM game_genres gg + WHERE gg.game_id = games.id + AND gg.genre_id = ANY($2)) = cardinality($2)) +`; +const WHERE_PLATFORM = ` + ($3::int[] IS NULL OR EXISTS ( + SELECT 1 FROM game_parent_platforms gp + WHERE gp.game_id = games.id + AND gp.parent_platform_id = ANY($3))) +`; +const WHERE_RELEASED_FROM = ` + ($4::int IS NULL OR + released >= make_date($4, 1, 1)) +`; +const WHERE_RELEASED_TO = ` + ($5::int IS NULL OR + released < make_date($5 + 1, 1, 1)) +`; +const GAMES_WHERE = ` + WHERE ${WHERE_SEARCH} + AND ${WHERE_GENRES} + AND ${WHERE_PLATFORM} + AND ${WHERE_RELEASED_FROM} + AND ${WHERE_RELEASED_TO} +`; + + +// SQL queries +const SQL_COUNT = ` + SELECT count(*)::int AS count FROM games + ${GAMES_WHERE} +`; +const SQL_GENRES = ` + SELECT id, name FROM genres + ORDER BY name +`; +const SQL_PLATFORMS = ` + SELECT id, name FROM parent_platforms + ORDER BY name +`; +const SQL_GAME = ` + SELECT ${GAME_COLS} FROM games + WHERE id = $1 +`; +const SQL_GAMES = ` + SELECT ${GAME_COLS} FROM games + ${GAMES_WHERE} + ORDER BY added DESC, id DESC + LIMIT $6 +`; + +// hjelpefunksjoner +function toIds(ids?: string[] | null) { + const nums = (ids??[]).map(Number).filter(Number.isInteger); + return nums.length? nums : null; +} +// returnerer array med filter-verdiene +function filterValues(args: GamesArgs) { + const term = args.search?.trim(); + return [ + term? `%${escapeChars(term)}%` : null, + toIds(args.filter?.genreIds), + toIds(args.filter?.platformIds), + args.filter?.releasedFrom??null, + args.filter?.releasedTo??null, + ]; +} +// resolver for koblings-tabellene i databasen +function relation(table: string, junc: string, fk: string) { + const sql = ` + SELECT t.id, t.name + FROM ${junc} j + JOIN ${table} t ON t.id = j.${fk} + WHERE j.game_id = $1 + ORDER BY t.name + `; + return async (game: {id: string }) => { + const res = await pool.query(sql, [game.id]); + return res.rows; + }; +}; + +// resolver-funksjoner +async function game(_parent: unknown, args: { id: string }) { + if (!VALID_ID_REGEX.test(args.id)) { return null; } + const res = await pool.query(SQL_GAME, [args.id]) + return res.rows[0] ?? null; +}; + +async function games(_parent: unknown, args: GamesArgs ) { + const values = filterValues(args); + const first = Math.min(Math.max(args.first, 1), MAX_PAGE_SIZE); + + const res = await pool.query(SQL_GAMES, [...values, first]); + return { + edges: res.rows.map((row) => ({ node: row, cursor: '' })), + pageInfo: { hasNextPage: false, endCursor: null}, + values, + }; +} + +async function totalCount(parent: { values: unknown[] }) { + return (await pool.query(SQL_COUNT, parent.values)).rows[0].count; +} + +async function genres() { + return (await pool.query(SQL_GENRES)).rows; +} + +async function platforms() { + return (await pool.query(SQL_PLATFORMS)).rows; +} + +// resolvers for å hente kjøre spørringer mot databasen +export const resolvers = { + Query: { game, games, genres, platforms }, + + Game: { + genres: relation('genres', 'game_genres', 'genre_id'), + platforms: relation('platforms', 'game_platforms', 'platform_id'), + stores: relation('stores', 'game_stores', 'store_id'), + developers: relation('developers', 'game_developers', 'developer_id'), + publishers: relation('publishers', 'game_publishers', 'publisher_id'), + tags: relation('tags', 'game_tags', 'tag_id'), + }, + + GameConnection: { totalCount } +}; diff --git a/backend/src/schema.ts b/backend/src/schema.ts new file mode 100644 index 00000000..fa8b1eb1 --- /dev/null +++ b/backend/src/schema.ts @@ -0,0 +1,83 @@ + +export const typeDefs = `#graphql + """ + Definerer input argumentene som er gyldige mot serveren. + Brukes for å filtrere visningen av spill. + """ + input GameFilter { + genreIds: [ID!] + platformIds: [ID!] + releasedFrom: Int + releasedTo: Int + } + + """ + Generell type for attributter som sjanger, platform, etc. + """ + type Facet { + id: ID! + name: String! + } + + """ + Game holder all informasjon om ett enkelt spill. + """ + type Game { + id: ID!, + name: String!, + description: String, + released: String, + website: String, + added: Int!, + metacritic: Int, + esrbRating: String, + dominantColor: String, + backgroundImage: String, + backgroundImageAdditional: String, + screenshots: [String!]! + + genres: [Facet!]! + platforms: [Facet!]! + stores: [Facet!]! + developers: [Facet!]! + publishers: [Facet!]! + tags: [Facet!]! + } + + """ + Resultatet av en 'games' query, dette returnerer en 'page' + med mange 'edges' (spill) og kontroll-informasjon for pagination. + """ + type GameConnection { + edges: [GameEdge!]! + pageInfo: PageInfo! + totalCount: Int! + } + + """ + Én 'game-edge' fra GameConnection. Inneholder informasjon om spillet (Game) + og posisjonen til spillet i lista (cursor). + """ + type GameEdge { + node: Game! + cursor: String! + } + + """ + Info om nåværende page, kontrollinformasjon for neste forespørsel. + """ + type PageInfo { + hasNextPage: Boolean! + endCursor: String + } + + """ + Alle gyldige queries mot backend er definert her. + """ + type Query { + game(id: ID!): Game + games(search: String, filter: GameFilter, first: Int=20): GameConnection! + genres: [Facet!]! + platforms: [Facet!]! + } +`; \ No newline at end of file diff --git a/db/.gitignore b/db/.gitignore deleted file mode 100644 index 4bed5da9..00000000 --- a/db/.gitignore +++ /dev/null @@ -1 +0,0 @@ -*.parquet diff --git a/db/database-connect.md b/db/database-connect.md new file mode 100644 index 00000000..22b178e7 --- /dev/null +++ b/db/database-connect.md @@ -0,0 +1,55 @@ +# Database-connect +## 1. 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 se ut slik: +``` +# tunnel script env vars +VM_USER= +VM_HOST=it2810-02.idi.ntnu.no +TUNNEL_PORT=5433 + +# backend server env vars +DATABASE_URL=postgresql://webapp:@localhost:5433/gamesdb +PORT=3001 +JWT_TOKEN= +``` + +## 2. Database-tilkobling under utvikling +#### Linux/Mac +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 +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(*) 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. 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. 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`. diff --git a/db/grants.sql b/db/grants.sql index 8c2bddb4..733b740a 100644 --- a/db/grants.sql +++ b/db/grants.sql @@ -1,14 +1,13 @@ --- Privileges for the backend role. Run after every import or migration, since load.py recreates the tables. --- The role itself is created once as postgres: +-- Rettigheter for backend rollen webapp. Kjør etter hver import! +-- Rollen skal opprettes èn gang i postgres før scriptet kjøres: -- CREATE ROLE webapp WITH LOGIN PASSWORD ''; - 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 users TO webapp; GRANT USAGE ON SEQUENCE users_id_seq TO webapp; - + GRANT INSERT ON reviews TO webapp; GRANT USAGE ON SEQUENCE reviews_id_seq TO webapp; diff --git a/frontend/index.html b/frontend/index.html index 0fca6f04..78357eeb 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -4,7 +4,7 @@ - frontend + Damp
diff --git a/frontend/public/favicon.svg b/frontend/public/favicon.svg index 6893eb13..34534755 100644 --- a/frontend/public/favicon.svg +++ b/frontend/public/favicon.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 9ec34bc7..f657f66c 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,101 +1,60 @@ import { useState } from 'react'; -import heroImg from './assets/hero.png'; -import reactLogo from './assets/react.svg'; -import viteLogo from './assets/vite.svg'; -import './App.css'; +import { GameList } from './components/GameList/GameList'; +import { mockGames } from './mocks/games'; +import { SearchBar } from './components/SearchBar/SearchBar'; +import { useDebounce } from './hooks/useDebounce'; +import { Logo} from './components/Logo/Logo'; +/** + * Midlertidig forside: viser spillene med mockdata til GraphQL er klart. + * Favoritter og valgt visning ligger bare i minnet her og skal senere inn i state management. + */ function App() { - const [count, setCount] = useState(0); + const [favorites, setFavorites] = useState>(new Set()); + const [view, setView] = useState<'list' | 'grid'>('list'); - return ( - <> -
-
- - React logo - Vite logo -
-
-

Get started

-

- Edit src/App.tsx and save to test HMR -

-
- -
+ // 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); + if (next.has(id)) next.delete(id); + else next.add(id); + return next; + }); + }; -
-
- -

Documentation

-

Your questions, answered

- -
-
- -

Connect with us

-

Join the Vite community

- -
-
+ return ( +
+ {/* NY: logoen øverst til høyre */} + +

Søkeresultater

+ + {/* Bytter mellom visning 1 (liste) og visning 2 (rutenett) */} +
+ + +
-
-
- + +
); } diff --git a/frontend/src/assets/logo/damp-logo-horizontal-on-dark.svg b/frontend/src/assets/logo/damp-logo-horizontal-on-dark.svg new file mode 100644 index 00000000..e341514d --- /dev/null +++ b/frontend/src/assets/logo/damp-logo-horizontal-on-dark.svg @@ -0,0 +1 @@ +Damp diff --git a/frontend/src/assets/logo/damp-logo-horizontal-on-light.svg b/frontend/src/assets/logo/damp-logo-horizontal-on-light.svg new file mode 100644 index 00000000..d23dcef8 --- /dev/null +++ b/frontend/src/assets/logo/damp-logo-horizontal-on-light.svg @@ -0,0 +1 @@ +Damp diff --git a/frontend/src/assets/logo/damp-logo-stacked-on-dark.svg b/frontend/src/assets/logo/damp-logo-stacked-on-dark.svg new file mode 100644 index 00000000..980071ea --- /dev/null +++ b/frontend/src/assets/logo/damp-logo-stacked-on-dark.svg @@ -0,0 +1 @@ +Damp diff --git a/frontend/src/assets/logo/damp-logo-stacked-on-light.svg b/frontend/src/assets/logo/damp-logo-stacked-on-light.svg new file mode 100644 index 00000000..6ceb29b3 --- /dev/null +++ b/frontend/src/assets/logo/damp-logo-stacked-on-light.svg @@ -0,0 +1 @@ +Damp diff --git a/frontend/src/assets/logo/damp-mark-on-dark.svg b/frontend/src/assets/logo/damp-mark-on-dark.svg new file mode 100644 index 00000000..e2a0f87e --- /dev/null +++ b/frontend/src/assets/logo/damp-mark-on-dark.svg @@ -0,0 +1 @@ +Damp logo mark diff --git a/frontend/src/assets/logo/damp-mark-on-light.svg b/frontend/src/assets/logo/damp-mark-on-light.svg new file mode 100644 index 00000000..a81e0c36 --- /dev/null +++ b/frontend/src/assets/logo/damp-mark-on-light.svg @@ -0,0 +1 @@ +Damp logo mark diff --git a/frontend/src/components/GameCard/GameCard.css b/frontend/src/components/GameCard/GameCard.css new file mode 100644 index 00000000..781fc6f8 --- /dev/null +++ b/frontend/src/components/GameCard/GameCard.css @@ -0,0 +1,171 @@ +/* Én rad i resultatlista. Ingen boks, bare en skillelinje under. */ +.game-card { + position: relative; + display: grid; + grid-template-columns: 150px 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 */ +} + +.game-card__favorite { + position: absolute; /* plasseres i forhold til .game-card, som har position: relative */ + top: 12px; /* samme som padding-toppen på raden */ + right: 0; + z-index: 1; /* over den strukne lenken */ + min-height: 32px; + padding: 0 10px; + font: inherit; + font-size: 14px; + color: var(--text-h); + background: none; + border: 1px solid var(--text-h); + border-radius: 0; + cursor: pointer; +} + +/* Plass til knappen, så lange titler ikke havner under den */ +.game-card__body { + padding-right: 110px; +} + +.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; + } +} + +/* ===== Visning 2: oppsummert rute (4 per rad) ===== */ +.game-card--grid { + grid-template-columns: 1fr; /* bildet over teksten */ + grid-template-rows: auto 1fr; /* teksten fyller resten av ruta */ + height: 100%; /* like høye ruter i samme rad */ + box-sizing: border-box; + gap: 10px; + padding: 0 0 14px; +} + +.game-card--grid .game-card__body { + gap: 2px; + padding-right: 0; /* knappen ligger ikke ved tittelen her */ +} + +/* Maks to linjer tittel, så rutene blir like høye */ +.game-card--grid .game-card__title { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + font-size: 16px; +} + +.game-card--grid .game-card__meta, +.game-card--grid .game-card__scores { + font-size: 14px; +} + +.game-card--grid .game-card__scores { + margin: auto 0 0; /* skyver rating ned til bunnen av ruta */ +} + +/* Favoritt nederst til høyre, på linje med rating */ +.game-card--grid .game-card__favorite { + top: auto; + bottom: 8px; +} + +/* Smale ruter (mobil): knappen under rating i stedet for ved siden av */ +@media (max-width: 640px) { + .game-card--grid .game-card__favorite { + position: relative; + bottom: auto; + margin-top: 6px; + } +} diff --git a/frontend/src/components/GameCard/GameCard.tsx b/frontend/src/components/GameCard/GameCard.tsx new file mode 100644 index 00000000..690148d2 --- /dev/null +++ b/frontend/src/components/GameCard/GameCard.tsx @@ -0,0 +1,70 @@ +import type { GameSummary } from '../../types/game'; +import './GameCard.css'; + +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, view = 'list' }: GameCardProps) { + const year = game.released?.slice(0, 4) ?? null; + 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. + + ) : ( +
+ ); +} diff --git a/frontend/src/components/GameList/GameList.css b/frontend/src/components/GameList/GameList.css new file mode 100644 index 00000000..7c4e83ed --- /dev/null +++ b/frontend/src/components/GameList/GameList.css @@ -0,0 +1,32 @@ +.game-list { + margin: 0; + padding: 0; + list-style: none; +} + +/* Visning 2: fire ruter per rad. minmax(0, 1fr) hindrer at lange titler sprenger kolonnene. */ +.game-list--grid { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 28px 24px; + padding-top: 20px; +} + +/* Lar kortet fylle hele høyden i ruta, så bunnlinjene står likt */ +.game-list--grid > li { + display: flex; + flex-direction: column; +} + +@media (max-width: 900px) { + .game-list--grid { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } +} + +@media (max-width: 640px) { + .game-list--grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 24px 16px; + } +} diff --git a/frontend/src/components/GameList/GameList.tsx b/frontend/src/components/GameList/GameList.tsx new file mode 100644 index 00000000..2cc8e6ff --- /dev/null +++ b/frontend/src/components/GameList/GameList.tsx @@ -0,0 +1,31 @@ +import type { GameSummary } from '../../types/game'; +import { GameCard } from '../GameCard/GameCard'; +import './GameList.css'; + +interface GameListProps { + games: GameSummary[]; + favorites: Set; + onToggleFavorite: (id: string) => void; + view: 'list' | 'grid'; +} + +/** + * Resultatlista. Samme data og samme kort i begge visninger, + * bare layouten endres.
    /
  • gjør at skjermlesere sier hvor mange spill som vises. + */ +export function GameList({ games, favorites, onToggleFavorite, view }: GameListProps) { + return ( +
      + {games.map((game) => ( +
    • + +
      • + ))} +
    + ); +} diff --git a/frontend/src/components/Logo/Logo.css b/frontend/src/components/Logo/Logo.css new file mode 100644 index 00000000..a91c291b --- /dev/null +++ b/frontend/src/components/Logo/Logo.css @@ -0,0 +1,37 @@ +/* Smale skjermer: øverst til venstre, scroller vekk så den ikke dekker innholdet */ +.logo { + position: absolute; + top: 20px; + left: 20px; + z-index: 10; +} + +.logo img { + display: block; + height: 88px; + width: auto; +} + +@media (max-width: 600px) { + .logo img { + height: 56px; /* Mindre logo på mobil */ + } +} + +/* Brede skjermer: fast og midt i sidepanelet til venstre. Må stå sist i filen */ +@media (min-width: 1320px) { + .logo { + position: fixed; + top: 20px; + /* Midten av sidepanelet. 1126px er bredden på #root i index.css; endres den, må den endres her også */ + left: calc((100vw - 1126px) / 4); + /* Flytter logoen halvparten av sin egen bredde til venstre, så midten av logoen havner midt i panelet */ + transform: translateX(-50%); + } + + .logo img { + height: auto; + /* Større: opptil 160px bred, men aldri bredere enn panelet minus 24px luft på hver side */ + width: min(90px, calc((100vw - 1126px) / 2 - 48px)); + } +} \ No newline at end of file diff --git a/frontend/src/components/Logo/Logo.tsx b/frontend/src/components/Logo/Logo.tsx new file mode 100644 index 00000000..24eb3dcd --- /dev/null +++ b/frontend/src/components/Logo/Logo.tsx @@ -0,0 +1,13 @@ +import logoOnDark from '../../assets/logo/damp-logo-stacked-on-dark.svg'; +import logoOnLight from '../../assets/logo/damp-logo-stacked-on-light.svg'; +import './Logo.css'; + +/** Damp-logoen (symbol med navnet under). Bytter versjon etter lyst/mørkt tema. */ +export function Logo() { + return ( + + + Damp + + ); +} 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; +} 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 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 diff --git a/frontend/src/mocks/games.ts b/frontend/src/mocks/games.ts new file mode 100644 index 00000000..ae05b1ef --- /dev/null +++ b/frontend/src/mocks/games.ts @@ -0,0 +1,62 @@ +import type { GameSummary } from '../types/game'; + +/** + * Midlertidige testdata så vi kan se spillkortene før GraphQL-API-et er koblet på. + * Slettes når listen henter ekte data. Tallene er omtrentlige. + */ +export const mockGames: GameSummary[] = [ + { + id: '1', + name: 'The Witcher 3: Wild Hunt', + released: '2015-05-18', + backgroundImage: null, + rating: 4.66, + metacritic: 92, + genres: ['Action', 'RPG'], + }, + { + id: '2', + name: 'Red Dead Redemption 2', + released: '2018-10-26', + backgroundImage: null, + rating: 4.59, + metacritic: 96, + genres: ['Action', 'Adventure'], + }, + { + id: '3', + name: 'Portal 2', + released: '2011-04-18', + backgroundImage: null, + rating: 4.62, + metacritic: 95, + genres: ['Shooter', 'Puzzle'], + }, + { + id: '4', + name: 'Hades', + released: '2020-09-17', + backgroundImage: null, + rating: 4.5, + metacritic: 93, + genres: ['Action', 'Indie'], + }, + { + id: '5', + name: 'Stardew Valley', + released: '2016-02-26', + backgroundImage: null, + rating: 4.4, + metacritic: 89, + genres: ['Simulation', 'RPG'], + }, + { + id: '6', + name: 'Et spill uten data', + released: null, + backgroundImage: null, + rating: null, + metacritic: null, + genres: [], + }, +]; 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[]; +} 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;"