diff --git a/js/performCrawl.js b/js/performCrawl.js index f10e016..97628ec 100644 --- a/js/performCrawl.js +++ b/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) } diff --git a/js/sounds.js b/js/sounds.js index 454c5af..e1bd348 100644 --- a/js/sounds.js +++ b/js/sounds.js @@ -27,6 +27,10 @@ class Sounds { this.#audio.playbackRate = rate } + pause() { + this.#audio.pause() + } + /** * @param {string} path */