Update script.js

script.js

@@ -14,7 +14,6 @@
     };
     step();
   }
-  // Run after mount
   setTimeout(initTicker, 100);
 })();
 
@@ -23,15 +22,11 @@
   let raf = null;
   let y = 0;
 
-  function getScrollEl(){
-    return document.getElementById("prompterScroll");
-  }
-  function getSpeedEl(){
-    return document.getElementById("pSpeed");
-  }
+  function elScroll(){ return document.getElementById("prompterScroll"); }
+  function elSpeed(){ return document.getElementById("pSpeed"); }
 
   function loop(){
-    const el = getScrollEl();
+    const el = elScroll();
     if(!el) return;
     const playing = (el.dataset.playing === "true");
     const speed = parseFloat(el.dataset.speed || "40"); // px/s
@@ -44,16 +39,16 @@
   }
 
   function togglePlay(){
-    const el = getScrollEl(); if(!el) return;
+    const el = elScroll(); if(!el) return;
     const playing = (el.dataset.playing === "true");
     el.dataset.playing = (!playing).toString();
   }
   function speedDelta(d){
-    const el = getScrollEl(); if(!el) return;
+    const el = elScroll(); if(!el) return;
     let s = parseFloat(el.dataset.speed || "40");
     s = Math.max(5, Math.min(200, s + d));
     el.dataset.speed = String(s);
-    const sp = getSpeedEl(); if(sp) sp.textContent = `${Math.round(s)}px/s`;
+    const sp = elSpeed(); if(sp) sp.textContent = `${Math.round(s)}px/s`;
   }
   function fullScreen(){
     const vp = document.querySelector(".prompter__viewport");
@@ -64,13 +59,11 @@
       document.exitFullscreen().catch(()=>{});
     }
   }
-
   function keyHandler(e){
     if(e.key === " "){ e.preventDefault(); togglePlay(); }
     if(e.key === "ArrowUp"){ e.preventDefault(); speedDelta(+5); }
     if(e.key === "ArrowDown"){ e.preventDefault(); speedDelta(-5); }
   }
-
   function clickBind(){
     const play = document.getElementById("pPlayPause");
     const slow = document.getElementById("pSlower");
@@ -85,6 +78,6 @@
 
   setTimeout(()=>{
     clickBind();
-    if(!raf) loop();
+    if(!raf) raf = requestAnimationFrame(loop);
   }, 120);
 })();