Pairing down API Game response objects, spacing for buttons, start form cleanup.

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

@@ -22,7 +22,7 @@
   }
 
   let submitting = $boredState?.loading;
-  let minAge = 0;
+  let minAge = 1;
   let minPlayers = 1;
   let maxPlayers = 1;
   let exactMinAge = false;
@@ -34,7 +34,7 @@
   <fieldset aria-busy={submitting} disabled={submitting}>
     <div>
       <label htmlfor="minAge">
-        <input id="minAge" name="minAge" bind:value={minAge} type="number" min={0} max={120} />
+        <input id="minAge" name="minAge" bind:value={minAge} type="number" min={1} max={120} />
         Min Age
       </label>
     </div>

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

@@ -26,7 +26,7 @@
 <form on:submit|preventDefault={handleSubmit} method="post">
   <fieldset aria-busy={submitting} disabled={submitting}>
     <input type="checkbox" id="random" name="random" hidden checked />
-    <button type="submit" disabled={submitting}>Random Game 🎲</button>
+    <button class="btn" type="submit" disabled={submitting}>Random Game 🎲</button>
   </fieldset>
 </form>
 
@@ -35,11 +35,11 @@
     width: 100%;
   }
   button {
-    border-radius: 10px;
+    /* border-radius: 10px; */
-    margin: 0.5rem;
+    /* margin: 0.5rem; */
-    padding: 1rem;
+    /* padding: 1rem; */
-    color: var(--clr-input-txt);
+    /* color: var(--clr-input-txt); */
-    background-color: var(--color-btn-primary-active);
+    /* background-color: var(--color-btn-primary-active); */
   }
 
   fieldset {

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

@@ -26,7 +26,7 @@
     <div>
       <label htmlfor="name">
         Search
-        <input id="name" name="name" bind:value={name} type="text" />
+        <input id="name" name="name" bind:value={name} type="text" placeholder="Enter name" />
       </label>
     </div>
   </fieldset>

src/lib/util/gameMapper.ts

@@ -0,0 +1,52 @@
+import type { GameType } from "$lib/types";
+
+export function mapAPIGameToBoredGame(game): GameType {
+  const {
+    id,
+    handle,
+    name,
+    url,
+    edit_url,
+    thumb_url,
+    image_url,
+    price,
+    price_ca,
+    price_uk,
+    price_au,
+    msrp,
+    year_published,
+    min_players,
+    max_players,
+    min_playtime,
+    max_playtime,
+    min_age,
+    description,
+    description_preview,
+    players,
+    playtime,
+  } = game;
+  return {
+    id,
+    handle,
+    name,
+    url,
+    edit_url,
+    thumb_url,
+    image_url,
+    price,
+    price_ca,
+    price_uk,
+    price_au,
+    msrp,
+    year_published,
+    min_players,
+    max_players,
+    min_playtime,
+    max_playtime,
+    min_age,
+    description,
+    description_preview,
+    players,
+    playtime,
+  };
+}

src/routes/api/games/index.ts

@@ -1,5 +1,6 @@
 import type { RequestHandler } from '@sveltejs/kit';
-import type { SearchQuery } from '$lib/types';
+import type { GameType, SearchQuery } from '$lib/types';
+import { mapAPIGameToBoredGame } from '$lib/util/gameMapper';
 
 export const POST: RequestHandler = async ({ request }) => {
   const form = await request.formData();
@@ -84,7 +85,7 @@ export const POST: RequestHandler = async ({ request }) => {
       'content-type': 'application/json'
     }
   });
-  console.log('response', response);
+  // console.log('response', response);
   if (response.status === 404) {
     // user hasn't created a todo list.
     // start with an empty array
@@ -97,11 +98,17 @@ export const POST: RequestHandler = async ({ request }) => {
 
   if (response.status === 200) {
     const gameResponse = await response.json();
-    const games = gameResponse?.games;
+    const gameList = gameResponse?.games;
+    console.log('gameList', gameList);
+    console.log('type', typeof gameList);
+    const games: GameType[] = [];
+    gameList.forEach(game => {
+      games.push(mapAPIGameToBoredGame(game))
+    });
     console.log('games', games);
     return {
       body: {
-        games: gameResponse?.games
+        games,
       }
     };
   }

src/routes/index.svelte

@@ -24,11 +24,13 @@
 
 <h1>Search Boardgames!</h1>
 <p>Input your requirements to search for board game that match your criteria</p>
-<div class="game-form">
+<div class="game-search">
   <TextSearch />
   <AdvancedSearch />
-  <RandomSearch />
+  <div class="random-buttons">
-  <Random />
+    <RandomSearch />
+    <Random />
+  </div>
 </div>
 
 <!-- {#if submitting}
@@ -99,22 +101,26 @@
       grid-template-columns: 1fr;
     }
   }
-  .game-form {
+  .game-search {
     margin: 1rem;
     border-radius: 4px;
     box-shadow: var(--level-2);
     background: rgba(0, 0, 0, 0.02);
     border: 2px solid var(--clr-primary);
     padding: 20px;
+
+    fieldset {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+    }
+    label {
+      display: grid;
+      margin: 1rem;
+    }
   }
 
-  .game-form fieldset {
+  .random-buttons {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: 1fr 1fr;
-  }
-
-  .game-form label {
-    display: grid;
-    margin: 1rem;
   }
 </style>

src/styles/global.scss

@@ -218,7 +218,7 @@ input {
 }
 
 .btn {
-  padding: var(--spacing-16) var(--spacing-32);
+  padding: var(--spacing-4) var(--spacing-8);
   font-size: var(--font-18);
   font-weight: bold;
   color: var(--color-text-primary);

svelte.config.js

@@ -15,8 +15,8 @@ const config = {
     // Override http methods in the Todo forms
     methodOverride: {
       allowed: ['PATCH', 'DELETE']
-    }
+    },
-  }
+  },
 };
 
 export default config;