Refactor AdventureCard and CardCarousel components

frontend/src/lib/components/AdventureCard.svelte

@@ -18,7 +18,6 @@
 	import CollectionLink from './CollectionLink.svelte';
 	import DotsHorizontal from '~icons/mdi/dots-horizontal';
 	import DeleteWarning from './DeleteWarning.svelte';
-	import ImageDisplayModal from './ImageDisplayModal.svelte';
 	import { isAdventureVisited, typeToString } from '$lib';
 	import CardCarousel from './CardCarousel.svelte';
 

frontend/src/lib/components/CardCarousel.svelte

@@ -4,30 +4,34 @@
 
 	export let adventures: Adventure[] = [];
 
-	let adventure_images: string[] = [];
+	let currentSlide = 0;
-	let currentSlide = 0; // Declare as a regular variable
-
-	let adventure: Adventure | null = null;
 	let image_url: string | null = null;
 
-	adventures.forEach((adventure) => {
+	$: adventure_images = adventures.flatMap((adventure) =>
-		adventure_images = [...adventure_images, ...adventure.images.map((image) => image.image)];
+		adventure.images.map((image) => ({ image: image.image, adventure: adventure }))
-	});
+	);
 
-	// Reactive statement to log when currentSlide changes
+	$: {
-	$: console.log('Current slide:', currentSlide);
+		if (adventure_images.length > 0) {
+			currentSlide = 0;
+		}
+	}
 
 	function changeSlide(direction: string) {
 		if (direction === 'next' && currentSlide < adventure_images.length - 1) {
-			currentSlide = currentSlide + 1; // Use direct assignment
+			currentSlide = currentSlide + 1;
 		} else if (direction === 'prev' && currentSlide > 0) {
-			currentSlide = currentSlide - 1; // Use direct assignment
+			currentSlide = currentSlide - 1;
 		}
 	}
 </script>
 
 {#if image_url}
-	<ImageDisplayModal image={image_url} on:close={() => (image_url = null)} />
+	<ImageDisplayModal
+		adventure={adventure_images[currentSlide].adventure}
+		image={image_url}
+		on:close={() => (image_url = null)}
+	/>
 {/if}
 
 <figure>
@@ -39,13 +43,13 @@
 				<!-- svelte-ignore a11y-no-static-element-interactions -->
 				<!-- svelte-ignore a11y-missing-attribute -->
 				<a
-					on:click|stopPropagation={() => (image_url = adventure_images[currentSlide])}
+					on:click|stopPropagation={() => (image_url = adventure_images[currentSlide].image)}
 					class="cursor-pointer"
 				>
 					<img
-						src={adventure_images[currentSlide]}
+						src={adventure_images[currentSlide].image}
 						class="w-full h-48 object-cover"
-						alt={adventure_images[currentSlide]}
+						alt={adventure_images[currentSlide].adventure.name}
 					/>
 				</a>
 

frontend/src/lib/components/CollectionCard.svelte

@@ -17,7 +17,6 @@
 	import TrashCan from '~icons/mdi/trashcan';
 	import DeleteWarning from './DeleteWarning.svelte';
 	import ShareModal from './ShareModal.svelte';
-	import ImageDisplayModal from './ImageDisplayModal.svelte';
 	import CardCarousel from './CardCarousel.svelte';
 
 	const dispatch = createEventDispatcher();

frontend/src/lib/components/ImageDisplayModal.svelte

@@ -6,6 +6,7 @@
 	import type { Adventure } from '$lib/types';
 
 	export let image: string;
+	export let adventure: Adventure | null = null;
 
 	onMount(() => {
 		modal = document.getElementById('my_modal_1') as HTMLDialogElement;
@@ -41,34 +42,36 @@
 	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 	<div class="modal-box w-11/12 max-w-5xl" role="dialog" on:keydown={handleKeydown} tabindex="0">
-		<div class="modal-header flex justify-between items-center mb-4">
+		{#if adventure}
-			<h3 class="font-bold text-2xl">Image Preview</h3>
+			<div class="modal-header flex justify-between items-center mb-4">
-			<button class="btn btn-circle btn-neutral" on:click={close}>
+				<h3 class="font-bold text-2xl">{adventure.name}</h3>
-				<svg
+				<button class="btn btn-circle btn-neutral" on:click={close}>
-					xmlns="http://www.w3.org/2000/svg"
+					<svg
-					class="h-6 w-6"
+						xmlns="http://www.w3.org/2000/svg"
-					fill="none"
+						class="h-6 w-6"
-					viewBox="0 0 24 24"
+						fill="none"
-					stroke="currentColor"
+						viewBox="0 0 24 24"
-				>
+						stroke="currentColor"
-					<path
+					>
-						stroke-linecap="round"
+						<path
-						stroke-linejoin="round"
+							stroke-linecap="round"
-						stroke-width="2"
+							stroke-linejoin="round"
-						d="M6 18L18 6M6 6l12 12"
+							stroke-width="2"
-					/>
+							d="M6 18L18 6M6 6l12 12"
-				</svg>
+						/>
-			</button>
+					</svg>
-		</div>
+				</button>
-		<div
+			</div>
-			class="flex justify-center items-center"
+			<div
-			style="display: flex; justify-content: center; align-items: center;"
+				class="flex justify-center items-center"
-		>
+				style="display: flex; justify-content: center; align-items: center;"
-			<img
+			>
-				src={image}
+				<img
-				alt="My Adventure"
+					src={image}
-				style="max-width: 100%; max-height: 75vh; object-fit: contain;"
+					alt={adventure.name}
-			/>
+					style="max-width: 100%; max-height: 75vh; object-fit: contain;"
-		</div>
+				/>
+			</div>
+		{/if}
 	</div>
 </dialog>