From de759e1b58fac310877706a8b68162f3fa772ff0 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Mon, 19 Aug 2024 08:43:43 -0400
Subject: [PATCH 1/2] Image display modal

---
 .../src/lib/components/AdventureCard.svelte   | 11 ++++-
 .../lib/components/ImageDisplayModal.svelte   | 42 +++++++++++++++++++
 2 files changed, 51 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/lib/components/ImageDisplayModal.svelte

diff --git a/frontend/src/lib/components/AdventureCard.svelte b/frontend/src/lib/components/AdventureCard.svelte
index 7ea900c..5083b6b 100644
--- a/frontend/src/lib/components/AdventureCard.svelte
+++ b/frontend/src/lib/components/AdventureCard.svelte
@@ -18,6 +18,7 @@
 	import CollectionLink from './CollectionLink.svelte';
 	import DotsHorizontal from '~icons/mdi/dots-horizontal';
 	import DeleteWarning from './DeleteWarning.svelte';
+	import ImageDisplayModal from './ImageDisplayModal.svelte';
 
 	export let type: string;
 
@@ -27,7 +28,7 @@
 	let isWarningModalOpen: boolean = false;
 
 	let keyword: string = '';
-
+	let image_url: string | null = null;
 	export let adventure: Adventure;
 
 	if (adventure.type == 'visited') {
@@ -155,6 +156,10 @@
 	/>
 {/if}
 
+{#if image_url}
+	<ImageDisplayModal image={image_url} on:close={() => (image_url = null)} {adventure} />
+{/if}
+
 <div
 	class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-primary-content shadow-xl text-base-content"
 >
@@ -166,7 +171,9 @@
 						class="carousel-item w-full"
 						style="display: {i === currentSlide ? 'block' : 'none'}"
 					>
-						<img src={image.image} class="w-full h-48 object-cover" alt={adventure.name} />
+						<a href="" on:click={() => (image_url = image.image)}
+							><img src={image.image} class="w-full h-48 object-cover" alt={adventure.name} /></a
+						>
 						<div class="flex justify-center w-full py-2 gap-2">
 							{#each adventure.images as _, i}
 								<button
diff --git a/frontend/src/lib/components/ImageDisplayModal.svelte b/frontend/src/lib/components/ImageDisplayModal.svelte
new file mode 100644
index 0000000..c13855b
--- /dev/null
+++ b/frontend/src/lib/components/ImageDisplayModal.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
+	import { onMount } from 'svelte';
+	let modal: HTMLDialogElement;
+	import { appVersion, copyrightYear, versionChangelog } from '$lib/config';
+	import type { Adventure } from '$lib/types';
+
+	export let image: string;
+	export let adventure: Adventure;
+
+	onMount(() => {
+		modal = document.getElementById('my_modal_1') as HTMLDialogElement;
+		if (modal) {
+			modal.showModal();
+		}
+	});
+
+	function close() {
+		dispatch('close');
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			dispatch('close');
+		}
+	}
+</script>
+
+<dialog id="my_modal_1" class="modal">
+	<!-- 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">
+		<h3 class="font-bold mb-4 text-2xl">{adventure.name}</h3>
+
+		<div class="flex flex-col items-center">
+			<img src={image} alt={adventure.name} class="w-full h-full object-cover" />
+		</div>
+
+		<button class="btn mt-4 btn-primary" on:click={close}>Close</button>
+	</div>
+</dialog>

From 39fb4ad1ca2a650028da3e230e9f523b5e50c241 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Mon, 19 Aug 2024 08:44:00 -0400
Subject: [PATCH 2/2] Image display modal

---
 frontend/src/lib/components/AdventureCard.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/components/AdventureCard.svelte b/frontend/src/lib/components/AdventureCard.svelte
index 5083b6b..4bf99ca 100644
--- a/frontend/src/lib/components/AdventureCard.svelte
+++ b/frontend/src/lib/components/AdventureCard.svelte
@@ -171,7 +171,8 @@
 						class="carousel-item w-full"
 						style="display: {i === currentSlide ? 'block' : 'none'}"
 					>
-						<a href="" on:click={() => (image_url = image.image)}
+						<!-- svelte-ignore a11y-invalid-attribute -->
+						<a href="#" on:click={() => (image_url = image.image)}
 							><img src={image.image} class="w-full h-48 object-cover" alt={adventure.name} /></a
 						>
 						<div class="flex justify-center w-full py-2 gap-2">