From bb08f03b9c1f4cf381151ce83831e9977596c239 Mon Sep 17 00:00:00 2001 From: Bradley Shellnut Date: Sun, 7 Aug 2022 14:53:21 -0700 Subject: [PATCH 1/7] Mergin searces. --- package.json | 4 +- pnpm-lock.yaml | 17 ++- .../search/advancedSearch/index.svelte | 144 +++++++++--------- .../components/search/textSearch/index.svelte | 63 +++----- src/routes/index.svelte | 22 ++- 5 files changed, 127 insertions(+), 123 deletions(-) diff --git a/package.json b/package.json index a5220b1..01e0503 100644 --- a/package.json +++ b/package.json @@ -17,12 +17,12 @@ "@rgossiaux/svelte-headlessui": "1.0.2", "@rgossiaux/svelte-heroicons": "^0.1.2", "@sveltejs/adapter-auto": "1.0.0-next.64", - "@sveltejs/kit": "1.0.0-next.403", + "@sveltejs/kit": "1.0.0-next.405", "@types/cookie": "^0.5.1", "@types/node": "^18.6.4", "@typescript-eslint/eslint-plugin": "^5.32.0", "@typescript-eslint/parser": "^5.32.0", - "carbon-components-svelte": "^0.67.5", + "carbon-components-svelte": "^0.67.7", "carbon-icons-svelte": "^11.2.0", "eslint": "^8.21.0", "eslint-config-prettier": "^8.1.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 094d87f..0f0c89f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -9,13 +9,13 @@ specifiers: '@rgossiaux/svelte-headlessui': 1.0.2 '@rgossiaux/svelte-heroicons': ^0.1.2 '@sveltejs/adapter-auto': 1.0.0-next.64 - '@sveltejs/kit': 1.0.0-next.403 + '@sveltejs/kit': 1.0.0-next.405 '@types/cookie': ^0.5.1 '@types/feather-icons': ^4.7.0 '@types/node': ^18.6.4 '@typescript-eslint/eslint-plugin': ^5.32.0 '@typescript-eslint/parser': ^5.32.0 - carbon-components-svelte: ^0.67.5 + carbon-components-svelte: ^0.67.7 carbon-icons-svelte: ^11.2.0 cookie: ^0.5.0 eslint: ^8.21.0 @@ -49,12 +49,12 @@ devDependencies: '@rgossiaux/svelte-headlessui': 1.0.2_svelte@3.49.0 '@rgossiaux/svelte-heroicons': 0.1.2_svelte@3.49.0 '@sveltejs/adapter-auto': 1.0.0-next.64 - '@sveltejs/kit': 1.0.0-next.403_svelte@3.49.0+vite@3.0.4 + '@sveltejs/kit': 1.0.0-next.405_svelte@3.49.0+vite@3.0.4 '@types/cookie': 0.5.1 '@types/node': 18.6.4 '@typescript-eslint/eslint-plugin': 5.32.0_iosr3hrei2tubxveewluhu5lhy '@typescript-eslint/parser': 5.32.0_qugx7qdu5zevzvxaiqyxfiwquq - carbon-components-svelte: 0.67.5 + carbon-components-svelte: 0.67.7 carbon-icons-svelte: 11.2.0 eslint: 8.21.0 eslint-config-prettier: 8.5.0_eslint@8.21.0 @@ -268,8 +268,8 @@ packages: - supports-color dev: true - /@sveltejs/kit/1.0.0-next.403_svelte@3.49.0+vite@3.0.4: - resolution: {integrity: sha512-pKlmthl1SZkbx671Jp+LBoRne0vNzsjSgta9iRhqW/bt/0mx/IjlMd/NOeLuJGo30dAJdefrySoSamiaq47M/g==} + /@sveltejs/kit/1.0.0-next.405_svelte@3.49.0+vite@3.0.4: + resolution: {integrity: sha512-jHSa74F7k+hC+0fof75g/xm/+1M5sM66Qt6v8eLLMSgjkp36Lb5xOioBhbl6w0NYoE5xysLsBWuu+yHytfvCBA==} engines: {node: '>=16.9'} hasBin: true requiresBuild: true @@ -281,6 +281,7 @@ packages: chokidar: 3.5.3 sade: 1.8.1 svelte: 3.49.0 + tiny-glob: 0.2.9 vite: 3.0.4_sass@1.54.3 transitivePeerDependencies: - diff-match-patch @@ -601,8 +602,8 @@ packages: engines: {node: '>=6'} dev: true - /carbon-components-svelte/0.67.5: - resolution: {integrity: sha512-2azoyIy5xuWYOW+voMJe5p1J72bi8L+BpxkZR0FXCxv/+eK8wrDySaLRmyeYku/qNcD1/PAm4Fl4JZoakeGW4A==} + /carbon-components-svelte/0.67.7: + resolution: {integrity: sha512-fx/O38tzw9uLiquqqB9zOI5ARA8pSBTOt1gSbgMNwLADYW0weAsr1dLvLnOmSLmXr3T0jaPgWHSkuEv4VTeo/w==} dependencies: flatpickr: 4.6.9 dev: true diff --git a/src/lib/components/search/advancedSearch/index.svelte b/src/lib/components/search/advancedSearch/index.svelte index 95acac9..d7c4819 100644 --- a/src/lib/components/search/advancedSearch/index.svelte +++ b/src/lib/components/search/advancedSearch/index.svelte @@ -2,23 +2,23 @@ import { boredState } from '$lib/stores/boredState'; import { gameStore } from '$lib/stores/gameSearchStore'; - async function handleSubmit(event: SubmitEvent) { - // submitting = true; - boredState.set({ loading: true }); - const form = event.target as HTMLFormElement; - console.log('form', form); - const response = await fetch('/api/games', { - method: 'POST', - headers: { accept: 'application/json' }, - body: new FormData(form) - }); - const responseData = await response.json(); - // submitting = false; - boredState.set({ loading: false }); - gameStore.removeAll(); - gameStore.addAll(responseData?.games); - // games = responseData?.games; - } + // async function handleSubmit(event: SubmitEvent) { + // // submitting = true; + // boredState.set({ loading: true }); + // const form = event.target as HTMLFormElement; + // console.log('form', form); + // const response = await fetch('/api/games', { + // method: 'POST', + // headers: { accept: 'application/json' }, + // body: new FormData(form) + // }); + // const responseData = await response.json(); + // // submitting = false; + // boredState.set({ loading: false }); + // gameStore.removeAll(); + // gameStore.addAll(responseData?.games); + // // games = responseData?.games; + // } let submitting = $boredState?.loading; let minAge = 1; @@ -28,62 +28,62 @@ let exactMaxPlayers = false; -
-
-
- -
-
- - -
-
- - -
-
- -
+ +
+
+ +
+
+ + +
+
+ + +
+
+ + diff --git a/src/routes/index.svelte b/src/routes/index.svelte index 4802ff7..3d283cd 100644 --- a/src/routes/index.svelte +++ b/src/routes/index.svelte @@ -6,6 +6,22 @@ import RandomSearch from '$lib/components/search/random/index.svelte'; import Random from '$lib/components/random/index.svelte'; import { gameStore } from '$lib/stores/gameSearchStore'; + import { boredState } from '$root/lib/stores/boredState'; + + async function handleSearch(event: SubmitEvent) { + boredState.set({ loading: true }); + const form = event.target as HTMLFormElement; + console.log('form', form); + const response = await fetch('/api/game', { + method: 'POST', + headers: { accept: 'application/json' }, + body: new FormData(form) + }); + const responseData = await response.json(); + boredState.set({ loading: false }); + gameStore.removeAll(); + gameStore.addAll(responseData?.games); + } @@ -15,8 +31,10 @@

