From 79e401a91797d09e0261aadf509f3dc416ab3a0a Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@pm.me>
Date: Thu, 6 Oct 2022 17:06:58 -0500
Subject: [PATCH] Fixing env in the game page.

---
 src/routes/+layout.svelte            | 272 +++++++++++++--------------
 src/routes/api.ts                    |   4 +-
 src/routes/game/[id]/+page.server.ts |   3 +-
 3 files changed, 140 insertions(+), 139 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 2c5e64f..12ce4d4 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,159 +1,159 @@
 <script lang="ts">
-  import { browser } from '$app/environment';
-  import { navigating } from '$app/stores';
-  import { fade } from 'svelte/transition';
-  import debounce from 'just-debounce-it';
-  import { Toy } from '@leveluptuts/svelte-toy';
-  import Header from '$lib/components/header/Header.svelte';
-  import Loading from '$lib/components/loading.svelte';
-  import Transition from '$lib/components/transition/index.svelte';
-  import Portal from '$lib/Portal.svelte';
-  import { boredState } from '$lib/stores/boredState';
-  import { collectionStore } from '$lib/stores/collectionStore';
-  import { gameStore } from '$lib/stores/gameSearchStore';
-  import { toast } from '$lib/components/toast/toast';
-  import Toast from '$lib/components/toast/Toast.svelte';
-  import '$root/styles/styles.scss';
+	import { browser } from '$app/environment';
+	import { navigating } from '$app/stores';
+	import { fade } from 'svelte/transition';
+	import debounce from 'just-debounce-it';
+	import { Toy } from '@leveluptuts/svelte-toy';
+	import Header from '$lib/components/header/Header.svelte';
+	import Loading from '$lib/components/loading.svelte';
+	import Transition from '$lib/components/transition/index.svelte';
+	import Portal from '$lib/Portal.svelte';
+	import { boredState } from '$lib/stores/boredState';
+	import { collectionStore } from '$lib/stores/collectionStore';
+	import { gameStore } from '$lib/stores/gameSearchStore';
+	import { toast } from '$lib/components/toast/toast';
+	import Toast from '$lib/components/toast/Toast.svelte';
+	import '$root/styles/styles.scss';
 
-  $: {
-    if ($navigating) {
-      debounce(() => {
-        boredState.update((n) => ({ ...n, loading: true }));
-      }, 250);
-    }
-    if (!$navigating) {
-      boredState.update((n) => ({ ...n, loading: false }));
-    }
-  }
+	$: {
+		if ($navigating) {
+			debounce(() => {
+				boredState.update((n) => ({ ...n, loading: true }));
+			}, 250);
+		}
+		if (!$navigating) {
+			boredState.update((n) => ({ ...n, loading: false }));
+		}
+	}
 
-  $: isOpen = $boredState?.dialog?.isOpen;
+	$: isOpen = $boredState?.dialog?.isOpen;
 
-  if (browser) {
-    let collectionEmpty = $collectionStore.length === 0 || false;
-    console.log('collectionEmpty', collectionEmpty);
-    console.log('localStorage.collection', localStorage.collection);
-    if (collectionEmpty && localStorage?.collection && localStorage?.collection?.length !== 0) {
-      const collection = JSON.parse(localStorage.collection);
-      console.log('collection', collection);
-      if (collection?.length !== 0) {
-        collectionStore.addAll(collection);
-      }
-    }
-  }
+	if (browser) {
+		let collectionEmpty = $collectionStore.length === 0 || false;
+		console.log('collectionEmpty', collectionEmpty);
+		console.log('localStorage.collection', localStorage.collection);
+		if (collectionEmpty && localStorage?.collection && localStorage?.collection?.length !== 0) {
+			const collection = JSON.parse(localStorage.collection);
+			console.log('collection', collection);
+			if (collection?.length !== 0) {
+				collectionStore.addAll(collection);
+			}
+		}
+	}
 
