Compare commits
1 Commits
11f5eee11c
...
1028b4b566
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
1028b4b566 |
@ -333,7 +333,7 @@ export function EditGame({ onShowToast }: Props) {
|
||||
<input
|
||||
type="number"
|
||||
value={price}
|
||||
onChange={(e) => setPrice(Number(e.target.value.replace(',', '.')))}
|
||||
onChange={(e) => setPrice(Number(e.target.value))}
|
||||
min="0"
|
||||
step="0.01"
|
||||
style={inputStyles}
|
||||
|
||||
@ -12,81 +12,3 @@
|
||||
.gamefilter-entry:hover {
|
||||
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;
|
||||
}
|
||||
@ -11,16 +11,10 @@ export function GameFilter() {
|
||||
const [people, setPeople] = useState<Person[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
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,
|
||||
selectedPeople,
|
||||
freeGamesOnly,
|
||||
maxPrice,
|
||||
ownershipMode
|
||||
selectedPeople
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
@ -63,62 +57,10 @@ export function GameFilter() {
|
||||
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
|
||||
filteredGames={filteredGames}
|
||||
gameToPositive={gameToPositive}
|
||||
selectedPeopleCount={selectedPeople.size}
|
||||
games={games}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -463,7 +463,7 @@ export function GameList({ onShowToast }: Props) {
|
||||
<input
|
||||
type="number"
|
||||
value={price}
|
||||
onChange={(e) => setPrice(Number(e.target.value.replace(',', '.')))}
|
||||
onChange={(e) => setPrice(Number(e.target.value))}
|
||||
min="0"
|
||||
step="0.01"
|
||||
style={inputStyles}
|
||||
|
||||
@ -1,20 +1,17 @@
|
||||
import { Link } from "react-router-dom";
|
||||
import { GameImage } from "../GameImage";
|
||||
import { EmptyState } from "./EmptyState";
|
||||
import { Game as GameProto } from "../../items";
|
||||
|
||||
interface FilteredGamesListProps {
|
||||
filteredGames: string[];
|
||||
gameToPositive: Map<string, Set<string>>;
|
||||
selectedPeopleCount: number;
|
||||
games: Map<string, GameProto>;
|
||||
}
|
||||
|
||||
export function FilteredGamesList({
|
||||
filteredGames,
|
||||
gameToPositive,
|
||||
selectedPeopleCount,
|
||||
games,
|
||||
}: FilteredGamesListProps) {
|
||||
if (selectedPeopleCount === 0) {
|
||||
return (
|
||||
@ -34,8 +31,6 @@ export function FilteredGamesList({
|
||||
{filteredGames.map((game) => {
|
||||
const positiveCount = gameToPositive.get(game)?.size || 0;
|
||||
const neutralCount = selectedPeopleCount - positiveCount;
|
||||
const gameData = games.get(game);
|
||||
const price = gameData?.price ?? 0;
|
||||
|
||||
return (
|
||||
<Link
|
||||
@ -73,21 +68,6 @@ export function FilteredGamesList({
|
||||
{neutralCount > 1 ? "are" : "is"} neutral
|
||||
</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>
|
||||
<GameImage game={game} />
|
||||
</Link>
|
||||
|
||||
@ -7,13 +7,7 @@ import {
|
||||
} from "../../items";
|
||||
import { apiFetch } from "../api";
|
||||
|
||||
export function useGameFilter(
|
||||
people: Person[],
|
||||
selectedPeople: Set<string>,
|
||||
freeGamesOnly: boolean,
|
||||
maxPrice: number | null,
|
||||
ownershipMode: boolean
|
||||
) {
|
||||
export function useGameFilter(people: Person[], selectedPeople: Set<string>) {
|
||||
const [fetchedTitles, setFetchedTitles] = useState<string[]>([]);
|
||||
const metaDataRef = useRef<{ [key: string]: GameProto }>({});
|
||||
|
||||
@ -85,63 +79,20 @@ export function useGameFilter(
|
||||
.filter((title) => metaDataRef.current[title])
|
||||
.map((title) => metaDataRef.current[title]);
|
||||
|
||||
return filterGames(
|
||||
games,
|
||||
selectedPeople.size,
|
||||
freeGamesOnly,
|
||||
maxPrice,
|
||||
ownershipMode,
|
||||
selectedPeople,
|
||||
people
|
||||
);
|
||||
return filterByPlayerCount(games, selectedPeople.size);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [
|
||||
titlesEveryoneWouldPlay,
|
||||
selectedPeople.size,
|
||||
fetchedTitles,
|
||||
freeGamesOnly,
|
||||
maxPrice,
|
||||
ownershipMode,
|
||||
people,
|
||||
selectedPeople,
|
||||
]);
|
||||
}, [titlesEveryoneWouldPlay, selectedPeople.size, fetchedTitles]);
|
||||
|
||||
const gamesMap = useMemo(() => {
|
||||
return new Map(Object.entries(metaDataRef.current));
|
||||
}, [fetchedTitles]);
|
||||
|
||||
return { filteredGames, gameToPositive: gameToPositiveOpinion, games: gamesMap };
|
||||
return { filteredGames, gameToPositive: gameToPositiveOpinion };
|
||||
}
|
||||
|
||||
function filterGames(
|
||||
function filterByPlayerCount(
|
||||
games: GameProto[],
|
||||
playerCount: number,
|
||||
freeGamesOnly: boolean,
|
||||
maxPrice: number | null,
|
||||
ownershipMode: boolean,
|
||||
selectedPeople: Set<string>,
|
||||
people: Person[]
|
||||
playerCount: number
|
||||
): string[] {
|
||||
const selectedPersons = people.filter((p) => selectedPeople.has(p.name));
|
||||
|
||||
return games
|
||||
.filter(
|
||||
(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);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user