Adding collection route, header path to collection, minimal view of game for collection, and move save/clear to utils.

src/lib/components/game/index.svelte

@@ -5,7 +5,8 @@
   import { collectionStore } from '$lib/stores/collectionStore';
   import { addToCollection, removeFromCollection } from '$lib/util/manipulateCollection';
 
-  export let game: GameType;
+  export let game: GameType | SavedGameType;
+  export let minimal: boolean = false;
   export let detailed: boolean = false;
   $: existsInCollection = $collectionStore.find((item: SavedGameType) => item.id === game.id);
 </script>
@@ -18,22 +19,32 @@
     </a>
   </div>
 
-  <div class="game-details">
+  {#if !minimal && game?.year_published && game.players && game.max_players && game.playtime}
-    <p>{game.year_published}</p>
+    <div class="game-details">
-    <p>{game.players} {game.max_players === 1 ? 'player' : 'players'}</p>
+      <p>{game.year_published}</p>
-    <p>{game.playtime} minutes</p>
+      <p>{game.players} {game.max_players === 1 ? 'player' : 'players'}</p>
-    <p>Minimum Age: {game.min_age}</p>
+      <p>{game.playtime} minutes</p>
-    <a href={`/game/${game.id}`}>View Game</a>
+      <p>Minimum Age: {game.min_age}</p>
-    {#if detailed}
+      <a href={`/game/${game.id}`}>View Game</a>
-      <div class="description">{@html game.description}</div>
+      {#if detailed}
-    {/if}
+        <div class="description">{@html game.description}</div>
-  </div>
+      {/if}
+    </div>
+  {/if}
   {#if existsInCollection}
-    <button aria-label="Remove from collection" class="btn" type="button" on:click={() => removeFromCollection(game)}
+    <button
+      aria-label="Remove from collection"
+      class="btn"
+      type="button"
+      on:click={() => removeFromCollection(game)}
       >Remove <MinusCircleIcon width="24" height="24" /></button
     >
   {:else}
-    <button aria-label="Add to collection" class="btn" type="button" on:click={() => addToCollection(game)}
+    <button
+      aria-label="Add to collection"
+      class="btn"
+      type="button"
+      on:click={() => addToCollection(game)}
       >Add to collection <PlusCircleIcon width="24" height="24" /></button
     >
   {/if}

src/lib/components/header/Header.svelte

@@ -1,22 +1,18 @@
 <script lang="ts">
-  import { page } from '$app/stores';
-  import Themes from '$lib/components/preferences/themes.svelte';
   import Profile from '../preferences/profile.svelte';
   import logo from './bored-game.png';
-
-  // let theme: CarbonTheme = "white";
 </script>
 
 <header>
   <div class="corner">
-    <a href="/">
+    <a href="/" title="Home">
       <img src={logo} alt="Bored Game Home" />
     </a>
   </div>
 
   <nav>
-    <!-- <div><Themes /></div> -->
+    <a href="/collection" title="Go to your collection">Your Collection</a>
-    <div><Profile /></div>
+    <Profile />
   </nav>
 </header>
 
@@ -56,6 +52,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    gap: 2rem;
     margin: 1rem;
     --background: rgba(255, 255, 255, 0.7);
   }
@@ -107,7 +104,7 @@
     padding: 0 1em;
     color: var(--heading-color);
     font-weight: 700;
-    font-size: 0.8rem;
+    /* font-size: 0.8rem; */
     text-transform: uppercase;
     letter-spacing: 0.1em;
     text-decoration: none;
@@ -115,6 +112,7 @@
   }
 
   a:hover {
+    text-decoration: underline;
     color: var(--accent-color);
   }
 </style>

src/lib/components/preferences/gameCollection.svelte

@@ -1,23 +1,6 @@
 <script lang="ts">
-  import { browser } from '$app/env';
-  import { collectionStore } from '$root/lib/stores/collectionStore';
-  import { ToastType } from '$root/lib/types';
   import { SaveIcon, TrashIcon } from '@rgossiaux/svelte-heroicons/outline';
-  import { toast } from '../toast/toast';
+  import { clearCollection, saveCollection } from '$root/lib/util/manipulateCollection';
-
-  function saveCollection() {
-    console.log('Saving collection');
-    console.log('collectionStore', $collectionStore);
-    if (!browser) return;
-    localStorage.collection = JSON.stringify($collectionStore);
-    toast.send('Saved collection', { duration: 3000, type: ToastType.INFO });
-  }
-
-  function clearCollection() {
-    if (!browser) return;
-    localStorage.collection = [];
-    toast.send('Cleared collection', { duration: 3000, type: ToastType.INFO });
-  }
 </script>
 
 <div>

src/lib/types.ts

@@ -21,6 +21,7 @@ export type ToastData = {
 export type SavedGameType = {
   id: string;
   name: string;
+  thumb_url: string;
 }
 
 export type GameType = {

src/lib/util/manipulateCollection.ts

@@ -1,11 +1,13 @@
 import { collectionStore } from '$lib/stores/collectionStore';
 import { toast } from '$lib/components/toast/toast';
 import { ToastType, type GameType, type SavedGameType } from '$lib/types';
+import { browser } from '$app/env';
 
 function convertToSavedGame(game: GameType): SavedGameType {
   return {
     id: game.id,
     name: game.name,
+    thumb_url: game.thumb_url,
   };
 }
 
@@ -18,3 +20,17 @@ export function removeFromCollection(game: GameType) {
   collectionStore.remove(game.id);
   toast.send("Removed from collection", { duration: 3000, type: ToastType.INFO });
 }
+
+export function saveCollection() {
+  console.log('Saving collection');
+  console.log('collectionStore', collectionStore);
+  if (!browser) return;
+  localStorage.collection = JSON.stringify(collectionStore);
+  toast.send('Saved collection', { duration: 3000, type: ToastType.INFO });
+}
+
+export function clearCollection() {
+  if (!browser) return;
+  localStorage.collection = [];
+  toast.send('Cleared collection', { duration: 3000, type: ToastType.INFO });
+}

src/routes/collection/+page.svelte

@@ -12,7 +12,7 @@
 <div class="games">
   <div class="games-list">
     {#each $collectionStore as game}
-      <Game {game} />
+      <Game minimal {game} />
     {/each}
   </div>
 </div>