Refactor z nowa templatka

mnozenie.js

@@ -10,7 +10,7 @@
   const feedbackEl    = document.getElementById('feedback')
   const progressInner = document.getElementById('progress-inner')
   const progressLabel = document.getElementById('progress-label')
-  const scoreLabel    = document.getElementById('score-label')
+  const scoreLabel    = document.getElementById('score-label') // This element is removed, but we might re-purpose the logic
   const summaryText   = document.getElementById('summary-text')
   const totalInput    = document.getElementById('total-input')
 
@@ -47,13 +47,13 @@
     })
   })
   document.getElementById('clear').addEventListener('click', () => { st.buf = ''; answerEl.textContent = '' })
-  document.getElementById('backspace').addEventListener('click', () => { st.buf = st.buf.slice(0,-1); answerEl.textContent = st.buf || ' ' })
+  document.getElementById('backspace').addEventListener('click', () => { st.buf = st.buf.slice(0,-1); answerEl.textContent = st.buf || '' })
   document.getElementById('submit').addEventListener('click', submit)
 
   window.addEventListener('keydown', e => {
     if (!playScreen.classList.contains('hidden')) {
       if (/^[0-9]$/.test(e.key) && st.buf.length < 6) { st.buf += e.key; answerEl.textContent = st.buf }
-      else if (e.key === 'Backspace') { st.buf = st.buf.slice(0,-1); answerEl.textContent = st.buf || ' ' }
+      else if (e.key === 'Backspace') { st.buf = st.buf.slice(0,-1); answerEl.textContent = st.buf || '' }
       else if (e.key === 'Enter') submit()
     }
   })
@@ -64,9 +64,9 @@
     const a = st.table || randInt(1, 10)
     const b = randInt(1, 10)
     st.current = { a, b, answer: a * b }
-    problemEl.textContent = `${a} × ${b} = ?`
+    problemEl.textContent = `${a} × ${b}`
     feedbackEl.textContent = ''
-    st.buf = ''; answerEl.textContent = ' '
+    st.buf = ''; answerEl.textContent = ''
     updateBar()
   }
 
@@ -76,43 +76,62 @@
     st.solved++
     if (given === st.current.answer) {
       st.score++
-      feedbackEl.textContent = '✔ dobrze!'
-      feedbackEl.style.color = '#16a34a'
+      feedbackEl.textContent = 'Dobrze!'
+      feedbackEl.classList.add('correct')
+      feedbackEl.classList.remove('incorrect')
     } else {
-      feedbackEl.textContent = `✖ ${st.current.a} × ${st.current.b} = ${st.current.answer}`
-      feedbackEl.style.color = '#dc2626'
+      feedbackEl.textContent = `Poprawna odpowiedź: ${st.current.answer}`
+      feedbackEl.classList.add('incorrect')
+      feedbackEl.classList.remove('correct')
     }
-    st.buf = ''; answerEl.textContent = ' '
+    feedbackEl.style.opacity = 1;
+    st.buf = ''; answerEl.textContent = ''
     updateBar()
     if (st.solved >= st.total) {
-      setTimeout(showSummary, 700)
+      setTimeout(showSummary, 1200)
     } else {
-      setTimeout(nextProblem, 600)
+      setTimeout(() => {
+        feedbackEl.style.opacity = 0;
+        setTimeout(nextProblem, 200);
+      }, 1000)
     }
   }
 
   function updateBar() {
-    const pct = Math.round((st.solved / st.total) * 100)
+    const pct = st.total > 0 ? Math.round((st.solved / st.total) * 100) : 0
     progressInner.style.width = pct + '%'
     progressLabel.textContent = `${st.solved}/${st.total}`
-    scoreLabel.textContent = `✔ ${st.score}`
+    // scoreLabel is removed, so we comment this out
+    // scoreLabel.textContent = `✔ ${st.score}`
   }
 
   function showSummary() {
-    const pct = Math.round((st.score / st.total) * 100)
-    summaryText.textContent = `${st.score} / ${st.total} poprawnie (${pct}%)`
+    const pct = st.total > 0 ? Math.round((st.score / st.total) * 100) : 0
+    summaryText.textContent = `Twój wynik: ${st.score} / ${st.total} poprawnie (${pct}%)`
     show(summaryScreen)
   }
 
   function show(screen) {
+    console.log(`Showing screen: ${screen.id}`);
     [selectScreen, playScreen, summaryScreen].forEach(s => s.classList.add('hidden'))
     screen.classList.remove('hidden')
+    if (screen === summaryScreen) {
+      selectScreen.classList.add('hidden');
+      playScreen.classList.add('hidden');
+    }
   }
 
   // commit SHA
   document.addEventListener('DOMContentLoaded', async () => {
     const el = document.getElementById('commit-sha')
     if (!el) return
+    // Set default table selection
+    const defaultTableBtn = document.querySelector('.table-btn[data-val="0"]');
+    if(defaultTableBtn) {
+      defaultTableBtn.classList.add('active');
+      st.table = 0;
+    }
+
     let sha = (window.COMMIT_SHA || '').toString().trim()
     if (!sha) {
       try {