From 770b1e90a6683c4e0068b5d1f04e2b188bbe7cdf Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@pm.me>
Date: Wed, 26 Oct 2022 23:49:58 -0400
Subject: [PATCH] Adding collection dialog, showing dialog on clear click.

---
 .../dialog/ClearCollectionDialog.svelte       | 84 +++++++++++++++++
 .../preferences/gameCollection.svelte         | 19 ++--
 src/lib/components/preferences/profile.svelte |  5 +-
 src/routes/collection/+page.svelte            | 93 +++++++++----------
 4 files changed, 147 insertions(+), 54 deletions(-)
 create mode 100644 src/lib/components/dialog/ClearCollectionDialog.svelte

diff --git a/src/lib/components/dialog/ClearCollectionDialog.svelte b/src/lib/components/dialog/ClearCollectionDialog.svelte
new file mode 100644
index 0000000..59598c0
--- /dev/null
+++ b/src/lib/components/dialog/ClearCollectionDialog.svelte
@@ -0,0 +1,84 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import {
+		Dialog,
+		DialogDescription,
+		DialogOverlay,
+		DialogTitle
+	} from '@rgossiaux/svelte-headlessui';
+	import { boredState } from '$root/lib/stores/boredState';
+	import { collectionStore } from '$root/lib/stores/collectionStore';
+	import { browser } from '$app/environment';
+
+	function clearCollection() {
+		if (browser) {
+			localStorage.collection = JSON.stringify([]);
+			collectionStore.removeAll();
+		}
+		boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
+	}
+
+	$: isOpen = $boredState?.dialog?.isOpen;
+</script>
+
+<Dialog
+	open={isOpen}
+	on:close={() => {
+		boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
+	}}
+	static
+>
+	<div transition:fade>
+		<DialogOverlay class="dialog-overlay" />
+		<div class="dialog">
+			<DialogTitle>Clear collection</DialogTitle>
+			<DialogDescription>Are you sure you want to clear your collection?</DialogDescription>
+
+			<div class="dialog-footer">
+				<button on:click={clearCollection}>Clear</button>
+				<button
+					on:click={() => {
+						boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
+					}}>Cancel</button
+				>
+			</div>
+		</div>
+	</div>
+</Dialog>
+
+<style lang="scss">
+	.dialog {
+		display: grid;
+		gap: 1.5rem;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		z-index: 101;
+		border-radius: 10px;
+		background-color: var(--clr-input-bg);
+		padding: 2rem;
+		min-width: 400px;
+
+		.dialog-footer {
+			display: flex;
+			justify-content: space-between;
+			gap: 2rem;
+			margin: 1rem 0;
+
+			button {
+				display: flex;
+				place-content: center;
+				gap: 1rem;
+				width: 100%;
+				border-radius: 10px;
+				padding: 1rem;
+				background-color: var(--color-btn-primary-active);
+
+				&:hover {
+					background-color: var(--color-btn-primary-active-hover);
+				}
+			}
+		}
+	}
+</style>
diff --git a/src/lib/components/preferences/gameCollection.svelte b/src/lib/components/preferences/gameCollection.svelte
index 8b805e3..050badf 100644
--- a/src/lib/components/preferences/gameCollection.svelte
+++ b/src/lib/components/preferences/gameCollection.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
+	import { boredState } from '$root/lib/stores/boredState';
 	import { collectionStore } from '$root/lib/stores/collectionStore';
 	import { ToastType } from '$root/lib/types';
 	import { SaveIcon, ShareIcon, TrashIcon } from '@rgossiaux/svelte-heroicons/outline';
+	import ClearCollectionDialog from '../dialog/ClearCollectionDialog.svelte';
 	import { toast } from '../toast/toast';
 
 	function saveCollection() {
@@ -27,9 +29,14 @@
 	}
 
 	function clearCollection() {
-		if (!browser) return;
-		localStorage.collection = [];
-		toast.send('Cleared collection', { duration: 3000, type: ToastType.INFO });
+		if ($collectionStore.length > 0) {
+			boredState.update((n) => ({
+				...n,
+				dialog: { isOpen: true, content: ClearCollectionDialog }
+			}));
+		} else {
+			toast.send('Nothing to clear', { duration: 3000, type: ToastType.ERROR });
+		}
 	}
 </script>
 
@@ -44,9 +51,9 @@
 		<button type="button" aria-label="Save Collection" on:click={() => saveCollection()}
 			><SaveIcon width="24" height="24" />Save</button
 		>
-		<button type="button" aria-label="Clear saved collection" on:click={() => clearCollection()}
-			><TrashIcon width="24" height="24" />Clear</button
-		>
+		<button type="button" aria-label="Clear saved collection" on:click={() => clearCollection()}>
+			<TrashIcon width="24" height="24" />Clear
+		</button>
 	</div>
 </div>
 
