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 SSR for iconify icons, adding necessary icon packs, and adding min max width height.

Browse source
This commit is contained in:
Bradley Shellnut 2023-01-15 23:32:49 -08:00
parent 4e07fc22f9
commit 141ec7fae6
9 changed files with 118 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -13,6 +13,8 @@
"format": "prettier --write --plugin-search-dir=. ."
},
"devDependencies": {
"@iconify-icons/line-md": "^1.2.21",
"@iconify-icons/mdi": "^1.2.39",
"@iconify/svelte": "^3.0.1",
"@playwright/test": "^1.29.2",
"@rgossiaux/svelte-headlessui": "1.0.2",

16
pnpm-lock.yaml
View file

@ -2,6 +2,8 @@ lockfileVersion: 5.4
specifiers:
'@fontsource/fira-mono': ^4.5.10
'@iconify-icons/line-md': ^1.2.21
'@iconify-icons/mdi': ^1.2.39
'@iconify/svelte': ^3.0.1
'@leveluptuts/svelte-side-menu': ^1.0.5
'@leveluptuts/svelte-toy': ^2.0.3
@ -62,6 +64,8 @@ dependencies:
zod-to-json-schema: 3.20.2_zod@3.20.2
devDependencies:
'@iconify-icons/line-md': 1.2.21
'@iconify-icons/mdi': 1.2.39
'@iconify/svelte': 3.0.1_svelte@3.55.1
'@playwright/test': 1.29.2
'@rgossiaux/svelte-headlessui': 1.0.2_svelte@3.55.1
@ -364,6 +368,18 @@ packages:
resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
dev: true
/@iconify-icons/line-md/1.2.21:
resolution: {integrity: sha512-u1oQa5IFL2Xn/01urpx5IuMlM5Dk3UrxpvcGSDzFPDIk/oD8RtI7kVKuFK110mRLjR8swdhKBTPXWBrZgfgj9w==}
dependencies:
'@iconify/types': 2.0.0
dev: true
/@iconify-icons/mdi/1.2.39:
resolution: {integrity: sha512-fFYh21To6lmqyYy1w3ZahE3aTjoDxwiehI7KPYxDplmM7ZUfeP0sPeyuCHzwfJ/YlV8w8JTZWIgKGdpmmuqtCQ==}
dependencies:
'@iconify/types': 2.0.0
dev: true
/@iconify/svelte/3.0.1_svelte@3.55.1:
resolution: {integrity: sha512-onjjl496hTXUBWJxeCxo/c5zmVHS3HnKUQv5Cqf1ZsUbY4d0wVJfSDaV1hw1m6b0BNlJCOmbpc23Q6AOO5qqKg==}
peerDependencies:

8
src/lib/components/button/index.svelte
View file

@ -9,7 +9,7 @@
<slot />
</button>
<style>
<style lang="postcss">
button {
display: flex;
justify-content: space-between;
@ -19,7 +19,13 @@
padding: 1rem;
min-width: 20rem;
max-width: 30rem;
min-height: 6.2rem;
text-align: start;
background-color: var(--color-btn-primary-active);
@media (min-width: env(--large-viewport)) {
min-width: 23.5rem;
}
}
.danger {

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

@ -2,7 +2,10 @@
import { createEventDispatcher } from 'svelte';
import { Image } from 'svelte-lazy-loader';
import { fade } from 'svelte/transition';
import { MinusCircleIcon, PlusCircleIcon } from '@rgossiaux/svelte-heroicons/outline';
import Icon from '@iconify/svelte/dist/OfflineIcon.svelte';
import plusCircle from '@iconify-icons/line-md/plus-circle';
import minusCircle from '@iconify-icons/line-md/minus-circle';
import Button from '$lib/components/button/index.svelte';
import type { GameType, SavedGameType } from '$lib/types';
import { collectionStore } from '$lib/stores/collectionStore';
import { wishlistStore } from '$root/lib/stores/wishlistStore';
@ -23,6 +26,28 @@
dispatch('handleRemoveCollection', game);
}
function onCollectionClick() {
if (existsInCollection) {
removeGameFromCollection();
} else {
addToCollection(game);
if (browser) {
localStorage.collection = JSON.stringify($collectionStore);
}
}
}
function onWishlistClick() {
if (existsInWishlist) {
removeGameFromWishlist();
} else {
addToWishlist(game);
if (browser) {
localStorage.wishlist = JSON.stringify($wishlistStore);
}
}
}
// Naive and assumes description is only on our GameType at the moment
function isGameType(game: GameType | SavedGameType): game is GameType {
return (game as GameType).description !== undefined;
@ -43,6 +68,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';
</script>
<article class="game-container" transition:fade>
@ -70,50 +97,22 @@
</div>
<div class="game-buttons">
{#if existsInCollection}
<button
aria-label="Remove from collection"
class="btn remove"
type="button"
on:click={() => {
removeGameFromCollection();
}}><span>Remove from Collection</span> <MinusCircleIcon width="24" height="24" /></button
>
{:else}
<button
aria-label="Add to collection"
class="btn"
type="button"
on:click={() => {
addToCollection(game);
if (browser) {
localStorage.collection = JSON.stringify($collectionStore);
}
}}><span>Add to collection</span> <PlusCircleIcon width="24" height="24" /></button
>
{/if}
{#if existsInWishlist}
<button
aria-label="Remove from wishlist"
class="btn remove"
type="button"
on:click={() => {
removeGameFromWishlist();
}}><span>Remove from Wishlist</span> <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);
}
}}><span>Add to wishlist</span> <PlusCircleIcon width="24" height="24" /></button
>
{/if}
<Button size="md" kind={existsInCollection ? 'danger' : 'primary'} icon on:click={onCollectionClick}>
{collectionText}
{#if existsInCollection}
<Icon icon={minusCircle} width="24" height="24" />
{:else}
<Icon icon={plusCircle} width="24" height="24" />
{/if}
</Button>
<Button size="md" kind={existsInWishlist ? 'danger' : 'primary'} icon on:click={onWishlistClick}>
{wishlistText}
{#if existsInWishlist}
<Icon icon={minusCircle} width="24" height="24" />
{:else}
<Icon icon={plusCircle} width="24" height="24" />
{/if}
</Button>
</div>
</article>

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

@ -1,7 +1,8 @@
<script lang="ts">
import { fade } from 'svelte/transition';
import { Popover, PopoverButton, PopoverPanel } from '@rgossiaux/svelte-headlessui';
import Icon from '@iconify/svelte';
import Icon from '@iconify/svelte/dist/OfflineIcon.svelte';
import cogOutline from '@iconify-icons/mdi/cog-outline';
import Themes from './themes.svelte';
import GameCollection from './gameCollection.svelte';
import GameWishlist from './gameWishlist.svelte';
@ -11,8 +12,15 @@
<Popover let:open class="popover">
<PopoverButton aria-label="Preferences">
<!-- <CogIcon width="24" height="24" /> -->
<!-- <iconify-icon icon="mdi:cog-outline"
width="24" height="24"
style={open ?
'transform: rotate(90deg); transition: transform 0.5s ease;'
: 'transform: rotate(0deg); transition: transform 0.5s ease;'
}
></iconify-icon> -->
<Icon
icon="mdi:cog-outline"
icon={cogOutline}
width="24" height="24"
style={open ?
'transform: rotate(90deg); transition: transform 0.5s ease;'

17
src/lib/util/icons/line-md-icons.ts Normal file
View file

@ -0,0 +1,17 @@
import { addCollection } from '@iconify/svelte';
addCollection({
prefix: 'line-md',
lastModified: 1672653839,
aliases: {},
width: 24,
height: 24,
icons: {
'minus-circle': {
body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"><path stroke-dasharray="60" stroke-dashoffset="60" d="M3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.5s" values="60;0"/></path><path stroke-dasharray="12" stroke-dashoffset="12" d="M7 12H17"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.6s" dur="0.2s" values="12;0"/></path></g>'
},
'plus-circle': {
body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"><g stroke-dasharray="12" stroke-dashoffset="12"><path d="M12 7V17"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.8s" dur="0.2s" values="12;0"/></path><path d="M7 12H17"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.6s" dur="0.2s" values="12;0"/></path></g><path stroke-dasharray="60" stroke-dashoffset="60" d="M3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.5s" values="60;0"/></path></g>'
}
}
});

14
src/lib/util/icons/mdi-icons.ts Normal file
View file

@ -0,0 +1,14 @@
import { addCollection } from '@iconify/svelte';
addCollection({
prefix: 'mdi',
lastModified: 1673788155,
aliases: {},
width: 24,
height: 24,
icons: {
'cog-outline': {
body: '<path fill="currentColor" d="M12 8a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 2a2 2 0 0 0-2 2a2 2 0 0 0 2 2a2 2 0 0 0 2-2a2 2 0 0 0-2-2m-2 12c-.25 0-.46-.18-.5-.42l-.37-2.65c-.63-.25-1.17-.59-1.69-.99l-2.49 1.01c-.22.08-.49 0-.61-.22l-2-3.46a.493.493 0 0 1 .12-.64l2.11-1.66L4.5 12l.07-1l-2.11-1.63a.493.493 0 0 1-.12-.64l2-3.46c.12-.22.39-.31.61-.22l2.49 1c.52-.39 1.06-.73 1.69-.98l.37-2.65c.04-.24.25-.42.5-.42h4c.25 0 .46.18.5.42l.37 2.65c.63.25 1.17.59 1.69.98l2.49-1c.22-.09.49 0 .61.22l2 3.46c.13.22.07.49-.12.64L19.43 11l.07 1l-.07 1l2.11 1.63c.19.15.25.42.12.64l-2 3.46c-.12.22-.39.31-.61.22l-2.49-1c-.52.39-1.06.73-1.69.98l-.37 2.65c-.04.24-.25.42-.5.42h-4m1.25-18l-.37 2.61c-1.2.25-2.26.89-3.03 1.78L5.44 7.35l-.75 1.3L6.8 10.2a5.55 5.55 0 0 0 0 3.6l-2.12 1.56l.75 1.3l2.43-1.04c.77.88 1.82 1.52 3.01 1.76l.37 2.62h1.52l.37-2.61c1.19-.25 2.24-.89 3.01-1.77l2.43 1.04l.75-1.3l-2.12-1.55c.4-1.17.4-2.44 0-3.61l2.11-1.55l-.75-1.3l-2.41 1.04a5.42 5.42 0 0 0-3.03-1.77L12.75 4h-1.5Z"/>'
}
}
});

1
src/routes/+layout.svelte
View file

@ -15,6 +15,7 @@
import { toast } from '$lib/components/toast/toast';
import Toast from '$lib/components/toast/Toast.svelte';
import '$root/styles/styles.pcss';
// import 'iconify-icon';
import type { SavedGameType } from '$root/lib/types';

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

@ -1,7 +1,9 @@
<script lang="ts">
import { fade, fly } from 'svelte/transition';
import { Image } from 'svelte-lazy-loader';
import Icon from '@iconify/svelte';
import Icon from '@iconify/svelte/dist/OfflineIcon.svelte';
import minusCircle from '@iconify-icons/line-md/minus-circle';
import plusCircle from '@iconify-icons/line-md/plus-circle';
import {
ChevronRightIcon,
ExternalLinkIcon,
@ -115,17 +117,17 @@
<Button size="md" kind={existsInCollection ? 'danger' : 'primary'} icon on:click={onCollectionClick}>
{collectionText}
{#if existsInCollection}
<Icon icon="line-md:minus-circle" width="24" height="24" />
<Icon icon={minusCircle} width="24" height="24" />
{:else}
<Icon icon="line-md:plus-circle" width="24" height="24" />
<Icon icon={plusCircle} width="24" height="24" />
{/if}
</Button>
<Button size="md" kind={existsInWishlist ? 'danger' : 'primary'} icon on:click={onWishlistClick}>
{wishlistText}
{#if existsInWishlist}
<Icon icon="line-md:minus-circle" width="24" height="24" />
<Icon icon={minusCircle} width="24" height="24" />
{:else}
<Icon icon="line-md:plus-circle" width="24" height="24" />
<Icon icon={plusCircle} width="24" height="24" />
{/if}
</Button>
</div>