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">

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]);
+    });
   }
 }