BradNut/boredgame
1
0
Fork 0
mirror of https://github.com/BradNut/boredgame synced 2025-09-08 17:40:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Adding wishlist route, store, localstorage store, and adding all dialogs/headers/etc. needed.

Browse source
This commit is contained in:
Bradley Shellnut 2022-10-31 14:06:27 -05:00
parent 7b0af8ed7e
commit 9b60fc2671
15 changed files with 536 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
src/lib/components/dialog/ClearWishlistDialog.svelte Normal file
View file

@ -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 { wishlistStore } from '$root/lib/stores/wishlistStore';
import { browser } from '$app/environment';
function clearWishlist() {
if (browser) {
localStorage.wishlist = JSON.stringify([]);
wishlistStore.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 wishlist</DialogTitle>
<DialogDescription>Are you sure you want to clear your wishlist?</DialogDescription>
<div class="dialog-footer">
<button on:click={clearWishlist}>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>

87
src/lib/components/dialog/RemoveWishlistDialog.svelte Normal file
View file

@ -0,0 +1,87 @@
<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 { wishlistStore } from '$root/lib/stores/wishlistStore';
import { removeFromWishlist } from '$root/lib/util/manipulateWishlist';
import { browser } from '$app/environment';
function removeGame() {
if ($boredState?.dialog?.additionalData) {
removeFromWishlist($boredState?.dialog?.additionalData);
}
if (browser) {
localStorage.wishlist = JSON.stringify($wishlistStore);
}
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>Remove from wishlist</DialogTitle>
<DialogDescription>Are you sure you want to remove from your wishlist?</DialogDescription>
<div class="dialog-footer">
<button on:click={removeGame}>Remove</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>

37
src/lib/components/game/index.svelte
View file

@ -4,7 +4,9 @@
import { MinusCircleIcon, PlusCircleIcon } from '@rgossiaux/svelte-heroicons/outline'; import { MinusCircleIcon, PlusCircleIcon } from '@rgossiaux/svelte-heroicons/outline';
import type { GameType, SavedGameType } from '$lib/types'; import type { GameType, SavedGameType } from '$lib/types';
import { collectionStore } from '$lib/stores/collectionStore'; import { collectionStore } from '$lib/stores/collectionStore';
import { wishlistStore } from '$root/lib/stores/wishlistStore';
import { addToCollection, removeFromCollection } from '$lib/util/manipulateCollection'; import { addToCollection, removeFromCollection } from '$lib/util/manipulateCollection';
import { addToWishlist } from '$lib/util/manipulateWishlist';
import { browser } from '$app/environment'; import { browser } from '$app/environment';
export let game: GameType | SavedGameType; export let game: GameType | SavedGameType;
@ -13,11 +15,16 @@
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
function removeGame() { function removeGameFromWishlist() {
dispatch('removeGameEvent', game); dispatch('handleRemoveWishlist', game);
}
function removeGameFromCollection() {
dispatch('handleRemoveCollection', game);
} }
$: existsInCollection = $collectionStore.find((item: SavedGameType) => item.id === game.id); $: existsInCollection = $collectionStore.find((item: SavedGameType) => item.id === game.id);
$: existsInWishlist = $wishlistStore.find((item: SavedGameType) => item.id === game.id);
</script> </script>
<article class="game-container" transition:fade> <article class="game-container" transition:fade>
@ -48,8 +55,8 @@
class="btn" class="btn"
type="button" type="button"
on:click={() => { on:click={() => {
removeGame(); removeGameFromCollection();
}}>Remove <MinusCircleIcon width="24" height="24" /></button }}>Remove from Collection <MinusCircleIcon width="24" height="24" /></button
> >
{:else} {:else}
<button <button
@ -64,6 +71,28 @@
}}>Add to collection <PlusCircleIcon width="24" height="24" /></button }}>Add to collection <PlusCircleIcon width="24" height="24" /></button
> >
{/if} {/if}
{#if existsInWishlist}
<button
aria-label="Remove from wishlist"
class="btn"
type="button"
on:click={() => {
removeGameFromWishlist();
}}>Remove from Wishlist <MinusCircleIcon width="24" height="24" /></button
>
{:else}
<button
aria-label="Add to wishlist"
class="btn"
type="button"
on:click={() => {
addToWishlist(game);
if (browser) {
localStorage.wishlist = JSON.stringify($wishlistStore);
}
}}>Add to wishlist <PlusCircleIcon width="24" height="24" /></button
>
{/if}
</article> </article>
<style lang="scss"> <style lang="scss">

125
src/lib/components/header/Header.svelte
View file

@ -1,78 +1,79 @@
<script lang="ts"> <script lang="ts">
import Profile from '../preferences/profile.svelte'; import Profile from '../preferences/profile.svelte';
import logo from './bored-game.png'; import logo from './bored-game.png';
</script> </script>
<header> <header>
<div class="corner"> <div class="corner">
<a href="/" title="Home"> <a href="/" title="Home">
<img src={logo} alt="Bored Game Home" /> <img src={logo} alt="Bored Game Home" />
</a> </a>
</div> </div>
<nav> <nav>
<a href="/collection" title="Go to your collection">Your Collection</a> <a href="/collection" title="Go to your collection">Collection</a>
<Profile /> <a href="/wishlist" title="Go to your collection">Wishlist</a>
</nav> <Profile />
</nav>
</header> </header>
<style lang="scss"> <style lang="scss">
header { header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: var(--containerPadding); padding: var(--containerPadding);
font-size: 1.6rem; font-size: 1.6rem;
@media (max-width: 1000px) { @media (max-width: 1000px) {
padding-top: 1.25rem; padding-top: 1.25rem;
} }
} }
.corner { .corner {
width: 3em; width: 3em;
height: 3em; height: 3em;
} }
.corner a { .corner a {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.corner img { .corner img {
width: 2em; width: 2em;
height: 2em; height: 2em;
object-fit: contain; object-fit: contain;
} }
nav { nav {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 2rem; gap: 1rem;
margin: 1rem; margin: 1rem;
--background: rgba(255, 255, 255, 0.7); --background: rgba(255, 255, 255, 0.7);
} }
nav a { nav a {
display: flex; display: flex;
height: 100%; height: 100%;
align-items: center; align-items: center;
padding: 0 1em; padding: 0 1em;
color: var(--heading-color); color: var(--heading-color);
font-weight: 700; font-weight: 700;
/* font-size: 0.8rem; */ /* font-size: 0.8rem; */
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.1em; letter-spacing: 0.1em;
text-decoration: none; text-decoration: none;
transition: color 0.2s linear; transition: color 0.2s linear;
} }
a:hover { a:hover {
text-decoration: underline; text-decoration: underline;
color: var(--accent-color); color: var(--accent-color);
} }
</style> </style>

4
src/lib/components/preferences/gameCollection.svelte
View file

@ -42,7 +42,9 @@
<div> <div>
<div> <div>
<span class="collection-title">Your Collection</span> <span class="collection-title"
><a href="/collection" title="Go to your collection">Your Collection</a></span
>
</div> </div>
<div class="collection-buttons"> <div class="collection-buttons">
<button type="button" aria-label="Export Collection" on:click={() => exportCollection()} <button type="button" aria-label="Export Collection" on:click={() => exportCollection()}

86
src/lib/components/preferences/gameWishlist.svelte Normal file
View file

@ -0,0 +1,86 @@
<script lang="ts">
import { browser } from '$app/environment';
import { boredState } from '$root/lib/stores/boredState';
import { wishlistStore } from '$root/lib/stores/wishlistStore';
import { ToastType } from '$root/lib/types';
import { SaveIcon, ShareIcon, TrashIcon } from '@rgossiaux/svelte-heroicons/outline';
import ClearWishlistDialog from '../dialog/ClearWishlistDialog.svelte';
import { toast } from '../toast/toast';
function saveWishlist() {
if (!browser) return;
localStorage.wishlist = JSON.stringify($wishlistStore);
toast.send('Saved wishlist', { duration: 3000, type: ToastType.INFO });
}
function exportWishlist() {
if (!browser) return;
const wishlistBlob = new Blob([JSON.stringify($wishlistStore)], {
type: 'application/json;charset=utf-8'
});
let url = window.URL || window.webkitURL;
let link = url.createObjectURL(wishlistBlob);
let a = document.createElement('a');
a.setAttribute('download', `wishlist.json`);
a.setAttribute('href', link);
a.click();
document.body.removeChild(a);
toast.send('Exported wishlist', { duration: 3000, type: ToastType.INFO });
}
function clearWishlist() {
if ($wishlistStore.length > 0) {
boredState.update((n) => ({
...n,
dialog: { isOpen: true, content: ClearWishlistDialog }
}));
} else {
toast.send('Nothing to clear', { duration: 3000, type: ToastType.ERROR });
}
}
</script>
<div>
<div>
<span class="wishlist-title"
><a href="/wishlist" title="Go to your wishlist">Your Wishlist</a></span
>
</div>
<div class="wishlist-buttons">
<button type="button" aria-label="Export Wishlist" on:click={() => exportWishlist()}
><ShareIcon width="24" height="24" />Export</button
>
<button type="button" aria-label="Save Wishlist" on:click={() => saveWishlist()}
><SaveIcon width="24" height="24" />Save</button
>
<button type="button" aria-label="Clear saved wishlist" on:click={() => clearWishlist()}>
<TrashIcon width="24" height="24" />Clear
</button>
</div>
</div>
<style lang="scss">
:global(.wishlist-title) {
padding-bottom: var(--spacing-8);
font-size: var(--font-24);
font-weight: 700;
line-height: 32px;
}
:global(.wishlist-buttons) {
display: flex;
flex-direction: row;
justify-content: space-between;
// gap: 6rem;
@media (min-width: 480px) {
gap: 3rem;
}
}
button {
display: grid;
place-items: center;
gap: 0.25rem;
}
</style>

6
src/lib/components/preferences/profile.svelte
View file

@ -5,6 +5,7 @@
import { collectionStore } from '$root/lib/stores/collectionStore'; import { collectionStore } from '$root/lib/stores/collectionStore';
import Themes from './themes.svelte'; import Themes from './themes.svelte';
import GameCollection from './gameCollection.svelte'; import GameCollection from './gameCollection.svelte';
import GameWishlist from './gameWishlist.svelte';
</script> </script>
<div class="container"> <div class="container">
@ -41,9 +42,8 @@
<div class="options"> <div class="options">
<Themes /> <Themes />
{#if $collectionStore.length > 0} <GameCollection />
<GameCollection /> <GameWishlist />
{/if}
</div> </div>
</div> </div>
</PopoverPanel> </PopoverPanel>

34
src/lib/stores/wishlistStore.ts Normal file
View file

@ -0,0 +1,34 @@
import { writable } from 'svelte/store';
import type { SavedGameType } from '$lib/types';
// Custom store
const state = () => {
const { subscribe, set, update } = writable<SavedGameType[]>([]);
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();

21
src/lib/util/manipulateWishlist.ts Normal file
View file

@ -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 });
}

13
src/routes/+layout.svelte
View file

@ -1,7 +1,6 @@
<script lang="ts"> <script lang="ts">
import { browser } from '$app/environment'; import { browser } from '$app/environment';
import { navigating } from '$app/stores'; import { navigating } from '$app/stores';
import { fade } from 'svelte/transition';
import debounce from 'just-debounce-it'; import debounce from 'just-debounce-it';
import { Toy } from '@leveluptuts/svelte-toy'; import { Toy } from '@leveluptuts/svelte-toy';
import Analytics from '$lib/components/analytics.svelte'; import Analytics from '$lib/components/analytics.svelte';
@ -11,6 +10,7 @@
import Portal from '$lib/Portal.svelte'; import Portal from '$lib/Portal.svelte';
import { boredState } from '$lib/stores/boredState'; import { boredState } from '$lib/stores/boredState';
import { collectionStore } from '$lib/stores/collectionStore'; import { collectionStore } from '$lib/stores/collectionStore';
import { wishlistStore } from '$root/lib/stores/wishlistStore';
import { gameStore } from '$lib/stores/gameSearchStore'; import { gameStore } from '$lib/stores/gameSearchStore';
import { toast } from '$lib/components/toast/toast'; import { toast } from '$lib/components/toast/toast';
import Toast from '$lib/components/toast/Toast.svelte'; import Toast from '$lib/components/toast/Toast.svelte';
@ -31,8 +31,13 @@
if (browser) { if (browser) {
let collectionEmpty = $collectionStore.length === 0 || false; let collectionEmpty = $collectionStore.length === 0 || false;
console.log('collectionEmpty', collectionEmpty); let wishlistEmpty = $wishlistStore.length === 0 || false;
console.log('localStorage.collection', localStorage.collection); if (wishlistEmpty && localStorage?.wishlist && localStorage?.wishlist?.length !== 0) {
const wishlist = JSON.parse(localStorage.wishlist);
if (wishlist?.length !== 0) {
wishlistStore.addAll(wishlist);
}
}
if (collectionEmpty && localStorage?.collection && localStorage?.collection?.length !== 0) { if (collectionEmpty && localStorage?.collection && localStorage?.collection?.length !== 0) {
const collection = JSON.parse(localStorage.collection); const collection = JSON.parse(localStorage.collection);
console.log('collection', collection); console.log('collection', collection);
@ -50,7 +55,7 @@
{/if} {/if}
{#if dev} {#if dev}
<Toy register={{ boredState, collectionStore, gameStore, toast }} /> <Toy register={{ boredState, collectionStore, wishlistStore, gameStore, toast }} />
{/if} {/if}
<Transition transition={{ type: 'fade', duration: 250 }}> <Transition transition={{ type: 'fade', duration: 250 }}>

1
src/routes/+page.svelte
View file

@ -58,6 +58,7 @@
} }
function handleRemoveGame(event: RemoveGameEvent) { function handleRemoveGame(event: RemoveGameEvent) {
console.log('Base Page handle remove');
console.log('event', event); console.log('event', event);
gameToRemove = event?.detail; gameToRemove = event?.detail;
boredState.update((n) => ({ boredState.update((n) => ({

32
src/routes/about/+page.svelte
View file

@ -5,26 +5,22 @@
<div class="content"> <div class="content">
<h1>About Bored Game</h1> <h1>About Bored Game</h1>
<article> <article>
<p> <p>One day we were bored and wanted to play one of our board games.</p>
One day we were bored and wanted to play one of our board games. <p>Our problem was that we didn't know which one to play.</p>
</p> <p>Rather than just pick a game I decided to make this overcomplicated solution.</p>
<p> <p>I hope you enjoy using it!</p>
Our problem was that we didn't know which one to play. </article>
</p>
<p>
Rather than just pick one I decided to make this overcomplicated solution.
</p>
</article>
</div> </div>
<style> <style>
.content, article { .content,
display: grid; article {
gap: 1.5rem; display: grid;
} gap: 1rem;
}
p { p {
line-height: 2; line-height: 1.5;
} }
</style> </style>

21
src/routes/collection/+page.svelte
View file

@ -4,6 +4,7 @@
import type { GameType, SavedGameType } from '$root/lib/types'; import type { GameType, SavedGameType } from '$root/lib/types';
import { boredState } from '$root/lib/stores/boredState'; import { boredState } from '$root/lib/stores/boredState';
import RemoveCollectionDialog from '$root/lib/components/dialog/RemoveCollectionDialog.svelte'; import RemoveCollectionDialog from '$root/lib/components/dialog/RemoveCollectionDialog.svelte';
import RemoveWishlistDialog from '$root/lib/components/dialog/RemoveWishlistDialog.svelte';
let isOpen: boolean = false; let isOpen: boolean = false;
let gameToRemove: GameType | SavedGameType; let gameToRemove: GameType | SavedGameType;
@ -13,7 +14,8 @@
detail: GameType | SavedGameType; detail: GameType | SavedGameType;
} }
function handleRemoveGame(event: RemoveGameEvent) { function handleRemoveCollection(event: RemoveGameEvent) {
console.log('Remove collection event handler');
console.log('event', event); console.log('event', event);
gameToRemove = event?.detail; gameToRemove = event?.detail;
boredState.update((n) => ({ boredState.update((n) => ({
@ -21,6 +23,16 @@
dialog: { isOpen: true, content: RemoveCollectionDialog, additionalData: gameToRemove } dialog: { isOpen: true, content: RemoveCollectionDialog, additionalData: gameToRemove }
})); }));
} }
function handleRemoveWishlist(event: RemoveGameEvent) {
console.log('Remove wishlist event handler');
console.log('event', event);
gameToRemove = event?.detail;
boredState.update((n) => ({
...n,
dialog: { isOpen: true, content: RemoveWishlistDialog, additionalData: gameToRemove }
}));
}
</script> </script>
<svelte:head> <svelte:head>
@ -35,7 +47,12 @@
<h2>No games in your collection</h2> <h2>No games in your collection</h2>
{:else} {:else}
{#each $collectionStore as game} {#each $collectionStore as game}
<Game on:removeGameEvent={handleRemoveGame} minimal {game} /> <Game
on:handleRemoveWishlist={handleRemoveWishlist}
on:handleRemoveCollection={handleRemoveCollection}
minimal
{game}
/>
{/each} {/each}
{/if} {/if}
</div> </div>

5
src/routes/headless/+page.svelte
View file

@ -1,5 +0,0 @@
<script lang="ts">
import Listbox from '$lib/components/listbox.svelte';
</script>
<Listbox />

79
src/routes/wishlist/+page.svelte Normal file
View file

@ -0,0 +1,79 @@
<script lang="ts">
import Game from '$lib/components/game/index.svelte';
import { wishlistStore } from '$lib/stores/wishlistStore';
import type { GameType, SavedGameType } from '$root/lib/types';
import { boredState } from '$root/lib/stores/boredState';
import RemoveWishlistDialog from '$root/lib/components/dialog/RemoveWishlistDialog.svelte';
import RemoveCollectionDialog from '$root/lib/components/dialog/RemoveCollectionDialog.svelte';
let isOpen: boolean = false;
let gameToRemove: GameType | SavedGameType;
console.log('isOpen', isOpen);
interface RemoveGameEvent extends Event {
detail: GameType | SavedGameType;
}
function handleRemoveCollection(event: RemoveGameEvent) {
gameToRemove = event?.detail;
boredState.update((n) => ({
...n,
dialog: { isOpen: true, content: RemoveCollectionDialog, additionalData: gameToRemove }
}));
}
function handleRemoveWishlist(event: RemoveGameEvent) {
gameToRemove = event?.detail;
boredState.update((n) => ({
...n,
dialog: { isOpen: true, content: RemoveWishlistDialog, additionalData: gameToRemove }
}));
}
</script>
<svelte:head>
<title>Your Wishlist | Bored Game</title>
</svelte:head>
<h1>Your Wishlist</h1>
<div class="games">
<div class="games-list">
{#if $wishlistStore.length === 0}
<h2>No games in your wishlist</h2>
{:else}
{#each $wishlistStore as game}
<Game
on:handleRemoveWishlist={handleRemoveWishlist}
on:handleRemoveCollection={handleRemoveCollection}
minimal
{game}
/>
{/each}
{/if}
</div>
</div>
<style lang="scss">
h1 {
width: 100%;
}
.games {
margin: 2rem 0rem;
}
.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: 550px) {
grid-template-columns: 1fr;
}
}
</style>