Adding svelte query store and rendering different numbers of skeleton games.

package.json

@@ -45,6 +45,7 @@
     "@types/feather-icons": "^4.7.0",
     "cookie": "^0.5.0",
     "feather-icons": "^4.29.0",
+    "svelte-media-query-store": "^1.0.0",
     "zod": "^3.19.1",
     "zod-to-json-schema": "^3.18.1"
   }

pnpm-lock.yaml

@@ -26,6 +26,7 @@ specifiers:
   sass: ^1.55.0
   svelte: ^3.52.0
   svelte-check: ^2.9.2
+  svelte-media-query-store: ^1.0.0
   svelte-preprocess: ^4.10.7
   tslib: ^2.4.1
   typescript: ^4.8.4
@@ -41,6 +42,7 @@ dependencies:
   '@types/feather-icons': 4.7.0
   cookie: 0.5.0
   feather-icons: 4.29.0
+  svelte-media-query-store: 1.0.0
   zod: 3.19.1
   zod-to-json-schema: 3.18.1_zod@3.19.1
 
@@ -2279,6 +2281,16 @@ packages:
       svelte: 3.52.0
     dev: true
 
+  /svelte-media-query-store/0.0.3:
+    resolution: {integrity: sha512-LxM2AEyE4BqVHNdEb8aZOwcSf5oyJcZWSRlSkQPxnQyp6ytGwQs3gsmaZ1udEBeL7jHldWwNrbaFwAG5W7eTXw==}
+    dev: false
+
+  /svelte-media-query-store/1.0.0:
+    resolution: {integrity: sha512-Mm7Aq04xrdW9XVA7jjR8nPvYdWf3oAz5QJYvwAno/wKgLbbjA5E1nfCvOu1dG85UhvM62u5Q/lfQI2ByKU37rg==}
+    dependencies:
+      svelte-media-query-store: 0.0.3
+    dev: false
+
   /svelte-preprocess/4.10.7_q7oepo4r57y5enzswpidbbgzsy:
     resolution: {integrity: sha512-sNPBnqYD6FnmdBrUmBCaqS00RyCsCpj2BG58A1JBswNF7b0OKviwxqVrOL/CKyJrLSClrSeqQv5BXNg2RUbPOw==}
     engines: {node: '>= 9.11.2'}

src/app.postcss

@@ -0,0 +1,111 @@
+/* Write your global styles here, in PostCSS syntax */
+
+@import '@fontsource/fira-mono';
+
+:root {
+	font-family: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+		Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+	--font-mono: 'Fira Mono', monospace;
+	--pure-white: #ffffff;
+	--primary-color: #b9c6d2;
+	--secondary-color: #d0dde9;
+	--tertiary-color: #edf0f8;
+	--accent-color: #ff3e00;
+	--heading-color: rgba(0, 0, 0, 0.7);
+	--text-color: #444444;
+	--background-without-opacity: rgba(255, 255, 255, 0.7);
+	--column-width: 42rem;
+	--column-margin-top: 4rem;
+	--z-highest: 100;
+	--cardBorderRadius: 12px;
+}
+
+body {
+	min-height: 100vh;
+	margin: 0;
+	background-color: var(--primary-color);
+	background: linear-gradient(
+		180deg,
+		var(--primary-color) 0%,
+		var(--secondary-color) 10.45%,
+		var(--tertiary-color) 41.35%
+	);
+}
+
+body::before {
+	content: '';
+	width: 80vw;
+	height: 100vh;
+	position: absolute;
+	top: 0;
+	left: 10vw;
+	z-index: -1;
+	background: radial-gradient(
+		50% 50% at 50% 50%,
+		var(--pure-white) 0%,
+		rgba(255, 255, 255, 0) 100%
+	);
+	opacity: 0.05;
+}
+
+#svelte {
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+}
+
+h1,
+h2,
+p {
+	font-weight: 400;
+	color: var(--heading-color);
+}
+
+p {
+	line-height: 1.5;
+}
+
+a {
+	color: var(--accent-color);
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+h1 {
+	font-size: 2rem;
+	text-align: center;
+}
+
+h2 {
+	font-size: 1rem;
+}
+
+pre {
+	font-size: 16px;
+	font-family: var(--font-mono);
+	background-color: rgba(255, 255, 255, 0.45);
+	border-radius: 3px;
+	box-shadow: 2px 2px 6px rgb(255 255 255 / 25%);
+	padding: 0.5em;
+	overflow-x: auto;
+	color: var(--text-color);
+}
+
+input,
+button {
+	font-size: inherit;
+	font-family: inherit;
+}
+
+button:focus:not(:focus-visible) {
+	outline: none;
+}
+
+@media (min-width: 720px) {
+	h1 {
+		font-size: 2.4rem;
+	}
+}

src/lib/stores/mediaQueryStore.ts

@@ -0,0 +1,13 @@
+import { mediaQueryStore } from 'svelte-media-query-store';
+
+export const xs = mediaQueryStore('(min-width: 480px');
+
+export const sm = mediaQueryStore('(min-width: 640px');
+
+export const md = mediaQueryStore('(min-width: 768px)');
+
+export const lg = mediaQueryStore('(min-width: 1024px)');
+
+export const xl = mediaQueryStore('(min-width: 1280px)');
+
+export const xxl = mediaQueryStore('(min-width: 1536px)');

src/routes/+layout.svelte

@@ -54,7 +54,15 @@
 {/if}
 
 {#if dev}
-	<Toy register={{ boredState, collectionStore, wishlistStore, gameStore, toast }} />
+	<Toy
+		register={{
+			boredState,
+			collectionStore,
+			wishlistStore,
+			gameStore,
+			toast
+		}}
+	/>
 {/if}
 
 <Transition transition={{ type: 'fade', duration: 250 }}>

src/routes/+page.svelte

@@ -13,6 +13,7 @@
 	import Pagination from '$lib/components/pagination/index.svelte';
 	import RemoveWishlistDialog from '$root/lib/components/dialog/RemoveWishlistDialog.svelte';
 	import SkeletonPlaceholder from '$root/lib/components/SkeletonPlaceholder.svelte';
+	import { lg, md, sm, xl } from '$root/lib/stores/mediaQueryStore';
 
 	export let data: PageData;
 	export let form: ActionData;
@@ -21,6 +22,15 @@
 	let pageSize: number;
 	let currentPage: number;
 	let submitting = $boredState?.loading;
+	let numberOfGameSkeleton = 1;
+	if (xl) {
+		numberOfGameSkeleton = 8;
+	} else if (md) {
+		numberOfGameSkeleton = 3;
+	} else {
+		numberOfGameSkeleton = 1;
+	}
+
 	console.log({ submitting });
 
 	$: totalItems = 0;
@@ -150,7 +160,7 @@
 	<div class="games">
 		<h1>Games Found:</h1>
 		<div class="games-list">
-			{#each [1, 2, 3, 4] as game, i}
+			{#each [...Array(numberOfGameSkeleton).keys()] as game, i}
 				<SkeletonPlaceholder
 					style="width: 100%; height: 500px; border-radius: var(--borderRadius);"
 				/>