feat: filter games by min/max player count after fetching full game details

frontend/src/GameFilter.tsx

@@ -1,5 +1,9 @@
 import { useState, useEffect } from "react";
-import { Person, PersonList as PersonListProto } from "../items";
+import {
+  Person,
+  PersonList as PersonListProto,
+  Game as GameProto,
+} from "../items";
 import { apiFetch } from "./api";
 import { Link } from "react-router-dom";
 import { GameImage } from "./GameImage";
@@ -48,11 +52,30 @@ export function GameFilter() {
     });
 
     // Filter games where ALL selected people would play
-    const games = Array.from(gameToPlayers.entries())
+    const game_titles = Array.from(gameToPlayers.entries())
       .filter(([, players]) => players.size === 0)
       .map(([game]) => game);
 
-    setFilteredGames(games);
+    const games = game_titles.map((title) => {
+      return apiFetch(`/api/game/${encodeURIComponent(title)}`)
+        .then((res) => res.arrayBuffer())
+        .then((buffer) => {
+          const game = GameProto.decode(new Uint8Array(buffer));
+          return game;
+        })
+        .catch((err) => console.error("Failed to fetch game:", err));
+    });
+
+    Promise.all(games).then((games) => {
+      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]);
 
   const togglePerson = (name: string) => {