diff --git a/src/lib/components/preferences/profile.svelte b/src/lib/components/preferences/profile.svelte
index 6b57292..d84cd9f 100644
--- a/src/lib/components/preferences/profile.svelte
+++ b/src/lib/components/preferences/profile.svelte
@@ -2,6 +2,7 @@
 	import { fade } from 'svelte/transition';
 	import { Popover, PopoverButton, PopoverPanel } from '@rgossiaux/svelte-headlessui';
 	import { CogIcon } from '@rgossiaux/svelte-heroicons/outline';
+	import { collectionStore } from '$root/lib/stores/collectionStore';
 	import Themes from './themes.svelte';
 	import GameCollection from './gameCollection.svelte';
 </script>
@@ -40,7 +41,9 @@
 
 						<div class="options">
 							<Themes />
-							<GameCollection />
+							{#if $collectionStore.length > 0}
+								<GameCollection />
+							{/if}
 						</div>
 					</div>
 				</PopoverPanel>
diff --git a/src/routes/collection/+page.svelte b/src/routes/collection/+page.svelte
index d6d410e..013e81c 100644
--- a/src/routes/collection/+page.svelte
+++ b/src/routes/collection/+page.svelte
@@ -1,67 +1,66 @@
 <script lang="ts">
-  import Game from '$lib/components/game/index.svelte';
-  import { collectionStore } from '$lib/stores/collectionStore';
-  import type { GameType, SavedGameType } from '$root/lib/types';
-  import { removeFromCollection } from '$root/lib/util/manipulateCollection';
-  import { boredState } from '$root/lib/stores/boredState';
-  import RemoveCollectionDialog from '$root/lib/components/dialog/RemoveCollectionDialog.svelte';
+	import Game from '$lib/components/game/index.svelte';
+	import { collectionStore } from '$lib/stores/collectionStore';
+	import type { GameType, SavedGameType } from '$root/lib/types';
+	import { boredState } from '$root/lib/stores/boredState';
+	import RemoveCollectionDialog from '$root/lib/components/dialog/RemoveCollectionDialog.svelte';
 
-  let isOpen: boolean = false;
-  let gameToRemove: GameType | SavedGameType;
-  console.log('isOpen', isOpen);
+	let isOpen: boolean = false;
+	let gameToRemove: GameType | SavedGameType;
+	console.log('isOpen', isOpen);
 
-  interface RemoveGameEvent extends Event {
-    detail: GameType | SavedGameType;
-  }
+	interface RemoveGameEvent extends Event {
+		detail: GameType | SavedGameType;
+	}
 
-  function handleRemoveGame(event: RemoveGameEvent) {
-    console.log('event', event);
-    gameToRemove = event?.detail;
-    boredState.update((n) => ({
-      ...n,
-      dialog: { isOpen: true, content: RemoveCollectionDialog, additionalData: gameToRemove }
-    }));
-  }
+	function handleRemoveGame(event: RemoveGameEvent) {
+		console.log('event', event);
+		gameToRemove = event?.detail;
+		boredState.update((n) => ({
+			...n,
+			dialog: { isOpen: true, content: RemoveCollectionDialog, additionalData: gameToRemove }
+		}));
+	}
 </script>
 
 <svelte:head>
-  <title>Your Collection | Bored Game</title>
+	<title>Your Collection | Bored Game</title>
 </svelte:head>
 
 <h1>Your Collection</h1>
 
 <div class="games">
-  <div class="games-list">
-    {#if $collectionStore.length === 0}
-      <h2>No games in your collection</h2>
-    {:else}
-      {#each $collectionStore as game}
-        <Game on:removeGameEvent={handleRemoveGame} minimal {game} />
-      {/each}
-    {/if}
-  </div>
+	<div class="games-list">
+		{#if $collectionStore.length === 0}
+			<h2>No games in your collection</h2>
+		{:else}
+			{#each $collectionStore as game}
+				<Game on:removeGameEvent={handleRemoveGame} minimal {game} />
+			{/each}
+		{/if}
+	</div>
 </div>
 
 <style lang="scss">
-  h1 {
-    width: 100%;
-  }
+	h1 {
+		width: 100%;
+	}
 
-  .games {
-    margin: 2rem 0rem;
-  }
+	.games {
+		margin: 2rem 0rem;
+	}
 
-  .games-list {
-    display: grid;
-    grid-template-columns: repeat(3, minmax(200px, 1fr));
-    gap: 2rem;
+	.games-list {
+		display: grid;
+		grid-template-columns: repeat(3, minmax(200px, 1fr));
+		gap: 2rem;
 
-    @media (max-width: 800px) {
-      grid-template-columns: 1fr 1fr;
-    }
+		@media (max-width: 800px) {
+			grid-template-columns: 1fr 1fr;
+		}
 
-    @media (max-width: 550px) {
-      grid-template-columns: 1fr;
-    }
-  }
+		@media (max-width: 550px) {
+			grid-template-columns: 1fr;
+		}
+	}
 </style>