Refactor AdventureCard and CardCarousel components

seanmorley15 · Oct 14, 2024 · 2601b07 · 2601b07
1 parent 3ee9625
commit 2601b07
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 46 deletions.
diff --git a/frontend/src/lib/components/AdventureCard.svelte b/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';
 

diff --git a/frontend/src/lib/components/CardCarousel.svelte b/frontend/src/lib/components/CardCarousel.svelte
@@ -4,30 +4,34 @@
 
 	export let adventures: Adventure[] = [];
 
-	let adventure_images: string[] = [];
-	let currentSlide = 0; // Declare as a regular variable
-
-	let adventure: Adventure | null = null;
+	let currentSlide = 0;
 	let image_url: string | null = null;
 
-	adventures.forEach((adventure) => {
-		adventure_images = [...adventure_images, ...adventure.images.map((image) => image.image)];
-	});
+	$: adventure_images = adventures.flatMap((adventure) =>
+		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>
 

diff --git a/frontend/src/lib/components/CollectionCard.svelte b/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();

diff --git a/frontend/src/lib/components/ImageDisplayModal.svelte b/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">
-			<h3 class="font-bold text-2xl">Image Preview</h3>
-			<button class="btn btn-circle btn-neutral" on:click={close}>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-6 w-6"
-					fill="none"
-					viewBox="0 0 24 24"
-					stroke="currentColor"
-				>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M6 18L18 6M6 6l12 12"
-					/>
-				</svg>
-			</button>
-		</div>
-		<div
-			class="flex justify-center items-center"
-			style="display: flex; justify-content: center; align-items: center;"
-		>
-			<img
-				src={image}
-				alt="My Adventure"
-				style="max-width: 100%; max-height: 75vh; object-fit: contain;"
-			/>
-		</div>
+		{#if adventure}
+			<div class="modal-header flex justify-between items-center mb-4">
+				<h3 class="font-bold text-2xl">{adventure.name}</h3>
+				<button class="btn btn-circle btn-neutral" on:click={close}>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-6 w-6"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M6 18L18 6M6 6l12 12"
+						/>
+					</svg>
+				</button>
+			</div>
+			<div
+				class="flex justify-center items-center"
+				style="display: flex; justify-content: center; align-items: center;"
+			>
+				<img
+					src={image}
+					alt={adventure.name}
+					style="max-width: 100%; max-height: 75vh; object-fit: contain;"
+				/>
+			</div>
+		{/if}
 	</div>
 </dialog>