Compare commits

...

3 Commits

7 changed files with 338 additions and 276 deletions

View File

@ -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>

134
frontend/pnpm-lock.yaml generated
View File

@ -59,7 +59,7 @@ importers:
version: 5.9.3 version: 5.9.3
typescript-eslint: typescript-eslint:
specifier: ^8.48.1 specifier: ^8.48.1
version: 8.48.1(eslint@9.39.1)(typescript@5.9.3) version: 8.50.0(eslint@9.39.1)(typescript@5.9.3)
vite: vite:
specifier: npm:rolldown-vite@7.2.5 specifier: npm:rolldown-vite@7.2.5
version: rolldown-vite@7.2.5(@types/node@24.10.1) version: rolldown-vite@7.2.5(@types/node@24.10.1)
@ -362,70 +362,70 @@ packages:
'@types/react@19.2.7': '@types/react@19.2.7':
resolution: {integrity: sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==} resolution: {integrity: sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==}
'@typescript-eslint/eslint-plugin@8.48.1': '@typescript-eslint/eslint-plugin@8.50.0':
resolution: {integrity: sha512-X63hI1bxl5ohelzr0LY5coufyl0LJNthld+abwxpCoo6Gq+hSqhKwci7MUWkXo67mzgUK6YFByhmaHmUcuBJmA==} resolution: {integrity: sha512-O7QnmOXYKVtPrfYzMolrCTfkezCJS9+ljLdKW/+DCvRsc3UAz+sbH6Xcsv7p30+0OwUbeWfUDAQE0vpabZ3QLg==}
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
peerDependencies: peerDependencies:
'@typescript-eslint/parser': ^8.48.1 '@typescript-eslint/parser': ^8.50.0
eslint: ^8.57.0 || ^9.0.0 eslint: ^8.57.0 || ^9.0.0
typescript: '>=4.8.4 <6.0.0' typescript: '>=4.8.4 <6.0.0'
'@typescript-eslint/parser@8.48.1': '@typescript-eslint/parser@8.50.0':
resolution: {integrity: sha512-PC0PDZfJg8sP7cmKe6L3QIL8GZwU5aRvUFedqSIpw3B+QjRSUZeeITC2M5XKeMXEzL6wccN196iy3JLwKNvDVA==} resolution: {integrity: sha512-6/cmF2piao+f6wSxUsJLZjck7OQsYyRtcOZS02k7XINSNlz93v6emM8WutDQSXnroG2xwYlEVHJI+cPA7CPM3Q==}
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
peerDependencies: peerDependencies:
eslint: ^8.57.0 || ^9.0.0 eslint: ^8.57.0 || ^9.0.0
typescript: '>=4.8.4 <6.0.0' typescript: '>=4.8.4 <6.0.0'
'@typescript-eslint/project-service@8.48.1': '@typescript-eslint/project-service@8.50.0':
resolution: {integrity: sha512-HQWSicah4s9z2/HifRPQ6b6R7G+SBx64JlFQpgSSHWPKdvCZX57XCbszg/bapbRsOEv42q5tayTYcEFpACcX1w==} resolution: {integrity: sha512-Cg/nQcL1BcoTijEWyx4mkVC56r8dj44bFDvBdygifuS20f3OZCHmFbjF34DPSi07kwlFvqfv/xOLnJ5DquxSGQ==}
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
peerDependencies: peerDependencies:
typescript: '>=4.8.4 <6.0.0' typescript: '>=4.8.4 <6.0.0'
'@typescript-eslint/scope-manager@8.48.1': '@typescript-eslint/scope-manager@8.50.0':
resolution: {integrity: sha512-rj4vWQsytQbLxC5Bf4XwZ0/CKd362DkWMUkviT7DCS057SK64D5lH74sSGzhI6PDD2HCEq02xAP9cX68dYyg1w==} resolution: {integrity: sha512-xCwfuCZjhIqy7+HKxBLrDVT5q/iq7XBVBXLn57RTIIpelLtEIZHXAF/Upa3+gaCpeV1NNS5Z9A+ID6jn50VD4A==}
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
'@typescript-eslint/tsconfig-utils@8.48.1': '@typescript-eslint/tsconfig-utils@8.50.0':
resolution: {integrity: sha512-k0Jhs4CpEffIBm6wPaCXBAD7jxBtrHjrSgtfCjUvPp9AZ78lXKdTR8fxyZO5y4vWNlOvYXRtngSZNSn+H53Jkw==} resolution: {integrity: sha512-vxd3G/ybKTSlm31MOA96gqvrRGv9RJ7LGtZCn2Vrc5htA0zCDvcMqUkifcjrWNNKXHUU3WCkYOzzVSFBd0wa2w==}
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
peerDependencies: peerDependencies:
typescript: '>=4.8.4 <6.0.0' typescript: '>=4.8.4 <6.0.0'
'@typescript-eslint/type-utils@8.48.1': '@typescript-eslint/type-utils@8.50.0':
resolution: {integrity: sha512-1jEop81a3LrJQLTf/1VfPQdhIY4PlGDBc/i67EVWObrtvcziysbLN3oReexHOM6N3jyXgCrkBsZpqwH0hiDOQg==} resolution: {integrity: sha512-7OciHT2lKCewR0mFoBrvZJ4AXTMe/sYOe87289WAViOocEmDjjv8MvIOT2XESuKj9jp8u3SZYUSh89QA4S1kQw==}
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
peerDependencies: peerDependencies:
eslint: ^8.57.0 || ^9.0.0 eslint: ^8.57.0 || ^9.0.0
typescript: '>=4.8.4 <6.0.0' typescript: '>=4.8.4 <6.0.0'
'@typescript-eslint/types@8.48.1': '@typescript-eslint/types@8.50.0':
resolution: {integrity: sha512-+fZ3LZNeiELGmimrujsDCT4CRIbq5oXdHe7chLiW8qzqyPMnn1puNstCrMNVAqwcl2FdIxkuJ4tOs/RFDBVc/Q==} resolution: {integrity: sha512-iX1mgmGrXdANhhITbpp2QQM2fGehBse9LbTf0sidWK6yg/NE+uhV5dfU1g6EYPlcReYmkE9QLPq/2irKAmtS9w==}
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
'@typescript-eslint/typescript-estree@8.48.1': '@typescript-eslint/typescript-estree@8.50.0':
resolution: {integrity: sha512-/9wQ4PqaefTK6POVTjJaYS0bynCgzh6ClJHGSBj06XEHjkfylzB+A3qvyaXnErEZSaxhIo4YdyBgq6j4RysxDg==} resolution: {integrity: sha512-W7SVAGBR/IX7zm1t70Yujpbk+zdPq/u4soeFSknWFdXIFuWsBGBOUu/Tn/I6KHSKvSh91OiMuaSnYp3mtPt5IQ==}
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
peerDependencies: peerDependencies:
typescript: '>=4.8.4 <6.0.0' typescript: '>=4.8.4 <6.0.0'
'@typescript-eslint/utils@8.48.1': '@typescript-eslint/utils@8.50.0':
resolution: {integrity: sha512-fAnhLrDjiVfey5wwFRwrweyRlCmdz5ZxXz2G/4cLn0YDLjTapmN4gcCsTBR1N2rWnZSDeWpYtgLDsJt+FpmcwA==} resolution: {integrity: sha512-87KgUXET09CRjGCi2Ejxy3PULXna63/bMYv72tCAlDJC3Yqwln0HiFJ3VJMst2+mEtNtZu5oFvX4qJGjKsnAgg==}
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
peerDependencies: peerDependencies:
eslint: ^8.57.0 || ^9.0.0 eslint: ^8.57.0 || ^9.0.0
typescript: '>=4.8.4 <6.0.0' typescript: '>=4.8.4 <6.0.0'
'@typescript-eslint/visitor-keys@8.48.1': '@typescript-eslint/visitor-keys@8.50.0':
resolution: {integrity: sha512-BmxxndzEWhE4TIEEMBs8lP3MBWN3jFPs/p6gPm/wkv02o41hI6cq9AuSmGAaTTHPtA1FTi2jBre4A9rm5ZmX+Q==} resolution: {integrity: sha512-Xzmnb58+Db78gT/CCj/PVCvK+zxbnsw6F+O1oheYszJbBSdEjVhQi3C/Xttzxgi/GLmpvOggRs1RFpiJ8+c34Q==}
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
'@vitejs/plugin-react@5.1.2': '@vitejs/plugin-react@5.1.2':
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==}
@ -646,9 +646,6 @@ packages:
resolution: {integrity: sha512-c/c15i26VrJ4IRt5Z89DnIzCGDn9EcebibhAOjw5ibqEHsE1wLUgkPn9RDmNcUKyU87GeaL633nyJ+pplFR2ZQ==} resolution: {integrity: sha512-c/c15i26VrJ4IRt5Z89DnIzCGDn9EcebibhAOjw5ibqEHsE1wLUgkPn9RDmNcUKyU87GeaL633nyJ+pplFR2ZQ==}
engines: {node: '>=18'} engines: {node: '>=18'}
graphemer@1.4.0:
resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
has-flag@4.0.0: has-flag@4.0.0:
resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==} resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
engines: {node: '>=8'} engines: {node: '>=8'}
@ -1004,8 +1001,8 @@ packages:
resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==} resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
engines: {node: '>= 0.8.0'} engines: {node: '>= 0.8.0'}
typescript-eslint@8.48.1: typescript-eslint@8.50.0:
resolution: {integrity: sha512-FbOKN1fqNoXp1hIl5KYpObVrp0mCn+CLgn479nmu2IsRMrx2vyv74MmsBLVlhg8qVwNFGbXSp8fh1zp8pEoC2A==} resolution: {integrity: sha512-Q1/6yNUmCpH94fbgMUMg2/BSAr/6U7GBk61kZTv1/asghQOWOjTlp9K8mixS5NcJmm2creY+UFfGeW/+OcA64A==}
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
peerDependencies: peerDependencies:
eslint: ^8.57.0 || ^9.0.0 eslint: ^8.57.0 || ^9.0.0
@ -1362,16 +1359,15 @@ snapshots:
dependencies: dependencies:
csstype: 3.2.3 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.50.0(@typescript-eslint/parser@8.50.0(eslint@9.39.1)(typescript@5.9.3))(eslint@9.39.1)(typescript@5.9.3)':
dependencies: dependencies:
'@eslint-community/regexpp': 4.12.2 '@eslint-community/regexpp': 4.12.2
'@typescript-eslint/parser': 8.48.1(eslint@9.39.1)(typescript@5.9.3) '@typescript-eslint/parser': 8.50.0(eslint@9.39.1)(typescript@5.9.3)
'@typescript-eslint/scope-manager': 8.48.1 '@typescript-eslint/scope-manager': 8.50.0
'@typescript-eslint/type-utils': 8.48.1(eslint@9.39.1)(typescript@5.9.3) '@typescript-eslint/type-utils': 8.50.0(eslint@9.39.1)(typescript@5.9.3)
'@typescript-eslint/utils': 8.48.1(eslint@9.39.1)(typescript@5.9.3) '@typescript-eslint/utils': 8.50.0(eslint@9.39.1)(typescript@5.9.3)
'@typescript-eslint/visitor-keys': 8.48.1 '@typescript-eslint/visitor-keys': 8.50.0
eslint: 9.39.1 eslint: 9.39.1
graphemer: 1.4.0
ignore: 7.0.5 ignore: 7.0.5
natural-compare: 1.4.0 natural-compare: 1.4.0
ts-api-utils: 2.1.0(typescript@5.9.3) ts-api-utils: 2.1.0(typescript@5.9.3)
@ -1379,41 +1375,41 @@ snapshots:
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
'@typescript-eslint/parser@8.48.1(eslint@9.39.1)(typescript@5.9.3)': '@typescript-eslint/parser@8.50.0(eslint@9.39.1)(typescript@5.9.3)':
dependencies: dependencies:
'@typescript-eslint/scope-manager': 8.48.1 '@typescript-eslint/scope-manager': 8.50.0
'@typescript-eslint/types': 8.48.1 '@typescript-eslint/types': 8.50.0
'@typescript-eslint/typescript-estree': 8.48.1(typescript@5.9.3) '@typescript-eslint/typescript-estree': 8.50.0(typescript@5.9.3)
'@typescript-eslint/visitor-keys': 8.48.1 '@typescript-eslint/visitor-keys': 8.50.0
debug: 4.4.3 debug: 4.4.3
eslint: 9.39.1 eslint: 9.39.1
typescript: 5.9.3 typescript: 5.9.3
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
'@typescript-eslint/project-service@8.48.1(typescript@5.9.3)': '@typescript-eslint/project-service@8.50.0(typescript@5.9.3)':
dependencies: dependencies:
'@typescript-eslint/tsconfig-utils': 8.48.1(typescript@5.9.3) '@typescript-eslint/tsconfig-utils': 8.50.0(typescript@5.9.3)
'@typescript-eslint/types': 8.48.1 '@typescript-eslint/types': 8.50.0
debug: 4.4.3 debug: 4.4.3
typescript: 5.9.3 typescript: 5.9.3
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
'@typescript-eslint/scope-manager@8.48.1': '@typescript-eslint/scope-manager@8.50.0':
dependencies: dependencies:
'@typescript-eslint/types': 8.48.1 '@typescript-eslint/types': 8.50.0
'@typescript-eslint/visitor-keys': 8.48.1 '@typescript-eslint/visitor-keys': 8.50.0
'@typescript-eslint/tsconfig-utils@8.48.1(typescript@5.9.3)': '@typescript-eslint/tsconfig-utils@8.50.0(typescript@5.9.3)':
dependencies: dependencies:
typescript: 5.9.3 typescript: 5.9.3
'@typescript-eslint/type-utils@8.48.1(eslint@9.39.1)(typescript@5.9.3)': '@typescript-eslint/type-utils@8.50.0(eslint@9.39.1)(typescript@5.9.3)':
dependencies: dependencies:
'@typescript-eslint/types': 8.48.1 '@typescript-eslint/types': 8.50.0
'@typescript-eslint/typescript-estree': 8.48.1(typescript@5.9.3) '@typescript-eslint/typescript-estree': 8.50.0(typescript@5.9.3)
'@typescript-eslint/utils': 8.48.1(eslint@9.39.1)(typescript@5.9.3) '@typescript-eslint/utils': 8.50.0(eslint@9.39.1)(typescript@5.9.3)
debug: 4.4.3 debug: 4.4.3
eslint: 9.39.1 eslint: 9.39.1
ts-api-utils: 2.1.0(typescript@5.9.3) ts-api-utils: 2.1.0(typescript@5.9.3)
@ -1421,14 +1417,14 @@ snapshots:
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
'@typescript-eslint/types@8.48.1': {} '@typescript-eslint/types@8.50.0': {}
'@typescript-eslint/typescript-estree@8.48.1(typescript@5.9.3)': '@typescript-eslint/typescript-estree@8.50.0(typescript@5.9.3)':
dependencies: dependencies:
'@typescript-eslint/project-service': 8.48.1(typescript@5.9.3) '@typescript-eslint/project-service': 8.50.0(typescript@5.9.3)
'@typescript-eslint/tsconfig-utils': 8.48.1(typescript@5.9.3) '@typescript-eslint/tsconfig-utils': 8.50.0(typescript@5.9.3)
'@typescript-eslint/types': 8.48.1 '@typescript-eslint/types': 8.50.0
'@typescript-eslint/visitor-keys': 8.48.1 '@typescript-eslint/visitor-keys': 8.50.0
debug: 4.4.3 debug: 4.4.3
minimatch: 9.0.5 minimatch: 9.0.5
semver: 7.7.3 semver: 7.7.3
@ -1438,20 +1434,20 @@ snapshots:
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
'@typescript-eslint/utils@8.48.1(eslint@9.39.1)(typescript@5.9.3)': '@typescript-eslint/utils@8.50.0(eslint@9.39.1)(typescript@5.9.3)':
dependencies: dependencies:
'@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1) '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1)
'@typescript-eslint/scope-manager': 8.48.1 '@typescript-eslint/scope-manager': 8.50.0
'@typescript-eslint/types': 8.48.1 '@typescript-eslint/types': 8.50.0
'@typescript-eslint/typescript-estree': 8.48.1(typescript@5.9.3) '@typescript-eslint/typescript-estree': 8.50.0(typescript@5.9.3)
eslint: 9.39.1 eslint: 9.39.1
typescript: 5.9.3 typescript: 5.9.3
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
'@typescript-eslint/visitor-keys@8.48.1': '@typescript-eslint/visitor-keys@8.50.0':
dependencies: dependencies:
'@typescript-eslint/types': 8.48.1 '@typescript-eslint/types': 8.50.0
eslint-visitor-keys: 4.2.1 eslint-visitor-keys: 4.2.1
'@vitejs/plugin-react@5.1.2(rolldown-vite@7.2.5(@types/node@24.10.1))': '@vitejs/plugin-react@5.1.2(rolldown-vite@7.2.5(@types/node@24.10.1))':
@ -1677,8 +1673,6 @@ snapshots:
globals@16.5.0: {} globals@16.5.0: {}
graphemer@1.4.0: {}
has-flag@4.0.0: {} has-flag@4.0.0: {}
hermes-estree@0.25.1: {} hermes-estree@0.25.1: {}
@ -1956,12 +1950,12 @@ snapshots:
dependencies: dependencies:
prelude-ls: 1.2.1 prelude-ls: 1.2.1
typescript-eslint@8.48.1(eslint@9.39.1)(typescript@5.9.3): typescript-eslint@8.50.0(eslint@9.39.1)(typescript@5.9.3):
dependencies: 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/eslint-plugin': 8.50.0(@typescript-eslint/parser@8.50.0(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/parser': 8.50.0(eslint@9.39.1)(typescript@5.9.3)
'@typescript-eslint/typescript-estree': 8.48.1(typescript@5.9.3) '@typescript-eslint/typescript-estree': 8.50.0(typescript@5.9.3)
'@typescript-eslint/utils': 8.48.1(eslint@9.39.1)(typescript@5.9.3) '@typescript-eslint/utils': 8.50.0(eslint@9.39.1)(typescript@5.9.3)
eslint: 9.39.1 eslint: 9.39.1
typescript: 5.9.3 typescript: 5.9.3
transitivePeerDependencies: transitivePeerDependencies:

View File

@ -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);

View File

@ -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>
); );
} }

View 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>
);
}

View 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>
);
}

View 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);
}