Compare commits

..

1 Commits

Author SHA1 Message Date
Renovate Bot
2a264d8f68 fix(deps): update rust crate bincode to v3 2026-01-11 21:05:12 +00:00
6 changed files with 10 additions and 215 deletions

View File

@ -333,7 +333,7 @@ export function EditGame({ onShowToast }: Props) {
<input <input
type="number" type="number"
value={price} value={price}
onChange={(e) => setPrice(Number(e.target.value.replace(',', '.')))} onChange={(e) => setPrice(Number(e.target.value))}
min="0" min="0"
step="0.01" step="0.01"
style={inputStyles} style={inputStyles}

View File

@ -11,82 +11,4 @@
.gamefilter-entry:hover { .gamefilter-entry:hover {
background-color: var(--primary-bg); background-color: var(--primary-bg);
}
.filter-controls {
background-color: var(--secondary-alt-bg);
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 2rem;
border: 1px solid var(--border-color);
}
.filter-controls h3 {
margin: 0 0 1rem 0;
font-size: 1.1rem;
color: var(--text-color);
}
.filter-groups {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
}
.filter-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.filter-group label {
font-size: 0.9rem;
color: var(--text-color);
font-weight: 500;
}
.checkbox-wrapper {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
}
.checkbox-wrapper input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: var(--accent-color);
}
.checkbox-wrapper span {
font-size: 0.9rem;
color: var(--text-color);
}
.price-input {
padding: 0.5rem;
border: 1px solid var(--border-color);
border-radius: 4px;
background-color: var(--primary-bg);
color: var(--text-color);
width: 120px;
font-size: 0.9rem;
}
.price-input:focus {
outline: none;
border-color: var(--accent-color);
}
.tooltip-icon {
display: inline-block;
margin-left: 0.3rem;
cursor: help;
font-size: 0.9rem;
opacity: 0.6;
}
.tooltip-icon:hover {
opacity: 1;
} }

View File

