Adding logic start for exact search.

package.json

@@ -2,7 +2,7 @@
   "name": "boredgame",
   "version": "0.0.1",
   "scripts": {
-    "dev": "svelte-kit dev",
+    "dev": "svelte-kit dev --host",
     "build": "svelte-kit build",
     "package": "svelte-kit package",
     "preview": "svelte-kit preview",

src/routes/api/games/index.ts

@@ -6,18 +6,57 @@ export const post: RequestHandler = async ({ request }) => {
   const queryParams : SearchQuery = {
     order_by: 'rank',
     ascending: false,
-    limit: 20,
+    limit: 2,
     client_id: import.meta.env.VITE_PUBLIC_CLIENT_ID,
   }
 
   const minAge = form.get('minAge');
   const minPlayers = form.get('minPlayers');
   const maxPlayers = form.get('maxPlayers');
+  const exactMinAge = form.get('exactMinAge') === 'on' || false;
+  const exactMinPlayers = form.get('exactMinPlayers') === 'on' || false;
+  const exactMaxPlayers = form.get('exactMaxPlayers') === 'on' || false;
   const random = form.get('random') === 'on' || false;
   
-  if (minPlayers) queryParams.gt_min_players = (+minPlayers === 1 ? 0 : (+minPlayers - 1));
+  console.log("form.get('minAge')", form.get('minAge'));
-  if (maxPlayers) queryParams.lt_max_players = +maxPlayers + 1;
+  console.log("form.get('minPlayers')", form.get('minPlayers'));
-  if (minAge) queryParams.gt_min_age = +minAge === 1 ? 0 : +minAge - 1;
+  console.log("form.get('maxPlayers')", form.get('maxPlayers'));
+  console.log("form.get('exactMinAge')", form.get('exactMinAge'));
+  console.log("form.get('exactMinPlayers')", form.get('exactMinPlayers'));
+  console.log("form.get('exactMaxPlayers')", form.get('exactMaxPlayers'));
+  console.log("form.get('random')", form.get('random'));
+
+  console.log('minAge',minAge);
+  console.log('minPlayers',minPlayers);
+  console.log('maxPlayers',maxPlayers);
+  console.log('exactMinAge',exactMinAge);
+  console.log('exactMinPlayers',exactMinPlayers);
+  console.log('exactMaxPlayers',exactMaxPlayers);
+  console.log('random',random);
+
+  if (minAge) {
+    if (exactMinAge) {
+      queryParams.min_age = +minAge;
+    } else {
+      queryParams.gt_min_age = +minAge === 1 ? 0 : +minAge - 1;
+    }
+  }
+
+  if (minPlayers) {
+    if (exactMinPlayers) {
+      queryParams.min_players = +minPlayers;
+    } else {
+      queryParams.gt_min_players = (+minPlayers === 1 ? 0 : (+minPlayers - 1));
+    }
+  }
+
+  if (maxPlayers) {
+    if (exactMaxPlayers) {
+      queryParams.max_players = +maxPlayers;
+    } else {
+      queryParams.lt_max_players = +maxPlayers + 1;
+    }
+  }
   queryParams.random = random;
 
   const newQueryParams = {};

src/routes/games/index.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Game } from "$lib/types";
-import { Checkbox, NumberInput, Tooltip } from "carbon-components-svelte";
+import { Checkbox, NumberInput } from "carbon-components-svelte";
   // import { enhance } from "$lib/form";
 
   let games: Game[] = [];
@@ -9,6 +9,7 @@ import { Checkbox, NumberInput, Tooltip } from "carbon-components-svelte";
   async function handleSubmit(event: SubmitEvent) {
     submitting = true;
     const form = event.target as HTMLFormElement;
+    console.log('form', form);
     const response = await fetch('/api/games', {
       method: 'post',
       headers: { accept: 'application/json' },
@@ -22,6 +23,9 @@ import { Checkbox, NumberInput, Tooltip } from "carbon-components-svelte";
   let minAge = 0;
 	let minPlayers = 1;
 	let maxPlayers = 1;
+  let exactMinAge = false;
+  let exactMinPlayers = false;
+  let exactMaxPlayers = false;
 </script>
 
 
@@ -29,6 +33,11 @@ import { Checkbox, NumberInput, Tooltip } from "carbon-components-svelte";
 	<title>Games</title>
 </svelte:head>
 
+<h1>Search Boardgames!</h1>
+
+<section>
+  <p>Input your requirements to search for board game that match your criteria</p>
+</section>
 <div class="game-form">
   <form on:submit|preventDefault={handleSubmit} method="post">
     <fieldset aria-busy={submitting} disabled={submitting}>
@@ -41,7 +50,7 @@ import { Checkbox, NumberInput, Tooltip } from "carbon-components-svelte";
           invalidText="Number must be between 0 and 120"
           label="Min Age"
         />
-        <Checkbox name="exactMinAge" labelText="Exact?" />
+        <Checkbox name="exactMinAge" labelText="Search exact?" bind:checked={exactMinAge} />
       </div>
       <div>
         <NumberInput
@@ -52,14 +61,7 @@ import { Checkbox, NumberInput, Tooltip } from "carbon-components-svelte";
           invalidText="Number must be between 1 and 50"
           label="Min Players"
         />
-        <div>
+        <Checkbox name="exactMinPlayers" labelText="Search exact?" bind:checked={exactMinPlayers} />
-        <Checkbox name="exactMinPlayers" labelText="Exact?" />
-        <Tooltip>
-          <p id="tooltip-body">
-            Resources are provisioned based on your account's organization.
-          </p>
-        </Tooltip>
-        </div>
       </div>
       <div>
         <NumberInput
@@ -70,7 +72,7 @@ import { Checkbox, NumberInput, Tooltip } from "carbon-components-svelte";
           invalidText="Number must be between 1 and 50"
           label="Max Players"
         />
-        <Checkbox name="exactMaxPlayers" labelText="Exact?" />
+        <Checkbox name="exactMaxPlayers" labelText="Search exact?" bind:checked={exactMaxPlayers} />
       </div>
     </fieldset>
     <button type="submit" disabled={submitting}>Submit</button>