From d21729e3a2a9bb0330902492221b577a99143860 Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@protonmail.com>
Date: Sun, 10 Jul 2022 23:28:15 -0700
Subject: [PATCH] Testing see more see less.

---
 src/lib/types.ts            |  1 +
 src/routes/game/[id].svelte | 10 +++++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/lib/types.ts b/src/lib/types.ts
index a21ab15..9db3964 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -31,6 +31,7 @@ export type GameType = {
   max_playtime: number;
   min_age: number;
   description: string;
+  description_preview: string;
   players: string;
   playtime: string;
 };
diff --git a/src/routes/game/[id].svelte b/src/routes/game/[id].svelte
index 385ad63..dec9488 100644
--- a/src/routes/game/[id].svelte
+++ b/src/routes/game/[id].svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
   import type { GameType } from '$lib/types';
   import { Checkbox, NumberInput } from 'carbon-components-svelte';
+  import type { boolean } from 'zod';
   // import { enhance } from "$lib/form";
 
   export let game: GameType;
+  let seeMore: boolean = false;
 </script>
 
 <svelte:head>
@@ -19,7 +21,13 @@
     </a>
   </div>
   <div class="description">
-    {@html game?.description}
+    {#if seeMore}
+      {@html game?.description}
+      <button on:click={() => (seeMore = !seeMore)}>See Less -</button>
+    {:else}
+      {@html game?.description_preview}
+      <button on:click={() => (seeMore = !seeMore)}>See More +</button>
+    {/if}
     <div>
       <p>Price: {game?.price}</p>
       <p>Year Published: {game?.year_published}</p>