From 704ae0a541af246b9db23d12bd3eb631af19ca17 Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@pm.me>
Date: Thu, 10 Nov 2022 14:08:57 -0600
Subject: [PATCH] Adding media query plugin for showing skeletons and lazy
 image loading plugin.

---
 package.json                                  |  1 +
 pnpm-lock.yaml                                |  6 +++++
 src/lib/components/game/index.svelte          | 11 ++++++++--
 .../search/advancedSearch/index.svelte        |  3 ---
 src/lib/components/search/random/index.svelte |  1 -
 .../components/search/textSearch/index.svelte | 22 +++++++++++++++----
 src/routes/+page.svelte                       |  7 ------
 src/routes/collection/+page.svelte            |  1 -
 src/routes/game/[id]/+page.svelte             |  4 +++-
 src/routes/search/+page.server.ts             |  5 +++--
 src/routes/wishlist/+page.svelte              |  1 -
 11 files changed, 40 insertions(+), 22 deletions(-)

diff --git a/package.json b/package.json
index 889dc5a..3b56ec7 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
     "@types/feather-icons": "^4.7.0",
     "cookie": "^0.5.0",
     "feather-icons": "^4.29.0",
+    "svelte-lazy-loader": "^1.0.0",
     "svelte-media-query-store": "^1.0.0",
     "zod": "^3.19.1",
     "zod-to-json-schema": "^3.18.1"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 43f57e9..fe79bf8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,6 +26,7 @@ specifiers:
   sass: ^1.56.0
   svelte: ^3.52.0
   svelte-check: ^2.9.2
+  svelte-lazy-loader: ^1.0.0
   svelte-media-query-store: ^1.0.0
   svelte-preprocess: ^4.10.7
   tslib: ^2.4.1
@@ -42,6 +43,7 @@ dependencies:
   '@types/feather-icons': 4.7.0
   cookie: 0.5.0
   feather-icons: 4.29.0
+  svelte-lazy-loader: 1.0.0
   svelte-media-query-store: 1.0.0
   zod: 3.19.1
   zod-to-json-schema: 3.18.1_zod@3.19.1
@@ -2281,6 +2283,10 @@ packages:
       svelte: 3.52.0
     dev: true
 
+  /svelte-lazy-loader/1.0.0:
+    resolution: {integrity: sha512-AZD6R60vksyojn21FgXLglmBiBB9K5Dkdu0hdGrLbCaRCYT68IsWkZfRUqKhMx1IfzqWcZQ8X9y/f+Ih0oNQkQ==}
+    dev: false
+
   /svelte-media-query-store/0.0.3:
     resolution: {integrity: sha512-LxM2AEyE4BqVHNdEb8aZOwcSf5oyJcZWSRlSkQPxnQyp6ytGwQs3gsmaZ1udEBeL7jHldWwNrbaFwAG5W7eTXw==}
     dev: false
diff --git a/src/lib/components/game/index.svelte b/src/lib/components/game/index.svelte
index 04346a8..ee19148 100644
--- a/src/lib/components/game/index.svelte
+++ b/src/lib/components/game/index.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
+	import { Image } from 'svelte-lazy-loader';
 	import { fade } from 'svelte/transition';
 	import { MinusCircleIcon, PlusCircleIcon } from '@rgossiaux/svelte-heroicons/outline';
 	import type { GameType, SavedGameType } from '$lib/types';
@@ -46,8 +47,14 @@
 
 <article class="game-container" transition:fade>
 	<h2>{game.name}</h2>
-	<a class="thumbnail" href={`/game/${game.id}`}>
-		<img src={game.thumb_url} alt={`Image of ${game.name}`} />
+	<a
+		class="thumbnail"
+		href={`/game/${game.id}`}
+		title={`View ${game.name}`}
+		data-sveltekit-prefetch
+	>
+		<Image src={game.thumb_url} alt={`Image of ${game.name}`} />
+		<!-- <img src={game.thumb_url} alt={`Image of ${game.name}`} /> -->
 		<!-- loading="lazy" decoding="async" -->
 	</a>
 
diff --git a/src/lib/components/search/advancedSearch/index.svelte b/src/lib/components/search/advancedSearch/index.svelte
index 5e1738c..e15920b 100644
--- a/src/lib/components/search/advancedSearch/index.svelte
+++ b/src/lib/components/search/advancedSearch/index.svelte
@@ -3,7 +3,6 @@
 	import { boredState } from '$lib/stores/boredState';
 
 	export let form: ActionData;
-	console.log('advanced search form data', form);
 	let submitting = $boredState?.loading;
 	let minAge = +form?.minAge || 1;
 	let minPlayers = +form?.minPlayers || 1;
@@ -78,9 +77,7 @@
 		{/if}
 	</div>
 </fieldset>
-<!-- <button type="submit" disabled={submitting}>Submit</button> -->
 
