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

Merge pull request #29 from BradNut/development

Browse source 
Replace scss with postcss.
This commit is contained in:
Bradley Shellnut 2024-10-03 21:52:37 +00:00 committed by GitHub
commit 0b7d1d48bd
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 263 additions and 271 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/lib/components/Checkbox.svelte
View file

@ -1,9 +1,9 @@
<script lang="ts"> <script lang="ts">
export let labelText: string; export let labelText: string
export let showLabel: boolean; export let showLabel: boolean
export let name: string; export let name: string
export let value: boolean; export let value: boolean
export let onChange: FormDataEvent<HTMLInputElement>; export let onChange: FormDataEvent<HTMLInputElement>
</script> </script>
<label for={name} class="checkbox"> <label for={name} class="checkbox">
@ -30,7 +30,7 @@
{/if} {/if}
</label> </label>
<style lang="scss"> <style lang="postcss">
.checkbox { .checkbox {
display: grid; display: grid;
grid-template-columns: min-content auto; grid-template-columns: min-content auto;

4
src/lib/components/SkeletonPlaceholder.svelte
View file

@ -1,7 +1,7 @@
<!-- Taken from carbon design system svelte --> <!-- Taken from carbon design system svelte -->
<!-- https://github.com/carbon-design-system/carbon-components-svelte/blob/master/src/SkeletonPlaceholder/SkeletonPlaceholder.svelte --> <!-- https://github.com/carbon-design-system/carbon-components-svelte/blob/master/src/SkeletonPlaceholder/SkeletonPlaceholder.svelte -->
<script lang="ts"> <script lang="ts">
export let style: string; export let style: string
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events --> <!-- svelte-ignore a11y-mouse-events-have-key-events -->
@ -15,7 +15,7 @@
on:mouseleave on:mouseleave
/> />
<style lang="scss"> <style lang="postcss">
@keyframes skeleton { @keyframes skeleton {
0% { 0% {
opacity: 0.3; opacity: 0.3;

18
src/lib/components/dialog/ClearCollectionDialog.svelte
View file

@ -1,18 +1,18 @@
<script lang="ts"> <script lang="ts">
import { fade } from 'svelte/transition'; import { browser } from '$app/environment'
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 { browser } from '$app/environment'; import { fade } from 'svelte/transition'
function clearCollection() { function clearCollection() {
if (browser) { if (browser) {
localStorage.collection = JSON.stringify([]); localStorage.collection = JSON.stringify([])
collectionStore.removeAll(); collectionStore.removeAll()
} }
boredState.update((n) => ({ ...n, dialog: { isOpen: false } })); boredState.update((n) => ({ ...n, dialog: { isOpen: false } }))
} }
$: isOpen = $boredState?.dialog?.isOpen; $: isOpen = $boredState?.dialog?.isOpen
</script> </script>
<!-- <Dialog <!-- <Dialog
@ -40,7 +40,7 @@
</div> </div>
<!-- </Dialog> --> <!-- </Dialog> -->
<style lang="scss"> <style lang="postcss">
.dialog { .dialog {
display: grid; display: grid;
gap: 1.5rem; gap: 1.5rem;

32
src/lib/components/dialog/RemoveCollectionDialog.svelte
View file

@ -1,32 +1,24 @@
<script lang="ts"> <script lang="ts">
import { fade } from 'svelte/transition'; import { browser } from '$app/environment'
// import { Button, buttonVariants } from '$components/ui/button'; // import { Button, buttonVariants } from '$components/ui/button';
import { Button, buttonVariants } from '$components/ui/button'; import { Button, buttonVariants } from '$components/ui/button'
import { import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '$components/ui/dialog'
Dialog, import { boredState } from '$lib/stores/boredState'
DialogContent, import { collectionStore } from '$lib/stores/collectionStore'
DialogDescription, import { removeFromCollection } from '$lib/utils/manipulateCollection'
DialogFooter, import { fade } from 'svelte/transition'
DialogHeader,
DialogTitle,
DialogTrigger
} from '$components/ui/dialog';
import { boredState } from '$lib/stores/boredState';
import { collectionStore } from '$lib/stores/collectionStore';
import { removeFromCollection } from '$lib/utils/manipulateCollection';
import { browser } from '$app/environment';
function removeGame() { function removeGame() {
if ($boredState?.dialog?.additionalData) { if ($boredState?.dialog?.additionalData) {
removeFromCollection($boredState?.dialog?.additionalData); removeFromCollection($boredState?.dialog?.additionalData)
} }
if (browser) { if (browser) {
localStorage.collection = JSON.stringify($collectionStore); localStorage.collection = JSON.stringify($collectionStore)
} }
boredState.update((n) => ({ ...n, dialog: { isOpen: false } })); boredState.update((n) => ({ ...n, dialog: { isOpen: false } }))
} }
$: isOpen = $boredState?.dialog?.isOpen; $: isOpen = $boredState?.dialog?.isOpen
</script> </script>
<Dialog modal={true}> <Dialog modal={true}>
@ -82,7 +74,7 @@
</div> </div>
</Dialog> --> </Dialog> -->
<style lang="scss"> <style lang="postcss">
.dialog { .dialog {
display: grid; display: grid;
gap: 1.5rem; gap: 1.5rem;

20
src/lib/components/dialog/RemoveWishlistDialog.svelte
View file

@ -1,27 +1,27 @@
<script lang="ts"> <script lang="ts">
import { fade } from 'svelte/transition'; import { browser } from '$app/environment'
// import { // import {
// Dialog, // Dialog,
// DialogDescription, // DialogDescription,
// DialogOverlay, // DialogOverlay,
// DialogTitle // DialogTitle
// } from '@rgossiaux/svelte-headlessui'; // } from '@rgossiaux/svelte-headlessui';
import { boredState } from '$lib/stores/boredState'; import { boredState } from '$lib/stores/boredState'
import { wishlistStore } from '$lib/stores/wishlistStore'; import { wishlistStore } from '$lib/stores/wishlistStore'
import { removeFromWishlist } from '$lib/utils/manipulateWishlist'; import { removeFromWishlist } from '$lib/utils/manipulateWishlist'
import { browser } from '$app/environment'; import { fade } from 'svelte/transition'
function removeGame() { function removeGame() {
if ($boredState?.dialog?.additionalData) { if ($boredState?.dialog?.additionalData) {
removeFromWishlist($boredState?.dialog?.additionalData); removeFromWishlist($boredState?.dialog?.additionalData)
} }
if (browser) { if (browser) {
localStorage.wishlist = JSON.stringify($wishlistStore); localStorage.wishlist = JSON.stringify($wishlistStore)
} }
boredState.update((n) => ({ ...n, dialog: { isOpen: false } })); boredState.update((n) => ({ ...n, dialog: { isOpen: false } }))
} }
$: isOpen = $boredState?.dialog?.isOpen; $: isOpen = $boredState?.dialog?.isOpen
</script> </script>
<!-- <Dialog <!-- <Dialog
@ -49,7 +49,7 @@
</div> </div>
<!-- </Dialog> --> <!-- </Dialog> -->
<style lang="scss"> <style lang="postcss">
.dialog { .dialog {
display: grid; display: grid;
gap: 1.5rem; gap: 1.5rem;

38
src/lib/components/pagination/index.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
// Based on https://carbon-components-svelte.onrender.com/components/Pagination // Based on https://carbon-components-svelte.onrender.com/components/Pagination
import { afterUpdate, createEventDispatcher } from 'svelte'; import { afterUpdate, createEventDispatcher } from 'svelte'
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition'
// import { // import {
// Listbox, // Listbox,
// ListboxButton, // ListboxButton,
@ -14,28 +14,28 @@
// ChevronRightIcon // ChevronRightIcon
// } from '@rgossiaux/svelte-heroicons/outline'; // } from '@rgossiaux/svelte-heroicons/outline';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher()
export let pageSize: number; // Reactive, bind export let pageSize: number // Reactive, bind
export let page: number = 1; // Reactive, bind export let page: number = 1 // Reactive, bind
export let totalItems: number; export let totalItems: number
export let showItemsLeft = false; export let showItemsLeft = false
export let pageSizeInputDisabled: boolean = false; export let pageSizeInputDisabled: boolean = false
export let pageSizes: ReadonlyArray<Number> = [10]; export let pageSizes: ReadonlyArray<Number> = [10]
export let forwardText: string; export let forwardText: string
export let backwardText: string; export let backwardText: string
export let disabled: boolean = false; export let disabled: boolean = false
afterUpdate(() => { afterUpdate(() => {
if (page > totalPages) { if (page > totalPages) {
page = totalPages; page = totalPages
} }
}); })
$: totalPages = Math.max(Math.ceil(totalItems / pageSize), 1); $: totalPages = Math.max(Math.ceil(totalItems / pageSize), 1)
$: backButtonDisabled = disabled || page === 1; $: backButtonDisabled = disabled || page === 1
$: forwardButtonDisabled = disabled || page === totalPages; $: forwardButtonDisabled = disabled || page === totalPages
$: itemsLeft = totalItems - page * pageSize >= 0 ? totalItems - page * pageSize : 0; $: itemsLeft = totalItems - page * pageSize >= 0 ? totalItems - page * pageSize : 0
</script> </script>
<div class="container"> <div class="container">
@ -108,7 +108,7 @@
</div> </div>
</div> </div>
<style lang="scss"> <style lang="postcss">
.container { .container {
display: flex; display: flex;
flex: wrap; flex: wrap;

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

@ -1,41 +1,41 @@
<script lang="ts"> <script lang="ts">
import { browser } from '$app/environment'; import { browser } from '$app/environment'
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 { ToastType } from '$lib/types'; import { ToastType } from '$lib/types'
// import { SaveIcon, ShareIcon, TrashIcon } from '@rgossiaux/svelte-heroicons/outline'; // import { SaveIcon, ShareIcon, TrashIcon } from '@rgossiaux/svelte-heroicons/outline';
import ClearCollectionDialog from '../dialog/ClearCollectionDialog.svelte'; import ClearCollectionDialog from '../dialog/ClearCollectionDialog.svelte'
import { toast } from '../toast/toast'; import { toast } from '../toast/toast'
function saveCollection() { function saveCollection() {
if (!browser) return; if (!browser) return
localStorage.collection = JSON.stringify($collectionStore); localStorage.collection = JSON.stringify($collectionStore)
toast.send('Saved collection', { duration: 3000, type: ToastType.INFO }); toast.send('Saved collection', { duration: 3000, type: ToastType.INFO })
} }
function exportCollection() { function exportCollection() {
if (!browser) return; if (!browser) return
const collectionBlob = new Blob([JSON.stringify($collectionStore)], { const collectionBlob = new Blob([JSON.stringify($collectionStore)], {
type: 'application/json;charset=utf-8' type: 'application/json;charset=utf-8',
}); })
let url = window.URL || window.webkitURL; let url = window.URL || window.webkitURL
let link = url.createObjectURL(collectionBlob); let link = url.createObjectURL(collectionBlob)
let a = document.createElement('a'); let a = document.createElement('a')
a.setAttribute('download', `collection.json`); a.setAttribute('download', `collection.json`)
a.setAttribute('href', link); a.setAttribute('href', link)
a.click(); a.click()
document.body.removeChild(a); document.body.removeChild(a)
toast.send('Exported collection', { duration: 3000, type: ToastType.INFO }); toast.send('Exported collection', { duration: 3000, type: ToastType.INFO })
} }
function clearCollection() { function clearCollection() {
if ($collectionStore.length > 0) { if ($collectionStore.length > 0) {
boredState.update((n) => ({ boredState.update((n) => ({
...n, ...n,
dialog: { isOpen: true, content: ClearCollectionDialog } dialog: { isOpen: true, content: ClearCollectionDialog },
})); }))
} else { } else {
toast.send('Nothing to clear', { duration: 3000, type: ToastType.ERROR }); toast.send('Nothing to clear', { duration: 3000, type: ToastType.ERROR })
} }
} }
</script> </script>
@ -61,7 +61,7 @@
</div> </div>
</div> </div>
<style lang="scss"> <style lang="postcss">
:global(.collection-title) { :global(.collection-title) {
padding-bottom: var(--spacing-8); padding-bottom: var(--spacing-8);
font-size: var(--font-24); font-size: var(--font-24);

48
src/lib/components/preferences/gameWishlist.svelte
View file

@ -1,41 +1,41 @@
<script lang="ts"> <script lang="ts">
import { browser } from '$app/environment'; import { browser } from '$app/environment'
import { boredState } from '$lib/stores/boredState'; import { boredState } from '$lib/stores/boredState'
import { wishlistStore } from '$lib/stores/wishlistStore'; import { wishlistStore } from '$lib/stores/wishlistStore'
import { ToastType } from '$lib/types'; import { ToastType } from '$lib/types'
// import { SaveIcon, ShareIcon, TrashIcon } from '@rgossiaux/svelte-heroicons/outline'; // import { SaveIcon, ShareIcon, TrashIcon } from '@rgossiaux/svelte-heroicons/outline';
import ClearWishlistDialog from '../dialog/ClearWishlistDialog.svelte'; import ClearWishlistDialog from '../dialog/ClearWishlistDialog.svelte'
import { toast } from '../toast/toast'; import { toast } from '../toast/toast'
function saveWishlist() { function saveWishlist() {
if (!browser) return; if (!browser) return
localStorage.wishlist = JSON.stringify($wishlistStore); localStorage.wishlist = JSON.stringify($wishlistStore)
toast.send('Saved wishlist', { duration: 3000, type: ToastType.INFO }); toast.send('Saved wishlist', { duration: 3000, type: ToastType.INFO })
} }
function exportWishlist() { function exportWishlist() {
if (!browser) return; if (!browser) return
const wishlistBlob = new Blob([JSON.stringify($wishlistStore)], { const wishlistBlob = new Blob([JSON.stringify($wishlistStore)], {
type: 'application/json;charset=utf-8' type: 'application/json;charset=utf-8',
}); })
let url = window.URL || window.webkitURL; let url = window.URL || window.webkitURL
let link = url.createObjectURL(wishlistBlob); let link = url.createObjectURL(wishlistBlob)
let a = document.createElement('a'); let a = document.createElement('a')
a.setAttribute('download', `wishlist.json`); a.setAttribute('download', `wishlist.json`)
a.setAttribute('href', link); a.setAttribute('href', link)
a.click(); a.click()
document.body.removeChild(a); document.body.removeChild(a)
toast.send('Exported wishlist', { duration: 3000, type: ToastType.INFO }); toast.send('Exported wishlist', { duration: 3000, type: ToastType.INFO })
} }
function clearWishlist() { function clearWishlist() {
if ($wishlistStore.length > 0) { if ($wishlistStore.length > 0) {
boredState.update((n) => ({ boredState.update((n) => ({
...n, ...n,
dialog: { isOpen: true, content: ClearWishlistDialog } dialog: { isOpen: true, content: ClearWishlistDialog },
})); }))
} else { } else {
toast.send('Nothing to clear', { duration: 3000, type: ToastType.ERROR }); toast.send('Nothing to clear', { duration: 3000, type: ToastType.ERROR })
} }
} }
</script> </script>
@ -61,7 +61,7 @@
</div> </div>
</div> </div>
<style lang="scss"> <style lang="postcss">
:global(.wishlist-title) { :global(.wishlist-title) {
padding-bottom: var(--spacing-8); padding-bottom: var(--spacing-8);
font-size: var(--font-24); font-size: var(--font-24);

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

@ -1,9 +1,9 @@
<script lang="ts"> <script lang="ts">
import { fade } from 'svelte/transition'; import cogOutline from '@iconify-icons/mdi/cog-outline'
import cogOutline from '@iconify-icons/mdi/cog-outline'; import { fade } from 'svelte/transition'
import Themes from './themes.svelte'; import GameCollection from './gameCollection.svelte'
import GameCollection from './gameCollection.svelte'; import GameWishlist from './gameWishlist.svelte'
import GameWishlist from './gameWishlist.svelte'; import Themes from './themes.svelte'
</script> </script>
<div class="container"> <div class="container">
@ -65,7 +65,7 @@
<!-- </Popover> --> <!-- </Popover> -->
</div> </div>
<style lang="scss"> <style lang="postcss">
.container { .container {
width: 24px; width: 24px;
height: 24px; height: 24px;

34
src/lib/components/random/index.svelte
View file

@ -1,18 +1,18 @@
<script lang="ts"> <script lang="ts">
import { boredState } from '$lib/stores/boredState'; import { toast } from '$lib/components/toast/toast'
import { gameStore } from '$lib/stores/gameSearchStore'; import { boredState } from '$lib/stores/boredState'
import { collectionStore } from '$lib/stores/collectionStore'; import { collectionStore } from '$lib/stores/collectionStore'
import { toast } from '$lib/components/toast/toast'; import { gameStore } from '$lib/stores/gameSearchStore'
import { ToastType, type SavedGameType } from '$lib/types'; import { type SavedGameType, ToastType } from '$lib/types'
import { mapSavedGameToGame } from '$lib/utils/gameMapper'; import { mapSavedGameToGame } from '$lib/utils/gameMapper'
async function getRandomCollectionGame() { async function getRandomCollectionGame() {
if ($collectionStore.length > 0) { if ($collectionStore.length > 0) {
boredState.update((n) => ({ ...n, loading: true })); boredState.update((n) => ({ ...n, loading: true }))
let randomNumber: number = Math.round(Math.random() * $collectionStore.length - 1); let randomNumber: number = Math.round(Math.random() * $collectionStore.length - 1)
if ($collectionStore.at(randomNumber)) { if ($collectionStore.at(randomNumber)) {
gameStore.removeAll(); gameStore.removeAll()
const randomGame: SavedGameType = $collectionStore.at(randomNumber)!; const randomGame: SavedGameType = $collectionStore.at(randomNumber)!
// const response = await fetch(`/api/game/${randomGame?.id}`, { // const response = await fetch(`/api/game/${randomGame?.id}`, {
// method: 'GET', // method: 'GET',
// headers: { accept: 'application/json' } // headers: { accept: 'application/json' }
@ -20,18 +20,18 @@
// const responseData = await response.json(); // const responseData = await response.json();
// console.log('responseData', responseData); // console.log('responseData', responseData);
// gameStore.add(responseData?.game); // gameStore.add(responseData?.game);
gameStore.add(mapSavedGameToGame(randomGame)); gameStore.add(mapSavedGameToGame(randomGame))
boredState.update((n) => ({ ...n, loading: false })); boredState.update((n) => ({ ...n, loading: false }))
} else { } else {
toast.send('Error!', { duration: 3000, type: ToastType.ERROR, dismissible: true }); toast.send('Error!', { duration: 3000, type: ToastType.ERROR, dismissible: true })
} }
boredState.update((n) => ({ ...n, loading: false })); boredState.update((n) => ({ ...n, loading: false }))
} else { } else {
toast.send('No items in your collection!', { toast.send('No items in your collection!', {
duration: 3000, duration: 3000,
type: ToastType.ERROR, type: ToastType.ERROR,
dismissible: true dismissible: true,
}); })
} }
} }
</script> </script>
@ -40,7 +40,7 @@
>Random from collection 🎲</button >Random from collection 🎲</button
> >
<style lang="scss"> <style lang="postcss">
button { button {
max-width: 450px; max-width: 450px;
padding: var(--spacing-8) var(--spacing-16); padding: var(--spacing-8) var(--spacing-16);

24
src/lib/components/search/advancedSearch/index.svelte
View file

@ -1,17 +1,17 @@
<script lang="ts"> <script lang="ts">
import { boredState } from '$lib/stores/boredState'; import { boredState } from '$lib/stores/boredState'
export let form; export let form
export let errors; export let errors
export let constraints; export let constraints
console.log('advanced search data', $form); console.log('advanced search data', $form)
let submitting = $boredState?.loading; let submitting = $boredState?.loading
let minAge = +$form?.minAge || 1; let minAge = +$form?.minAge || 1
let minPlayers = +$form?.minPlayers || 1; let minPlayers = +$form?.minPlayers || 1
let maxPlayers = +$form?.maxPlayers || 1; let maxPlayers = +$form?.maxPlayers || 1
let exactMinPlayers = Boolean($form?.exactMinPlayers) || false; let exactMinPlayers = Boolean($form?.exactMinPlayers) || false
let exactMaxPlayers = Boolean($form?.exactMaxPlayers) || false; let exactMaxPlayers = Boolean($form?.exactMaxPlayers) || false
</script> </script>
<fieldset class="advanced-search" aria-busy={submitting} disabled={submitting}> <fieldset class="advanced-search" aria-busy={submitting} disabled={submitting}>
@ -90,7 +90,7 @@
</div> </div>
</fieldset> </fieldset>
<style lang="scss"> <style lang="postcss">
fieldset { fieldset {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);

30
src/lib/components/search/random/index.svelte
View file

@ -1,23 +1,23 @@
<script lang="ts"> <script lang="ts">
import type { SuperValidated } from 'sveltekit-superforms/index'; import { Button } from '$components/ui/button'
import type { SearchSchema } from '$lib/zodValidation'; import { boredState } from '$lib/stores/boredState'
import { boredState } from '$lib/stores/boredState'; import { gameStore } from '$lib/stores/gameSearchStore'
import { gameStore } from '$lib/stores/gameSearchStore'; import type { SearchSchema } from '$lib/zodValidation'
import { superForm } from 'sveltekit-superforms/client'; import { superForm } from 'sveltekit-superforms/client'
import { Button } from '$components/ui/button'; import type { SuperValidated } from 'sveltekit-superforms/index'
export let data: SuperValidated<SearchSchema>; export let data: SuperValidated<SearchSchema>
const { enhance } = superForm(data, { const { enhance } = superForm(data, {
onSubmit: () => { onSubmit: () => {
gameStore.removeAll(); gameStore.removeAll()
boredState.update((n) => ({ ...n, loading: true })); boredState.update((n) => ({ ...n, loading: true }))
}, },
onResult: ({ result, formEl, cancel }) => { onResult: ({ result, formEl, cancel }) => {
boredState.update((n) => ({ ...n, loading: false })); boredState.update((n) => ({ ...n, loading: false }))
if (result.type === 'success') { if (result.type === 'success') {
gameStore.addAll(result?.data?.searchData?.games); gameStore.addAll(result?.data?.searchData?.games)
} else { } else {
cancel(); cancel()
} }
}, },
// onUpdated: ({ form }) => { // onUpdated: ({ form }) => {
@ -29,9 +29,9 @@
// }); // });
// } // }
// } // }
}); })
let submitting = $boredState?.loading; let submitting = $boredState?.loading
</script> </script>
<form <form
@ -45,7 +45,7 @@
</fieldset> </fieldset>
</form> </form>
<style lang="scss"> <style lang="postcss">
fieldset { fieldset {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);

12
src/lib/components/toast/Toast.svelte
View file

@ -1,9 +1,9 @@
<script lang="ts"> <script lang="ts">
import { fly, fade } from 'svelte/transition'; import Portal from '$lib/Portal.svelte'
import { flip } from 'svelte/animate'; import { flip } from 'svelte/animate'
import Portal from '$lib/Portal.svelte'; import { fade, fly } from 'svelte/transition'
import ToastMessage from './ToastMessage.svelte'; import ToastMessage from './ToastMessage.svelte'
import { toast } from './toast'; import { toast } from './toast'
</script> </script>
<Portal> <Portal>
@ -48,7 +48,7 @@
</div> </div>
</Portal> </Portal>
<style lang="scss"> <style lang="postcss">
.toast-wrapper { .toast-wrapper {
display: flex; display: flex;
flex-flow: column; flex-flow: column;

20
src/routes/(app)/game/[id]/+page.svelte
View file

@ -1,15 +1,15 @@
<script lang="ts"> <script lang="ts">
import { Image } from 'svelte-lazy-loader'; import AddToList from '$components/AddToList.svelte'
import { Dices, ExternalLinkIcon, MinusIcon, PlusIcon } from 'lucide-svelte'; import Badge from '$components/ui/badge/badge.svelte'
import type { PageData } from './$types'; import { Button } from '$components/ui/button'
import { Button } from '$components/ui/button'; import { Dices, ExternalLinkIcon, MinusIcon, PlusIcon } from 'lucide-svelte'
import AddToList from '$components/AddToList.svelte'; import { Image } from 'svelte-lazy-loader'
import Badge from '$components/ui/badge/badge.svelte'; import type { PageData } from './$types'
const { data } = $props(); const { data } = $props()
const { game, user, in_collection, in_wishlist } = data; const { game, user, in_collection, in_wishlist } = data
let seeMore: boolean = $state(false); let seeMore: boolean = $state(false)
</script> </script>
<svelte:head> <svelte:head>
@ -111,7 +111,7 @@
</ul> </ul>
</section> </section>
<style lang="scss"> <style lang="postcss">
h2 { h2 {
text-align: center; text-align: center;
font-size: 2.5rem; font-size: 2.5rem;