From c088048411b0e38888ded56238815890b6efb2f4 Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@pm.me>
Date: Sun, 15 Jan 2023 13:38:13 -0800
Subject: [PATCH] Simplify buttons on game page and reactive button text.

---
 .vscode/settings.json             |  2 +-
 package.json                      |  1 +
 pnpm-lock.yaml                    | 12 +++++-
 src/routes/+layout.svelte         |  2 +-
 src/routes/game/[id]/+page.svelte | 69 ++++++++++++++++---------------
 5 files changed, 50 insertions(+), 36 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index fbad5ce..f995fd8 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,3 @@
 {
-  "cSpell.words": ["kickstarter", "msrp"]
+	"cSpell.words": ["iconify", "kickstarter", "msrp"]
 }
diff --git a/package.json b/package.json
index 06db873..e4e4a99 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "format": "prettier --write --plugin-search-dir=. ."
   },
   "devDependencies": {
+    "@iconify/svelte": "^3.0.1",
     "@playwright/test": "^1.29.2",
     "@rgossiaux/svelte-headlessui": "1.0.2",
     "@rgossiaux/svelte-heroicons": "^0.1.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3f42555..d2684ce 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2,6 +2,7 @@ lockfileVersion: 5.4
 
 specifiers:
   '@fontsource/fira-mono': ^4.5.10
+  '@iconify/svelte': ^3.0.1
   '@leveluptuts/svelte-side-menu': ^1.0.5
   '@leveluptuts/svelte-toy': ^2.0.3
   '@lukeed/uuid': ^2.0.0
@@ -61,6 +62,7 @@ dependencies:
   zod-to-json-schema: 3.20.2_zod@3.20.2
 
 devDependencies:
+  '@iconify/svelte': 3.0.1_svelte@3.55.1
   '@playwright/test': 1.29.2
   '@rgossiaux/svelte-headlessui': 1.0.2_svelte@3.55.1
   '@rgossiaux/svelte-heroicons': 0.1.2_svelte@3.55.1
@@ -362,9 +364,17 @@ packages:
     resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
     dev: true
 
+  /@iconify/svelte/3.0.1_svelte@3.55.1:
+    resolution: {integrity: sha512-onjjl496hTXUBWJxeCxo/c5zmVHS3HnKUQv5Cqf1ZsUbY4d0wVJfSDaV1hw1m6b0BNlJCOmbpc23Q6AOO5qqKg==}
+    peerDependencies:
+      svelte: '>=3'
+    dependencies:
+      '@iconify/types': 2.0.0
+      svelte: 3.55.1
+    dev: true
+
   /@iconify/types/2.0.0:
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
-    dev: false
 
   /@jridgewell/resolve-uri/3.1.0:
     resolution: {integrity: sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index bdbbbeb..2a6b3a6 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -4,7 +4,7 @@
 	import debounce from 'just-debounce-it';
 	import clone from 'just-clone';
 	import { Toy } from '@leveluptuts/svelte-toy';
-	import 'iconify-icon';
+	// import 'iconify-icon';
 	// import '../app.postcss';
 	import Analytics from '$lib/components/analytics.svelte';
 	import Header from '$lib/components/header/Header.svelte';
diff --git a/src/routes/game/[id]/+page.svelte b/src/routes/game/[id]/+page.svelte
index 96647c9..f2fb8c9 100644
--- a/src/routes/game/[id]/+page.svelte
+++ b/src/routes/game/[id]/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { fade, fly } from 'svelte/transition';
 	import { Image } from 'svelte-lazy-loader';
+	import Icon from '@iconify/svelte';
 	import {
   ChevronRightIcon,
 		ExternalLinkIcon,
@@ -24,6 +25,8 @@
 
 	$: existsInCollection = $collectionStore.find((item: SavedGameType) => item.id === game.id);
 	$: existsInWishlist = $wishlistStore.find((item: SavedGameType) => item.id === game.id);
+	$: collectionText = existsInCollection ? 'Remove from collection' : 'Add to collection';
+	$: wishlistText = existsInWishlist ? 'Remove from wishlist' : 'Add to wishlist';
 
 	export let data: PageData;
 	let game: GameType;
@@ -37,6 +40,28 @@
 		firstParagraphEnd = game?.description?.indexOf('</ p>') + 5;
 	}
 
+	function onCollectionClick() {	
+		if (existsInCollection) {
+			removeFromCollection();
+		} else {
+			addToCollection(game);
+			if (browser) {
+				localStorage.collection = JSON.stringify($collectionStore);
+			}
+		}
+	}
+
+	function onWishlistClick() {
+		if (existsInWishlist) {
+			removeFromWishList();
+		} else {
+			addToWishlist(game);
+			if (browser) {
+				localStorage.wishlist = JSON.stringify($wishlistStore);
+			}
+		}
+	}
+
 	function removeFromCollection() {
 		boredState.update((n) => ({
 			...n,
@@ -87,44 +112,22 @@
 			</LinkWithIcon>
 		</div>
 		<div style="display: grid; gap: 1.5rem; place-content: center;">
+		<Button size="md" kind={existsInCollection ? 'danger' : 'primary'} icon on:click={onCollectionClick}>
+			{collectionText}
 			{#if existsInCollection}
-				<Button size="md" kind="danger" icon on:click={() => removeFromCollection()}>
-					Remove from collection <iconify-icon icon="line-md:minus-circle" width="24" height="24"></iconify-icon>
-				</Button>
+				<Icon icon="line-md:minus-circle" width="24" height="24" />
 			{:else}
-				<Button
-					size="md"
-					kind="primary"
-					icon
-					on:click={() => {
-						addToCollection(game);
-						if (browser) {
-							localStorage.collection = JSON.stringify($collectionStore);
-						}
-					}}
-				>
-					Add to collection <iconify-icon icon="line-md:plus-circle" width="24" height="24"></iconify-icon>
-				</Button>
+				<Icon icon="line-md:plus-circle" width="24" height="24" />
 			{/if}
+		</Button>
+		<Button size="md" kind={existsInWishlist ? 'danger' : 'primary'} icon on:click={onWishlistClick}>
+			{wishlistText}
 			{#if existsInWishlist}
-				<Button size="md" kind="danger" icon on:click={() => removeFromWishList()}>
-					Remove from wishlist <iconify-icon icon="line-md:minus-circle" width="24" height="24"></iconify-icon>
-				</Button>
+				<Icon icon="line-md:minus-circle" width="24" height="24" />
 			{:else}
-				<Button
-					size="md"
-					kind="primary"
-					icon
-					on:click={() => {
-						addToWishlist(game);
-						if (browser) {
-							localStorage.wishlist = JSON.stringify($wishlistStore);
-						}
-					}}
-				>
-					Add to wishlist n <iconify-icon icon="line-md:plus-circle" width="24" height="24"></iconify-icon>
-				</Button>
+				<Icon icon="line-md:plus-circle" width="24" height="24" />
 			{/if}
+		</Button>
 		</div>
 	</div>
 </section>
@@ -208,7 +211,7 @@
 		grid-template-columns: 1fr 1fr;
 		gap: 0.5rem;
 		place-content: center;
-		a, p {
+		p {
 			margin: 1rem;
 		}