diff --git a/src/lib/components/dialog/ClearWishlistDialog.svelte b/src/lib/components/dialog/ClearWishlistDialog.svelte new file mode 100644 index 0000000..a67e70e --- /dev/null +++ b/src/lib/components/dialog/ClearWishlistDialog.svelte @@ -0,0 +1,84 @@ + + + { + boredState.update((n) => ({ ...n, dialog: { isOpen: false } })); + }} + static +> +
+ +
+ Clear wishlist + Are you sure you want to clear your wishlist? + +
+ + +
+
+
+ + + diff --git a/src/lib/components/dialog/RemoveWishlistDialog.svelte b/src/lib/components/dialog/RemoveWishlistDialog.svelte new file mode 100644 index 0000000..4e0a71a --- /dev/null +++ b/src/lib/components/dialog/RemoveWishlistDialog.svelte @@ -0,0 +1,87 @@ + + + { + boredState.update((n) => ({ ...n, dialog: { isOpen: false } })); + }} + static +> +
+ +
+ Remove from wishlist + Are you sure you want to remove from your wishlist? + +
+ + +
+
+
+ + + diff --git a/src/lib/components/game/index.svelte b/src/lib/components/game/index.svelte index 68f8361..ac4e7af 100644 --- a/src/lib/components/game/index.svelte +++ b/src/lib/components/game/index.svelte @@ -4,7 +4,9 @@ import { MinusCircleIcon, PlusCircleIcon } from '@rgossiaux/svelte-heroicons/outline'; import type { GameType, SavedGameType } from '$lib/types'; import { collectionStore } from '$lib/stores/collectionStore'; + import { wishlistStore } from '$root/lib/stores/wishlistStore'; import { addToCollection, removeFromCollection } from '$lib/util/manipulateCollection'; + import { addToWishlist } from '$lib/util/manipulateWishlist'; import { browser } from '$app/environment'; export let game: GameType | SavedGameType; @@ -13,11 +15,16 @@ const dispatch = createEventDispatcher(); - function removeGame() { - dispatch('removeGameEvent', game); + function removeGameFromWishlist() { + dispatch('handleRemoveWishlist', game); + } + + function removeGameFromCollection() { + dispatch('handleRemoveCollection', game); } $: existsInCollection = $collectionStore.find((item: SavedGameType) => item.id === game.id); + $: existsInWishlist = $wishlistStore.find((item: SavedGameType) => item.id === game.id);
@@ -48,8 +55,8 @@ class="btn" type="button" on:click={() => { - removeGame(); - }}>Remove Remove from Collection {:else} {/if} + {#if existsInWishlist} + + {:else} + + {/if}
diff --git a/src/lib/components/preferences/gameCollection.svelte b/src/lib/components/preferences/gameCollection.svelte index 050badf..235e642 100644 --- a/src/lib/components/preferences/gameCollection.svelte +++ b/src/lib/components/preferences/gameCollection.svelte @@ -42,7 +42,9 @@
- Your Collection + Your Collection
+ + +
+
+ + diff --git a/src/lib/components/preferences/profile.svelte b/src/lib/components/preferences/profile.svelte index d84cd9f..5379024 100644 --- a/src/lib/components/preferences/profile.svelte +++ b/src/lib/components/preferences/profile.svelte @@ -5,6 +5,7 @@ import { collectionStore } from '$root/lib/stores/collectionStore'; import Themes from './themes.svelte'; import GameCollection from './gameCollection.svelte'; + import GameWishlist from './gameWishlist.svelte';
@@ -41,9 +42,8 @@
- {#if $collectionStore.length > 0} - - {/if} + +
diff --git a/src/lib/stores/wishlistStore.ts b/src/lib/stores/wishlistStore.ts new file mode 100644 index 0000000..cbd67b7 --- /dev/null +++ b/src/lib/stores/wishlistStore.ts @@ -0,0 +1,34 @@ +import { writable } from 'svelte/store'; +import type { SavedGameType } from '$lib/types'; + +// Custom store +const state = () => { + const { subscribe, set, update } = writable([]); + + function addAll(games: SavedGameType[]) { + for (const game of games) { + add(game); + } + } + + function add(game: SavedGameType) { + update((store) => [...store, game]); + } + + function remove(id: string) { + update((store) => { + const newStore = store.filter((item: SavedGameType) => item.id !== id); + return [...newStore]; + }); + } + + function removeAll() { + update(() => { + return []; + }); + } + + return { subscribe, set, update, add, addAll, remove, removeAll }; +}; + +export const wishlistStore = state(); diff --git a/src/lib/util/manipulateWishlist.ts b/src/lib/util/manipulateWishlist.ts new file mode 100644 index 0000000..bb05cb2 --- /dev/null +++ b/src/lib/util/manipulateWishlist.ts @@ -0,0 +1,21 @@ +import { wishlistStore } from '$lib/stores/wishlistStore'; +import { toast } from '$lib/components/toast/toast'; +import { ToastType, type GameType, type SavedGameType } from '$lib/types'; + +function convertToSavedGame(game: GameType | SavedGameType): SavedGameType { + return { + id: game.id, + name: game.name, + thumb_url: game.thumb_url, + }; +} + +export function addToWishlist(game: GameType | SavedGameType) { + wishlistStore.add(convertToSavedGame(game)); + toast.send("Added to wishlist", { duration: 3000, type: ToastType.INFO }); +} + +export function removeFromWishlist(game: GameType | SavedGameType) { + wishlistStore.remove(game.id); + toast.send("Removed from wishlist", { duration: 3000, type: ToastType.INFO }); +} diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index c78838a..b725b38 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,7 +1,6 @@ @@ -35,7 +47,12 @@

No games in your collection

{:else} {#each $collectionStore as game} - + {/each} {/if} diff --git a/src/routes/headless/+page.svelte b/src/routes/headless/+page.svelte deleted file mode 100644 index eb21f42..0000000 --- a/src/routes/headless/+page.svelte +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/src/routes/wishlist/+page.svelte b/src/routes/wishlist/+page.svelte new file mode 100644 index 0000000..457d123 --- /dev/null +++ b/src/routes/wishlist/+page.svelte @@ -0,0 +1,79 @@ + + + + Your Wishlist | Bored Game + + +

Your Wishlist

+ +
+
+ {#if $wishlistStore.length === 0} +

No games in your wishlist

+ {:else} + {#each $wishlistStore as game} + + {/each} + {/if} +
+
+ +