Local storage and collection only store minimal data and on random game from collection do a GET fetch for more details.

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",

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:
+  /@sveltejs/kit/1.0.0-next.403_svelte@3.49.0+vite@3.0.4:
-    resolution: {integrity: sha512-jHSa74F7k+hC+0fof75g/xm/+1M5sM66Qt6v8eLLMSgjkp36Lb5xOioBhbl6w0NYoE5xysLsBWuu+yHytfvCBA==}
+    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

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 @@
   }
 </script>
 
-<button class="btn" type="button" on:click={getRandomCollectionGame}
+<button class="btn" type="button" on:click={() => getRandomCollectionGame()}
   >Random from collection 🎲</button
 >

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<GameType[]>([]);
+  const { subscribe, set, update } = writable<SavedGameType[]>([]);
 
-  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];
     });
   }

src/lib/stores/gameSearchStore.ts

@@ -3,7 +3,7 @@ import type { GameType } from '$lib/types';
 
 // Custom store
 const newGameStore = () => {
-  const { subscribe, update } = writable<GameType[]>([]);
+  const { subscribe, set, update } = writable<GameType[]>([]);
 
   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();

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;

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

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 @@
 </script>
 
 {#if dev}
-  <Toy register={{ boredState, collectionStore, toast }} />
+  <Toy register={{ boredState, collectionStore, gameStore, toast }} />
 {/if}
 <Transition transition={{ type: 'fade', duration: 250 }}>
   <div class="wrapper">

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
+  };
+};

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('</p>'));