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('

'));