Using Game component and adding transitions, styles, etc.

src/components/game.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { fade, fly } from 'svelte/transition';
+  import type { GameType } from '$lib/types';
+
+  export let game: GameType;
+</script>
+
+<article class="game-container" transition:fade>
+  <a class="thumbnail" href={game.url}>
+    <img width="140" height="140" src={game.thumb_url} alt={`Image of ${game.name}`} />
+  </a>
+
+  <div class="game-details">
+    <div class="game">
+      <div class="content">
+        <h2>{game.name}</h2>
+        <p>{game.year_published}</p>
+        <p>{game.players} {game.max_players === 1 ? 'player' : 'players'}</p>
+        <p>{game.playtime} minutes</p>
+        <p>Minimum Age: {game.min_age}</p>
+        <div class="description">{@html game.description}</div>
+      </div>
+    </div>
+  </div>
+</article>
+
+<style>
+  .thumbnail {
+    align-self: start;
+  }
+
+  img {
+    border-radius: 10px;
+  }
+
+  .game-container:hover {
+    background-color: var(--primary);
+  }
+
+  .game-container {
+    display: grid;
+    grid-template-columns: min-content 1fr;
+    gap: var(--spacing-16);
+    padding: var(--spacing-16) var(--spacing-16);
+    transition: all 0.3s;
+    border-radius: 8px;
+  }
+</style>

src/lib/types.ts

