Adding pagination to the collection and wishlist pages.

src/routes/collection/+page.svelte

@@ -3,12 +3,18 @@
 	import { collectionStore } from '$lib/stores/collectionStore';
 	import type { GameType, SavedGameType } from '$root/lib/types';
 	import { boredState } from '$root/lib/stores/boredState';
+	import Pagination from '$root/lib/components/pagination/index.svelte';
 	import RemoveCollectionDialog from '$root/lib/components/dialog/RemoveCollectionDialog.svelte';
 	import RemoveWishlistDialog from '$root/lib/components/dialog/RemoveWishlistDialog.svelte';
+	import { tick } from 'svelte';
 
-	let isOpen: boolean = false;
 	let gameToRemove: GameType | SavedGameType;
-	console.log('isOpen', isOpen);
+	let pageSize = 10;
+	let page = 1;
+
+	$: totalItems = $collectionStore.length;
+	$: skip = (page - 1) * pageSize;
+	$: gamesShown = $collectionStore.slice(skip, skip + pageSize);
 
 	interface RemoveGameEvent extends Event {
 		detail: GameType | SavedGameType;
@@ -33,6 +39,27 @@
 			dialog: { isOpen: true, content: RemoveWishlistDialog, additionalData: gameToRemove }
 		}));
 	}
+
+	async function handleNextPageEvent(event: CustomEvent) {
+		if (+event?.detail?.page === page + 1) {
+			page += 1;
+		}
+		await tick();
+	}
+
+	async function handlePreviousPageEvent(event: CustomEvent) {
+		if (+event?.detail?.page === page - 1) {
+			page -= 1;
+		}
+		await tick();
+	}
+
+	async function handlePerPageEvent(event: CustomEvent) {
+		console.log('Per Page Event called', event.detail);
+		page = 1;
+		pageSize = event.detail.pageSize;
+		await tick();
+	}
 </script>
 
 <svelte:head>
@@ -46,13 +73,24 @@
 		{#if $collectionStore.length === 0}
 			<h2>No games in your collection</h2>
 		{:else}
-			{#each $collectionStore as game (game.id)}
+			{#each gamesShown as game (game.id)}
 				<Game
 					on:handleRemoveWishlist={handleRemoveWishlist}
 					on:handleRemoveCollection={handleRemoveCollection}
 					{game}
 				/>
 			{/each}
+			<Pagination
+				{pageSize}
+				{page}
+				{totalItems}
+				forwardText="Next"
+				backwardText="Prev"
+				pageSizes={[10, 25, 50, 100]}
+				on:nextPageEvent={handleNextPageEvent}
+				on:previousPageEvent={handlePreviousPageEvent}
+				on:perPageEvent={handlePerPageEvent}
+			/>
 		{/if}
 	</div>
 </div>

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

@@ -62,11 +62,19 @@
 	</div>
 	<div style="display: grid; place-items: center; gap: 2rem;">
 		<div class="details">
-			<p>Year: {game?.year_published}</p>
+			{#if game?.year_published}
-			<p>Players: {game.players}</p>
+				<p>Year: {game?.year_published}</p>
-			<p>Playtime: {game.playtime} minutes</p>
+			{/if}
-			<p>Minimum Age: {game.min_age}</p>
+			{#if game?.players}
-			{#if game?.price !== 0.0}
+				<p>Players: {game.players}</p>
+			{/if}
+			{#if game?.playtime}
+				<p>Playtime: {game.playtime} minutes</p>
+			{/if}
+			{#if game?.min_age}
+				<p>Minimum Age: {game.min_age}</p>
+			{/if}
+			{#if +game?.price !== 0.0}
 				<p>Price: ${game?.price}</p>
 			{/if}
 			<LinkWithIcon external ariaLabel={`Board Game Atlas Link for ${game.name}`} url={game.url}>

src/routes/wishlist/+page.svelte

@@ -3,12 +3,18 @@
 	import { wishlistStore } from '$lib/stores/wishlistStore';
 	import type { GameType, SavedGameType } from '$root/lib/types';
 	import { boredState } from '$root/lib/stores/boredState';
+	import Pagination from '$root/lib/components/pagination/index.svelte';
 	import RemoveWishlistDialog from '$root/lib/components/dialog/RemoveWishlistDialog.svelte';
 	import RemoveCollectionDialog from '$root/lib/components/dialog/RemoveCollectionDialog.svelte';
+	import { tick } from 'svelte';
 
-	let isOpen: boolean = false;
 	let gameToRemove: GameType | SavedGameType;
-	console.log('isOpen', isOpen);
+	let pageSize = 10;
+	let page = 1;
+
+	$: totalItems = $wishlistStore.length;
+	$: skip = (page - 1) * pageSize;
+	$: gamesShown = $wishlistStore.slice(skip, skip + pageSize);
 
 	interface RemoveGameEvent extends Event {
 		detail: GameType | SavedGameType;
@@ -29,6 +35,27 @@
 			dialog: { isOpen: true, content: RemoveWishlistDialog, additionalData: gameToRemove }
 		}));
 	}
+
+	async function handleNextPageEvent(event: CustomEvent) {
+		if (+event?.detail?.page === page + 1) {
+			page += 1;
+		}
+		await tick();
+	}
+
+	async function handlePreviousPageEvent(event: CustomEvent) {
+		if (+event?.detail?.page === page - 1) {
+			page -= 1;
+		}
+		await tick();
+	}
+
+	async function handlePerPageEvent(event: CustomEvent) {
+		console.log('Per Page Event called', event.detail);
+		page = 1;
+		pageSize = event.detail.pageSize;
+		await tick();
+	}
 </script>
 
 <svelte:head>
@@ -42,13 +69,24 @@
 		{#if $wishlistStore.length === 0}
 			<h2>No games in your wishlist</h2>
 		{:else}
-			{#each $wishlistStore as game}
+			{#each gamesShown as game}
 				<Game
 					on:handleRemoveWishlist={handleRemoveWishlist}
 					on:handleRemoveCollection={handleRemoveCollection}
 					{game}
 				/>
 			{/each}
+			<Pagination
+				{pageSize}
+				{page}
+				{totalItems}
+				forwardText="Next"
+				backwardText="Prev"
+				pageSizes={[10, 25, 50, 100]}
+				on:nextPageEvent={handleNextPageEvent}
+				on:previousPageEvent={handlePreviousPageEvent}
+				on:perPageEvent={handlePerPageEvent}
+			/>
 		{/if}
 	</div>
 </div>