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

Simplify buttons on game page and reactive button text.

Browse source
This commit is contained in:
Bradley Shellnut 2023-01-15 13:38:13 -08:00
parent 018a5db3d3
commit c088048411
5 changed files with 50 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.vscode/settings.json vendored
View file

@ -1,3 +1,3 @@
{
"cSpell.words": ["kickstarter", "msrp"]
"cSpell.words": ["iconify", "kickstarter", "msrp"]
}

1
package.json
View file

@ -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",

12
pnpm-lock.yaml
View file

@ -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==}

2
src/routes/+layout.svelte
View file

@ -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';

69
src/routes/game/[id]/+page.svelte
View file

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