From 9bef4328cb8860aaac6659c0d45847f30b53035e Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@protonmail.com>
Date: Wed, 27 Jul 2022 15:05:22 -0700
Subject: [PATCH] Pairing down API Game response objects, spacing for buttons,
 start form cleanup.

---
 .../search/advancedSearch/index.svelte        |  4 +-
 src/lib/components/search/random/index.svelte | 12 ++---
 .../components/search/textSearch/index.svelte |  2 +-
 src/lib/util/gameMapper.ts                    | 52 +++++++++++++++++++
 src/routes/api/games/index.ts                 | 15 ++++--
 src/routes/index.svelte                       | 28 ++++++----
 src/styles/global.scss                        |  2 +-
 svelte.config.js                              |  4 +-
 8 files changed, 92 insertions(+), 27 deletions(-)
 create mode 100644 src/lib/util/gameMapper.ts

diff --git a/src/lib/components/search/advancedSearch/index.svelte b/src/lib/components/search/advancedSearch/index.svelte
index d270a7e..8ffa66d 100644
--- a/src/lib/components/search/advancedSearch/index.svelte
+++ b/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>
diff --git a/src/lib/components/search/random/index.svelte b/src/lib/components/search/random/index.svelte
index 9fb339c..65451f9 100644
--- a/src/lib/components/search/random/index.svelte
+++ b/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;
-    margin: 0.5rem;
-    padding: 1rem;
-    color: var(--clr-input-txt);
-    background-color: var(--color-btn-primary-active);
+    /* border-radius: 10px; */
+    /* margin: 0.5rem; */
+    /* padding: 1rem; */
+    /* color: var(--clr-input-txt); */
+    /* background-color: var(--color-btn-primary-active); */
   }
 
   fieldset {
diff --git a/src/lib/components/search/textSearch/index.svelte b/src/lib/components/search/textSearch/index.svelte
index 8b28fe8..172d379 100644
--- a/src/lib/components/search/textSearch/index.svelte
+++ b/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>
diff --git a/src/lib/util/gameMapper.ts b/src/lib/util/gameMapper.ts
new file mode 100644
index 0000000..6d30554
--- /dev/null
+++ b/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,
+  };
+}
\ No newline at end of file
diff --git a/src/routes/api/games/index.ts b/src/routes/api/games/index.ts
index aa13158..f96e44a 100644
--- a/src/routes/api/games/index.ts
+++ b/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,
       }
     };
   }
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 301de56..dffa9f3 100644
--- a/src/routes/index.svelte
+++ b/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 />
-  <Random />
+  <div class="random-buttons">
+    <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);
-  }
-
-  .game-form label {
-    display: grid;
-    margin: 1rem;
+    grid-template-columns: 1fr 1fr;
   }
 </style>
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 6a1b356..e3ba086 100644
--- a/src/styles/global.scss
+++ b/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);
diff --git a/svelte.config.js b/svelte.config.js
index d6f36f5..0e36820 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -15,8 +15,8 @@ const config = {
     // Override http methods in the Todo forms
     methodOverride: {
       allowed: ['PATCH', 'DELETE']
-    }
-  }
+    },
+  },
 };
 
 export default config;