From 7d775608cd288de7c4a6cd4db8cba390b70d947f Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@protonmail.com>
Date: Tue, 26 Jul 2022 17:23:58 -0700
Subject: [PATCH] Adding collection store, adding buttons to add/remove from
 collection, toast on add/remove, random button for collection.

---
 src/lib/components/game/index.svelte          | 28 ++++++++++++++++++-
 src/lib/components/random/index.svelte        | 26 +++++++++++++++++
 src/lib/components/search/random/index.svelte |  2 +-
 src/lib/stores/collectionStore.ts             | 28 +++++++++++++++++++
 src/lib/types.ts                              |  9 ++++--
 src/routes/__layout.svelte                    |  6 +++-
 src/routes/index.svelte                       |  2 ++
 src/styles/global.scss                        |  4 +++
 8 files changed, 99 insertions(+), 6 deletions(-)
 create mode 100644 src/lib/components/random/index.svelte
 create mode 100644 src/lib/stores/collectionStore.ts

diff --git a/src/lib/components/game/index.svelte b/src/lib/components/game/index.svelte
index 18ce182..ae069c7 100644
--- a/src/lib/components/game/index.svelte
+++ b/src/lib/components/game/index.svelte
@@ -1,9 +1,22 @@
 <script lang="ts">
   import { fade } from 'svelte/transition';
-  import type { GameType } from '$lib/types';
+  import { ToastType, type GameType } from '$lib/types';
+  import { collectionStore } from '$lib/stores/collectionStore';
+  import { toast } from '../toast/toast';
 
   export let game: GameType;
   export let detailed: boolean = false;
+  $: existsInCollection = $collectionStore.find((item: GameType) => item.id === game.id);
+
+  function addToCollection() {
+    collectionStore.add(game)
+    toast.send(`"${game.name}" added to collection!`, { duration: 3000, type: ToastType.INFO });
+  }
+
+  function removeFromCollection() {
+    collectionStore.remove(game.id)
+    toast.send(`Removed "${game.name}" from collection!`, { duration: 3000, type: ToastType.INFO });
+  }
 </script>
 
 <article class="game-container" transition:fade>
@@ -24,6 +37,12 @@
       <div class="description">{@html game.description}</div>
     {/if}
   </div>
+  {#if existsInCollection}
+    <button type="button" on:click={removeFromCollection}>Remove from collection -</button>
+  {:else}
+    <button type="button" on:click={addToCollection}>Add to collection +</button>
+  {/if}
+  
 </article>
 
 <style lang="scss">
@@ -36,6 +55,13 @@
     border-radius: 10px;
   }
 
+  button {
+    width: 100%;
+    border-radius: 10px;
+    padding: 1rem;
+    background-color: var(--color-btn-primary-active);
+  }
+
   .game-container {
     display: flex;
     flex-wrap: wrap;
diff --git a/src/lib/components/random/index.svelte b/src/lib/components/random/index.svelte
new file mode 100644
index 0000000..62fa540
--- /dev/null
+++ b/src/lib/components/random/index.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { boredState } from '$lib/stores/boredState';
+  import { gameStore } from '$lib/stores/gameSearchStore';
+  import { collectionStore } from '$lib/stores/collectionStore';
+  import { toast } from '$lib/components/toast/toast';
+  import { ToastType } from '$lib/types';
+
+  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));
+        boredState.set({ loading: false });
+      } else {
+        toast.send('Error!', { duration: 3000, type: ToastType.ERROR, dismissible: true });
+      }
+      boredState.set({ loading: false });
+    } else {
+      toast.send('No items in your collection!', { duration: 3000, type: ToastType.ERROR, dismissible: true });
+    }
+  }
+</script>
+
+<button class="btn" type="button" on:click={getRandomCollectionGame}>Random from collection 🎲</button>
\ No newline at end of file
diff --git a/src/lib/components/search/random/index.svelte b/src/lib/components/search/random/index.svelte
index 0edae18..9fb339c 100644
--- a/src/lib/components/search/random/index.svelte
+++ b/src/lib/components/search/random/index.svelte
@@ -26,7 +26,7 @@
 <form on:submit|preventDefault={handleSubmit} method="post">
   <fieldset aria-busy={submitting} disabled={submitting}>
     <input type="checkbox" id="random" name="random" hidden checked />
