Fixing select fields on the API calls.

src/lib/components/game/index.svelte

@@ -77,7 +77,7 @@
 				type="button"
 				on:click={() => {
 					removeGameFromCollection();
-				}}>Remove from Collection <MinusCircleIcon width="24" height="24" /></button
+				}}><span>Remove from Collection</span> <MinusCircleIcon width="24" height="24" /></button
 			>
 		{:else}
 			<button
@@ -89,7 +89,7 @@
 					if (browser) {
 						localStorage.collection = JSON.stringify($collectionStore);
 					}
-				}}>Add to collection <PlusCircleIcon width="24" height="24" /></button
+				}}><span>Add to collection</span> <PlusCircleIcon width="24" height="24" /></button
 			>
 		{/if}
 		{#if existsInWishlist}
@@ -99,7 +99,7 @@
 				type="button"
 				on:click={() => {
 					removeGameFromWishlist();
-				}}>Remove from Wishlist <MinusCircleIcon width="24" height="24" /></button
+				}}><span>Remove from Wishlist</span> <MinusCircleIcon width="24" height="24" /></button
 			>
 		{:else}
 			<button
@@ -111,7 +111,7 @@
 					if (browser) {
 						localStorage.wishlist = JSON.stringify($wishlistStore);
 					}
-				}}>Add to wishlist <PlusCircleIcon width="24" height="24" /></button
+				}}><span>Add to wishlist</span> <PlusCircleIcon width="24" height="24" /></button
 			>
 		{/if}
 	</div>
@@ -172,6 +172,7 @@
 
 			.btn {
 				max-height: 100px;
+				text-align: start;
 			}
 
 			.remove {

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

@@ -55,7 +55,6 @@
 	}
 
 	let placeholderList = [...Array(numberOfGameSkeleton).keys()];
-	console.log(placeholderList);
 
 	if (form?.error) {
 		disclosureOpen = true;

src/lib/util/manipulateCollection.ts

@@ -5,21 +5,23 @@ import { convertToSavedGame } from './gameMapper';
 import { saved_game_schema } from '../zodValidation';
 
 export function addToCollection(game: GameType | SavedGameType) {
-  try {
-    saved_game_schema.parse(game);
-    collectionStore.add(convertToSavedGame(game));
-    toast.send("Added to collection", { duration: 3000, type: ToastType.INFO });
-  } catch (error) {
-    toast.send('Error adding to collection', { duration: 3000, type: ToastType.ERROR });
-  }
+	try {
+		console.log(`Saving game: ${JSON.stringify(game)}`);
+		saved_game_schema.parse(game);
+		collectionStore.add(convertToSavedGame(game));
+		toast.send('Added to collection', { duration: 3000, type: ToastType.INFO });
+	} catch (error) {
+		console.log(error);
+		toast.send('Error adding to collection', { duration: 3000, type: ToastType.ERROR });
+	}
 }
 
 export function removeFromCollection(game: GameType | SavedGameType) {
-  try {
-    saved_game_schema.parse(game);
-    collectionStore.remove(game.id);
-    toast.send("Removed from collection", { duration: 3000, type: ToastType.INFO });
-  } catch (error) {
-    toast.send('Error removing from collection', { duration: 3000, type: ToastType.ERROR });
-  }
+	try {
+		saved_game_schema.parse(game);
+		collectionStore.remove(game.id);
+		toast.send('Removed from collection', { duration: 3000, type: ToastType.INFO });
+	} catch (error) {
+		toast.send('Error removing from collection', { duration: 3000, type: ToastType.ERROR });
+	}
 }

src/routes/game/[id]/+page.server.ts

@@ -4,7 +4,9 @@ import { boardGameApi } from '../../api';
 
 export const load: PageServerLoad = async ({ params, setHeaders }) => {
 	const queryParams = {
-		ids: `${params?.id}`
+		ids: `${params?.id}`,
+		fields:
+			'id,name,min_age,min_players,max_players,thumb_url,playtime,min_playtime,max_playtime,min_age,description,year_published,image_url'
 	};
 
 	const response = await boardGameApi('get', `search`, queryParams);
@@ -16,8 +18,12 @@ export const load: PageServerLoad = async ({ params, setHeaders }) => {
 			'Cache-Control': 'max-age=3600'
 		});
 
+		const game = gameResponse?.games[0];
+		game.players = `${game.min_players}-${game.max_players}`;
+		game.playtime = `${game.min_playtime}-${game.max_playtime}`;
+
 		return {
-			game: gameResponse?.games[0]
+			game
 		};
 	}
 

src/routes/search/+page.server.ts

@@ -21,7 +21,7 @@ export const load: PageServerLoad = async ({ fetch, url }) => {
 		fuzzy_match: true,
 		name: '',
 		fields:
-			'id,name,minAge,minPlayers,maxPlayers,exactMinPlayers,exactMaxPlayers,thumb_url,players,playtime,min_age,description'
+			'id,name,min_age,min_players,max_players,thumb_url,min_playtime,max_playtime,min_age,description'
 	};
 
 	try {
@@ -113,6 +113,8 @@ export const load: PageServerLoad = async ({ fetch, url }) => {
 			console.log('totalCount', totalCount);
 			const games: GameType[] = [];
 			gameList.forEach((game) => {
+				game.players = `${game.min_players}-${game.max_players}`;
+				game.playtime = `${game.min_playtime}-${game.max_playtime}`;
 				games.push(mapAPIGameToBoredGame(game));
 			});
 
@@ -183,6 +185,8 @@ export const actions: Actions = {
 				console.log('totalCount', totalCount);
 				const games: GameType[] = [];
 				gameList.forEach((game) => {
+					game.players = `${game.min_players}-${game.max_players}`;
+					game.playtime = `${game.min_playtime}-${game.max_playtime}`;
 					games.push(mapAPIGameToBoredGame(game));
 				});
 

src/routes/search/+page.svelte

@@ -6,8 +6,6 @@
 	export let data: PageData;
 	export let form: ActionData;
 
-	console.log('data limit', data?.limit);
-
 	$: if (data?.games) {
 		gameStore.removeAll();
 		gameStore.addAll(data?.games);