@@ -1,9 +1,11 @@
-export type Game = {
+export type GameType = {
   id: string;
   handle: string;
   name: string;
   url: string;
   edit_url: string;
+  thumb_url: string;
+  image_url: string,
   price: number;
   price_ca: number;
   price_uk: number;

src/routes/__layout.svelte

@@ -1,46 +1,47 @@
 <script lang="ts">
-	import Header from '$lib/header/Header.svelte';
+  import Header from '$lib/header/Header.svelte';
-	import "carbon-components-svelte/css/all.css";
+  import '$root/styles/global.css';
-	import '../app.css';
+  import 'carbon-components-svelte/css/all.css';
+  import '../app.css';
 </script>
 
 <Header />
 
 <main>
-	<slot />
+  <slot />
 </main>
 
 <footer>
-	<p>Built by <a target="__blank" href="https://bradleyshellnut.com">Bradley Shellnut</a></p>
+  <p>Built by <a target="__blank" href="https://bradleyshellnut.com">Bradley Shellnut</a></p>
 </footer>
 
 <style>
-	main {
+  main {
-		flex: 1;
+    flex: 1;
-		display: flex;
+    display: flex;
-		flex-direction: column;
+    flex-direction: column;
-		padding: 1rem;
+    padding: 1rem;
-		width: 100%;
+    width: 100%;
-		max-width: 1024px;
+    max-width: 1024px;
-		margin: 0 auto;
+    margin: 0 auto;
-		box-sizing: border-box;
+    box-sizing: border-box;
-	}
+  }
 
-	footer {
+  footer {
-		display: flex;
+    display: flex;
-		flex-direction: column;
+    flex-direction: column;
-		justify-content: center;
+    justify-content: center;
-		align-items: center;
+    align-items: center;
-		padding: 40px;
+    padding: 40px;
-	}
+  }
 
-	footer a {
+  footer a {
-		font-weight: bold;
+    font-weight: bold;
-	}
+  }
 
-	@media (min-width: 480px) {
+  @media (min-width: 480px) {
-		footer {
+    footer {
-			padding: 40px 0;
+      padding: 40px 0;
-		}
+    }
-	}
+  }
 </style>

src/routes/api/games/index.ts

@@ -4,10 +4,10 @@ import type { SearchQuery } from "$lib/types";
 export const post: RequestHandler = async ({ request }) => {
   const form = await request.formData();
   console.log('form', form);
-  const queryParams : SearchQuery = {
+  const queryParams: SearchQuery = {
     order_by: 'rank',
     ascending: false,
-    limit: 1,
+    limit: 20,
     client_id: import.meta.env.VITE_PUBLIC_CLIENT_ID,
   }
 
@@ -27,13 +27,13 @@ export const post: RequestHandler = async ({ request }) => {
   console.log("form.get('exactMaxPlayers')", form.get('exactMaxPlayers'));
   console.log("form.get('random')", form.get('random'));
 
-  console.log('minAge',minAge);
+  console.log('minAge', minAge);
-  console.log('minPlayers',minPlayers);
+  console.log('minPlayers', minPlayers);
-  console.log('maxPlayers',maxPlayers);
+  console.log('maxPlayers', maxPlayers);
-  console.log('exactMinAge',exactMinAge);
+  console.log('exactMinAge', exactMinAge);
-  console.log('exactMinPlayers',exactMinPlayers);
+  console.log('exactMinPlayers', exactMinPlayers);
-  console.log('exactMaxPlayers',exactMaxPlayers);
+  console.log('exactMaxPlayers', exactMaxPlayers);
-  console.log('random',random);
+  console.log('random', random);
 
   if (minAge) {
     if (exactMinAge) {

src/routes/index.svelte

@@ -1,13 +1,14 @@
 <script context="module" lang="ts">
-	export const prerender = true;
+  export const prerender = true;
 </script>
 
 <script lang="ts">
-	import { Checkbox, NumberInput } from "carbon-components-svelte";
+  import { Checkbox, NumberInput } from 'carbon-components-svelte';
-	import type { Game } from "$lib/types";
+  import Game from '$root/components/game.svelte';
+  import type { GameType } from '$lib/types';
   // import { enhance } from "$lib/form";
 
-  let games: Game[] = [];
+  let games: GameType[] = [];
   let submitting = false;
 
   async function handleSubmit(event: SubmitEvent) {
@@ -25,15 +26,15 @@
   }
 
   let minAge = 0;
-	let minPlayers = 1;
+  let minPlayers = 1;
-	let maxPlayers = 1;
+  let maxPlayers = 1;
   let exactMinAge = false;
   let exactMinPlayers = false;
   let exactMaxPlayers = false;
 </script>
 
 <svelte:head>
-	<title>Home</title>
+  <title>Home</title>
 </svelte:head>
 
 <h1>Search Boardgames!</h1>
@@ -50,7 +51,12 @@
           invalidText="Number must be between 0 and 120"
           label="Min Age"
         />
-        <Checkbox name="exactMinAge" bind:checked={exactMinAge} bind:value={exactMinAge} labelText="Search exact?" />
+        <Checkbox
+          name="exactMinAge"
+          bind:checked={exactMinAge}
+          bind:value={exactMinAge}
+          labelText="Search exact?"
+        />
       </div>
       <div>
         <NumberInput
@@ -86,32 +92,18 @@
 </div>
 
 <div class="games">
-	<h1>Games</h1>
+  <h1>Games</h1>
   {#each games as game}
-    <section>
+    <Game {game} />
-        <div>
-          <h2>{game.name}</h2>
-          <p>price : {game.price}</p>
-          <p>year_published : {game.year_published}</p>
-          <p>min_players : {game.min_players}</p>
-          <p>max_players : {game.max_players}</p>
-          <p>min_playtime : {game.min_playtime}</p>
-          <p>max_playtime : {game.max_playtime}</p>
-          <p>min_age : {game.min_age}</p>
-          <p>players : {game.players}</p>
-          <p>playtime : {game.playtime}</p>
-          <div class="description">{@html game.description}</div>
-        </div>
-    </section>
   {/each}
 </div>
 
 <style lang="scss">
-	h1 {
+  h1 {
-		width: 100%;
+    width: 100%;
-	}
+  }
 
-	h2 {
+  h2 {
     text-align: center;
     font-size: 2.5rem;
     font-weight: 600;
@@ -144,26 +136,26 @@
     grid-template-columns: repeat(3, minmax(200px, 1fr));
   }
 
-	section {
+  section {
-		display: flex;
+    display: flex;
-		flex-direction: column;
+    flex-direction: column;
-		justify-content: center;
+    justify-content: center;
-		align-items: center;
+    align-items: center;
-		flex: 1;
+    flex: 1;
-	}
+  }
 
-	.welcome {
+  .welcome {
-		position: relative;
+    position: relative;
-		width: 100%;
+    width: 100%;
-		height: 0;
+    height: 0;
-		padding: 0 0 calc(100% * 495 / 2048) 0;
+    padding: 0 0 calc(100% * 495 / 2048) 0;
-	}
+  }
 
-	.welcome img {
+  .welcome img {
-		position: absolute;
+    position: absolute;
-		width: 100%;
+    width: 100%;
-		height: 100%;
+    height: 100%;
-		top: 0;
+    top: 0;
-		display: block;
+    display: block;
-	}
+  }
 </style>

src/styles/global.css

@@ -0,0 +1,214 @@
+/* Setup */
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: inherit;
+}
+
+:root {
+  --color-brand: hsl(204 88% 53%);
+  --color-text-primary: hsl(0 0% 98%);
+  --color-text-muted: hsl(210 34% 80%);
+  --color-bg-primary: hsl(210 34% 13%);
+  --color-bg-secondary: hsl(209, 35%, 15%);
+  --color-btn-primary-active: var(--color-brand);
+  --color-btn-primary-active-hover: hsl(204 88% 60%);
+  --color-btn-primary-inactive: hsl(205 70% 33%);
+  --color-btn-secondary: hsl(192 19% 95%);
+  --color-border-primary: hsl(0, 0%, 34%);
+  --color-link-hover: hsl(209 22% 19%);
+  --color-placeholder: hsl(210 34% 80%);
+
+  --red: #990000;
+  --redBrown: #633539;
+  --blue: #336699;
+  --black: #1f273a;
+  --white: #fff;
+  --grey: #efefef;
+  --greyBlue: #888e9c;
+  --lighterGreyBlue: #6a707e;
+  --yellow: #ffc600;
+  --light: #ffffff;
+  --dark: #000000;
+  --lightGrey: #C5C5C5;
+  --lightGray: var(--lightGrey);
+  --imGoingToFaint: #fbfbfb;
+  --redBrown: #633539;
+  --maxWidth: 1200px;
+
+  /* Define Colors intentions */
+  --primary: var(--greyBlue);
+  --secondary: var(--redBrown);
+  --background: var(--white);
+  --textColor: var(--lighterGreyBlue);
+  --buttonTextColor: var(--black);
+  --lineColor: var(--grey);
+  --cardBg: var(--darkGrey);
+  --headerBackground: var(--greyBlue);
+  --footerBackground: var(--darkGrey);
+  --linkHover: var(--white);
+  --lightHairLine: #C5C5C5;
+
+  --radius-base: 2.4rem;
+
+  /* Type */
+  --headingFont: 'Merriweather Sans', sans-serif;
+  --bodyFont: 'Work Sans', sans-serif;
+  --baseFontSize: 100%;
+  --h1: 3.052rem;
+  --h2: 2.441rem;
+  --h3: 1.953rem;
+  --h4: 1.563rem;
+  --h5: 1.25rem;
+  --h6: 1.8rem;
+  --bodyTextSize: 1.8rem;
+  --smallText: 1.44rem;
+  --lineHeight: 2.25rem;
+  --font-serif: 'Inter', sans-serif;
+  --font-16: 1.6rem;
+  --font-18: 1.8rem;
+  --font-24: 2.4rem;
+  --font-32: 3.2rem;
+  --font-80: 8rem;
+
+  --spacing-4: 0.4rem;
+  --spacing-8: 0.5rem;
+  --spacing-16: 1.6rem;
+  --spacing-20: 2rem;
+  --spacing-24: 2.4rem;
+  --spacing-32: 3.2rem;
+
+  /* Elevation */
+  --level-0: none;
+  --level-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --level-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --level-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --level-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
+    0 10px 10px -5px rgba(0, 0, 0, 0.04);
+
+  /* Z Indexes */
+  --zBase: 1;
+
+  /* Positioning */
+  --containerPadding: 2.5%;
+  --headerHeight: 8rem;
+  --borderRadius: 4px;
+  --borderRadiusLarge: 10px;
+  --maxWidth: 1200px;
+
+  /* Media Queryies - Not yet supported in CSS */
+  /* 
+      --xsmall: 340px;
+      --small: 500px;
+      --large: 960px;
+      --wide: 1200px;
+    */
+}
+
+html {
+  /* background-image: url(${floatingCogs}); */
+  /* background-color: var(--background); */
+  /* background-size: 450px; */
+  /* background-attachment: fixed; */
+  font-size: 62.5%;
+  box-sizing: border-box;
+  scrollbar-width: thin;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+
+::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--color-brand);
+  border-radius: var(--radius-base);
+}
+
+::selection {
+  background: var(--primary);
+  color: var(--white);
+}
+
+body {
+  font-family: var(--font-serif);
+  font-size: var(--font-18);
+  color: var(--color-text-primary);
+  background-color: var(--color-bg-primary);
+}
+
+a {
+  text-decoration: none;
+  color: var(--color-text-primary);
+}
+
+label {
+  display: block;
+  margin: var(--spacing-8) 0;
+  font-size: var(--font-24);
+  color: var(--color-text-muted);
+}
+
+input {
+  padding: var(--spacing-16);
+  font-size: var(--font-24);
+  border-radius: var(--radius-base);
+  border: none;
+}
+
+.btn {
+  padding: var(--spacing-16) var(--spacing-32);
+  font-size: var(--font-18);
+  font-weight: bold;
+  color: var(--color-text-primary);
+  background-color: var(--color-btn-primary-active);
+  border-radius: var(--radius-base);
+  border: none;
+  cursor: pointer;
+}
+
+.btn:hover {
+  background-color: var(--color-btn-primary-active-hover);
+}
+
+.btn:disabled {
+  color: var(--color-text-muted);
+  background-color: var(--color-btn-primary-inactive);
+  cursor: not-allowed;
+}
+
+ul,
+ol {
+  list-style: none;
+}
+
+/* Utils */
+
+.responsive {
+  resize: both;
+  overflow: scroll;
+  border: 1px solid hsl(0 0% 0%);
+}
+
+.placeholder {
+  padding: var(--spacing-20) 0;
+  background-color: var(--color-placeholder);
+  border-radius: var(--radius-base);
+}