Search Boardgames!

Input your requirements to search for board game that match your criteria

- - +
+ + +
From feb40603ff791f5926bcf3de344e4029f34205d5 Mon Sep 17 00:00:00 2001 From: Bradley Shellnut Date: Sun, 7 Aug 2022 15:02:14 -0700 Subject: [PATCH 2/7] Margin to button search and width media query for game list. --- src/lib/components/search/textSearch/index.svelte | 1 + src/routes/index.svelte | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/lib/components/search/textSearch/index.svelte b/src/lib/components/search/textSearch/index.svelte index 9c328ee..2dfd50e 100644 --- a/src/lib/components/search/textSearch/index.svelte +++ b/src/lib/components/search/textSearch/index.svelte @@ -39,6 +39,7 @@ } button { padding: 1rem; + margin-bottom: 1.5rem; } label { diff --git a/src/routes/index.svelte b/src/routes/index.svelte index 3d283cd..bc8aca9 100644 --- a/src/routes/index.svelte +++ b/src/routes/index.svelte @@ -99,7 +99,7 @@ grid-template-columns: 1fr 1fr; } - @media (max-width: 550px) { + @media (max-width: 650px) { grid-template-columns: 1fr; } } From a3edc637e41dc67216ce3e5a5a32384bcfdfeb3c Mon Sep 17 00:00:00 2001 From: Bradley Shellnut Date: Mon, 8 Aug 2022 12:07:44 -0700 Subject: [PATCH 3/7] Local storage and collection only store minimal data and on random game from collection do a GET fetch for more details. --- package.json | 2 +- pnpm-lock.yaml | 9 ++++--- src/lib/components/random/index.svelte | 15 ++++++++---- src/lib/stores/collectionStore.ts | 10 ++++---- src/lib/stores/gameSearchStore.ts | 4 ++-- src/lib/types.ts | 5 ++++ src/lib/util/manipulateCollection.ts | 11 +++++++-- src/routes/__layout.svelte | 4 ++-- src/routes/api/game/[id]/index.ts | 33 ++++++++++++++++++++++++++ src/routes/game/[id].svelte | 4 ++-- 10 files changed, 74 insertions(+), 23 deletions(-) create mode 100644 src/routes/api/game/[id]/index.ts diff --git a/package.json b/package.json index 01e0503..6716fda 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "@rgossiaux/svelte-headlessui": "1.0.2", "@rgossiaux/svelte-heroicons": "^0.1.2", "@sveltejs/adapter-auto": "1.0.0-next.64", - "@sveltejs/kit": "1.0.0-next.405", + "@sveltejs/kit": "1.0.0-next.403", "@types/cookie": "^0.5.1", "@types/node": "^18.6.4", "@typescript-eslint/eslint-plugin": "^5.32.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0f0c89f..f27e72a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -9,7 +9,7 @@ specifiers: '@rgossiaux/svelte-headlessui': 1.0.2 '@rgossiaux/svelte-heroicons': ^0.1.2 '@sveltejs/adapter-auto': 1.0.0-next.64 - '@sveltejs/kit': 1.0.0-next.405 + '@sveltejs/kit': 1.0.0-next.403 '@types/cookie': ^0.5.1 '@types/feather-icons': ^4.7.0 '@types/node': ^18.6.4 @@ -49,7 +49,7 @@ devDependencies: '@rgossiaux/svelte-headlessui': 1.0.2_svelte@3.49.0 '@rgossiaux/svelte-heroicons': 0.1.2_svelte@3.49.0 '@sveltejs/adapter-auto': 1.0.0-next.64 - '@sveltejs/kit': 1.0.0-next.405_svelte@3.49.0+vite@3.0.4 + '@sveltejs/kit': 1.0.0-next.403_svelte@3.49.0+vite@3.0.4 '@types/cookie': 0.5.1 '@types/node': 18.6.4 '@typescript-eslint/eslint-plugin': 5.32.0_iosr3hrei2tubxveewluhu5lhy @@ -268,8 +268,8 @@ packages: - supports-color dev: true - /@sveltejs/kit/1.0.0-next.405_svelte@3.49.0+vite@3.0.4: - resolution: {integrity: sha512-jHSa74F7k+hC+0fof75g/xm/+1M5sM66Qt6v8eLLMSgjkp36Lb5xOioBhbl6w0NYoE5xysLsBWuu+yHytfvCBA==} + /@sveltejs/kit/1.0.0-next.403_svelte@3.49.0+vite@3.0.4: + resolution: {integrity: sha512-pKlmthl1SZkbx671Jp+LBoRne0vNzsjSgta9iRhqW/bt/0mx/IjlMd/NOeLuJGo30dAJdefrySoSamiaq47M/g==} engines: {node: '>=16.9'} hasBin: true requiresBuild: true @@ -281,7 +281,6 @@ packages: chokidar: 3.5.3 sade: 1.8.1 svelte: 3.49.0 - tiny-glob: 0.2.9 vite: 3.0.4_sass@1.54.3 transitivePeerDependencies: - diff-match-patch diff --git a/src/lib/components/random/index.svelte b/src/lib/components/random/index.svelte index 0048847..233dde1 100644 --- a/src/lib/components/random/index.svelte +++ b/src/lib/components/random/index.svelte @@ -3,15 +3,22 @@ import { gameStore } from '$lib/stores/gameSearchStore'; import { collectionStore } from '$lib/stores/collectionStore'; import { toast } from '$lib/components/toast/toast'; - import { ToastType } from '$lib/types'; + import { ToastType, type SavedGameType } from '$lib/types'; - function getRandomCollectionGame() { + async function getRandomCollectionGame() { if ($collectionStore.length > 0) { boredState.set({ loading: true }); let randomNumber: number = Math.round(Math.random() * $collectionStore.length - 1); if ($collectionStore.at(randomNumber)) { gameStore.removeAll(); - gameStore.add($collectionStore.at(randomNumber)!); + const randomGame: SavedGameType = $collectionStore.at(randomNumber)!; + const response = await fetch(`/api/game/${randomGame?.id}`, { + method: 'GET', + headers: { accept: 'application/json' }, + }); + const responseData = await response.json(); + console.log('responseData', responseData); + gameStore.add(responseData?.game); boredState.set({ loading: false }); } else { toast.send('Error!', { duration: 3000, type: ToastType.ERROR, dismissible: true }); @@ -27,6 +34,6 @@ } - diff --git a/src/lib/stores/collectionStore.ts b/src/lib/stores/collectionStore.ts index 1b2d08e..fceee99 100644 --- a/src/lib/stores/collectionStore.ts +++ b/src/lib/stores/collectionStore.ts @@ -1,23 +1,23 @@ import { writable } from 'svelte/store'; -import type { GameType } from '$lib/types'; +import type { SavedGameType } from '$lib/types'; // Custom store const state = () => { - const { subscribe, set, update } = writable([]); + const { subscribe, set, update } = writable([]); - function addAll(games: GameType[]) { + function addAll(games: SavedGameType[]) { for (const game of games) { add(game); } } - function add(game: GameType) { + function add(game: SavedGameType) { update((store) => [...store, game]); } function remove(id: string) { update((store) => { - const newStore = store.filter((item: GameType) => item.id !== id); + const newStore = store.filter((item: SavedGameType) => item.id !== id); return [...newStore]; }); } diff --git a/src/lib/stores/gameSearchStore.ts b/src/lib/stores/gameSearchStore.ts index 19c42db..e715290 100644 --- a/src/lib/stores/gameSearchStore.ts +++ b/src/lib/stores/gameSearchStore.ts @@ -3,7 +3,7 @@ import type { GameType } from '$lib/types'; // Custom store const newGameStore = () => { - const { subscribe, update } = writable([]); + const { subscribe, set, update } = writable([]); function add(game: GameType) { update((store) => [...store, game]); @@ -26,7 +26,7 @@ const newGameStore = () => { }); } - return { subscribe, add, addAll, remove, removeAll }; + return { subscribe, set, update, add, addAll, remove, removeAll }; }; export const gameStore = newGameStore(); diff --git a/src/lib/types.ts b/src/lib/types.ts index 5aa8e26..c0e1c07 100644 --- a/src/lib/types.ts +++ b/src/lib/types.ts @@ -18,6 +18,11 @@ export type ToastData = { message: string; }; +export type SavedGameType = { + id: string; + name: string; +} + export type GameType = { id: string; handle: string; diff --git a/src/lib/util/manipulateCollection.ts b/src/lib/util/manipulateCollection.ts index cf20e63..5e05fe5 100644 --- a/src/lib/util/manipulateCollection.ts +++ b/src/lib/util/manipulateCollection.ts @@ -1,9 +1,16 @@ import { collectionStore } from '$lib/stores/collectionStore'; import { toast } from '$lib/components/toast/toast'; -import { ToastType, type GameType } from '$lib/types'; +import { ToastType, type GameType, type SavedGameType } from '$lib/types'; + +function convertToSavedGame(game: GameType): SavedGameType { + return { + id: game.id, + name: game.name, + }; +} export function addToCollection(game: GameType) { - collectionStore.add(game); + collectionStore.add(convertToSavedGame(game)); toast.send("Added to collection", { duration: 3000, type: ToastType.INFO }); } diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte index b9a8122..c4b7067 100644 --- a/src/routes/__layout.svelte +++ b/src/routes/__layout.svelte @@ -7,6 +7,7 @@ import Portal from '$lib/Portal.svelte'; import { boredState } from '$lib/stores/boredState'; import { collectionStore } from '$lib/stores/collectionStore'; + import { gameStore } from '$lib/stores/gameSearchStore'; import { toast } from '$lib/components/toast/toast'; // import 'carbon-components-svelte/css/all.css'; import '$root/styles/styles.scss'; @@ -18,7 +19,6 @@ console.log('collectionEmpty', collectionEmpty); console.log('localStorage.collection', localStorage.collection); if ( - browser && collectionEmpty && localStorage && localStorage.collection && @@ -36,7 +36,7 @@ {#if dev} - + {/if}
diff --git a/src/routes/api/game/[id]/index.ts b/src/routes/api/game/[id]/index.ts new file mode 100644 index 0000000..2e3a625 --- /dev/null +++ b/src/routes/api/game/[id]/index.ts @@ -0,0 +1,33 @@ +import { boardGameApi } from '$root/routes/_api'; +import type { RequestHandler } from '@sveltejs/kit'; + +export const GET: RequestHandler = async ({ params }) => { + const queryParams = { + ids: `${params?.id}` + }; + console.log('queryParams', queryParams); + const response = await boardGameApi('get', `search`, queryParams); + if (response.status === 404) { + return { + body: { + games: [] + } + }; + } + + if (response.status === 200) { + const gameResponse = await response.json(); + // console.log('gameResponse', gameResponse); + // const games = gameResponse?.games; + console.log('game', gameResponse?.games[0]); + return { + body: { + game: gameResponse?.games[0] + } + }; + } + + return { + status: response.status + }; +}; diff --git a/src/routes/game/[id].svelte b/src/routes/game/[id].svelte index ef8e9ad..0224ca1 100644 --- a/src/routes/game/[id].svelte +++ b/src/routes/game/[id].svelte @@ -2,10 +2,10 @@ import { fade } from 'svelte/transition'; import Icon from '$lib/components/Icon.svelte'; import { collectionStore } from '$lib/stores/collectionStore'; - import type { GameType } from '$lib/types'; + import type { GameType, SavedGameType } from '$lib/types'; import { addToCollection, removeFromCollection } from '$lib/util/manipulateCollection'; - $: existsInCollection = $collectionStore.find((item: GameType) => item.id === game.id); + $: existsInCollection = $collectionStore.find((item: SavedGameType) => item.id === game.id); export let game: GameType; let seeMore: boolean = false; console.log(game?.description?.indexOf('

')); From 7c0e774ed9b0bff0d3c19d1944eaa5748e82e55a Mon Sep 17 00:00:00 2001 From: Bradley Shellnut Date: Mon, 8 Aug 2022 14:13:51 -0700 Subject: [PATCH 4/7] Fix localstorage query. --- src/lib/components/game/index.svelte | 21 +++++++++++++++------ src/routes/__layout.svelte | 2 +- src/styles/global.scss | 5 +++++ 3 files changed, 21 insertions(+), 7 deletions(-) diff --git a/src/lib/components/game/index.svelte b/src/lib/components/game/index.svelte index 48927b9..cae2db9 100644 --- a/src/lib/components/game/index.svelte +++ b/src/lib/components/game/index.svelte @@ -1,13 +1,14 @@
@@ -29,12 +30,12 @@ {/if}
{#if existsInCollection} - removeFromCollection(game)} + >Remove {:else} - addToCollection(game)} + >Add to collection {/if} @@ -49,12 +50,20 @@ } button { + display: flex; + justify-content: space-between; + gap: 1rem; width: 100%; border-radius: 10px; padding: 1rem; background-color: var(--color-btn-primary-active); } + /* :global(.icon) { + width: 24px; + height: 24px; + } */ + .game-container { display: flex; flex-wrap: wrap; diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte index c4b7067..166bc51 100644 --- a/src/routes/__layout.svelte +++ b/src/routes/__layout.svelte @@ -22,7 +22,7 @@ collectionEmpty && localStorage && localStorage.collection && - localStorage.collection !== 0 + localStorage.collection.length !== 0 ) { const collection = JSON.parse(localStorage.collection); console.log('collection', collection); diff --git a/src/styles/global.scss b/src/styles/global.scss index cdf62da..3cc2456 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -271,4 +271,9 @@ ol { padding: var(--spacing-20) 0; background-color: var(--color-placeholder); border-radius: var(--radius-base); +} + +.icon { + width: 24px; + height: 24px; } \ No newline at end of file From b455b83759344fc8317a0e72c016ce21b32c508e Mon Sep 17 00:00:00 2001 From: Bradley Shellnut Date: Mon, 8 Aug 2022 14:45:39 -0700 Subject: [PATCH 5/7] Grid for text search. --- src/lib/components/search/textSearch/index.svelte | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/lib/components/search/textSearch/index.svelte b/src/lib/components/search/textSearch/index.svelte index 2dfd50e..7df132b 100644 --- a/src/lib/components/search/textSearch/index.svelte +++ b/src/lib/components/search/textSearch/index.svelte @@ -44,8 +44,9 @@ label { display: grid; - grid-template-columns: auto auto auto; + grid-template-columns: auto auto; gap: 1rem; + place-content: start; place-items: center; margin: 1rem; From a8afcca6d21179d5095f36f8a713ea2f2e405e50 Mon Sep 17 00:00:00 2001 From: Bradley Shellnut Date: Mon, 8 Aug 2022 15:45:42 -0700 Subject: [PATCH 6/7] Advanced search in text search conditional based on disclosure. --- .../components/search/textSearch/index.svelte | 71 ++++++++++++++----- 1 file changed, 53 insertions(+), 18 deletions(-) diff --git a/src/lib/components/search/textSearch/index.svelte b/src/lib/components/search/textSearch/index.svelte index 7df132b..5ed3aa7 100644 --- a/src/lib/components/search/textSearch/index.svelte +++ b/src/lib/components/search/textSearch/index.svelte @@ -1,4 +1,11 @@ -
- -
-{#if advancedSearch} - -{/if} +
+
+ +
+ {#if advancedSearch} + + + Advanced Search? + + + + {#if open} +
+ + + + +
+ {/if} + + {/if} +
{#if showButton} {/if} +