chore(deps): update dependency @types/node to v24.10.4

store theme selection in localstorage
feat: modularize game filtering logic and UI into a custom hook and dedicated components.feat: modularize game filtering logic and UI into a custom hook and dedicated components.
2025-12-19 14:03:52 +00:00 · 2025-12-19 14:08:54 +01:00 · 2025-12-19 14:06:31 +01:00
7 changed files with 285 additions and 217 deletions
--- a/frontend/index.html
+++ b/frontend/index.html
@ -3,7 +3,6 @@

 <head>
  <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Game List</title>
 </head>
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@ -29,7 +29,7 @@ importers:
        version: 9.39.1
      '@types/node':
        specifier: ^24.10.1
-        version: 24.10.1
+        version: 24.10.4
      '@types/react':
        specifier: ^19.2.7
        version: 19.2.7
@ -38,7 +38,7 @@ importers:
        version: 19.2.3(@types/react@19.2.7)
      '@vitejs/plugin-react':
        specifier: ^5.1.2
-        version: 5.1.2(rolldown-vite@7.2.5(@types/node@24.10.1))
+        version: 5.1.2(rolldown-vite@7.2.5(@types/node@24.10.4))
      eslint:
        specifier: ^9.39.1
        version: 9.39.1
@ -62,7 +62,7 @@ importers:
        version: 8.48.1(eslint@9.39.1)(typescript@5.9.3)
      vite:
        specifier: npm:rolldown-vite@7.2.5
-        version: rolldown-vite@7.2.5(@types/node@24.10.1)
+        version: rolldown-vite@7.2.5(@types/node@24.10.4)

 packages:

@ -351,8 +351,8 @@ packages:
  '@types/json-schema@7.0.15':
    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}

-  '@types/node@24.10.1':
-    resolution: {integrity: sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ==}
+  '@types/node@24.10.4':
+    resolution: {integrity: sha512-vnDVpYPMzs4wunl27jHrfmwojOGKya0xyM3sH+UE5iv5uPS6vX7UIoh6m+vQc5LGBq52HBKPIn/zcSZVzeDEZg==}

  '@types/react-dom@19.2.3':
    resolution: {integrity: sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==}
@ -425,7 +425,7 @@ packages:
    resolution: {integrity: sha512-EcA07pHJouywpzsoTUqNh5NwGayl2PPVEJKUSinGGSxFGYn+shYbqMGBg6FXDqgXum9Ou/ecb+411ssw8HImJQ==}
    engines: {node: ^20.19.0 || >=22.12.0}
    peerDependencies:
-      vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
+      vite: npm:rolldown-vite@7.2.5

  acorn-jsx@5.3.2:
    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
@ -1350,7 +1350,7 @@ snapshots:

  '@types/json-schema@7.0.15': {}

-  '@types/node@24.10.1':
+  '@types/node@24.10.4':
    dependencies:
      undici-types: 7.16.0

@ -1454,7 +1454,7 @@ snapshots:
      '@typescript-eslint/types': 8.48.1
      eslint-visitor-keys: 4.2.1

-  '@vitejs/plugin-react@5.1.2(rolldown-vite@7.2.5(@types/node@24.10.1))':
+  '@vitejs/plugin-react@5.1.2(rolldown-vite@7.2.5(@types/node@24.10.4))':
    dependencies:
      '@babel/core': 7.28.5
      '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.28.5)
@ -1462,7 +1462,7 @@ snapshots:
      '@rolldown/pluginutils': 1.0.0-beta.53
      '@types/babel__core': 7.20.5
      react-refresh: 0.18.0
-      vite: rolldown-vite@7.2.5(@types/node@24.10.1)
+      vite: rolldown-vite@7.2.5(@types/node@24.10.4)
    transitivePeerDependencies:
      - supports-color

@ -1870,7 +1870,7 @@ snapshots:

  resolve-from@4.0.0: {}

-  rolldown-vite@7.2.5(@types/node@24.10.1):
+  rolldown-vite@7.2.5(@types/node@24.10.4):
    dependencies:
      '@oxc-project/runtime': 0.97.0
      fdir: 6.5.0(picomatch@4.0.3)
@ -1880,7 +1880,7 @@ snapshots:
      rolldown: 1.0.0-beta.50
      tinyglobby: 0.2.15
    optionalDependencies:
