From af2af11626f6c80c47a9d858c14c1b3f651556d8 Mon Sep 17 00:00:00 2001
From: Yohan Boujon <yo.boujon@gmail.com>
Date: Sun, 27 Apr 2025 22:53:35 +0200
Subject: [PATCH] Index: Added photo button for switching to other photos.

---
 src/lib/css/base.css          |  1 +
 src/lib/css/button-slider.css |  2 +-
 src/lib/css/photo.css         | 31 +++++++++++++++++++++++++++++
 src/lib/css/pill.css          |  2 +-
 src/routes/+page.svelte       | 37 ++++++++++++++++++++++++-----------
 5 files changed, 60 insertions(+), 13 deletions(-)
 create mode 100644 src/lib/css/photo.css

diff --git a/src/lib/css/base.css b/src/lib/css/base.css
index 4875770..be1dffe 100644
--- a/src/lib/css/base.css
+++ b/src/lib/css/base.css
@@ -44,6 +44,7 @@ h2 {
     --background-dark: linear-gradient(180deg, rgba(248, 241, 241, 1) 0%, rgba(224, 217, 217, 1) 100%);
     --background-purple: linear-gradient(to right, #241d25c4 0%, #3d2b47c4 100%);
     --shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
+    --shadow-strong: 0px 8px 18px -1px rgba(52, 42, 58, 0.2);
     --shadow-hover: rgba(43, 33, 48, 0.5) 0px 22px 70px 4px;
     --shadow-active: #2c1235a0 0px 20px 30px -10px;
     --z-index-last: -1;
diff --git a/src/lib/css/button-slider.css b/src/lib/css/button-slider.css
index ecc22a2..aa30146 100644
--- a/src/lib/css/button-slider.css
+++ b/src/lib/css/button-slider.css
@@ -5,7 +5,7 @@
     background: var(--background-dark);
     border-radius: 3rem;
     padding: 0 !important;
-    box-shadow: 0px 8px 18px -1px rgba(52, 42, 58, 0.2);
+    box-shadow: var(--shadow-strong);
 }
 
 .button-slider-active {
diff --git a/src/lib/css/photo.css b/src/lib/css/photo.css
new file mode 100644
index 0000000..6852176
--- /dev/null
+++ b/src/lib/css/photo.css
@@ -0,0 +1,31 @@
+.photo-button-container {
+    display: flex;
+    width: 6rem;
+    height: 3rem;
+    background: var(--background-dark);
+    border-radius: 3rem;
+    box-shadow: var(--shadow-strong);
+    margin-top: 1.5rem;
+}
+
+.photo-button-container button {
+    background-image: linear-gradient(to right, var(--navbar-dark) 0%, var(--navbar-light) 100%);
+    box-shadow: var(--shadow);
+    color: var(--color-background);
+    border-radius: 100%;
+    display: flex;
+    align-items: center;
+    margin: 0.5rem;
+    border: none;
+    cursor: pointer;
+    transition: var(--transition);
+}
+
+.photo-button-container button:hover {
+    box-shadow: var(--shadow-hover);
+}
+
+.photo-button-container button:active {
+    box-shadow: var(--shadow-active);
+    transform: translateY(4px);
+}
\ No newline at end of file
diff --git a/src/lib/css/pill.css b/src/lib/css/pill.css
index a93ce8c..c410bfb 100644
--- a/src/lib/css/pill.css
+++ b/src/lib/css/pill.css
@@ -5,7 +5,7 @@
     font-weight: 600;
     background-color: #00000000;
     border-radius: 3rem;
-    box-shadow: 0px 8px 18px -1px rgba(52, 42, 58, 0.2);
+    box-shadow: var(--shadow-strong);
     margin: 0.5rem;
 }
 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f07a350..f06307f 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,6 +1,7 @@
 <script>
 	import "$lib/css/base.css";
 	import "$lib/css/main.css";
+	import "$lib/css/photo.css";
 
 	import CoverImg from "$lib/components/cover-img.svelte";
 	import Person from "$lib/components/person.svelte";
@@ -14,18 +15,19 @@
 
 	import hubjson from "$lib/json/hub.json";
 	import { onMount } from "svelte";
+	import SvgIcon from "@jamescoyle/svelte-icon/src/svg-icon.svelte";
+	import { mdiChevronRight, mdiChevronLeft } from "@mdi/js";
 
 	let photoList = filterPhotos(hubjson.photos);
 	$: index = 0;
 	let photoDiv;
 	let tempPhotoDiv;
 
-	function updateIndex(advance) {
-		if (advance && index < photoList.length - 1) {
-			index++;
-		} else if (!advance && index >= 1) {
-			index--;
-		}
+	function canAdvance(advance) {
+		return !(
+			(advance && index < photoList.length - 1) ||
+			(!advance && index >= 1)
+		);
 	}
 
 	function swipeCanva(advance) {
@@ -33,8 +35,7 @@
 		const animTranslate = advance ? [-width, width] : [width, -width];
 
 		// Checking if we can play the animation
-		if (!((advance && index < photoList.length - 1) || (!advance && index >= 1)))
-			return;
+		if (canAdvance(advance)) return;
 
 		anime({
 			targets: photoDiv,
@@ -43,7 +44,7 @@
 			duration: 300,
 			easing: "easeInQuad",
 			complete: function () {
-				updateIndex(advance);
+				index = advance ? index + 1 : index - 1;
 				photoDiv.style.transform = `translateX(${animTranslate[1]}px)`;
 				anime({
 					targets: photoDiv,
@@ -125,6 +126,20 @@
 			<img alt="nothing" src={photo.urlcompressed} />
 		{/each}
 	</div>
-	<button on:click={() => swipeCanva(false)}>&lt;</button>
-	<button on:click={() => swipeCanva(true)}>&gt;</button>
+	<div class="flex w-100 justify-center">
+		<div class="photo-button-container">
+			<button
+				class={canAdvance(false) ? "disabled" : ""}
+				on:click={() => swipeCanva(false)}
+			>
+				<SvgIcon type="mdi" path={mdiChevronLeft} />
+			</button>
+			<button
+				class={canAdvance(true) ? "disabled" : "flex-end"}
+				on:click={() => swipeCanva(true)}
+			>
+				<SvgIcon type="mdi" path={mdiChevronRight} />
+			</button>
+		</div>
+	</div>
 </div>