Demos/Recent games: Add matchtag filter (#98)

* Update dependencies. * Reformat code. * Add matchtag filter.
quakeworldnu · Dec 4, 2024 · e25f03a · e25f03a
1 parent 04ed41b
commit e25f03a
Show file tree

Hide file tree

Showing 8 changed files with 574 additions and 417 deletions.
diff --git a/package.json b/package.json
@@ -18,42 +18,42 @@
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
-    "@types/react": "^18.3.12",
+    "@types/react": "^18.3.13",
     "@types/react-dom": "^18.3.1",
-    "@vitejs/plugin-react": "^4.3.3",
-    "@vitest/coverage-v8": "^2.1.5",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/coverage-v8": "^2.1.8",
     "jsdom": "^25.0.1",
     "npm-run-all": "^4.1.5",
-    "supabase": "^1.219.2",
-    "typescript": "^5.6.3",
-    "vitest": "^2.1.5"
+    "supabase": "^2.0.0",
+    "typescript": "^5.7.2",
+    "vitest": "^2.1.8"
   },
   "dependencies": {
-    "@dnd-kit/core": "^6.1.0",
-    "@dnd-kit/modifiers": "^7.0.0",
-    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/core": "^6.3.0",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@fortawesome/fontawesome-svg-core": "^6.6.0",
-    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/fontawesome-svg-core": "^6.7.1",
+    "@fortawesome/free-solid-svg-icons": "^6.7.1",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-slider": "^1.2.1",
     "@radix-ui/react-switch": "^1.1.1",
-    "@reduxjs/toolkit": "^2.3.0",
-    "@sentry/react": "^8.38.0",
-    "@supabase/supabase-js": "2.46.1",
+    "@reduxjs/toolkit": "^2.4.0",
+    "@sentry/react": "^8.42.0",
+    "@supabase/supabase-js": "2.46.2",
     "@uidotdev/usehooks": "^2.4.1",
     "autoprefixer": "^10.4.20",
-    "class-variance-authority": "^0.7.0",
+    "class-variance-authority": "^0.7.1",
     "classnames": "^2.5.1",
     "clsx": "^2.1.1",
     "copy-text-to-clipboard": "^3.2.0",
     "dayjs": "^1.11.13",
-    "firebase-tools": "^13.25.0",
+    "firebase-tools": "^13.27.0",
     "formik": "^2.4.6",
     "lodash.groupby": "^4.6.0",
-    "lucide-react": "^0.460.0",
+    "lucide-react": "^0.465.0",
     "postcss": "^8.4.49",
     "query-string": "^8.1.0",
     "react": "^18.3.1",
@@ -64,16 +64,16 @@
     "react-redux": "^9.1.2",
     "react-swipeable": "^7.0.2",
     "react-toastify": "^9.1.3",
-    "remeda": "^2.17.3",
-    "sass": "^1.81.0",
+    "remeda": "^2.17.4",
+    "sass": "^1.82.0",
     "screenfull": "^6.0.2",
-    "tailwind-merge": "^2.5.4",
-    "tailwindcss": "^3.4.15",
+    "tailwind-merge": "^2.5.5",
+    "tailwindcss": "^3.4.16",
     "tailwindcss-animate": "^1.0.7",
     "urlcat": "2.0.4",
     "use-double-tap": "^1.3.6",
     "use-long-press": "^3.2.0",
     "usehooks-ts": "^2.12.1",
-    "vite": "^5.4.11"
+    "vite": "^6.0.2"
   }
 }
diff --git a/src/pages/games/browser/context.tsx b/src/pages/games/browser/context.tsx
@@ -28,7 +28,7 @@ const GameContext = createContext<GameContextProps>({
 });
 
 export const GamesProvider = ({ children }: { children: ReactNode }) => {
-  const { setPage, playerQuery, teams, gameMode, map, maxAge, page } =
+  const { setPage, playerQuery, teams, gameMode, map, matchtag, maxAge, page } =
     useGameSettings();
   const [games, setGames] = useState<GameSearchEntry[]>([]);
   const [count, setCount] = useState<number>(0);
@@ -42,13 +42,22 @@ export const GamesProvider = ({ children }: { children: ReactNode }) => {
         gameMode,
         map,
         teams,
+        matchtag,
         playerQuery,
         maxAge,
       });
       let games: GameSearchEntry[] = [];
 
       if (count > 0) {
-        const settings = { gameMode, map, playerQuery, teams, maxAge, page: 1 };
+        const settings = {
+          gameMode,
+          map,
+          playerQuery,
+          teams,
+          matchtag,
+          maxAge,
+          page: 1,
+        };
         games = await searchGamesRows(settings);
       }
 
