init

app.js

@@ -0,0 +1,480 @@
+// Minimal app logic for math training (addition & subtraction)
+const state = {
+  ops: new Set(),
+  mode: null, // 'timed' or 'training'
+  score: 0,
+  currentProblem: null,
+  answerBuffer: '',
+  timerId: null,
+  timeLeft: 60,
+  settings: {
+    timedSeconds: 60,
+    maxResult: 40,
+    maxOperand: 20,
+  sessionProblems: 20,
+  allowNegative: false,
+  allowFraction: false,
+  }
+}
+
+// elements
+const menuScreen = document.getElementById('menu-screen')
+const playScreen = document.getElementById('play-screen')
+const opsContainer = document.getElementById('ops')
+const modeButtons = document.querySelectorAll('.mode-btn')
+const opButtons = document.querySelectorAll('.op-btn')
+const backBtn = document.getElementById('back-btn')
+const problemEl = document.getElementById('problem')
+const answerEl = document.getElementById('answer')
+const feedbackEl = document.getElementById('feedback')
+const timerEl = document.getElementById('timer')
+const scoreEl = document.getElementById('score')
+const keypad = document.querySelectorAll('.key')
+const submitBtn = document.getElementById('submit')
+const clearBtn = document.getElementById('clear')
+const backspaceBtn = document.getElementById('backspace')
+const historyBtn = document.getElementById('history-btn')
+const historyScreen = document.getElementById('history-screen')
+const historyBack = document.getElementById('history-back')
+const historyList = document.getElementById('history-list')
+const clearHistoryBtn = document.getElementById('clear-history')
+const historyPanel = document.getElementById('history-panel')
+const historyToggle = document.getElementById('history-toggle')
+const settingTimed = document.getElementById('setting-timed')
+const settingMaxResult = document.getElementById('setting-max-result')
+const settingMaxOperand = document.getElementById('setting-max-operand')
+const settingAllowNegative = document.getElementById('setting-allow-negative')
+const settingAllowFraction = document.getElementById('setting-allow-fraction')
+const saveSettingsBtn = document.getElementById('save-settings')
+const resetSettingsBtn = document.getElementById('reset-settings')
+const settingsToggle = document.getElementById('settings-toggle')
+const settingsPanel = document.getElementById('settings-panel')
+const progressInner = document.getElementById('progress-inner')
+const dotBtn = document.getElementById('dot')
+const negateBtn = document.getElementById('negate')
+const summaryPanel = document.getElementById('summary-panel')
+const summaryText = document.getElementById('summary-text')
+const summaryBack = document.getElementById('summary-back')
+
+// load settings from localStorage
+function loadSettings(){
+  try{
+    const raw = localStorage.getItem('matma:settings')
+    if (raw) {
+      const s = JSON.parse(raw)
+      state.settings = Object.assign(state.settings, s)
+    }
+  }catch(e){ console.warn('settings load failed', e) }
+  // reflect to inputs
+  settingTimed.value = state.settings.timedSeconds
+  settingMaxResult.value = state.settings.maxResult
+  settingMaxOperand.value = state.settings.maxOperand
+  const sess = state.settings.sessionProblems || 20
+  const settingSessionProblems = document.getElementById('setting-session-problems')
+  if (settingSessionProblems) settingSessionProblems.value = sess
+  if (settingAllowNegative) settingAllowNegative.checked = !!state.settings.allowNegative
+  if (settingAllowFraction) settingAllowFraction.checked = !!state.settings.allowFraction
+}
+
+function saveSettings(){
+  const timed = parseInt(settingTimed.value,10) || state.settings.timedSeconds
+  const maxResult = parseInt(settingMaxResult.value,10) || state.settings.maxResult
+  const maxOperand = parseInt(settingMaxOperand.value,10) || state.settings.maxOperand
+  state.settings.timedSeconds = Math.max(5, Math.min(600, timed))
+  state.settings.maxResult = Math.max(1, Math.min(999, maxResult))
+  state.settings.maxOperand = Math.max(1, Math.min(999, maxOperand))
+  const settingSessionProblems = document.getElementById('setting-session-problems')
+  if (settingSessionProblems) state.settings.sessionProblems = Math.max(1, Math.min(500, parseInt(settingSessionProblems.value,10) || state.settings.sessionProblems))
+  if (settingAllowNegative) state.settings.allowNegative = !!settingAllowNegative.checked
+  if (settingAllowFraction) state.settings.allowFraction = !!settingAllowFraction.checked
+  try{ localStorage.setItem('matma:settings', JSON.stringify(state.settings)) }catch(e){console.warn('save failed',e)}
+  // visual feedback
+  feedbackEl.textContent = 'Ustawienia zapisane'
+  setTimeout(()=>feedbackEl.textContent = '',1500)
+}
+
+function resetSettings(){
+  state.settings = {timedSeconds:60, maxResult:40, maxOperand:20, sessionProblems:20}
+  saveSettings()
+  loadSettings()
+}
+
+saveSettingsBtn.addEventListener('click', saveSettings)
+resetSettingsBtn.addEventListener('click', resetSettings)
+
+// settings toggle
+settingsToggle.addEventListener('click', ()=>{
+  const collapsed = settingsPanel.classList.toggle('collapsed')
+  settingsToggle.textContent = collapsed ? 'Pokaż' : 'Ukryj'
+})
+
+loadSettings()
+
+// initial wiring
+opButtons.forEach(b => {
+  if (b.classList.contains('disabled')) return
+  b.addEventListener('click', () => {
+    const op = b.dataset.op
+    if (state.ops.has(op)) { state.ops.delete(op); b.classList.remove('active') }
+    else { state.ops.add(op); b.classList.add('active') }
+  })
+})
+
+modeButtons.forEach(b => b.addEventListener('click', () => {
+  modeButtons.forEach(x=>x.classList.remove('active'))
+  b.classList.add('active')
+  state.mode = b.dataset.mode
+  // require at least one op selected to start
+  if (state.ops.size === 0) {
+    feedbackEl.textContent = 'Wybierz co najmniej jedno działanie.'
+    return
+  }
+  startPlay()
+}))
+
+backBtn.addEventListener('click', ()=>{
+  stopTimer()
+  playScreen.classList.add('hidden')
+  menuScreen.classList.remove('hidden')
+  feedbackEl.textContent = ''
+})
+
+function startPlay(){
+  menuScreen.classList.add('hidden')
+  playScreen.classList.remove('hidden')
+  state.score = 0
+  scoreEl.textContent = state.score
+  state.answerBuffer = ''
+  answerEl.textContent = ''
+  feedbackEl.textContent = ''
+  state.currentProblem = generateProblem()
+  renderProblem()
+  // make problem larger for mobile clarity
+  problemEl.classList.add('big')
+  // init progress
+  if (state.mode === 'timed'){
+    progressInner.style.width = '0%'
+    startTimer(state.settings.timedSeconds)
+  } else {
+    progressInner.style.width = '0%'
+    state.sessionSolved = 0
+    state.sessionTarget = Math.max(1, state.settings.sessionProblems || 20)
+    updateProgress()
+    hideTimer()
+  }
+}
+
+function generateProblem(){
+  // choose an operation from selected ops
+  const ops = Array.from(state.ops)
+  const op = ops[Math.floor(Math.random()*ops.length)]
+  // generate operands within maxOperand and ensure result within maxResult
+  const maxOp = Math.max(1, state.settings.maxOperand)
+  const maxRes = Math.max(1, state.settings.maxResult)
+  let a = 0, b = 0
+  // try a few times to satisfy constraints
+  for (let i=0;i<200;i++){
+    if (op === 'div'){
+      // divisor b should be non-zero
+      b = randInt(1, maxOp)
+      if (!state.settings.allowFraction){
+        // produce integer result q such that a = q * b and a <= maxOp and q <= maxRes
+        const maxQByOp = Math.floor(maxOp / b)
+        const maxQ = Math.min(maxRes, maxQByOp)
+        if (maxQ < 0) continue
+        const q = randInt(0, maxQ)
+        a = q * b
+        // optional negative results
+        if (state.settings.allowNegative && Math.random() < 0.2) a = -a
+        return {a,b,op}
+      } else {
+        // allow fractional results: generate tenths (one decimal place)
+        const maxResultNByOp = Math.floor((10 * maxOp) / b)
+        const maxResultN = Math.min(maxRes * 10, maxResultNByOp)
+        if (maxResultN < 0) continue
+        const result_n = randInt(0, maxResultN)
+        // ensure dividend is integer: (result_n * b) % 10 === 0
+        if ((result_n * b) % 10 !== 0) continue
+        a = (result_n * b) / 10
+        if (state.settings.allowNegative && Math.random() < 0.2) a = -a
+        return {a,b,op}
+      }
+    } else if (op === 'mul'){
+      a = randInt(0, maxOp)
+      b = randInt(0, maxOp)
+      if (a * b <= maxRes) return {a,b,op}
+    } else if (op === 'add'){
+      a = randInt(0, maxOp)
+      b = randInt(0, maxOp)
+      if (a + b <= maxRes) return {a,b,op}
+    } else if (op === 'sub'){
+      a = randInt(0, maxOp)
+      b = randInt(0, maxOp)
+      if (!state.settings.allowNegative){
+        if (a < b) [a,b] = [b,a]
+        if (a - b <= maxRes) return {a,b,op}
+      } else {
+        // negative allowed: result absolute should be <= maxRes
+        if (Math.abs(a - b) <= maxRes) return {a,b,op}
+      }
+    }
+  }
+  // fallback: return simple small numbers
+  a = Math.min(maxOp, Math.floor(maxRes/2))
+  b = Math.min(maxOp, 1)
+  return {a,b,op}
+}
+
+function randInt(min,max){
+  return Math.floor(Math.random()*(max-min+1))+min
+}
+
+function renderProblem(){
+  const p = state.currentProblem
+  const map = {add: '+', sub: '−', mul: '×', div: '÷'}
+  const symbol = map[p.op] || '?'
+  problemEl.textContent = `${p.a} ${symbol} ${p.b} = ?`
+}
+
+function submitAnswer(){
+  const buf = state.answerBuffer.trim()
+  if (buf.length === 0) return
+  const given = parseFloat(buf)
+  const p = state.currentProblem
+  let correct = null
+  if (p.op === 'add') correct = p.a + p.b
+  else if (p.op === 'sub') correct = p.a - p.b
+  else if (p.op === 'mul') correct = p.a * p.b
+  else if (p.op === 'div') correct = (p.b === 0) ? null : (p.a / p.b)
+  const eps = state.settings.allowFraction ? 1e-6 : 1e-9
+  const isCorrect = (correct !== null) && (Math.abs(given - correct) < eps)
+  if (isCorrect) {
+    state.score += 1
+    feedbackEl.textContent = '✔ dobrze'
+  } else {
+    feedbackEl.textContent = `✖ poprawne: ${Number.isFinite(correct) ? correct : '—'}`
+  }
+  scoreEl.textContent = state.score
+  // next problem
+  state.answerBuffer = ''
+  answerEl.textContent = ''
+  // increment solved count and handle training limit
+  if (state.mode === 'training'){
+    state.sessionSolved = (state.sessionSolved || 0) + 1
+    updateProgress()
+    if (state.sessionSolved >= state.sessionTarget){
+      // reached limit -> show summary instead of next problem
+      saveSessionToHistory()
+      showSummary()
+      return
+    }
+  }
+  // otherwise generate next problem
+  state.currentProblem = generateProblem()
+  renderProblem()
+}
+
+submitBtn.addEventListener('click', submitAnswer)
+
+keypad.forEach(k => {
+  k.addEventListener('click', ()=>{
+    const v = k.textContent.trim()
+    if (!/^[0-9]$/.test(v)) return
+    if (state.answerBuffer.length >= 12) return
+    state.answerBuffer += v
+    answerEl.textContent = state.answerBuffer
+  })
+})
+
+if (dotBtn){
+  dotBtn.addEventListener('click', ()=>{
+    if (!state.settings.allowFraction) return
+    if (state.answerBuffer.includes('.')) return
+    if (state.answerBuffer.length === 0) state.answerBuffer = '0'
+    state.answerBuffer += '.'
+    answerEl.textContent = state.answerBuffer
+  })
+}
+
+if (negateBtn){
+  negateBtn.addEventListener('click', ()=>{
+    if (!state.settings.allowNegative) return
+    if (state.answerBuffer.startsWith('-')) state.answerBuffer = state.answerBuffer.slice(1)
+    else state.answerBuffer = '-' + state.answerBuffer
+    answerEl.textContent = state.answerBuffer
+  })
+}
+
+clearBtn.addEventListener('click', ()=>{
+  state.answerBuffer = ''
+  answerEl.textContent = ''
+})
+
+backspaceBtn.addEventListener('click', ()=>{
+  state.answerBuffer = state.answerBuffer.slice(0,-1)
+  answerEl.textContent = state.answerBuffer
+})
+
+function startTimer(seconds){
+  state.timeLeft = seconds
+  timerEl.textContent = state.timeLeft
+  timerEl.classList.remove('hidden')
+  state.timerId = setInterval(()=>{
+    state.timeLeft -= 1
+    timerEl.textContent = state.timeLeft
+  // update progress bar for timed mode
+  const pct = Math.max(0, ((seconds - state.timeLeft) / seconds) * 100)
+  progressInner.style.width = pct + '%'
+    if (state.timeLeft <= 0) {
+      stopTimer()
+      endSession()
+    }
+  },1000)
+}
+
+function stopTimer(){
+  if (state.timerId) clearInterval(state.timerId)
+  state.timerId = null
+}
+
+function hideTimer(){
+  timerEl.classList.add('hidden')
+}
+
+function endSession(){
+  feedbackEl.textContent = `Koniec! Wynik: ${state.score}`
+  saveSessionToHistory()
+  // fill progress
+  progressInner.style.width = '100%'
+  // return to menu after short pause (timed mode)
+  setTimeout(()=>{
+    playScreen.classList.add('hidden')
+    menuScreen.classList.remove('hidden')
+  },2500)
+}
+
+function showSummary(){
+  // hide problem area and keypad, show summary panel
+  const summaryTextEl = summaryText
+  if (summaryTextEl) summaryTextEl.textContent = `Poprawne odpowiedzi: ${state.score}`
+  // hide play UI sections
+  const problemArea = document.querySelector('.problem-area')
+  const answerArea = document.querySelector('.answer-area')
+  if (problemArea) problemArea.classList.add('hidden')
+  if (answerArea) answerArea.classList.add('hidden')
+  if (summaryPanel) summaryPanel.classList.remove('hidden')
+}
+
+function hideSummary(){
+  const problemArea = document.querySelector('.problem-area')
+  const answerArea = document.querySelector('.answer-area')
+  if (problemArea) problemArea.classList.remove('hidden')
+  if (answerArea) answerArea.classList.remove('hidden')
+  if (summaryPanel) summaryPanel.classList.add('hidden')
+}
+
+if (summaryBack) summaryBack.addEventListener('click', ()=>{
+  // close summary and go back to menu
+  hideSummary()
+  playScreen.classList.add('hidden')
+  menuScreen.classList.remove('hidden')
+})
+
+function updateProgress(){
+  if (state.mode === 'training'){
+    const solved = state.sessionSolved || 0
+    const target = state.sessionTarget || 1
+    const pct = Math.min(100, Math.round((solved/target)*100))
+    progressInner.style.width = pct + '%'
+    // show count in status
+    const status = document.getElementById('status')
+    if (status) status.textContent = `${solved}/${target}`
+  }
+}
+
+// history persistence
+function loadHistory(){
+  try{
+    const raw = localStorage.getItem('matma:history')
+    return raw ? JSON.parse(raw) : []
+  }catch(e){ return [] }
+}
+
+function saveSessionToHistory(){
+  const h = loadHistory()
+  h.unshift({ts: Date.now(), mode: state.mode, score: state.score, settings: {...state.settings}})
+  // keep only last 100
+  while(h.length>100) h.pop()
+  try{ localStorage.setItem('matma:history', JSON.stringify(h)) }catch(e){ }
+}
+
+function renderHistory(){
+  const h = loadHistory()
+  historyList.innerHTML = ''
+  if (h.length === 0) {
+    historyList.innerHTML = '<div class="history-item">Brak zapisanych sesji</div>'
+  if (historyList) historyList.innerHTML = historyList.innerHTML
+  return
+  }
+  h.forEach(item => {
+    const d = new Date(item.ts).toLocaleString()
+    const el = document.createElement('div')
+    el.className = 'history-item'
+    el.innerHTML = `<div><strong>${item.mode === 'timed' ? 'Na czas' : 'Trening'}</strong> — Wynik: ${item.score}</div><div class="history-meta">${d} • czas:${item.settings.timedSeconds}s maxRes:${item.settings.maxResult} maxOp:${item.settings.maxOperand}</div>`
+    historyList.appendChild(el)
+  })
+  if (historyList) historyList.innerHTML = historyList.innerHTML
+}
+
+// Toggle in-menu history panel (behaves like settings)
+function toggleHistory(){
+  if (!historyPanel) return
+  // toggle collapsed class (collapsed => hidden)
+  const nowCollapsed = historyPanel.classList.toggle('collapsed')
+  // nowCollapsed is true when panel is hidden
+  if (!nowCollapsed) renderHistory()
+  // keep main menu button label constant; header toggle shows state
+  historyBtn.textContent = 'Historia'
+  if (historyToggle) historyToggle.textContent = nowCollapsed ? 'Pokaż' : 'Ukryj'
+}
+
+
+// history toggle
+historyToggle.addEventListener('click', ()=>{
+  const collapsed = historyPanel.classList.toggle('collapsed')
+  historyToggle.textContent = collapsed ? 'Pokaż' : 'Ukryj'
+  if (!collapsed) renderHistory()
+  else historyList.innerHTML = ''
+})
+
+// historyBtn.addEventListener('click', toggleHistory)
+// if (historyToggle) historyToggle.addEventListener('click', toggleHistory)
+
+historyBack.addEventListener('click', ()=>{
+  historyScreen.classList.add('hidden')
+  menuScreen.classList.remove('hidden')
+})
+
+clearHistoryBtn.addEventListener('click', ()=>{
+  try{ localStorage.removeItem('matma:history') }catch(e){}
+  renderHistory()
+})
+
+// keyboard support: allow Enter/Backspace/0-9
+window.addEventListener('keydown', (e)=>{
+  if (playScreen.classList.contains('hidden')) return
+  if (/^[0-9]$/.test(e.key)){
+    if (state.answerBuffer.length < 6) {
+      state.answerBuffer += e.key
+      answerEl.textContent = state.answerBuffer
+    }
+  } else if (e.key === 'Backspace'){
+    state.answerBuffer = state.answerBuffer.slice(0,-1)
+    answerEl.textContent = state.answerBuffer
+  } else if (e.key === 'Enter'){
+    submitAnswer()
+  }
+})
+
+// small helper to set initial focus - mobile browsers will not open keyboard for divs
+document.addEventListener('touchstart', ()=>{}, {passive:true})