Update toast to be in the bottom middle, error for fetching game data, fixing random from collection.

src/app.css

@@ -14,6 +14,8 @@
   --background-without-opacity: rgba(255, 255, 255, 0.7);
   --column-width: 42rem;
   --column-margin-top: 4rem;
+  --z-highest: 100;
+  --cardBorderRadius: 12px;
 }
 
 body {

src/lib/components/game/index.svelte

@@ -24,11 +24,11 @@
 	<div class="game-info">
 		<h2>{game.name}</h2>
 		<a class="thumbnail" href={`/game/${game.id}`}>
-			<img width="140" height="140" src={game.thumb_url} alt={`Image of ${game.name}`} />
+			<img src={game.thumb_url} alt={`Image of ${game.name}`} />
 		</a>
 	</div>
 
-	{#if !minimal}
+	{#if !minimal && game?.players && game?.playtime}
 		<div class="game-details">
 			{#if game.year_published}
 				<p>{game.year_published}</p>
@@ -36,7 +36,7 @@
 			<p>{game.players} {game.max_players === 1 ? 'player' : 'players'}</p>
 			<p>{game.playtime} minutes</p>
 			<p>Minimum Age: {game.min_age}</p>
-			<a href={`/game/${game.id}`}>View Game</a>
+			<!-- <a href={`/game/${game.id}`}>View Game</a> -->
 			{#if detailed}
 				<div class="description">{@html game.description}</div>
 			{/if}
@@ -68,7 +68,7 @@
 
 <style lang="scss">
 	img {
-		border-radius: 10px;
+		max-height: 200px;
 	}
 
 	button {
@@ -84,6 +84,7 @@
 
 	.game-container {
 		display: flex;
+		place-content: center;
 		flex-wrap: wrap;
 
 		@media (max-width: 650px) {
@@ -101,7 +102,8 @@
 
 		.game-info {
 			display: grid;
-			gap: 0.5rem;
+			place-items: center;
+			gap: 0.75rem;
 			margin: 0.2rem;
 		}
 

src/lib/components/random/index.svelte

@@ -4,6 +4,7 @@
 	import { collectionStore } from '$lib/stores/collectionStore';
 	import { toast } from '$lib/components/toast/toast';
 	import { ToastType, type SavedGameType } from '$lib/types';
+	import { mapSavedGameToGame } from '$root/lib/util/gameMapper';
 
 	async function getRandomCollectionGame() {
 		if ($collectionStore.length > 0) {
@@ -12,13 +13,14 @@
 			if ($collectionStore.at(randomNumber)) {
 				gameStore.removeAll();
 				const randomGame: SavedGameType = $collectionStore.at(randomNumber)!;
-        const response = await fetch(`/api/game/${randomGame?.id}`, {
+				// const response = await fetch(`/api/game/${randomGame?.id}`, {
-          method: 'GET',
+				//   method: 'GET',
-          headers: { accept: 'application/json' }
+				//   headers: { accept: 'application/json' }
-        });
+				// });
-        const responseData = await response.json();
+				// const responseData = await response.json();
-        console.log('responseData', responseData);
+				// console.log('responseData', responseData);
-        gameStore.add(responseData?.game);
+				// gameStore.add(responseData?.game);
+				const game = gameStore.add(mapSavedGameToGame(randomGame));
 				boredState.update((n) => ({ ...n, loading: false }));
 			} else {
 				toast.send('Error!', { duration: 3000, type: ToastType.ERROR, dismissible: true });

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

@@ -41,7 +41,11 @@
 				console.log('In success');
 				const resultGames = result?.data?.games;
 				if (resultGames?.length <= 0) {
-					toast.send('No results!', { duration: 3000, type: ToastType.INFO, dismissible: true });
+					toast.send('No results found 😿', {
+						duration: 3000,
+						type: ToastType.INFO,
+						dismissible: true
+					});
 				}
 				gameStore.addAll(resultGames);
 				console.log(`Frontend result: ${JSON.stringify(result)}`);

src/lib/components/toast/Toast.svelte

@@ -12,6 +12,7 @@
 			<div
 				aria-label={toastData.dismissible ? 'Click to dismiss' : `${toastData.message}`}
 				on:click={() => toastData.dismissible && toast.remove(toastData.id)}
+				on:keydown={() => toastData.dismissible && toast.remove(toastData.id)}
 				in:fly={{ opacity: 0, x: 100 }}
 				out:fade
 				animate:flip
@@ -47,24 +48,30 @@
 
 <style lang="scss">
 	.toast-wrapper {
+		display: flex;
+		flex-flow: column;
+		align-items: center;
+		justify-content: center;
 		position: fixed;
-    bottom: 5px;
+		bottom: 5vh;
-    right: 25px;
+		width: 100vw;
+		z-index: calc(var(--z-highest) + 10);
 	}
 
 	.toast {
 		display: flex;
+		justify-content: center;
 		gap: 1rem;
-    place-items: center;
-
 		overflow: hidden;
 		position: relative;
-    margin-bottom: 1rem;
+		margin: 1rem 1rem 0;
+		min-width: 460px;
 		color: white;
 		background: var(--toast-background, #625df5);
-    padding: 20px;
+		padding: 1.5rem;
-    border-radius: 15px;
+		border-radius: 12px;
 		box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
+		width: 30rem;
 
 		.close {
 			padding: 5px;

src/lib/util/gameMapper.ts

@@ -1,4 +1,14 @@
-import type { GameType } from '$lib/types';
+import type { GameType, SavedGameType } from '$lib/types';
+
+export function mapSavedGameToGame(game: SavedGameType): GameType {
+  const { id, name, thumb_url } = game;
+  
+  return {
+    id,
+    name,
+    thumb_url
+  };
+}
 
 export function mapAPIGameToBoredGame(game): GameType {
   const {

src/routes/+error.svelte

@@ -1,4 +1,4 @@
-<h1>The page you requested doesn't exist!</h1>
+<h1>The page you requested doesn't exist! 🤷‍♂️</h1>
 
 <style>
 	h1 {

src/routes/+page.svelte

@@ -90,7 +90,11 @@
 					console.log('In success');
 					const resultGames = result?.data?.games;
 					if (resultGames?.length <= 0) {
-						toast.send('No results!', { duration: 3000, type: ToastType.INFO, dismissible: true });
+						toast.send('No results found 😿', {
+							duration: 3000,
+							type: ToastType.ERROR,
+							dismissible: true
+						});
 					}
 					gameStore.addAll(resultGames);
 					totalItems = result?.data?.totalCount;

src/routes/game/[id]/+error.svelte

@@ -0,0 +1,12 @@
+<h1>Unable to load board game info! 🤦‍♂️</h1>
+<h2>Please try again later. 🙇🏼</h2>
+
+<style>
+	h1,
+	h2 {
+		margin-top: var(--spacing-64);
+		font-family: var(--font-sans);
+		font-size: var(--font-32);
+		text-align: center;
+	}
+</style>

src/routes/game/[id]/+page.svelte

@@ -127,6 +127,10 @@
 		margin-bottom: 3rem;
 	}
 
+	img {
+		max-width: 500px;
+	}
+
 	button {
 		display: flex;
 		justify-content: space-between;