feat: ✨ Search for board game and remove box shadow on header.

src/lib/components/header/Header.svelte

@@ -35,7 +35,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    box-shadow: var(--level-2);
+    /* box-shadow: var(--level-2); */
     padding: 0 var(--containerPadding);
     font-size: 1.6rem;
 

src/lib/components/loading.svelte

@@ -1,10 +1,20 @@
-<div class="loadingio-spinner-cube-ndtzkv0srwf"><div class="ldio-t5osv9zw79">
-  <div></div><div></div><div></div><div></div>
-  </div></div>
-  <style type="text/css">
+<div class="loadingio-spinner-cube-ndtzkv0srwf">
+  <div class="ldio-t5osv9zw79">
+    <div />
+    <div />
+    <div />
+    <div />
+  </div>
+</div>
+
+<style lang="css">
   @keyframes ldio-t5osv9zw79 {
-    0% { transform: scale(1.1500000000000001) }
-    100% { transform: scale(1) }
+    0% {
+      transform: scale(1.1500000000000001);
+    }
+    100% {
+      transform: scale(1);
+    }
   }
   .ldio-t5osv9zw79 div {
     position: absolute;
@@ -13,7 +23,7 @@
     top: 13.333333333333336px;
     left: 13.333333333333336px;
     background: #e15b64;
-    animation: ldio-t5osv9zw79 1s cubic-bezier(0,0.5,0.5,1) infinite;
+    animation: ldio-t5osv9zw79 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
     animation-delay: -0.3s;
   }
   .ldio-t5osv9zw79 div:nth-child(2) {
@@ -49,6 +59,8 @@
     backface-visibility: hidden;
     transform-origin: 0 0; /* see note above */
   }
-  .ldio-t5osv9zw79 div { box-sizing: content-box; }
+  .ldio-t5osv9zw79 div {
+    box-sizing: content-box;
+  }
   /* generated by https://loading.io/ */
-  </style>
+</style>

src/routes/api/game/index.ts

@@ -0,0 +1,60 @@
+import type { RequestHandler } from '@sveltejs/kit';
+import type { SearchQuery } from '$lib/types';
+
+export const POST: RequestHandler = async ({ request }) => {
+  const form = await request.formData();
+  console.log('form', form);
+  const queryParams: SearchQuery = {
+    order_by: 'rank',
+    ascending: false,
+    limit: 20,
+    client_id: import.meta.env.VITE_PUBLIC_CLIENT_ID,
+    fuzzy_match: true,
+    name: '',
+  };
+
+  queryParams.name = `${form.get('name')}`;
+
+  const newQueryParams = {};
+  for (const key in queryParams) {
+    console.log('key', key);
+    console.log('queryParams[key]', queryParams[key]);
+    newQueryParams[key] = `${queryParams[key]}`;
+  }
+
+  const urlQueryParams = new URLSearchParams(newQueryParams);
+
+  const url = `https://api.boardgameatlas.com/api/search${urlQueryParams ? `?${urlQueryParams}` : ''
+    }`;
+  const response = await fetch(url, {
+    method: 'get',
+    headers: {
+      'content-type': 'application/json'
+    }
+  });
+  console.log('response', response);
+  if (response.status === 404) {
+    // user hasn't created a todo list.
+    // start with an empty array
+    return {
+      body: {
+        games: []
+      }
+    };
+  }
+
+  if (response.status === 200) {
+    const gameResponse = await response.json();
+    const games = gameResponse?.games;
+    console.log('games', games);
+    return {
+      body: {
+        games: gameResponse?.games
+      }
+    };
+  }
+
+  return {
+    status: response.status
+  };
+};

src/routes/index.svelte

@@ -8,6 +8,7 @@
   import Portal from '$lib/Portal.svelte';
   import { gameStore } from '$lib/stores/gameSearchStore';
   import { boredState } from '$lib/stores/boredState';
+  import { Checkbox } from 'carbon-components-svelte';
   // import { enhance } from "$lib/form";
 
   // let games: GameType[] = [];
@@ -31,6 +32,23 @@
     // games = responseData?.games;
   }
 
+  async function handleSearch(event: SubmitEvent) {
+    boredState.set({ loading: true });
+    const form = event.target as HTMLFormElement;
+    console.log('form', form);
+    const response = await fetch('/api/game', {
+      method: 'POST',
+      headers: { accept: 'application/json' },
+      body: new FormData(form)
+    });
+    const responseData = await response.json();
+    // submitting = false;
+    boredState.set({ loading: false });
+    gameStore.removeAll();
+    gameStore.addAll(responseData?.games);
+  }
+
+  let name = '';
   let minAge = 0;
   let minPlayers = 1;
   let maxPlayers = 1;
@@ -46,6 +64,17 @@
 <h1>Search Boardgames!</h1>
 <p>Input your requirements to search for board game that match your criteria</p>
 <div class="game-form">
+  <form on:submit|preventDefault={handleSearch} method="post">
+    <fieldset aria-busy={submitting} disabled={submitting}>
+      <div>
+        <label htmlfor="minAge">
+          Search
+          <input id="name" name="name" bind:value={name} type="text" />
+        </label>
+      </div>
+    </fieldset>
+    <button type="submit" disabled={submitting}>Search</button>
+  </form>
   <form on:submit|preventDefault={handleSubmit} method="post">
     <fieldset aria-busy={submitting} disabled={submitting}>
       <div>
@@ -53,20 +82,6 @@
           <input id="minAge" name="minAge" bind:value={minAge} type="number" min={0} max={120} />
           Min Age
         </label>
-        <!-- <NumberInput
-          name="minAge"
-          min={0}
-          max={120}
-          bind:value={minAge}
-          invalidText="Number must be between 0 and 120"
-          label="Min Age"
-        /> -->
-        <!-- <Checkbox
-          name="exactMinAge"
-          bind:checked={exactMinAge}
-          bind:value={exactMinAge}
-          labelText="Search exact?"
-        /> -->
       </div>
       <div>
         <label htmlfor="minPlayers">
@@ -80,15 +95,7 @@
           />
           Min Players
         </label>
-        <!-- <NumberInput
-          name="minPlayers"
-          min={1}
-          max={50}
-          bind:value={minPlayers}
-          invalidText="Number must be between 1 and 50"
-          label="Min Players"
-        />
-        <Checkbox name="exactMinPlayers" labelText="Search exact?" bind:checked={exactMinPlayers} /> -->
+        <Checkbox name="exactMinPlayers" labelText="Search exact?" bind:checked={exactMinPlayers} />
       </div>
       <div>
         <label htmlfor="maxPlayers">
@@ -102,15 +109,15 @@
           />
           Max Players
         </label>
-        <!-- <NumberInput
-          name="maxPlayers"
-          min={1}
-          max={50}
-          bind:value={maxPlayers}
-          invalidText="Number must be between 1 and 50"
-          label="Max Players"
-        />
-        <Checkbox name="exactMaxPlayers" labelText="Search exact?" bind:checked={exactMaxPlayers} /> -->
+        <label htmlfor="exactMaxPlayers">
+          <input
+            id="exactMaxPlayers"
+            type="checkbox"
+            name="exactMaxPlayers"
+            bind:checked={exactMaxPlayers}
+          />
+          <span>Search exact?</span>
+        </label>
       </div>
     </fieldset>
     <button type="submit" disabled={submitting}>Submit</button>