edu/mnozenie.js

// Nauka Mnożenia
;(function () {
  const st = { table: null, total: 20, solved: 0, score: 0, current: null, buf: '' }

  const selectScreen  = document.getElementById('select-screen')
  const playScreen    = document.getElementById('play-screen')
  const summaryScreen = document.getElementById('summary-screen')
  const problemEl     = document.getElementById('problem')
  const answerEl      = document.getElementById('answer')
  const feedbackEl    = document.getElementById('feedback')
  const progressInner = document.getElementById('progress-inner')
  const progressLabel = document.getElementById('progress-label')
  const scoreLabel    = document.getElementById('score-label')
  const summaryText   = document.getElementById('summary-text')
  const totalInput    = document.getElementById('total-input')

  // table selection
  document.getElementById('table-grid').addEventListener('click', e => {
    const btn = e.target.closest('.table-btn')
    if (!btn) return
    document.querySelectorAll('.table-btn').forEach(b => b.classList.remove('active'))
    btn.classList.add('active')
    st.table = parseInt(btn.dataset.val, 10) // 0 = all
  })

  document.getElementById('start-btn').addEventListener('click', () => {
    st.total  = Math.max(5, Math.min(100, parseInt(totalInput.value, 10) || 20))
    st.solved = 0
    st.score  = 0
    show(playScreen)
    nextProblem()
  })

  document.getElementById('back-btn').addEventListener('click', () => show(selectScreen))
  document.getElementById('again-btn').addEventListener('click', () => {
    st.solved = 0; st.score = 0; show(playScreen); nextProblem()
  })
  document.getElementById('change-btn').addEventListener('click', () => show(selectScreen))

  // keypad
  document.querySelectorAll('.key').forEach(k => {
    k.addEventListener('click', () => {
      const v = k.textContent.trim()
      if (!/^[0-9]$/.test(v)) return
      if (st.buf.length >= 6) return
      st.buf += v; answerEl.textContent = st.buf
    })
  })
  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('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 === 'Enter') submit()
    }
  })

  function randInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min }

  function nextProblem() {
    const a = st.table || randInt(1, 10)
    const b = randInt(1, 10)
    st.current = { a, b, answer: a * b }
    problemEl.textContent = `${a} × ${b} = ?`
    feedbackEl.textContent = ''
    st.buf = ''; answerEl.textContent = ' '
    updateBar()
  }

  function submit() {
    if (!st.buf.trim()) return
    const given = parseInt(st.buf, 10)
    st.solved++
    if (given === st.current.answer) {
      st.score++
      feedbackEl.textContent = '✔ dobrze!'
      feedbackEl.style.color = '#16a34a'
    } else {
      feedbackEl.textContent = `✖ ${st.current.a} × ${st.current.b} = ${st.current.answer}`
      feedbackEl.style.color = '#dc2626'
    }
    st.buf = ''; answerEl.textContent = ' '
    updateBar()
    if (st.solved >= st.total) {
      setTimeout(showSummary, 700)
    } else {
      setTimeout(nextProblem, 600)
    }
  }

  function updateBar() {
    const pct = Math.round((st.solved / st.total) * 100)
    progressInner.style.width = pct + '%'
    progressLabel.textContent = `${st.solved}/${st.total}`
    scoreLabel.textContent = `✔ ${st.score}`
  }

  function showSummary() {
    const pct = Math.round((st.score / st.total) * 100)
    summaryText.textContent = `${st.score} / ${st.total} poprawnie (${pct}%)`
    show(summaryScreen)
  }

  function show(screen) {
    [selectScreen, playScreen, summaryScreen].forEach(s => s.classList.add('hidden'))
    screen.classList.remove('hidden')
  }

  // commit SHA
  document.addEventListener('DOMContentLoaded', async () => {
    const el = document.getElementById('commit-sha')
    if (!el) return
    let sha = (window.COMMIT_SHA || '').toString().trim()
    if (!sha) {
      try {
        const res = await fetch('/version.sha', { cache: 'no-cache' })
        if (res.ok) {
          const txt = await res.text()
          const first = txt.split(/\r?\n/).find(l => l.trim().length > 0)
          if (first) sha = first.trim()
        }
      } catch (e) {}
    }
    if (sha) el.textContent = sha.slice(0, 8)
  })
})()