From 06a73e6b10c9cc375823d7a3b6248b4345161b4a Mon Sep 17 00:00:00 2001
From: Adrian Rosin <adrian.rosin.etu@univ-lille.fr>
Date: Wed, 31 Jan 2024 09:26:29 +0100
Subject: [PATCH] added pause/play button which pauses/plays the animations as
 a nav

---
 static/index.html    |  1 -
 static/script-bon.js | 31 ++++++++-----------------------
 2 files changed, 8 insertions(+), 24 deletions(-)

diff --git a/static/index.html b/static/index.html
index 2f10ee3..a1ce300 100644
--- a/static/index.html
+++ b/static/index.html
@@ -121,7 +121,6 @@
 
     <main aria-label="contenu de la page web">
         <div id="jardin">
-            <button id="toggleAnimation">Pause</button>
             <div id="illustration-accueil" class="noscroll" role="img" aria-label="deux fleurs dessinées en ascii animées" tabindex="0">
                 <!-- séquences de l'animation qui est lancée grâce à l'avant avant dernière ligne -->
                 <pre class="center" aria-label="Animation de texte de bienvenue">
diff --git a/static/script-bon.js b/static/script-bon.js
index 8f416b0..c369bb1 100644
--- a/static/script-bon.js
+++ b/static/script-bon.js
@@ -2,27 +2,6 @@
 let animationPaused = false;
 // Dictionary to keep track of animation intervals
 let animationIntervals = {};
-
-document.getElementById('toggleAnimation').addEventListener('click', function() {
-  const button = document.getElementById('toggleAnimation');
-
-  if (animationPaused) {
-    button.textContent = 'Pause';
-    animationPaused = false;
-    // Play the animation
-    Object.keys(animationIntervals).forEach(id => {
-      animationIntervals[id] = setInterval(updateAnimation, delays[id], id, frames[id], frames[id].length);
-    });
-  } else {
-    button.textContent = 'Play';
-    animationPaused = true;
-    // Pause the animation
-    Object.keys(animationIntervals).forEach(id => {
-      clearInterval(animationIntervals[id]);
-    });
-  }
-});
-
 // Dictionary to keep track of delay count for each animation
 let delays = {};
 // Dictionary to keep track of frame for each animation
@@ -87,13 +66,19 @@ document.addEventListener('DOMContentLoaded', function() {
 function toggleAnimation() {
   const toggleable = document.querySelector('.toggleable');
   const imgTopToggleable = document.querySelector('.img_top_toggleable');
-
+  // Play the animations
   if (toggleable.style.display === 'none') {
     toggleable.style.display = 'block';
     imgTopToggleable.style.display = 'none';
-  } else {
+    Object.keys(animationIntervals).forEach(id => {
+      animationIntervals[id] = setInterval(updateAnimation, delays[id], id, frames[id], frames[id].length);
+    });
+  } else {  // Pause the animations
     toggleable.style.display = 'none';
     imgTopToggleable.style.display = 'block';
+    Object.keys(animationIntervals).forEach(id => {
+      clearInterval(animationIntervals[id]);
+    });
   }
 }