-    <button type="submit" disabled={submitting}>🎲</button>
+    <button type="submit" disabled={submitting}>Random Game 🎲</button>
   </fieldset>
 </form>
 
diff --git a/src/lib/stores/collectionStore.ts b/src/lib/stores/collectionStore.ts
new file mode 100644
index 0000000..4e849bd
--- /dev/null
+++ b/src/lib/stores/collectionStore.ts
@@ -0,0 +1,28 @@
+import { writable } from 'svelte/store';
+import type { GameType } from '$lib/types';
+
+// Custom store
+const state = () => {
+	const { subscribe, set, update } = writable<GameType[]>([]);
+
+	function add(game: GameType) {
+		update((store) => [...store, game]);
+	}
+
+	function remove(id: string) {
+		update((store) => {
+			const newStore = store.filter((item: GameType) => item.id !== id);
+			return [...newStore];
+		});
+	}
+
+  function removeAll() {
+    update(() => {
+      return [];
+    });
+  }
+
+	return { subscribe, set, update, add, remove, removeAll };
+};
+
+export const collectionStore = state();
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 6762611..d8c8260 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -3,14 +3,17 @@ export type BoredStore = {
 }
 
 export enum ToastType {
-  INFO,
-  ERROR,
-  WARNING
+  INFO = "INFO",
+  ERROR = "ERROR",
+  WARNING = "WARNING"
 }
 
 export type ToastData = {
   id: number;
   duration: number;
+  dismissible: boolean;
+  showButton: boolean;
+  autoDismiss: boolean;
   type: ToastType;
   message: string;
 };
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 4a0780b..068a4c4 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -5,14 +5,17 @@
   import Transition from '$lib/components/transition/index.svelte';
   import Portal from '$lib/Portal.svelte';
   import { boredState } from '$lib/stores/boredState';
+  import { collectionStore } from '$lib/stores/collectionStore';
+  import { toast } from '$lib/components/toast/toast';
   // import 'carbon-components-svelte/css/all.css';
   import '$root/styles/styles.scss';
+import Toast from '$lib/components/toast/Toast.svelte';
 
   const dev = process.env.NODE_ENV !== 'production';
 </script>
 
 {#if dev}
-  <Toy register={{ boredState }} />
+  <Toy register={{ boredState, collectionStore, toast }} />
 {/if}
 <Transition transition={{ type: 'fade', duration: 250 }}>
   <div class="wrapper">
@@ -44,6 +47,7 @@
       <div class="background" />
     </Portal>
   {/if}
+  <Toast duration={3000} />
 </Transition>
 
 <style lang="scss">
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 7f112a4..301de56 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -9,6 +9,7 @@
   import TextSearch from '$lib/components/search/textSearch/index.svelte';
   import AdvancedSearch from '$lib/components/search/advancedSearch/index.svelte';
   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 '$lib/stores/boredState';
   import { Checkbox } from 'carbon-components-svelte';
@@ -27,6 +28,7 @@
   <TextSearch />
   <AdvancedSearch />
   <RandomSearch />
+  <Random />
 </div>
 
 <!-- {#if submitting}
diff --git a/src/styles/global.scss b/src/styles/global.scss
index d9bfb03..6a1b356 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -18,6 +18,7 @@
   --clr-input-txt: hsl(177 100% 15%);
 
   --red: #990000;
+  --tomatoOrange: #e54b4b;
   --redBrown: #633539;
   --blue: #336699;
   --black: #1f273a;
@@ -127,6 +128,9 @@
   --rounded-4: 4px;
   --rounded-20: 20px;
 
+  --toast-background: var(--color-brand);
+  --toast-error-background: var(--tomatoOrange);
+
   /* Media Queryies - Not yet supported in CSS */
   /* 
       --xsmall: 340px;