-
-
-
NTNU Rating:
-
Your Rating:
-
+
+
+ {loading && !data &&
Loading…
}
+ {!loading && (error || !game) && (
+
Game not found.
+ )}
+
+ {game && (
+ <>
+
+ {game.releaseDate
+ ? new Date(game.releaseDate).getFullYear()
+ : "Unknown year"}{" "}
+ | Age Rating: {game.esrbRating || "Not rated"}
+
+
{game.name}
+
+
+
+
+
+ NTNU Rating:{" "}
+ {game.reviewCount > 0
+ ? `${game.averageScore.toFixed(1)}/10`
+ : "Not yet rated"}
+
+
+
+
+
{game.tags.join(", ") || "—"}
+
+
+ Developer:
+ {game.developers.join(", ") || "—"}
+
+
+ Publishers:
+ {game.publishers.join(", ") || "—"}
+
+
+ Platform:
+ {game.platforms.join(", ") || "—"}
+
+
+
+ Description
+ {game.description || "No description available."}
+
+
+ )}
Tags:
- Developer(s):
- Publisher(s):
- Platform(s):
- Description
-
+
);
}
diff --git a/frontend/src/pages/GamesGrid/GamesGrid.module.css b/frontend/src/pages/GamesGrid/GamesGrid.module.css
index 4dd75cc..2daf25e 100644
--- a/frontend/src/pages/GamesGrid/GamesGrid.module.css
+++ b/frontend/src/pages/GamesGrid/GamesGrid.module.css
@@ -4,3 +4,4 @@
height: calc(100vh - var(--header-height) - var(--toolbar-height));
overflow: hidden;
}
+
diff --git a/frontend/src/pages/GamesGrid/GamesGrid.tsx b/frontend/src/pages/GamesGrid/GamesGrid.tsx
index 93c6aff..d1a5cb0 100644
--- a/frontend/src/pages/GamesGrid/GamesGrid.tsx
+++ b/frontend/src/pages/GamesGrid/GamesGrid.tsx
@@ -1,58 +1,291 @@
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { gql } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
+import { useSearchParams } from "react-router-dom";
import Header from "../../components/Header/Header";
import Layout from "../../components/Layout/Layout";
import Toolbar from "../../components/Toolbar/Toolbar";
import GameListItem from "../../components/GameListItem/GameListItem";
+import {
+ GRID_PAGE_STORAGE_KEY,
+ GRID_QUERY_STORAGE_KEY,
+} from "../../constants/storageKeys";
+import {
+ DEFAULT_SORT,
+ hasActiveFilters,
+ type GameFilters,
+ type SortField,
+ type SortState,
+} from "../../types/gameQuery";
import styles from "./GamesGrid.module.css";
-const games = [
- {
- title: "Heroes of Might and Magic: Olden Era",
- year: 2026,
- tags: "Turn-based strategy",
- rating: 9.3,
- image: "",
- },
- {
- title: "Minecraft",
- year: 2009,
- tags: "Indie, Survival, Adventure, Sandbox",
- rating: 9.1,
- image: "",
- },
- {
- title: "Ori and the Blind Forest",
- year: 2015,
- tags: "Metroidvania",
- rating: 8.8,
- image: "",
- },
- {
- title: "Pokémon Legends: Z-A",
- year: 2025,
- tags: "Action RPG",
- rating: 0.1,
- image: "",
- },
- {
- title: "Hades",
- year: 2020,
- tags: "Roguelike",
- rating: 9.4,
- image: "",
- },
+const GET_GAMES = gql`
+ query GetGames(
+ $search: String
+ $filter: GameFilter
+ $sortBy: SortField
+ $sortOrder: SortOrder
+ $offset: Int
+ $limit: Int
+ ) {
+ games(
+ search: $search
+ filter: $filter
+ sortBy: $sortBy
+ sortOrder: $sortOrder
+ offset: $offset
+ limit: $limit
+ ) {
+ totalCount
+ games {
+ id
+ name
+ imageUrl
+ releaseDate
+ tags
+ averageScore
+ reviewCount
+ }
+ }
+ }
+`;
+
+interface GamesData {
+ games: {
+ totalCount: number;
+ games: {
+ id: string;
+ name: string;
+ imageUrl: string | null;
+ releaseDate: string | null;
+ tags: string[];
+ averageScore: number;
+ reviewCount: number;
+ }[];
+ };
+}
+
+const SORT_FIELDS: readonly SortField[] = [
+ "NAME",
+ "RELEASE_DATE",
+ "AVERAGE_SCORE",
+ "REVIEW_COUNT",
];
+function getStoredPage() {
+ const stored = Number(sessionStorage.getItem(GRID_PAGE_STORAGE_KEY));
+ return Number.isInteger(stored) && stored > 0 ? stored : 1;
+}
+
+function parseIntParam(value: string | null): number | null {
+ if (!value) return null;
+ const parsed = Number.parseInt(value, 10);
+ return Number.isFinite(parsed) ? parsed : null;
+}
+
+function parseFloatParam(value: string | null): number | null {
+ if (!value) return null;
+ const parsed = Number.parseFloat(value);
+ return Number.isFinite(parsed) ? parsed : null;
+}
+
+function parseListParam(value: string | null): string[] {
+ if (!value) return [];
+ return value.split(",").filter(Boolean);
+}
+
+function parseFiltersFromParams(params: URLSearchParams): GameFilters {
+ return {
+ tags: parseListParam(params.get("tags")),
+ platforms: parseListParam(params.get("platforms")),
+ esrbRating: params.get("esrb") || null,
+ yearFrom: parseIntParam(params.get("yearFrom")),
+ yearTo: parseIntParam(params.get("yearTo")),
+ minScore: parseFloatParam(params.get("minScore")),
+ };
+}
+
+function parseSortFromParams(params: URLSearchParams): SortState {
+ const field = params.get("sortBy");
+ const order = params.get("sortOrder");
+ return {
+ field: SORT_FIELDS.includes(field as SortField)
+ ? (field as SortField)
+ : DEFAULT_SORT.field,
+ order: order === "DESC" ? "DESC" : DEFAULT_SORT.order,
+ };
+}
+
export default function GamesGrid() {
+ const listRef = useRef
(null);
+ const [rawPage, setPage] = useState(getStoredPage);
+ // Unknown until measured, so we don't fetch a page size before the list
+ // area has actually been laid out.
+ const [pageSize, setPageSize] = useState(null);
+ const [searchParams, setSearchParams] = useSearchParams();
+
+ const search = searchParams.get("search") ?? "";
+ const filters = useMemo(
+ () => parseFiltersFromParams(searchParams),
+ [searchParams],
+ );
+ const sort = useMemo(() => parseSortFromParams(searchParams), [searchParams]);
+
+ // Reset to page 1 whenever search, filters or sort change.
+ const queryKey = searchParams.toString();
+ const prevQueryKeyRef = useRef(queryKey);
+ useEffect(() => {
+ if (prevQueryKeyRef.current !== queryKey) {
+ prevQueryKeyRef.current = queryKey;
+ setPage(1);
+ }
+ }, [queryKey]);
+
+ // Persisted so the header's title link can restore it from other routes.
+ useEffect(() => {
+ sessionStorage.setItem(GRID_QUERY_STORAGE_KEY, queryKey);
+ }, [queryKey]);
+
+ function updateFilters(nextFilters: GameFilters) {
+ const params = new URLSearchParams(searchParams);
+
+ if (nextFilters.tags.length) {
+ params.set("tags", nextFilters.tags.join(","));
+ } else {
+ params.delete("tags");
+ }
+ if (nextFilters.platforms.length) {
+ params.set("platforms", nextFilters.platforms.join(","));
+ } else {
+ params.delete("platforms");
+ }
+ if (nextFilters.esrbRating) {
+ params.set("esrb", nextFilters.esrbRating);
+ } else {
+ params.delete("esrb");
+ }
+ if (nextFilters.yearFrom != null) {
+ params.set("yearFrom", String(nextFilters.yearFrom));
+ } else {
+ params.delete("yearFrom");
+ }
+ if (nextFilters.yearTo != null) {
+ params.set("yearTo", String(nextFilters.yearTo));
+ } else {
+ params.delete("yearTo");
+ }
+ if (nextFilters.minScore != null) {
+ params.set("minScore", String(nextFilters.minScore));
+ } else {
+ params.delete("minScore");
+ }
+
+ setSearchParams(params);
+ }
+
+ function updateSort(nextSort: SortState) {
+ const params = new URLSearchParams(searchParams);
+ params.set("sortBy", nextSort.field);
+ params.set("sortOrder", nextSort.order);
+ setSearchParams(params);
+ }
+
+ // Pages are sized to however many rows actually fit in the visible list
+ // area, so we only ever need to fetch that many games from the backend.
+ useLayoutEffect(() => {
+ const listEl = listRef.current;
+ if (!listEl) return;
+
+ const rowMinHeight =
+ parseFloat(
+ getComputedStyle(listEl).getPropertyValue("--row-min-height"),
+ ) || 1;
+
+ const updatePageSize = () => {
+ setPageSize(Math.max(1, Math.floor(listEl.clientHeight / rowMinHeight)));
+ };
+
+ updatePageSize();
+ const observer = new ResizeObserver(updatePageSize);
+ observer.observe(listEl);
+ return () => observer.disconnect();
+ }, []);
+
+ const { data, loading, error } = useQuery(GET_GAMES, {
+ variables: {
+ search: search || undefined,
+ filter: {
+ tags: filters.tags.length ? filters.tags : undefined,
+ platforms: filters.platforms.length ? filters.platforms : undefined,
+ esrbRating: filters.esrbRating ?? undefined,
+ releaseYearFrom: filters.yearFrom ?? undefined,
+ releaseYearTo: filters.yearTo ?? undefined,
+ minScore: filters.minScore ?? undefined,
+ },
+ sortBy: sort.field,
+ sortOrder: sort.order,
+ offset: (rawPage - 1) * (pageSize ?? 0),
+ limit: pageSize,
+ },
+ skip: pageSize === null,
+ });
+
+ const totalCount = data?.games.totalCount ?? 0;
+ const totalPages = pageSize ? Math.max(1, Math.ceil(totalCount / pageSize)) : 1;
+ // Clamp at render time (e.g. after the viewport grows and more rows fit)
+ // instead of in an effect, so a shrinking page count never needs a second render.
+ const page = Math.min(rawPage, totalPages);
+ const games = data?.games.games ?? [];
+
+ useEffect(() => {
+ sessionStorage.setItem(GRID_PAGE_STORAGE_KEY, String(page));
+ }, [page]);
+
return (
<>
-
-
+
setPage((p) => Math.max(1, p - 1))}
+ onNextPage={() => setPage((p) => Math.min(totalPages, p + 1))}
+ filters={filters}
+ onFiltersChange={updateFilters}
+ sort={sort}
+ onSortChange={updateSort}
+ />
+
+
+ {!loading && `${totalCount} game${totalCount === 1 ? "" : "s"} found`}
+
+ {error &&
Failed to load games.
}
+ {!error && loading && !data && (
+
Loading games…
+ )}
+ {!error && !loading && games.length === 0 && (
+
+ No games match{" "}
+ {hasActiveFilters(filters) || search
+ ? "these filters"
+ : "the catalog"}
+ .
+
+ )}
{games.map((game, index) => (
))}
diff --git a/frontend/src/types/gameQuery.ts b/frontend/src/types/gameQuery.ts
new file mode 100644
index 0000000..02c297a
--- /dev/null
+++ b/frontend/src/types/gameQuery.ts
@@ -0,0 +1,46 @@
+export interface GameFilters {
+ tags: string[];
+ platforms: string[];
+ esrbRating: string | null;
+ yearFrom: number | null;
+ yearTo: number | null;
+ minScore: number | null;
+}
+
+export type SortField =
+ | "NAME"
+ | "RELEASE_DATE"
+ | "AVERAGE_SCORE"
+ | "REVIEW_COUNT";
+
+export type SortOrder = "ASC" | "DESC";
+
+export interface SortState {
+ field: SortField;
+ order: SortOrder;
+}
+
+export const EMPTY_FILTERS: GameFilters = {
+ tags: [],
+ platforms: [],
+ esrbRating: null,
+ yearFrom: null,
+ yearTo: null,
+ minScore: null,
+};
+
+export const DEFAULT_SORT: SortState = {
+ field: "NAME",
+ order: "ASC",
+};
+
+export function hasActiveFilters(filters: GameFilters): boolean {
+ return (
+ filters.tags.length > 0 ||
+ filters.platforms.length > 0 ||
+ filters.esrbRating !== null ||
+ filters.yearFrom !== null ||
+ filters.yearTo !== null ||
+ filters.minScore !== null
+ );
+}