Pause autoscroll onclick

js/performCrawl.js

@@ -1,25 +1,52 @@
 import { crawlContainer } from './domRefs.js'
+import sounds from './sounds.js'
 
+/**
+ * @param {any[string]} messages
+ */
 export default function performCrawl(messages) {
-  messages.forEach((message, index) => {
-    const block = document.createElement('div');
-    block.classList.add('block');
-    block.innerText = message;
+  messages.forEach((/** @type {string} */ message, /** @type {number} */ index) => {
+    const block = document.createElement('div')
+    block.classList.add('block')
+    block.innerText = message
 
     if (index === 0) {
-      block.style.paddingTop = `${crawlContainer.clientHeight}px`;
+      block.style.paddingTop = `${crawlContainer.clientHeight}px`
     }
     if (index === messages.length - 1) {
-      block.style.paddingBottom = '10000px';
+      block.style.paddingBottom = '10000px'
     }
 
-    crawlContainer.appendChild(block);
-  });
+    crawlContainer.appendChild(block)
+  })
 
+  startAutoScroll()
+
+  crawlContainer.onclick = toggleAutoScroll
+}
+
+let reqId
+
+function toggleAutoScroll() {
+  if (reqId) {
+    stopAutoScroll()
+  } else {
+    startAutoScroll()
+  }
+}
+
+function stopAutoScroll() {
+  sounds.pause()
+  cancelAnimationFrame(reqId)
+  reqId = null
+}
+
+function startAutoScroll() {
+  sounds.play()
   const scroll = () => {
-    crawlContainer.scrollBy({ top: window.innerHeight > 1000 ? 2 : 1 });
-    requestAnimationFrame(scroll);
-  };
-  requestAnimationFrame(scroll);
+    crawlContainer.scrollBy({ top: window.innerHeight > 1000 ? 2 : 1 })
+    reqId = requestAnimationFrame(scroll)
+  }
+  reqId = requestAnimationFrame(scroll)
 }
 

js/sounds.js

@@ -27,6 +27,10 @@ class Sounds {
     this.#audio.playbackRate = rate
   }
 
+  pause() {
+    this.#audio.pause()
+  }
+
   /**
      * @param {string} path
      */