Refactor z nowa templatka

dyktando.js

@@ -35,6 +35,7 @@
   const summaryScore   = document.getElementById('summary-score')
   const summaryBackBtn = document.getElementById('summary-back-btn')
   const dykScroll      = document.getElementById('dyk-scroll')
+  const progressBar    = document.getElementById('dyk-progress-bar-inner')
 
   // ── Load texts ────────────────────────────────────────────────────────────
   fetch('dyktanda.json')
@@ -42,7 +43,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', () => startGame(item.name, item.text))
         textList.appendChild(btn)
@@ -97,6 +98,7 @@
     textDisplay.classList.remove('hidden')
     choicesEl.classList.remove('hidden')
     progressEl.textContent = ''
+    progressBar.style.width = '0%'
 
     listWrap.classList.add('hidden')
     playWrap.classList.remove('hidden')
@@ -127,7 +129,7 @@
             span.textContent = tok.answer
           } else {
             span.className = 'dyk-blank dyk-blank--err'
-            span.innerHTML = `<s>${esc(tok.userAnswer)}</s><sup>${esc(tok.answer)}</sup>`
+            span.innerHTML = `<s>${esc(tok.userAnswer)}</s><sup class="dyk-correction">${esc(tok.answer)}</sup>`
           }
         } else if (tok.id === current) {
           span.className = 'dyk-blank dyk-blank--active'
@@ -170,6 +172,8 @@
       const el = document.getElementById(`blank-${idx}`)
       if (el) el.scrollIntoView({ block: 'center', behavior: 'smooth' })
     })
+
+    updateProgressBar()
   }
 
   // ── Handle answer ─────────────────────────────────────────────────────────
@@ -188,6 +192,7 @@
     } else {
       activateBlank(nextIdx)
     }
+    updateProgressBar()
   }
 
   // ── Summary ───────────────────────────────────────────────────────────────
@@ -202,8 +207,9 @@
     if (total === 0) {
       summaryScore.textContent = 'Brak liter do uzupełnienia w tym tekście.'
       summaryText.innerHTML = esc(origText)
+      updateProgressBar()
     } else {
-      summaryScore.textContent = `Poprawnie: ${correct} / ${total}`
+      summaryScore.textContent = `Poprawnie: ${correct} z ${total}`
       summaryText.innerHTML = buildSummaryHTML()
     }
 
@@ -240,9 +246,9 @@
       word.blanks.forEach(blank => {
         if (blank.start > wPos) inner += esc(origText.slice(wPos, blank.start))
         if (blank.correct) {
-          inner += `<span class="dyk-blank--ok">${esc(blank.answer)}</span>`
+          inner += `<span class="dyk-word--ok">${esc(blank.answer)}</span>`
         } else {
-          inner += `<span class="dyk-blank--err"><s>${esc(blank.userAnswer)}</s><sup>${esc(blank.answer)}</sup></span>`
+          inner += `<span class="dyk-word--err"><s>${esc(blank.userAnswer)}</s><sup class="dyk-correction">${esc(blank.answer)}</sup></span>`
         }
         wPos = blank.end
       })
@@ -259,6 +265,18 @@
     return html
   }
 
+  function updateProgressBar() {
+    const total = blanks.length
+    if (total === 0) {
+      progressBar.style.width = '100%'
+      return
+    }
+    // Use `current` which is the index of the *next* blank to be filled.
+    // When the game ends, `current` becomes `blanks.length`.
+    const progress = (current / total) * 100
+    progressBar.style.width = `${progress}%`
+  }
+
   function esc(s) {
     return (s || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
   }