diff --git a/frontend/src/GameFilter.tsx b/frontend/src/GameFilter.tsx index c4f97c8..0e24355 100644 --- a/frontend/src/GameFilter.tsx +++ b/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) => {