@@ -59,7 +68,7 @@ export const GamesProvider = ({ children }: { children: ReactNode }) => {
     }
 
     run();
-  }, [playerQuery, teams, gameMode, map, maxAge]);
+  }, [playerQuery, teams, gameMode, map, matchtag, maxAge]);
 
   useEffect(() => {
     if (isFirstRender) {
@@ -68,7 +77,15 @@ export const GamesProvider = ({ children }: { children: ReactNode }) => {
 
     async function run() {
       setIsLoading(true);
-      const settings = { playerQuery, teams, gameMode, map, maxAge, page };
+      const settings = {
+        playerQuery,
+        teams,
+        gameMode,
+        map,
+        matchtag,
+        maxAge,
+        page,
+      };
       setGames(await searchGamesRows(settings));
       setIsLoading(false);
     }

diff --git a/src/pages/games/browser/settings/Matchtag.tsx b/src/pages/games/browser/settings/Matchtag.tsx
@@ -0,0 +1,35 @@
+import { faTag } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { type ChangeEvent, useEffect } from "react";
+import { useDebounceValue } from "usehooks-ts";
+import { formInput } from "../../ui/theme.ts";
+import { useGameSettings } from "./context.tsx";
+
+export const Matchtag = () => {
+  const { matchtag, setMatchtag } = useGameSettings();
+  const [value, setValue] = useDebounceValue<string>(matchtag, 400);
+
+  function handleChange(e: ChangeEvent<HTMLInputElement>) {
+    setValue(e.target.value.toLowerCase().trim());
+  }
+
+  useEffect(() => {
+    setMatchtag(value);
+  }, [value]);
+
+  return (
+    <label className="flex items-center ml-2" title="Matchtag">
+      <FontAwesomeIcon
+        icon={faTag}
+        className="z-10 text-slate-500 pointer-events-none"
+        size="xs"
+      />
+      <input
+        type="search"
+        defaultValue={matchtag}
+        className={`${formInput} -ml-6 pl-8 w-24`}
+        onChange={handleChange}
+      />
+    </label>
+  );
+};
diff --git a/src/pages/games/browser/settings/Toolbar.tsx b/src/pages/games/browser/settings/Toolbar.tsx
@@ -4,6 +4,7 @@ import { DisplayModeBar } from "./DisplayModeBar.tsx";
 import { GameModeBar } from "./GameModeBar.tsx";
 import { GlobalShowScoresToggle } from "./GlobalShowScoresToggle.tsx";
 import { MapName } from "./MapName.tsx";
+import { Matchtag } from "./Matchtag.tsx";
 import { Pagination } from "./Pagination.tsx";
 import { PlayerQuery } from "./PlayerQuery.tsx";
 import { Teams } from "./Teams.tsx";
@@ -24,6 +25,7 @@ export const Toolbar = () => {
       <PlayerQuery />
       <Teams />
       <MapName />
+      <Matchtag />
       <Timeframe />
       <Pagination />
     </div>

diff --git a/src/pages/games/browser/settings/context.tsx b/src/pages/games/browser/settings/context.tsx
@@ -19,6 +19,8 @@ type GameBrowserSettingsProps = {
   setPlayerQuery: (query: string) => void;
   teams: string;
   setTeams: (query: string) => void;
+  matchtag: string;
+  setMatchtag: (query: string) => void;
   maxAge: number;
   setMaxAge: (maxAge: number) => void;
   page: number;
@@ -33,6 +35,7 @@ const defaultSettings: GameBrowserSettings = {
   map: "",
   playerQuery: "",
   teams: "",
+  matchtag: "",
   maxAge: 30,
   page: 1,
 };
@@ -44,6 +47,7 @@ const GameSettingsContext = createContext<GameBrowserSettingsProps>({
   setMap: () => {},
   setPlayerQuery: () => {},
   setTeams: () => {},
+  setMatchtag: () => {},
   setMaxAge: () => {},
   setPage: () => {},
   nextPage: () => {},
@@ -68,7 +72,10 @@ export const GameSettingsProvider = ({
   const [map, setMap] = useState<string>(settings.map);
   const [playerQuery, setPlayerQuery] = useState<string>(settings.playerQuery);
   const [teams, setTeams] = useState<string>(settings.teams);
-  const [maxAge, setMaxAge] = useState<number>(settings.maxAge ?? defaultSettings.maxAge);
+  const [matchtag, setMatchtag] = useState<string>(settings.matchtag ?? "");
+  const [maxAge, setMaxAge] = useState<number>(
+    settings.maxAge ?? defaultSettings.maxAge,
+  );
   const [page, setPage] = useState<number>(settings.page);
 
   useEffect(() => {
@@ -78,10 +85,11 @@ export const GameSettingsProvider = ({
       map,
       playerQuery,
       teams,
+      matchtag,
       maxAge,
       page,
     });
-  }, [displayMode, gameMode, map, playerQuery, teams, maxAge, page]);
+  }, [displayMode, gameMode, map, playerQuery, teams, matchtag, maxAge, page]);
 
   function nextPage() {
     setPage(page + 1);
@@ -102,6 +110,8 @@ export const GameSettingsProvider = ({
     setPlayerQuery,
     teams,
     setTeams,
+    matchtag,
+    setMatchtag,
     maxAge,
     setMaxAge,
     page,

diff --git a/src/pages/games/browser/settings/types.ts b/src/pages/games/browser/settings/types.ts
@@ -7,6 +7,7 @@ export type GameBrowserSettings = {
   map: string;
   playerQuery: string;
   teams: string;
+  matchtag: string;
   maxAge: number;
   page: number;
 };
diff --git a/src/pages/games/services/supabase/supabase.ts b/src/pages/games/services/supabase/supabase.ts
@@ -40,12 +40,13 @@ export async function searchGamesCount(settings: {
   gameMode: GameMode;
   playerQuery: string;
   teams: string;
+  matchtag: string;
   maxAge: number;
 }): Promise<number> {
   let qb = supabase
     .from("games")
     .select("count", { head: true, count: "estimated" });
-  const { playerQuery, teams, map, gameMode } = settings;
+  const { playerQuery, teams, map, gameMode, matchtag, maxAge } = settings;
 
   if (gameMode !== "All") {
     qb = qb.eq("mode", gameMode.toLowerCase());
@@ -64,8 +65,12 @@ export async function searchGamesCount(settings: {
     qb = qb.textSearch("players_fts", players_fts);
   }
 
-  if (settings.maxAge > 0) {
-    const minTimestamp = new Date(Date.now() - settings.maxAge * MS_PER_DAY);
+  if (matchtag.length > 0) {
+    qb = qb.ilike("matchtag", `%${matchtag}%`);
+  }
+
+  if (maxAge > 0) {
+    const minTimestamp = new Date(Date.now() - maxAge * MS_PER_DAY);
     qb = qb.gte("timestamp", minTimestamp.toISOString());
   }
 
@@ -90,14 +95,15 @@ export async function searchGamesRows(settings: {
   map: string;
   playerQuery: string;
   teams: string;
+  matchtag: string;
   maxAge: number;
   page: number;
 }): Promise<GameSearchEntry[]> {
   let qb = supabase
     .from("games")
     .select("id,timestamp,mode,matchtag,map,teams,players,demo_sha256");
 
-  const { gameMode, map, playerQuery, teams } = settings;
+  const { gameMode, map, playerQuery, teams, matchtag, maxAge } = settings;
 
   if (gameMode !== "All") {
     qb = qb.eq("mode", gameMode.toLowerCase());
@@ -116,8 +122,12 @@ export async function searchGamesRows(settings: {
     qb = qb.textSearch("players_fts", fts);
   }
 
-  if (settings.maxAge > 0) {
-    const minTimestamp = new Date(Date.now() - settings.maxAge * MS_PER_DAY);
+  if (matchtag.length > 0) {
+    qb = qb.ilike("matchtag", `%${matchtag}%`);
+  }
+
+  if (maxAge > 0) {
+    const minTimestamp = new Date(Date.now() - maxAge * MS_PER_DAY);
     qb = qb.gte("timestamp", minTimestamp.toISOString());
   }