-      '@types/node': 24.10.1
+      '@types/node': 24.10.4
      fsevents: 2.3.3

  rolldown@1.0.0-beta.50:
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@ -24,7 +24,13 @@ function App() {
  const [token, setToken] = useState<string>(
    localStorage.getItem("token") || ""
  );
-  const [theme, setTheme] = useState<string>("default");
+  const [theme, _setTheme] = useState<string>(
+    localStorage.getItem("theme") || "default"
+  );
+  const setTheme = (theme: string) => {
+    _setTheme(theme);
+    localStorage.setItem("theme", theme);
+  };
  const [toasts, setToasts] = useState<ToastMessage[]>([]);
  const [isLoading, setIsLoading] = useState(false);

--- a/frontend/src/GameFilter.tsx
+++ b/frontend/src/GameFilter.tsx
@ -1,25 +1,19 @@
 import { useState, useEffect } from "react";
-import {
-  Person,
-  PersonList as PersonListProto,
-  Game as GameProto,
-  GetGameInfoRequest,
-  GameInfoResponse,
-} from "../items";
+import { Person, PersonList as PersonListProto } from "../items";
 import { apiFetch } from "./api";
-import { Link } from "react-router-dom";
-import { GameImage } from "./GameImage";
-import "./GameFilter.css"
+import "./GameFilter.css";
+import { useGameFilter } from "./hooks/useGameFilter";
+import { PersonSelector } from "./components/PersonSelector";
+import { FilteredGamesList } from "./components/FilteredGamesList";

 export function GameFilter() {
  const [people, setPeople] = useState<Person[]>([]);
  const [selectedPeople, setSelectedPeople] = useState<Set<string>>(new Set());
-  const [filteredGames, setFilteredGames] = useState<string[]>([]);
-  const [gameToPositive, setGameToPositive] = useState<
-    Map<string, Set<string>>
-  >(new Map());
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [metaData, _setMetaData] = useState<{ [key: string]: GameProto }>({});
+
+  const { filteredGames, gameToPositive } = useGameFilter(
+    people,
+    selectedPeople
+  );

  useEffect(() => {
    apiFetch("/api")
@ -31,83 +25,6 @@ export function GameFilter() {
      .catch((err) => console.error("Failed to fetch people:", err));
  }, []);

-  useEffect(() => {
-    if (selectedPeople.size === 0) {
-      // eslint-disable-next-line react-hooks/set-state-in-effect
-      setFilteredGames([]);
-      return;
-    }
-
-    // Get all games where ALL selected people have "Would Play"
-    const selectedPersons = people.filter((p) => selectedPeople.has(p.name));
-
-    if (selectedPersons.length === 0) {
-      setFilteredGames([]);
-      return;
-    }
-
-    // Create a map of game -> set of people who would not play it
-    const gameToNegative = new Map<string, Set<string>>();
-    const gameToPositiveOpinion = new Map<string, Set<string>>();
-
-    selectedPersons.forEach((person) => {
-      person.opinion.forEach((op) => {
-        if (!gameToNegative.has(op.title)) {
-          gameToNegative.set(op.title, new Set());
-        }
-        if (!gameToPositiveOpinion.has(op.title)) {
-          gameToPositiveOpinion.set(op.title, new Set());
-        }
-        if (!op.wouldPlay) {
-          gameToNegative.get(op.title)!.add(person.name);
-        }
-        if (op.wouldPlay) {
-          gameToPositiveOpinion.get(op.title)!.add(person.name);
-        }
-      });
-    });
-
-    setGameToPositive(gameToPositiveOpinion);
-
-    // Filter games where ALL selected people would play
-    const game_titles = Array.from(gameToNegative.entries())
-      .filter(([, players]) => players.size === 0)
-      .map(([game]) => game);
-
-    let games = game_titles.filter((title) => metaData[title]).map((title) => metaData[title]);
-    const gamesToFetch = GetGameInfoRequest.encode(
-      GetGameInfoRequest.create({
-        games: game_titles.filter((title) => !metaData[title]),
-      })
-    ).finish();
-
-    apiFetch("/api/games/batch", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/octet-stream",
-      },
-      body: gamesToFetch,
-    })
-      .then((res) => res.arrayBuffer())
-      .then((buffer) => {
-        const list = GameInfoResponse.decode(new Uint8Array(buffer));
-        games = games.concat(list.games);
-
-        games.forEach((game) => {
-          metaData[game.title] = game;
-        });
-
-        const filteredGames = games.filter((g) => {
-          const game = g as GameProto;
-          return (
-            game.maxPlayers >= selectedPeople.size &&
-            game.minPlayers <= selectedPeople.size
-          );
-        });
-        setFilteredGames(filteredGames.map((g) => (g as GameProto).title));
-      });
-  }, [selectedPeople, people, metaData]);
-
  const togglePerson = (name: string) => {
    const newSelected = new Set(selectedPeople);
    if (newSelected.has(name)) {
@ -125,118 +42,17 @@ export function GameFilter() {
        Select multiple people to find games that everyone would play
      </p>

-      <div style={{ marginBottom: "3rem" }}>
-        <h3>Select People</h3>
-        <div
-          className="grid-container"
-          style={{
-            display: "flex",
-            flexWrap: "wrap",
-            gap: "1rem",
-            justifyContent: "center",
-          }}
-        >
-          {people.map((person) => (
-            <div
-              key={person.name}
-              className="list-item gamefilter-entry"
-              style={{
-                borderColor: selectedPeople.has(person.name)
-                  ? "var(--accent-color)"
-                  : "var(--border-color)",
-              }}
-              onClick={() => togglePerson(person.name)}
-            >
-              <div style={{ gap: "0.5rem" }}>
-                <strong>{person.name}</strong>
-              </div>
-              <div
-                style={{
-                  fontSize: "0.9em",
-                  color: "var(--text-muted)",
-                  marginTop: "0.5rem",
-                }}
-              >
-                {person.opinion.length} opinion(s)
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
+      <PersonSelector
+        people={people}
+        selectedPeople={selectedPeople}
+        onTogglePerson={togglePerson}
+      />

-      {selectedPeople.size > 0 && (
-        <div>
-          <h3>Games Everyone Would Play ({filteredGames.length})</h3>
-          {filteredGames.length > 0 ? (
-            <ul className="grid-container">
-              {filteredGames.map((game) => (
-                <Link
-                  to={`/game/${encodeURIComponent(game)}`}
-                  key={game}
-                  className="list-item game-entry"
-                  style={{
-                    textDecoration: "none",
-                    color: "inherit",
-                    display: "flex",
-                    justifyContent: "space-between",
-                    alignItems: "center",
-                  }}
-                >
-                  <div>
-                    <strong>{game}</strong>
-                    <div
-                      style={{
-                        fontSize: "0.9em",
-                        color: "#4caf50",
-                        marginTop: "0.5rem",
-                      }}
-                    >
-                      <span>✓</span> {gameToPositive.get(game)!.size} selected
-                      would play
-                    </div>
-                    {selectedPeople.size - gameToPositive.get(game)!.size >
-                      0 && (
-                      <div
-                        style={{
-                          fontSize: "0.9em",
-                          color: "#d4d400",
-                          marginTop: "0.3rem",
-                        }}
-                      >
-                        <span>?</span>{" "}
-                        {selectedPeople.size - gameToPositive.get(game)!.size}{" "}
-                        {selectedPeople.size - gameToPositive.get(game)!.size >
-                        1
-                          ? "are"
-                          : "is"}{" "}
-                        neutral
-                      </div>
-                    )}
-                  </div>
-                  <GameImage game={game} />
-                </Link>
-              ))}
-            </ul>
-          ) : (
-            <div
-              style={{
-                padding: "3rem",
-                textAlign: "center",
-                background: "var(--secondary-alt-bg)",
-                borderRadius: "16px",
-                border: "1px dashed var(--border-color)",
-                color: "var(--text-muted)",
-              }}
-            >
-              <div style={{ fontSize: "2rem", marginBottom: "1rem" }}>🔍</div>
-              <p>No games found where all selected people would play.</p>
-              <p style={{ fontSize: "0.9rem" }}>
-                Try selecting fewer people or adding more opinions!
-              </p>
-            </div>
-          )}
-        </div>
-      )}
+      <FilteredGamesList
+        filteredGames={filteredGames}
+        gameToPositive={gameToPositive}
+        selectedPeopleCount={selectedPeople.size}
+      />
    </div>
  );
 }
--- a/frontend/src/components/FilteredGamesList.tsx
+++ b/frontend/src/components/FilteredGamesList.tsx
@ -0,0 +1,94 @@
+import { Link } from "react-router-dom";
+import { GameImage } from "../GameImage";
+
+interface FilteredGamesListProps {
+  filteredGames: string[];
+  gameToPositive: Map<string, Set<string>>;
+  selectedPeopleCount: number;
+}
+
+export function FilteredGamesList({
+  filteredGames,
+  gameToPositive,
+  selectedPeopleCount,
+}: FilteredGamesListProps) {
+  if (selectedPeopleCount === 0) return null;
+
+  return (
+    <div>
+      <h3>Games Everyone Would Play ({filteredGames.length})</h3>
+      {filteredGames.length > 0 ? (
+        <ul className="grid-container">
+          {filteredGames.map((game) => {
+            const positiveCount = gameToPositive.get(game)?.size || 0;
+            const neutralCount = selectedPeopleCount - positiveCount;
+
+            return (
+              <Link
+                to={`/game/${encodeURIComponent(game)}`}
+                key={game}
+                className="list-item game-entry"
+                style={{
+                  textDecoration: "none",
+                  color: "inherit",
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                }}
+              >
+                <div>
+                  <strong>{game}</strong>
+                  <div
+                    style={{
+                      fontSize: "0.9em",
+                      color: "#4caf50",
+                      marginTop: "0.5rem",
+                    }}
+                  >
+                    <span>✓</span> {positiveCount} selected would play
+                  </div>
+                  {neutralCount > 0 && (
+                    <div
+                      style={{
+                        fontSize: "0.9em",
+                        color: "#d4d400",
+                        marginTop: "0.3rem",
+                      }}
+                    >
+                      <span>?</span> {neutralCount}{" "}
+                      {neutralCount > 1 ? "are" : "is"} neutral
+                    </div>
+                  )}
+                </div>
+                <GameImage game={game} />
+              </Link>
+            );
+          })}
+        </ul>
+      ) : (
+        <EmptyState />
+      )}
+    </div>
+  );
+}
+
+function EmptyState() {
+  return (
+    <div
+      style={{
+        padding: "3rem",
+        textAlign: "center",
+        background: "var(--secondary-alt-bg)",
+        borderRadius: "16px",
+        border: "1px dashed var(--border-color)",
+        color: "var(--text-muted)",
+      }}
+    >
+      <div style={{ fontSize: "2rem", marginBottom: "1rem" }}>🔍</div>
+      <p>No games found where all selected people would play.</p>
+      <p style={{ fontSize: "0.9rem" }}>
+        Try selecting fewer people or adding more opinions!
+      </p>
+    </div>
+  );
+}
--- a/frontend/src/components/PersonSelector.tsx
+++ b/frontend/src/components/PersonSelector.tsx
@ -0,0 +1,55 @@
+import { Person } from "../../items";
+
+interface PersonSelectorProps {
+  people: Person[];
+  selectedPeople: Set<string>;
+  onTogglePerson: (name: string) => void;
+}
+
+export function PersonSelector({
+  people,
+  selectedPeople,
+  onTogglePerson,
+}: PersonSelectorProps) {
+  return (
+    <div style={{ marginBottom: "3rem" }}>
+      <h3>Select People</h3>
+      <div
+        className="grid-container"
+        style={{
+          display: "flex",
+          flexWrap: "wrap",
+          gap: "1rem",
+          justifyContent: "center",
+        }}
+      >
+        {people.map((person) => (
+          <div
+            key={person.name}
+            className="list-item gamefilter-entry"
+            style={{
+              borderColor: selectedPeople.has(person.name)
+                ? "var(--accent-color)"
+                : "var(--border-color)",
+              cursor: "pointer",
+            }}
+            onClick={() => onTogglePerson(person.name)}
+          >
+            <div style={{ gap: "0.5rem" }}>
+              <strong>{person.name}</strong>
+            </div>
+            <div
+              style={{
+                fontSize: "0.9em",
+                color: "var(--text-muted)",
+                marginTop: "0.5rem",
+              }}
+            >
+              {person.opinion.length} opinion(s)
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/hooks/useGameFilter.ts
+++ b/frontend/src/hooks/useGameFilter.ts
@ -0,0 +1,98 @@
+import { useState, useEffect, useRef, useMemo } from "react";
+import {
+  Person,
+  Game as GameProto,
+  GetGameInfoRequest,
+  GameInfoResponse,
+} from "../../items";
+import { apiFetch } from "../api";
+
+export function useGameFilter(people: Person[], selectedPeople: Set<string>) {
+  const [fetchedTitles, setFetchedTitles] = useState<string[]>([]);
+  const metaDataRef = useRef<{ [key: string]: GameProto }>({});
+
+  const { gameToNegative, gameToPositiveOpinion } = useMemo(() => {
+    const gameToNegative = new Map<string, Set<string>>();
+    const gameToPositiveOpinion = new Map<string, Set<string>>();
+
+    if (selectedPeople.size === 0)
+      return { gameToNegative, gameToPositiveOpinion };
+
+    const selectedPersons = people.filter((p) => selectedPeople.has(p.name));
+    selectedPersons.forEach((person) => {
+      person.opinion.forEach((op) => {
+        if (!gameToNegative.has(op.title))
+          gameToNegative.set(op.title, new Set());
+        if (!gameToPositiveOpinion.has(op.title))
+          gameToPositiveOpinion.set(op.title, new Set());
+
+        if (!op.wouldPlay) {
+          gameToNegative.get(op.title)!.add(person.name);
+        } else {
+          gameToPositiveOpinion.get(op.title)!.add(person.name);
+        }
+      });
+    });
+
+    return { gameToNegative, gameToPositiveOpinion };
+  }, [people, selectedPeople]);
+
+  const titlesEveryoneWouldPlay = useMemo(() => {
+    return Array.from(gameToNegative.entries())
+      .filter(([, players]) => players.size === 0)
+      .map(([game]) => game);
+  }, [gameToNegative]);
+
+  useEffect(() => {
+    const titlesToFetch = titlesEveryoneWouldPlay.filter(
+      (title) => !metaDataRef.current[title]
+    );
+    if (titlesToFetch.length === 0) return;
+
+    const gamesToFetch = GetGameInfoRequest.encode(
+      GetGameInfoRequest.create({
+        games: titlesToFetch,
+      })
+    ).finish();
+
+    apiFetch("/api/games/batch", {
+      method: "POST",
+      headers: { "Content-Type": "application/octet-stream" },
+      body: gamesToFetch,
+    })
+      .then((res) => res.arrayBuffer())
+      .then((buffer) => {
+        const list = GameInfoResponse.decode(new Uint8Array(buffer));
+        list.games.forEach((game) => {
+          metaDataRef.current[game.title] = game;
+        });
+        // Trigger a re-render to update filteredGames
+        setFetchedTitles([...titlesToFetch]);
+      })
+      .catch((err) => console.error("Failed to fetch game metadata:", err));
+  }, [titlesEveryoneWouldPlay]);
+
+  const filteredGames = useMemo(() => {
+    if (selectedPeople.size === 0) return [];
+
+    const games = titlesEveryoneWouldPlay
+      .filter((title) => metaDataRef.current[title])
+      .map((title) => metaDataRef.current[title]);
+
+    return filterByPlayerCount(games, selectedPeople.size);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [titlesEveryoneWouldPlay, selectedPeople.size, fetchedTitles]);
+
+  return { filteredGames, gameToPositive: gameToPositiveOpinion };
+}
+
+function filterByPlayerCount(
+  games: GameProto[],
+  playerCount: number
+): string[] {
+  return games
+    .filter(
+      (game) => game.maxPlayers >= playerCount && game.minPlayers <= playerCount
+    )
+    .map((game) => game.title);
+}
Author	SHA1	Message	Date
Renovate Bot	bb64499b01	chore(deps): update dependency @types/node to v24.10.4	2025-12-19 14:03:52 +00:00
code002lover	d1b65231a6	store theme selection in localstorage	2025-12-19 14:08:54 +01:00
code002lover	5b397e2265	feat: modularize game filtering logic and UI into a custom hook and dedicated components.feat: modularize game filtering logic and UI into a custom hook and dedicated components.	2025-12-19 14:06:31 +01:00