-<!-- </form> -->
 <style lang="scss">
 	fieldset {
 		display: grid;
diff --git a/src/lib/components/search/random/index.svelte b/src/lib/components/search/random/index.svelte
index 3bbf014..d81dab5 100644
--- a/src/lib/components/search/random/index.svelte
+++ b/src/lib/components/search/random/index.svelte
@@ -35,7 +35,6 @@
 		boredState.update((n) => ({ ...n, loading: true }));
 		return async ({ result }) => {
 			boredState.update((n) => ({ ...n, loading: false }));
-			// console.log('result main page search', result);
 			// `result` is an `ActionResult` object
 			if (result.type === 'success') {
 				// console.log('In success');
diff --git a/src/lib/components/search/textSearch/index.svelte b/src/lib/components/search/textSearch/index.svelte
index 7f86621..c7e10c3 100644
--- a/src/lib/components/search/textSearch/index.svelte
+++ b/src/lib/components/search/textSearch/index.svelte
@@ -4,6 +4,7 @@
 	import { fade } from 'svelte/transition';
 	import { Disclosure, DisclosureButton, DisclosurePanel } from '@rgossiaux/svelte-headlessui';
 	import { ChevronRightIcon } from '@rgossiaux/svelte-heroicons/solid';
+	import { xl, md } from '$lib/stores/mediaQueryStore';
 	import { boredState } from '$lib/stores/boredState';
 	import AdvancedSearch from '$lib/components/search/advancedSearch/index.svelte';
 	import { applyAction, enhance } from '$app/forms';
@@ -34,13 +35,25 @@
 	let pageSize = 10;
 	let page = +form?.data?.page || 1;
 	let totalItems = form?.totalCount || data?.totalCount || 0;
+	let submitting = $boredState?.loading;
+	let name = form?.name || '';
+	let disclosureOpen = false;
+
 	$: skip = (page - 1) * pageSize;
 	$: console.log('submit button', submitButton);
 	$: showPagination = $gameStore?.length > 1;
 
-	let submitting = $boredState?.loading;
-	let name = form?.name || '';
-	let disclosureOpen = false;
+	if ($xl) {
+		numberOfGameSkeleton = 8;
+	} else if ($md) {
+		numberOfGameSkeleton = 3;
+	} else {
+		numberOfGameSkeleton = 1;
+	}
+
+	let placeholderList = [...Array(numberOfGameSkeleton).keys()];
+	console.log(placeholderList);
+
 	if (form?.error) {
 		disclosureOpen = true;
 	}
@@ -95,6 +108,7 @@
 	action="/search"
 	method="post"
 	use:enhance={() => {
+		gameStore.removeAll();
 		boredState.update((n) => ({ ...n, loading: true }));
 		return async ({ result }) => {
 			boredState.update((n) => ({ ...n, loading: false }));
@@ -200,7 +214,7 @@
 	<div class="games">
 		<h1>Games Found:</h1>
 		<div class="games-list">
-			{#each [...Array(numberOfGameSkeleton).keys()] as game, i}
+			{#each placeholderList as game, i}
 				<SkeletonPlaceholder
 					style="width: 100%; height: 500px; border-radius: var(--borderRadius);"
 				/>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 51744fd..ecada71 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -6,13 +6,6 @@
 
 	export let data: PageData;
 	export let form: ActionData;
-	// if ($xl) {
-	// 	numberOfGameSkeleton = 8;
-	// } else if ($md) {
-	// 	numberOfGameSkeleton = 3;
-	// } else {
-	// 	numberOfGameSkeleton = 1;
-	// }
 </script>
 
 <svelte:head>
diff --git a/src/routes/collection/+page.svelte b/src/routes/collection/+page.svelte
index 6487115..bcae230 100644
--- a/src/routes/collection/+page.svelte
+++ b/src/routes/collection/+page.svelte
@@ -55,7 +55,6 @@
 	}
 
 	async function handlePerPageEvent(event: CustomEvent) {
-		console.log('Per Page Event called', event.detail);
 		page = 1;
 		pageSize = event.detail.pageSize;
 		await tick();
diff --git a/src/routes/game/[id]/+page.svelte b/src/routes/game/[id]/+page.svelte
index a4b59b6..49a0652 100644
--- a/src/routes/game/[id]/+page.svelte
+++ b/src/routes/game/[id]/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { fade, fly } from 'svelte/transition';
+	import { Image } from 'svelte-lazy-loader';
 	import {
 		ExternalLinkIcon,
 		MinusCircleIcon,
@@ -57,7 +58,8 @@
 <section class="game">
 	<div>
 		<a class="thumbnail" href={game.url}>
-			<img src={game.image_url} alt={`Image of ${game.name}`} />
+			<Image src={game.thumb_url} alt={`Image of ${game.name}`} />
+			<!-- <img src={game.image_url} alt={`Image of ${game.name}`} /> -->
 		</a>
 	</div>
 	<div style="display: grid; place-items: center; gap: 2rem;">
diff --git a/src/routes/search/+page.server.ts b/src/routes/search/+page.server.ts
index afcac2b..5edf651 100644
--- a/src/routes/search/+page.server.ts
+++ b/src/routes/search/+page.server.ts
@@ -58,9 +58,10 @@ export const actions: Actions = {
       if (minPlayers && maxPlayers) {
         if (+minPlayers > +maxPlayers) {
           return invalid(400, { minPlayers, error: { id: 'minPlayers', message: 'Min must be less than max' } });
-        } else if (maxPlayers < minPlayers) {
-          return invalid(400, { maxPlayers, error: { id: 'maxPlayers', message: 'Max must be greater than min' } });
         }
+        // else if (+maxPlayers < +minPlayers) {
+        //   return invalid(400, { maxPlayers, error: { id: 'maxPlayers', message: 'Max must be greater than min' } });
+        // }
         if (exactMinPlayers) {
           queryParams.min_players = +minPlayers;
         } else {
diff --git a/src/routes/wishlist/+page.svelte b/src/routes/wishlist/+page.svelte
index 60d0e3a..1926a3a 100644
--- a/src/routes/wishlist/+page.svelte
+++ b/src/routes/wishlist/+page.svelte
@@ -51,7 +51,6 @@
 	}
 
 	async function handlePerPageEvent(event: CustomEvent) {
-		console.log('Per Page Event called', event.detail);
 		page = 1;
 		pageSize = event.detail.pageSize;
 		await tick();