mirror of
https://github.com/BradNut/boredgame
synced 2025-09-08 17:40:22 +00:00
Adding collection dialog, showing dialog on clear click.
This commit is contained in:
parent
11e85a45d7
commit
770b1e90a6
4 changed files with 147 additions and 54 deletions
84
src/lib/components/dialog/ClearCollectionDialog.svelte
Normal file
84
src/lib/components/dialog/ClearCollectionDialog.svelte
Normal 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 { 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>
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue