Compare commits
3 Commits
386e8d6db6
...
c01baf0066
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
c01baf0066 | ||
| d560b6db6f | |||
| 500be84f39 |
95
frontend/pnpm-lock.yaml
generated
95
frontend/pnpm-lock.yaml
generated
@ -26,7 +26,7 @@ importers:
|
||||
devDependencies:
|
||||
'@eslint/js':
|
||||
specifier: ^9.39.1
|
||||
version: 9.39.1
|
||||
version: 9.39.2
|
||||
'@types/node':
|
||||
specifier: ^24.10.1
|
||||
version: 24.10.1
|
||||
@ -41,13 +41,13 @@ importers:
|
||||
version: 5.1.2(rolldown-vite@7.2.5(@types/node@24.10.1))
|
||||
eslint:
|
||||
specifier: ^9.39.1
|
||||
version: 9.39.1
|
||||
version: 9.39.2
|
||||
eslint-plugin-react-hooks:
|
||||
specifier: ^7.0.1
|
||||
version: 7.0.1(eslint@9.39.1)
|
||||
version: 7.0.1(eslint@9.39.2)
|
||||
eslint-plugin-react-refresh:
|
||||
specifier: ^0.4.24
|
||||
version: 0.4.24(eslint@9.39.1)
|
||||
version: 0.4.24(eslint@9.39.2)
|
||||
globals:
|
||||
specifier: ^16.5.0
|
||||
version: 16.5.0
|
||||
@ -59,7 +59,7 @@ importers:
|
||||
version: 5.9.3
|
||||
typescript-eslint:
|
||||
specifier: ^8.48.1
|
||||
version: 8.48.1(eslint@9.39.1)(typescript@5.9.3)
|
||||
version: 8.48.1(eslint@9.39.2)(typescript@5.9.3)
|
||||
vite:
|
||||
specifier: npm:rolldown-vite@7.2.5
|
||||
version: rolldown-vite@7.2.5(@types/node@24.10.1)
|
||||
@ -167,6 +167,12 @@ packages:
|
||||
peerDependencies:
|
||||
eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
|
||||
|
||||
'@eslint-community/eslint-utils@4.9.1':
|
||||
resolution: {integrity: sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==}
|
||||
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
||||
peerDependencies:
|
||||
eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
|
||||
|
||||
'@eslint-community/regexpp@4.12.2':
|
||||
resolution: {integrity: sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==}
|
||||
engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
|
||||
@ -187,8 +193,8 @@ packages:
|
||||
resolution: {integrity: sha512-Kr+LPIUVKz2qkx1HAMH8q1q6azbqBAsXJUxBl/ODDuVPX45Z9DfwB8tPjTi6nNZ8BuM3nbJxC5zCAg5elnBUTQ==}
|
||||
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
|
||||
|
||||
'@eslint/js@9.39.1':
|
||||
resolution: {integrity: sha512-S26Stp4zCy88tH94QbBv3XCuzRQiZ9yXofEILmglYTh/Ug/a9/umqvgFtYBAo3Lp0nsI/5/qH1CCrbdK3AP1Tw==}
|
||||
'@eslint/js@9.39.2':
|
||||
resolution: {integrity: sha512-q1mjIoW1VX4IvSocvM/vbTiveKC4k9eLrajNEuSsmjymSDEbpGddtpfOoN7YGAqBK3NG+uqo8ia4PDTt8buCYA==}
|
||||
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
|
||||
|
||||
'@eslint/object-schema@2.1.7':
|
||||
@ -425,7 +431,7 @@ packages:
|
||||
resolution: {integrity: sha512-EcA07pHJouywpzsoTUqNh5NwGayl2PPVEJKUSinGGSxFGYn+shYbqMGBg6FXDqgXum9Ou/ecb+411ssw8HImJQ==}
|
||||
engines: {node: ^20.19.0 || >=22.12.0}
|
||||
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:
|
||||
resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
|
||||
@ -562,8 +568,8 @@ packages:
|
||||
resolution: {integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==}
|
||||
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
|
||||
|
||||
eslint@9.39.1:
|
||||
resolution: {integrity: sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==}
|
||||
eslint@9.39.2:
|
||||
resolution: {integrity: sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==}
|
||||
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
|
||||
hasBin: true
|
||||
peerDependencies:
|
||||
@ -576,8 +582,8 @@ packages:
|
||||
resolution: {integrity: sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==}
|
||||
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
|
||||
|
||||
esquery@1.6.0:
|
||||
resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==}
|
||||
esquery@1.7.0:
|
||||
resolution: {integrity: sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==}
|
||||
engines: {node: '>=0.10'}
|
||||
|
||||
esrecurse@4.3.0:
|
||||
@ -1185,9 +1191,14 @@ snapshots:
|
||||
tslib: 2.8.1
|
||||
optional: true
|
||||
|
||||
'@eslint-community/eslint-utils@4.9.0(eslint@9.39.1)':
|
||||
'@eslint-community/eslint-utils@4.9.0(eslint@9.39.2)':
|
||||
dependencies:
|
||||
eslint: 9.39.1
|
||||
eslint: 9.39.2
|
||||
eslint-visitor-keys: 3.4.3
|
||||
|
||||
'@eslint-community/eslint-utils@4.9.1(eslint@9.39.2)':
|
||||
dependencies:
|
||||
eslint: 9.39.2
|
||||
eslint-visitor-keys: 3.4.3
|
||||
|
||||
'@eslint-community/regexpp@4.12.2': {}
|
||||
@ -1222,7 +1233,7 @@ snapshots:
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
'@eslint/js@9.39.1': {}
|
||||
'@eslint/js@9.39.2': {}
|
||||
|
||||
'@eslint/object-schema@2.1.7': {}
|
||||
|
||||
@ -1362,15 +1373,15 @@ snapshots:
|
||||
dependencies:
|
||||
csstype: 3.2.3
|
||||
|
||||
'@typescript-eslint/eslint-plugin@8.48.1(@typescript-eslint/parser@8.48.1(eslint@9.39.1)(typescript@5.9.3))(eslint@9.39.1)(typescript@5.9.3)':
|
||||
'@typescript-eslint/eslint-plugin@8.48.1(@typescript-eslint/parser@8.48.1(eslint@9.39.2)(typescript@5.9.3))(eslint@9.39.2)(typescript@5.9.3)':
|
||||
dependencies:
|
||||
'@eslint-community/regexpp': 4.12.2
|
||||
'@typescript-eslint/parser': 8.48.1(eslint@9.39.1)(typescript@5.9.3)
|
||||
'@typescript-eslint/parser': 8.48.1(eslint@9.39.2)(typescript@5.9.3)
|
||||
'@typescript-eslint/scope-manager': 8.48.1
|
||||
'@typescript-eslint/type-utils': 8.48.1(eslint@9.39.1)(typescript@5.9.3)
|
||||
'@typescript-eslint/utils': 8.48.1(eslint@9.39.1)(typescript@5.9.3)
|
||||
'@typescript-eslint/type-utils': 8.48.1(eslint@9.39.2)(typescript@5.9.3)
|
||||
'@typescript-eslint/utils': 8.48.1(eslint@9.39.2)(typescript@5.9.3)
|
||||
'@typescript-eslint/visitor-keys': 8.48.1
|
||||
eslint: 9.39.1
|
||||
eslint: 9.39.2
|
||||
graphemer: 1.4.0
|
||||
ignore: 7.0.5
|
||||
natural-compare: 1.4.0
|
||||
@ -1379,14 +1390,14 @@ snapshots:
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
'@typescript-eslint/parser@8.48.1(eslint@9.39.1)(typescript@5.9.3)':
|
||||
'@typescript-eslint/parser@8.48.1(eslint@9.39.2)(typescript@5.9.3)':
|
||||
dependencies:
|
||||
'@typescript-eslint/scope-manager': 8.48.1
|
||||
'@typescript-eslint/types': 8.48.1
|
||||
'@typescript-eslint/typescript-estree': 8.48.1(typescript@5.9.3)
|
||||
'@typescript-eslint/visitor-keys': 8.48.1
|
||||
debug: 4.4.3
|
||||
eslint: 9.39.1
|
||||
eslint: 9.39.2
|
||||
typescript: 5.9.3
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
@ -1409,13 +1420,13 @@ snapshots:
|
||||
dependencies:
|
||||
typescript: 5.9.3
|
||||
|
||||
'@typescript-eslint/type-utils@8.48.1(eslint@9.39.1)(typescript@5.9.3)':
|
||||
'@typescript-eslint/type-utils@8.48.1(eslint@9.39.2)(typescript@5.9.3)':
|
||||
dependencies:
|
||||
'@typescript-eslint/types': 8.48.1
|
||||
'@typescript-eslint/typescript-estree': 8.48.1(typescript@5.9.3)
|
||||
'@typescript-eslint/utils': 8.48.1(eslint@9.39.1)(typescript@5.9.3)
|
||||
'@typescript-eslint/utils': 8.48.1(eslint@9.39.2)(typescript@5.9.3)
|
||||
debug: 4.4.3
|
||||
eslint: 9.39.1
|
||||
eslint: 9.39.2
|
||||
ts-api-utils: 2.1.0(typescript@5.9.3)
|
||||
typescript: 5.9.3
|
||||
transitivePeerDependencies:
|
||||
@ -1438,13 +1449,13 @@ snapshots:
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
'@typescript-eslint/utils@8.48.1(eslint@9.39.1)(typescript@5.9.3)':
|
||||
'@typescript-eslint/utils@8.48.1(eslint@9.39.2)(typescript@5.9.3)':
|
||||
dependencies:
|
||||
'@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1)
|
||||
'@eslint-community/eslint-utils': 4.9.0(eslint@9.39.2)
|
||||
'@typescript-eslint/scope-manager': 8.48.1
|
||||
'@typescript-eslint/types': 8.48.1
|
||||
'@typescript-eslint/typescript-estree': 8.48.1(typescript@5.9.3)
|
||||
eslint: 9.39.1
|
||||
eslint: 9.39.2
|
||||
typescript: 5.9.3
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
@ -1557,20 +1568,20 @@ snapshots:
|
||||
|
||||
escape-string-regexp@4.0.0: {}
|
||||
|
||||
eslint-plugin-react-hooks@7.0.1(eslint@9.39.1):
|
||||
eslint-plugin-react-hooks@7.0.1(eslint@9.39.2):
|
||||
dependencies:
|
||||
'@babel/core': 7.28.5
|
||||
'@babel/parser': 7.28.5
|
||||
eslint: 9.39.1
|
||||
eslint: 9.39.2
|
||||
hermes-parser: 0.25.1
|
||||
zod: 4.1.13
|
||||
zod-validation-error: 4.0.2(zod@4.1.13)
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
eslint-plugin-react-refresh@0.4.24(eslint@9.39.1):
|
||||
eslint-plugin-react-refresh@0.4.24(eslint@9.39.2):
|
||||
dependencies:
|
||||
eslint: 9.39.1
|
||||
eslint: 9.39.2
|
||||
|
||||
eslint-scope@8.4.0:
|
||||
dependencies:
|
||||
@ -1581,15 +1592,15 @@ snapshots:
|
||||
|
||||
eslint-visitor-keys@4.2.1: {}
|
||||
|
||||
eslint@9.39.1:
|
||||
eslint@9.39.2:
|
||||
dependencies:
|
||||
'@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1)
|
||||
'@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2)
|
||||
'@eslint-community/regexpp': 4.12.2
|
||||
'@eslint/config-array': 0.21.1
|
||||
'@eslint/config-helpers': 0.4.2
|
||||
'@eslint/core': 0.17.0
|
||||
'@eslint/eslintrc': 3.3.3
|
||||
'@eslint/js': 9.39.1
|
||||
'@eslint/js': 9.39.2
|
||||
'@eslint/plugin-kit': 0.4.1
|
||||
'@humanfs/node': 0.16.7
|
||||
'@humanwhocodes/module-importer': 1.0.1
|
||||
@ -1603,7 +1614,7 @@ snapshots:
|
||||
eslint-scope: 8.4.0
|
||||
eslint-visitor-keys: 4.2.1
|
||||
espree: 10.4.0
|
||||
esquery: 1.6.0
|
||||
esquery: 1.7.0
|
||||
esutils: 2.0.3
|
||||
fast-deep-equal: 3.1.3
|
||||
file-entry-cache: 8.0.0
|
||||
@ -1626,7 +1637,7 @@ snapshots:
|
||||
acorn-jsx: 5.3.2(acorn@8.15.0)
|
||||
eslint-visitor-keys: 4.2.1
|
||||
|
||||
esquery@1.6.0:
|
||||
esquery@1.7.0:
|
||||
dependencies:
|
||||
estraverse: 5.3.0
|
||||
|
||||
@ -1956,13 +1967,13 @@ snapshots:
|
||||
dependencies:
|
||||
prelude-ls: 1.2.1
|
||||
|
||||
typescript-eslint@8.48.1(eslint@9.39.1)(typescript@5.9.3):
|
||||
typescript-eslint@8.48.1(eslint@9.39.2)(typescript@5.9.3):
|
||||
dependencies:
|
||||
'@typescript-eslint/eslint-plugin': 8.48.1(@typescript-eslint/parser@8.48.1(eslint@9.39.1)(typescript@5.9.3))(eslint@9.39.1)(typescript@5.9.3)
|
||||
'@typescript-eslint/parser': 8.48.1(eslint@9.39.1)(typescript@5.9.3)
|
||||
'@typescript-eslint/eslint-plugin': 8.48.1(@typescript-eslint/parser@8.48.1(eslint@9.39.2)(typescript@5.9.3))(eslint@9.39.2)(typescript@5.9.3)
|
||||
'@typescript-eslint/parser': 8.48.1(eslint@9.39.2)(typescript@5.9.3)
|
||||
'@typescript-eslint/typescript-estree': 8.48.1(typescript@5.9.3)
|
||||
'@typescript-eslint/utils': 8.48.1(eslint@9.39.1)(typescript@5.9.3)
|
||||
eslint: 9.39.1
|
||||
'@typescript-eslint/utils': 8.48.1(eslint@9.39.2)(typescript@5.9.3)
|
||||
eslint: 9.39.2
|
||||
typescript: 5.9.3
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
@ -333,7 +333,7 @@ export function EditGame({ onShowToast }: Props) {
|
||||
<input
|
||||
type="number"
|
||||
value={price}
|
||||
onChange={(e) => setPrice(Number(e.target.value))}
|
||||
onChange={(e) => setPrice(Number(e.target.value.replace(',', '.')))}
|
||||
min="0"
|
||||
step="0.01"
|
||||
style={inputStyles}
|
||||
|
||||
@ -12,3 +12,81 @@
|
||||
.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,10 +11,16 @@ 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 } = useGameFilter(
|
||||
const { filteredGames, gameToPositive, games } = useGameFilter(
|
||||
people,
|
||||
selectedPeople
|
||||
selectedPeople,
|
||||
freeGamesOnly,
|
||||
maxPrice,
|
||||
ownershipMode
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
@ -57,10 +63,62 @@ 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))}
|
||||
onChange={(e) => setPrice(Number(e.target.value.replace(',', '.')))}
|
||||
min="0"
|
||||
step="0.01"
|
||||
style={inputStyles}
|
||||
|
||||
@ -1,17 +1,20 @@
|
||||
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 (
|
||||
@ -31,6 +34,8 @@ 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
|
||||
@ -68,6 +73,21 @@ 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,7 +7,13 @@ import {
|
||||
} from "../../items";
|
||||
import { apiFetch } from "../api";
|
||||
|
||||
export function useGameFilter(people: Person[], selectedPeople: Set<string>) {
|
||||
export function useGameFilter(
|
||||
people: Person[],
|
||||
selectedPeople: Set<string>,
|
||||
freeGamesOnly: boolean,
|
||||
maxPrice: number | null,
|
||||
ownershipMode: boolean
|
||||
) {
|
||||
const [fetchedTitles, setFetchedTitles] = useState<string[]>([]);
|
||||
const metaDataRef = useRef<{ [key: string]: GameProto }>({});
|
||||
|
||||
@ -79,20 +85,63 @@ export function useGameFilter(people: Person[], selectedPeople: Set<string>) {
|
||||
.filter((title) => metaDataRef.current[title])
|
||||
.map((title) => metaDataRef.current[title]);
|
||||
|
||||
return filterByPlayerCount(games, selectedPeople.size);
|
||||
return filterGames(
|
||||
games,
|
||||
selectedPeople.size,
|
||||
freeGamesOnly,
|
||||
maxPrice,
|
||||
ownershipMode,
|
||||
selectedPeople,
|
||||
people
|
||||
);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [titlesEveryoneWouldPlay, selectedPeople.size, fetchedTitles]);
|
||||
}, [
|
||||
titlesEveryoneWouldPlay,
|
||||
selectedPeople.size,
|
||||
fetchedTitles,
|
||||
freeGamesOnly,
|
||||
maxPrice,
|
||||
ownershipMode,
|
||||
people,
|
||||
selectedPeople,
|
||||
]);
|
||||
|
||||
return { filteredGames, gameToPositive: gameToPositiveOpinion };
|
||||
const gamesMap = useMemo(() => {
|
||||
return new Map(Object.entries(metaDataRef.current));
|
||||
}, [fetchedTitles]);
|
||||
|
||||
return { filteredGames, gameToPositive: gameToPositiveOpinion, games: gamesMap };
|
||||
}
|
||||
|
||||
function filterByPlayerCount(
|
||||
function filterGames(
|
||||
games: GameProto[],
|
||||
playerCount: number
|
||||
playerCount: number,
|
||||
freeGamesOnly: boolean,
|
||||
maxPrice: number | null,
|
||||
ownershipMode: boolean,
|
||||
selectedPeople: Set<string>,
|
||||
people: Person[]
|
||||
): 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