@ -11,16 +11,10 @@ export function GameFilter() {
const [people, setPeople] = useState<Person[]>([]); const [people, setPeople] = useState<Person[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [selectedPeople, setSelectedPeople] = useState<Set<string>>(new Set()); const [selectedPeople, setSelectedPeople] = useState<Set<string>>(new Set());
const [freeGamesOnly, setFreeGamesOnly] = useState(false);
const [maxPrice, setMaxPrice] = useState<number | null>(null);
const [ownershipMode, setOwnershipMode] = useState(false);
const { filteredGames, gameToPositive, games } = useGameFilter( const { filteredGames, gameToPositive } = useGameFilter(
people, people,
selectedPeople, selectedPeople
freeGamesOnly,
maxPrice,
ownershipMode
); );
useEffect(() => { useEffect(() => {
@ -63,62 +57,10 @@ export function GameFilter() {
onTogglePerson={togglePerson} onTogglePerson={togglePerson}
/> />
<div className="filter-controls">
<h3>Additional Filters</h3>
<div className="filter-groups">
<div className="filter-group">
<label className="checkbox-wrapper">
<input
type="checkbox"
checked={freeGamesOnly}
onChange={(e) => setFreeGamesOnly(e.target.checked)}
/>
<span>Free games only</span>
</label>
</div>
<div className="filter-group">
<label htmlFor="max-price">Maximum price ($)</label>
<input
id="max-price"
type="number"
className="price-input"
min="0"
placeholder="No limit"
value={maxPrice ?? ""}
onChange={(e) => {
const value = e.target.value;
setMaxPrice(value === "" ? null : parseInt(value, 10));
}}
/>
</div>
<div className="filter-group">
<label className="checkbox-wrapper">
<input
type="checkbox"
checked={ownershipMode}
onChange={(e) => setOwnershipMode(e.target.checked)}
/>
<span>
Ownership mode
<span
className="tooltip-icon"
title="For paid games, only show if ALL selected people have marked it as wouldPlay"
>
?
</span>
</span>
</label>
</div>
</div>
</div>
<FilteredGamesList <FilteredGamesList
filteredGames={filteredGames} filteredGames={filteredGames}
gameToPositive={gameToPositive} gameToPositive={gameToPositive}
selectedPeopleCount={selectedPeople.size} selectedPeopleCount={selectedPeople.size}
games={games}
/> />
</div> </div>
); );

View File

@ -463,7 +463,7 @@ export function GameList({ onShowToast }: Props) {
<input <input
type="number" type="number"
value={price} value={price}
onChange={(e) => setPrice(Number(e.target.value.replace(',', '.')))} onChange={(e) => setPrice(Number(e.target.value))}
min="0" min="0"
step="0.01" step="0.01"
style={inputStyles} style={inputStyles}

View File

@ -1,20 +1,17 @@
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { GameImage } from "../GameImage"; import { GameImage } from "../GameImage";
import { EmptyState } from "./EmptyState"; import { EmptyState } from "./EmptyState";
import { Game as GameProto } from "../../items";
interface FilteredGamesListProps { interface FilteredGamesListProps {
filteredGames: string[]; filteredGames: string[];
gameToPositive: Map<string, Set<string>>; gameToPositive: Map<string, Set<string>>;
selectedPeopleCount: number; selectedPeopleCount: number;
games: Map<string, GameProto>;
} }
export function FilteredGamesList({ export function FilteredGamesList({
filteredGames, filteredGames,
gameToPositive, gameToPositive,
selectedPeopleCount, selectedPeopleCount,
games,
}: FilteredGamesListProps) { }: FilteredGamesListProps) {
if (selectedPeopleCount === 0) { if (selectedPeopleCount === 0) {
return ( return (
@ -34,8 +31,6 @@ export function FilteredGamesList({
{filteredGames.map((game) => { {filteredGames.map((game) => {
const positiveCount = gameToPositive.get(game)?.size || 0; const positiveCount = gameToPositive.get(game)?.size || 0;
const neutralCount = selectedPeopleCount - positiveCount; const neutralCount = selectedPeopleCount - positiveCount;
const gameData = games.get(game);
const price = gameData?.price ?? 0;
return ( return (
<Link <Link
@ -73,21 +68,6 @@ export function FilteredGamesList({
{neutralCount > 1 ? "are" : "is"} neutral {neutralCount > 1 ? "are" : "is"} neutral
</div> </div>
)} )}
<div
className="price-badge"
style={{
fontSize: "0.85em",
marginTop: "0.5rem",
padding: "0.2rem 0.6rem",
borderRadius: "4px",
display: "inline-block",
backgroundColor: price === 0 ? "rgba(76, 175, 80, 0.2)" : "rgba(255, 152, 0, 0.2)",
color: price === 0 ? "#4caf50" : "#ff9800",
fontWeight: 600,
}}
>
${price === 0 ? "0 (Free)" : price}
</div>
</div> </div>
<GameImage game={game} /> <GameImage game={game} />
</Link> </Link>

View File

@ -7,13 +7,7 @@ import {
} from "../../items"; } from "../../items";
import { apiFetch } from "../api"; import { apiFetch } from "../api";
export function useGameFilter( export function useGameFilter(people: Person[], selectedPeople: Set<string>) {
people: Person[],
selectedPeople: Set<string>,
freeGamesOnly: boolean,
maxPrice: number | null,
ownershipMode: boolean
) {
const [fetchedTitles, setFetchedTitles] = useState<string[]>([]); const [fetchedTitles, setFetchedTitles] = useState<string[]>([]);
const metaDataRef = useRef<{ [key: string]: GameProto }>({}); const metaDataRef = useRef<{ [key: string]: GameProto }>({});
@ -85,63 +79,20 @@ export function useGameFilter(
.filter((title) => metaDataRef.current[title]) .filter((title) => metaDataRef.current[title])
.map((title) => metaDataRef.current[title]); .map((title) => metaDataRef.current[title]);
return filterGames( return filterByPlayerCount(games, selectedPeople.size);
games,
selectedPeople.size,
freeGamesOnly,
maxPrice,
ownershipMode,
selectedPeople,
people
);
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [ }, [titlesEveryoneWouldPlay, selectedPeople.size, fetchedTitles]);
titlesEveryoneWouldPlay,
selectedPeople.size,
fetchedTitles,
freeGamesOnly,
maxPrice,
ownershipMode,
people,
selectedPeople,
]);
const gamesMap = useMemo(() => { return { filteredGames, gameToPositive: gameToPositiveOpinion };
return new Map(Object.entries(metaDataRef.current));
}, [fetchedTitles]);
return { filteredGames, gameToPositive: gameToPositiveOpinion, games: gamesMap };
} }
function filterGames( function filterByPlayerCount(
games: GameProto[], games: GameProto[],
playerCount: number, playerCount: number
freeGamesOnly: boolean,
maxPrice: number | null,
ownershipMode: boolean,
selectedPeople: Set<string>,
people: Person[]
): string[] { ): string[] {
const selectedPersons = people.filter((p) => selectedPeople.has(p.name));
return games return games
.filter( .filter(
(game) => game.maxPlayers >= playerCount && game.minPlayers <= playerCount (game) => game.maxPlayers >= playerCount && game.minPlayers <= playerCount
) )
.filter((game) => {
if (freeGamesOnly) return game.price === 0;
if (maxPrice !== null) return game.price <= maxPrice;
return true;
})
.filter((game) => {
if (!ownershipMode) return true;
if (game.price === 0) return true;
return selectedPersons.every((person) =>
person.opinion.some(
(op) => op.title === game.title && op.wouldPlay
)
);
})
.map((game) => game.title); .map((game) => game.title);
} }