From 7d7b6d5667cc43273b80d3be4e8192d69c33352f Mon Sep 17 00:00:00 2001
From: itsscb <dev@itsscb.de>
Date: Tue, 3 Jun 2025 21:01:00 +0200
Subject: [PATCH] fix: timeout overlapping

---
 index.html | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 88d8f76..b84a0dc 100755
--- a/index.html
+++ b/index.html
@@ -116,6 +116,7 @@
 	</style>
 	<script>
 		let timeoutSeconds = 60;
+		let timeoutId = null;
 		let image_position = '';
 		function updateImage() {
 			const img = document.querySelector('img');
@@ -154,8 +155,10 @@
 			start.classList.add('removed');
 			timeoutInput.classList.add('hidden');
 			timeoutInputLabel.classList.add('hidden');
-
-			setTimeout(() => {
+			if (timeoutId) {
+				clearTimeout(timeoutId);
+			}
+			timeoutId = setTimeout(() => {
 				img.classList.add('bw');
 				start.classList.remove('removed');
 				next.classList.add('removed');
@@ -174,10 +177,6 @@
 		<img id="pantomime-img" class="hidden" src="animals.png" alt="Pantomime Image" />
 	</div>
 	<button type="button" id="button-start" onclick="handleClick()">
-		<!-- <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"> -->
-		<!---->
-		<!-- 				<path d="M320-200v-560l440 280-440 280Zm80-280Zm0 134 210-134-210-134v268Z" /> -->
-		<!-- 			</svg> -->
 		<svg id="svg-next" class="removed" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" width="18rem"
 			fill="#e3e3e3">
 			<path d="M660-240v-480h80v480h-80Zm-440 0v-480l360 240-360 240Zm80-240Zm0 90 136-90-136-90v180Z" />