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

Fix localstorage query.

Browse source
This commit is contained in:
Bradley Shellnut 2022-08-08 14:13:51 -07:00
parent a3edc637e4
commit 7c0e774ed9
3 changed files with 21 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,13 +1,14 @@
<script lang="ts"> <script lang="ts">
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
import { ToastType, type GameType } from '$lib/types'; import { MinusCircleIcon, PlusCircleIcon } from '@rgossiaux/svelte-heroicons/outline';
import { ToastType, type GameType, type SavedGameType } from '$lib/types';
import { collectionStore } from '$lib/stores/collectionStore'; import { collectionStore } from '$lib/stores/collectionStore';
import { toast } from '$lib/components/toast/toast'; import { toast } from '$lib/components/toast/toast';
import { addToCollection, removeFromCollection } from '$lib/util/manipulateCollection'; import { addToCollection, removeFromCollection } from '$lib/util/manipulateCollection';
export let game: GameType; export let game: GameType;
export let detailed: boolean = false; export let detailed: boolean = false;
$: existsInCollection = $collectionStore.find((item: GameType) => item.id === game.id); $: existsInCollection = $collectionStore.find((item: SavedGameType) => item.id === game.id);
</script> </script>
<article class="game-container" transition:fade> <article class="game-container" transition:fade>
@ -29,12 +30,12 @@
{/if} {/if}
</div> </div>
{#if existsInCollection} {#if existsInCollection}
<button class="btn" type="button" on:click={() => removeFromCollection(game)} <button aria-label="Remove from collection" class="btn" type="button" on:click={() => removeFromCollection(game)}
>Remove from collection -</button >Remove <MinusCircleIcon class="icon" /></button
> >
{:else} {:else}
<button class="btn" type="button" on:click={() => addToCollection(game)} <button aria-label="Add to collection" class="btn" type="button" on:click={() => addToCollection(game)}
>Add to collection +</button >Add to collection <PlusCircleIcon class="icon" /></button
> >
{/if} {/if}
</article> </article>
@ -49,12 +50,20 @@
} }
button { button {
display: flex;
justify-content: space-between;
gap: 1rem;
width: 100%; width: 100%;
border-radius: 10px; border-radius: 10px;
padding: 1rem; padding: 1rem;
background-color: var(--color-btn-primary-active); background-color: var(--color-btn-primary-active);
} }
/* :global(.icon) {
width: 24px;
height: 24px;
} */
.game-container { .game-container {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;

2
src/routes/__layout.svelte
View file

@ -22,7 +22,7 @@
collectionEmpty && collectionEmpty &&
localStorage && localStorage &&
localStorage.collection && localStorage.collection &&
localStorage.collection !== 0 localStorage.collection.length !== 0
) { ) {
const collection = JSON.parse(localStorage.collection); const collection = JSON.parse(localStorage.collection);
console.log('collection', collection); console.log('collection', collection);

5
src/styles/global.scss
View file

@ -271,4 +271,9 @@ ol {
padding: var(--spacing-20) 0; padding: var(--spacing-20) 0;
background-color: var(--color-placeholder); background-color: var(--color-placeholder);
border-radius: var(--radius-base); border-radius: var(--radius-base);
}
.icon {
width: 24px;
height: 24px;
} }