From 9e1678b8106f0b2b9d8bb80a66a4ed47dac5a467 Mon Sep 17 00:00:00 2001
From: kayomn <kayomn@kayomn.net>
Date: Mon, 24 Jun 2024 09:48:45 +0100
Subject: [PATCH] Make slideshow halt during mouse hover

---
 templates/index.html | 38 ++++++++++++++++++++++++--------------
 1 file changed, 24 insertions(+), 14 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index cbd48cf..d3f3c89 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -15,13 +15,13 @@
 			<a href="https://www.youtube.com/watch?v=zm8Sx6cVbmM">
 				<div class="title">Afterglow</div>
 				<img src="/showreel/afterglow.png" />
-				<div class="summary">Work-in-progress immersive sim experiment built using a the Ona game engine.</div>
+				<div class="summary">Work-in-progress immersive sim experiment built using the Ona game engine.</div>
 			</a>
 
 			<a href="https://www.youtube.com/watch?v=ijJhM8nfthw">
 				<div class="title">Afterglow</div>
 				<img src="/showreel/afterglow-menu.png" />
-				<div class="summary">Work-in-progress immersive sim experiment built using a the Ona game engine.</div>
+				<div class="summary">Work-in-progress immersive sim experiment built using the Ona game engine.</div>
 			</a>
 
 			<a href="https://sauce.pizzawednes.day/protectorate/game">
@@ -121,34 +121,44 @@
 </style>
 
 <script type="module">
-const slideshowIntervalSeconds = 7.5; 
+const slideshowIntervalSeconds = 5; 
 
 window.addEventListener("load", async () => {
-	let slideshows = document.getElementsByClassName("slideshow")
+	let slideshows = document.getElementsByClassName("slideshow");
 
 	for (let slideshow of slideshows) {
 		if (!slideshow.hasChildNodes()) {
 			continue;
 		}
 
-		let slideIndex = 0
+		let slideIndex = 0;
+		let intervalId;
 
-		setInterval(() => {
-			let children = slideshow.children
+		const startSlideshow = () => {
+			intervalId = setInterval(() => {
+				let children = slideshow.children;
+				slideIndex = (slideIndex + 1) % children.length;
 
-			slideIndex = (slideIndex + 1) % children.length
+				for (let index = 0; index < children.length; index += 1) {
+					children[index].style.display = (index === slideIndex) ? "block" : "none";
+				}
+			}, slideshowIntervalSeconds * 1000);
+		};
 
-			for (let index = 0; index < children.length; index += 1)
-				children[index].style.display = (index == slideIndex) ? "block" : "none"
-		}, slideshowIntervalSeconds * 1000)
+		slideshow.addEventListener("mouseenter", () => {
+			clearInterval(intervalId);
+		});
 
-		let children = slideshow.children
+		slideshow.addEventListener("mouseleave", startSlideshow);
 
-		children[0].style.display = "block"
+		let children = slideshow.children;
+		children[0].style.display = "block";
 
 		for (let index = 1; index < children.length; index += 1) {
-			children[index].style.display = "none"
+			children[index].style.display = "none";
 		}
+
+		startSlideshow();
 	}
 });
 </script>