Compare commits
3 Commits
36b2cfa4a7
...
1733d3147c
| Author | SHA1 | Date | |
|---|---|---|---|
|
1733d3147c | ||
| d1b65231a6 | |||
| 5b397e2265 |
@ -3,7 +3,6 @@
|
|||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<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" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Game List</title>
|
<title>Game List</title>
|
||||||
</head>
|
</head>
|
||||||
|
|||||||
38
frontend/pnpm-lock.yaml
generated
38
frontend/pnpm-lock.yaml
generated
@ -16,13 +16,13 @@ importers:
|
|||||||
version: 2.10.1
|
version: 2.10.1
|
||||||
react:
|
react:
|
||||||
specifier: ^19.2.1
|
specifier: ^19.2.1
|
||||||
version: 19.2.1
|
version: 19.2.3
|
||||||
react-dom:
|
react-dom:
|
||||||
specifier: ^19.2.1
|
specifier: ^19.2.1
|
||||||
version: 19.2.1(react@19.2.1)
|
version: 19.2.3(react@19.2.3)
|
||||||
react-router-dom:
|
react-router-dom:
|
||||||
specifier: ^7.10.1
|
specifier: ^7.10.1
|
||||||
version: 7.10.1(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
|
version: 7.10.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
|
||||||
devDependencies:
|
devDependencies:
|
||||||
'@eslint/js':
|
'@eslint/js':
|
||||||
specifier: ^9.39.1
|
specifier: ^9.39.1
|
||||||
@ -425,7 +425,7 @@ packages:
|
|||||||
resolution: {integrity: sha512-EcA07pHJouywpzsoTUqNh5NwGayl2PPVEJKUSinGGSxFGYn+shYbqMGBg6FXDqgXum9Ou/ecb+411ssw8HImJQ==}
|
resolution: {integrity: sha512-EcA07pHJouywpzsoTUqNh5NwGayl2PPVEJKUSinGGSxFGYn+shYbqMGBg6FXDqgXum9Ou/ecb+411ssw8HImJQ==}
|
||||||
engines: {node: ^20.19.0 || >=22.12.0}
|
engines: {node: ^20.19.0 || >=22.12.0}
|
||||||
peerDependencies:
|
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:
|
acorn-jsx@5.3.2:
|
||||||
resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
|
resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
|
||||||
@ -863,10 +863,10 @@ packages:
|
|||||||
resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
|
resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
|
||||||
engines: {node: '>=6'}
|
engines: {node: '>=6'}
|
||||||
|
|
||||||
react-dom@19.2.1:
|
react-dom@19.2.3:
|
||||||
resolution: {integrity: sha512-ibrK8llX2a4eOskq1mXKu/TGZj9qzomO+sNfO98M6d9zIPOEhlBkMkBUBLd1vgS0gQsLDBzA+8jJBVXDnfHmJg==}
|
resolution: {integrity: sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
react: ^19.2.1
|
react: ^19.2.3
|
||||||
|
|
||||||
react-refresh@0.18.0:
|
react-refresh@0.18.0:
|
||||||
resolution: {integrity: sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw==}
|
resolution: {integrity: sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw==}
|
||||||
@ -889,8 +889,8 @@ packages:
|
|||||||
react-dom:
|
react-dom:
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
react@19.2.1:
|
react@19.2.3:
|
||||||
resolution: {integrity: sha512-DGrYcCWK7tvYMnWh79yrPHt+vdx9tY+1gPZa7nJQtO/p8bLTDaHp4dzwEhQB7pZ4Xe3ok4XKuEPrVuc+wlpkmw==}
|
resolution: {integrity: sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==}
|
||||||
engines: {node: '>=0.10.0'}
|
engines: {node: '>=0.10.0'}
|
||||||
|
|
||||||
resolve-from@4.0.0:
|
resolve-from@4.0.0:
|
||||||
@ -1845,28 +1845,28 @@ snapshots:
|
|||||||
|
|
||||||
punycode@2.3.1: {}
|
punycode@2.3.1: {}
|
||||||
|
|
||||||
react-dom@19.2.1(react@19.2.1):
|
react-dom@19.2.3(react@19.2.3):
|
||||||
dependencies:
|
dependencies:
|
||||||
react: 19.2.1
|
react: 19.2.3
|
||||||
scheduler: 0.27.0
|
scheduler: 0.27.0
|
||||||
|
|
||||||
react-refresh@0.18.0: {}
|
react-refresh@0.18.0: {}
|
||||||
|
|
||||||
react-router-dom@7.10.1(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
|
react-router-dom@7.10.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
|
||||||
dependencies:
|
dependencies:
|
||||||
react: 19.2.1
|
react: 19.2.3
|
||||||
react-dom: 19.2.1(react@19.2.1)
|
react-dom: 19.2.3(react@19.2.3)
|
||||||
react-router: 7.10.1(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
|
react-router: 7.10.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
|
||||||
|
|
||||||
react-router@7.10.1(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
|
react-router@7.10.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
|
||||||
dependencies:
|
dependencies:
|
||||||
cookie: 1.1.1
|
cookie: 1.1.1
|
||||||
react: 19.2.1
|
react: 19.2.3
|
||||||
set-cookie-parser: 2.7.2
|
set-cookie-parser: 2.7.2
|
||||||
optionalDependencies:
|
optionalDependencies:
|
||||||
react-dom: 19.2.1(react@19.2.1)
|
react-dom: 19.2.3(react@19.2.3)
|
||||||
|
|
||||||
react@19.2.1: {}
|
react@19.2.3: {}
|
||||||
|
|
||||||
resolve-from@4.0.0: {}
|
resolve-from@4.0.0: {}
|
||||||
|
|
||||||
|
|||||||
@ -24,7 +24,13 @@ function App() {
|
|||||||
const [token, setToken] = useState<string>(
|
const [token, setToken] = useState<string>(
|
||||||
localStorage.getItem("token") || ""
|
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 [toasts, setToasts] = useState<ToastMessage[]>([]);
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
|
||||||
|
|||||||
@ -1,25 +1,19 @@
|
|||||||
import { useState, useEffect } from "react";
|
import { useState, useEffect } from "react";
|
||||||
import {
|
import { Person, PersonList as PersonListProto } from "../items";
|
||||||
Person,
|
|
||||||
PersonList as PersonListProto,
|
|
||||||
Game as GameProto,
|
|
||||||
GetGameInfoRequest,
|
|
||||||
GameInfoResponse,
|
|
||||||
} from "../items";
|
|
||||||
import { apiFetch } from "./api";
|
import { apiFetch } from "./api";
|
||||||
import { Link } from "react-router-dom";
|
import "./GameFilter.css";
|
||||||
import { GameImage } from "./GameImage";
|
import { useGameFilter } from "./hooks/useGameFilter";
|
||||||
import "./GameFilter.css"
|
import { PersonSelector } from "./components/PersonSelector";
|
||||||
|
import { FilteredGamesList } from "./components/FilteredGamesList";
|
||||||
|
|
||||||
export function GameFilter() {
|
export function GameFilter() {
|
||||||
const [people, setPeople] = useState<Person[]>([]);
|
const [people, setPeople] = useState<Person[]>([]);
|
||||||
const [selectedPeople, setSelectedPeople] = useState<Set<string>>(new Set());
|
const [selectedPeople, setSelectedPeople] = useState<Set<string>>(new Set());
|
||||||
const [filteredGames, setFilteredGames] = useState<string[]>([]);
|
|
||||||
const [gameToPositive, setGameToPositive] = useState<
|
const { filteredGames, gameToPositive } = useGameFilter(
|
||||||
Map<string, Set<string>>
|
people,
|
||||||
>(new Map());
|
selectedPeople
|
||||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
);
|
||||||
const [metaData, _setMetaData] = useState<{ [key: string]: GameProto }>({});
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
apiFetch("/api")
|
apiFetch("/api")
|
||||||
@ -31,83 +25,6 @@ export function GameFilter() {
|
|||||||
.catch((err) => console.error("Failed to fetch people:", err));
|
.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 togglePerson = (name: string) => {
|
||||||
const newSelected = new Set(selectedPeople);
|
const newSelected = new Set(selectedPeople);
|
||||||
if (newSelected.has(name)) {
|
if (newSelected.has(name)) {
|
||||||
@ -125,118 +42,17 @@ export function GameFilter() {
|
|||||||
Select multiple people to find games that everyone would play
|
Select multiple people to find games that everyone would play
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div style={{ marginBottom: "3rem" }}>
|
<PersonSelector
|
||||||
<h3>Select People</h3>
|
people={people}
|
||||||
<div
|
selectedPeople={selectedPeople}
|
||||||
className="grid-container"
|
onTogglePerson={togglePerson}
|
||||||
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>
|
|
||||||
|
|
||||||
{selectedPeople.size > 0 && (
|
<FilteredGamesList
|
||||||
<div>
|
filteredGames={filteredGames}
|
||||||
<h3>Games Everyone Would Play ({filteredGames.length})</h3>
|
gameToPositive={gameToPositive}
|
||||||
{filteredGames.length > 0 ? (
|
selectedPeopleCount={selectedPeople.size}
|
||||||
<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>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
94
frontend/src/components/FilteredGamesList.tsx
Normal file
94
frontend/src/components/FilteredGamesList.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
55
frontend/src/components/PersonSelector.tsx
Normal file
55
frontend/src/components/PersonSelector.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
98
frontend/src/hooks/useGameFilter.ts
Normal file
98
frontend/src/hooks/useGameFilter.ts
Normal file
@ -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);
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user