fix: timeout overlapping

This commit is contained in:
itsscb 2025-06-03 21:01:00 +02:00
parent f04948e089
commit 7d7b6d5667

View File

@ -116,6 +116,7 @@
</style> </style>
<script> <script>
let timeoutSeconds = 60; let timeoutSeconds = 60;
let timeoutId = null;
let image_position = ''; let image_position = '';
function updateImage() { function updateImage() {
const img = document.querySelector('img'); const img = document.querySelector('img');
@ -154,8 +155,10 @@
start.classList.add('removed'); start.classList.add('removed');
timeoutInput.classList.add('hidden'); timeoutInput.classList.add('hidden');
timeoutInputLabel.classList.add('hidden'); timeoutInputLabel.classList.add('hidden');
if (timeoutId) {
setTimeout(() => { clearTimeout(timeoutId);
}
timeoutId = setTimeout(() => {
img.classList.add('bw'); img.classList.add('bw');
start.classList.remove('removed'); start.classList.remove('removed');
next.classList.add('removed'); next.classList.add('removed');
@ -174,10 +177,6 @@
<img id="pantomime-img" class="hidden" src="animals.png" alt="Pantomime Image" /> <img id="pantomime-img" class="hidden" src="animals.png" alt="Pantomime Image" />
</div> </div>
<button type="button" id="button-start" onclick="handleClick()"> <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" <svg id="svg-next" class="removed" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" width="18rem"
fill="#e3e3e3"> fill="#e3e3e3">
<path d="M660-240v-480h80v480h-80Zm-440 0v-480l360 240-360 240Zm80-240Zm0 90 136-90-136-90v180Z" /> <path d="M660-240v-480h80v480h-80Zm-440 0v-480l360 240-360 240Zm80-240Zm0 90 136-90-136-90v180Z" />