-  const dev = process.env.NODE_ENV !== 'production';
+	const dev = process.env.NODE_ENV !== 'production';
 </script>
 
 {#if dev}
-  <Toy register={{ boredState, collectionStore, gameStore, toast }} />
+	<Toy register={{ boredState, collectionStore, gameStore, toast }} />
 {/if}
 <Transition transition={{ type: 'fade', duration: 250 }}>
-  <div class="wrapper">
-    <Header />
-    <Transition transition={{ type: 'page' }}>
-      <main>
-        <slot />
-      </main>
-    </Transition>
-    <footer>
-      <p>Built by <a target="__blank" href="https://bradleyshellnut.com">Bradley Shellnut</a></p>
-      <p>
-        <a
-          target="__blank"
-          href="https://www.flaticon.com/free-icons/board-game"
-          title="board game icons">Board game icons created by Freepik - Flaticon</a
-        >
-      </p>
-    </footer>
-  </div>
-  {#if $boredState?.loading}
-    <Portal>
-      <Transition transition={{ type: 'fade', duration: 0 }}>
-        <div class="loading">
-          <Loading />
-          <h3>Loading...</h3>
-        </div>
-      </Transition>
-      <div class="background" />
-    </Portal>
-  {/if}
-  {#if isOpen}
-    <div class="container">
-      <svelte:component this={$boredState?.dialog?.content} />
-    </div>
-  {/if}
-  <Toast />
+	<div class="wrapper">
+		<Header />
+		<Transition transition={{ type: 'page' }}>
+			<main>
+				<slot />
+			</main>
+		</Transition>
+		<footer>
+			<p>Built by <a target="__blank" href="https://bradleyshellnut.com">Bradley Shellnut</a></p>
+			<p>
+				<a
+					target="__blank"
+					href="https://www.flaticon.com/free-icons/board-game"
+					title="board game icons">Board game icons created by Freepik - Flaticon</a
+				>
+			</p>
+		</footer>
+	</div>
+	{#if $boredState?.loading}
+		<Portal>
+			<Transition transition={{ type: 'fade', duration: 0 }}>
+				<div class="loading">
+					<Loading />
+					<h3>Loading...</h3>
+				</div>
+			</Transition>
+			<div class="background" />
+		</Portal>
+	{/if}
+	{#if isOpen}
+		<div class="container">
+			<svelte:component this={$boredState?.dialog?.content} />
+		</div>
+	{/if}
+	<Toast />
 </Transition>
 
 <style lang="scss">
-  .loading {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 101;
-    display: grid;
-    place-items: center;
-    gap: 1rem;
+	.loading {
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		z-index: 101;
+		display: grid;
+		place-items: center;
+		gap: 1rem;
 
-    h3 {
-      color: white;
-    }
-  }
+		h3 {
+			color: white;
+		}
+	}
 
-  .background {
-    background: black;
-    opacity: 0.8;
-    cursor: none;
-    inset: 0;
-    position: fixed;
-    z-index: 100;
-  }
+	.background {
+		background: black;
+		opacity: 0.8;
+		cursor: none;
+		inset: 0;
+		position: fixed;
+		z-index: 100;
+	}
 
-  .wrapper {
-    display: grid;
-    grid-template-rows: auto 1fr auto;
-    min-height: 100vh;
-  }
+	.wrapper {
+		display: grid;
+		grid-template-rows: auto 1fr auto;
+		min-height: 100vh;
+	}
 
-  main {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    max-width: 850px;
-    margin: 0 auto;
-    padding: 2rem 0rem;
-    max-width: 80%;
+	main {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		max-width: 850px;
+		margin: 0 auto;
+		padding: 2rem 0rem;
+		max-width: 80%;
 
-    @media (min-width: 1500px) {
-      max-width: 60%;
-    }
-    box-sizing: border-box;
-  }
+		@media (min-width: 1500px) {
+			max-width: 60%;
+		}
+		box-sizing: border-box;
+	}
 
-  footer {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    padding: 40px;
-  }
+	footer {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		padding: 40px;
+	}
 
-  footer a {
-    font-weight: bold;
-  }
+	footer a {
+		font-weight: bold;
+	}
 
-  @media (min-width: 480px) {
-    footer {
-      padding: 40px 0;
-    }
-  }
+	@media (min-width: 480px) {
+		footer {
+			padding: 40px 0;
+		}
+	}
 
-  :global(.dialog-overlay) {
-    position: fixed;
-    inset: 0;
-    z-index: 100;
-    background-color: rgb(0 0 0);
-    opacity: 0.8;
-  }
+	:global(.dialog-overlay) {
+		position: fixed;
+		inset: 0;
+		z-index: 100;
+		background-color: rgb(0 0 0);
+		opacity: 0.8;
+	}
 </style>
diff --git a/src/routes/api.ts b/src/routes/api.ts
index cf7e015..4f5a9c1 100644
--- a/src/routes/api.ts
+++ b/src/routes/api.ts
@@ -8,7 +8,7 @@
   (The data on the todo app will expire periodically; no
   guarantees are made. Don't use it to organize your life.)
 */
-
+import { BOARD_GAME_ATLAS_CLIENT_ID } from '$env/static/private';
 import { URLSearchParams } from 'url';
 
 const base = 'https://api.boardgameatlas.com/api';
@@ -20,7 +20,7 @@ export function boardGameApi(
   data?: Record<string, unknown>
 ) {
   // console.log('queryParams', queryParams);
-  queryParams.client_id = import.meta.env.VITE_PUBLIC_CLIENT_ID;
+  queryParams.client_id = BOARD_GAME_ATLAS_CLIENT_ID;
   const urlQueryParams = new URLSearchParams(queryParams);
   const url = `${base}/${resource}${urlQueryParams ? `?${urlQueryParams}` : ''}`;
   return fetch(url, {
diff --git a/src/routes/game/[id]/+page.server.ts b/src/routes/game/[id]/+page.server.ts
index 72961b0..7f1c77b 100644
--- a/src/routes/game/[id]/+page.server.ts
+++ b/src/routes/game/[id]/+page.server.ts
@@ -14,7 +14,8 @@ type GamePageParams = {
 // }
 
 export const load: PageServerLoad = async ({ params }: GamePageParams) => {
-  console.log('params', params);
+  console.log('params', params); 
+  debugger;
   const queryParams = {
     ids: `${params?.id}`
   };