diff --git a/package.json b/package.json index a5220b1..6716fda 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "@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..f27e72a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -15,7 +15,7 @@ specifiers: '@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 @@ -54,7 +54,7 @@ devDependencies: '@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 @@ -601,8 +601,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/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/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/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/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..166bc51 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,11 +19,10 @@ console.log('collectionEmpty', collectionEmpty); console.log('localStorage.collection', localStorage.collection); if ( - browser && collectionEmpty && localStorage && localStorage.collection && - localStorage.collection !== 0 + localStorage.collection.length !== 0 ) { const collection = JSON.parse(localStorage.collection); console.log('collection', 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/api/game/index.ts b/src/routes/api/game/index.ts index 87d7de9..74640d9 100644 --- a/src/routes/api/game/index.ts +++ b/src/routes/api/game/index.ts @@ -54,7 +54,7 @@ export const POST: RequestHandler = async ({ request }) => { }); return { body: { - games: gameResponse?.games + games } }; } 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('

')); diff --git a/src/routes/index.svelte b/src/routes/index.svelte index 4802ff7..bc8aca9 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

- - +
+ + +
@@ -81,7 +99,7 @@ grid-template-columns: 1fr 1fr; } - @media (max-width: 550px) { + @media (max-width: 650px) { grid-template-columns: 1fr; } } 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