Merge pull request #29 from BradNut/development

Replace scss with postcss.

src/lib/components/Checkbox.svelte

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

src/lib/components/SkeletonPlaceholder.svelte

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

src/lib/components/dialog/ClearCollectionDialog.svelte

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

src/lib/components/dialog/RemoveCollectionDialog.svelte

@@ -1,32 +1,24 @@
 <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 {
-		Dialog,
-		DialogContent,
-    DialogDescription,
-    DialogFooter,
-    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';
+import { Button, buttonVariants } from '$components/ui/button'
+import { Dialog, DialogContent, DialogDescription, DialogFooter, 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 { fade } from 'svelte/transition'
 
 function removeGame() {
 	if ($boredState?.dialog?.additionalData) {
-			removeFromCollection($boredState?.dialog?.additionalData);
+		removeFromCollection($boredState?.dialog?.additionalData)
 	}
 	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>
 
 <Dialog modal={true}>
@@ -82,7 +74,7 @@
 	</div>
 </Dialog> -->
 
-<style lang="scss">
+<style lang="postcss">
 	.dialog {
 		display: grid;
 		gap: 1.5rem;

src/lib/components/dialog/RemoveWishlistDialog.svelte

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

src/lib/components/pagination/index.svelte

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

src/lib/components/preferences/gameCollection.svelte

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

src/lib/components/preferences/gameWishlist.svelte

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

src/lib/components/preferences/profile.svelte

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

src/lib/components/random/index.svelte

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

src/lib/components/search/advancedSearch/index.svelte

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

src/lib/components/search/random/index.svelte

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

src/lib/components/toast/Toast.svelte

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

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

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