Refactor z nowa templatka

czytanie.js

@@ -2,7 +2,7 @@
 ;(function () {
   // ms between line advances for each speed level (0 = manual)
   const SPEEDS_MS    = [0, 3500, 2000, 1000]
-  const SPEED_LABELS = ['⏸', '▶', '▶▶', '▶▶▶']
+  const SPEED_LABELS = ['Pauza', 'Wolno', 'Średnio', 'Szybko']
 
   let yOffset   = 0
   let lineH     = 80   // recalculated after render
@@ -21,6 +21,7 @@
   const readViewport  = document.getElementById('read-viewport')
   const readTextEl    = document.getElementById('read-text')
   const nextLineBtn   = document.getElementById('next-line-btn')
+  const progressBar   = document.getElementById('read-progress-bar-inner')
 
   // ── Load text list from dyktanda.json ────────────────────────────────────
   fetch('dyktanda.json')
@@ -28,7 +29,7 @@
     .then(data => {
       data.forEach(item => {
         const btn = document.createElement('button')
-        btn.className = 'reading-item'
+        btn.className = 'list-item-btn'
         btn.textContent = item.name
         btn.addEventListener('click', () => startReading(item.name, item.text))
         textList.appendChild(btn)
@@ -55,6 +56,7 @@
     readTextEl.textContent      = text
     readTextEl.style.transform  = 'translateY(0)'
     speedBtn.textContent        = SPEED_LABELS[0]
+    progressBar.style.width     = '0%'
 
     listWrap.classList.add('hidden')
     readWrap.classList.remove('hidden')
@@ -68,8 +70,9 @@
           ? parseFloat(cs.fontSize) * 1.35
           : parseFloat(lhVal)
 
-        maxOffset = Math.max(0, readTextEl.offsetHeight - readViewport.offsetHeight)
+        maxOffset = Math.max(0, readTextEl.offsetHeight - lineH)
         updateNextBtn()
+        updateProgressBar()
       })
     })
   }
@@ -82,6 +85,8 @@
     autoTimer = null
     readWrap.classList.add('hidden')
     listWrap.classList.remove('hidden')
+    // Reset speed to manual on exit
+    speedIdx = 0;
   })
 
   // ── Speed selector ────────────────────────────────────────────────────────
@@ -107,6 +112,7 @@
     yOffset = Math.min(yOffset + lineH, maxOffset)
     readTextEl.style.transform = `translateY(${-yOffset}px)`
     updateNextBtn()
+    updateProgressBar()
     if (yOffset >= maxOffset) stopAutoAtEnd()
   }
 
@@ -123,4 +129,9 @@
   function updateNextBtn() {
     nextLineBtn.disabled = yOffset >= maxOffset
   }
+
+  function updateProgressBar() {
+    const progress = maxOffset > 0 ? (yOffset / maxOffset) * 100 : 100
+    progressBar.style.width = `${progress}%`
+  }
 })()