Refactor z nowa templatka

app.js

@@ -1,4 +1,4 @@
-// Minimal app logic for math training (addition & subtraction)
+// Minimal app logic for math training
 const state = {
   ops: new Set(),
   mode: null, // 'timed' or 'training'
@@ -7,13 +7,15 @@ const state = {
   answerBuffer: '',
   timerId: null,
   timeLeft: 60,
+  sessionSolved: 0,
+  sessionTarget: 20,
   settings: {
     timedSeconds: 60,
     maxResult: 40,
     maxOperand: 20,
-  sessionProblems: 20,
-  allowNegative: false,
-  allowFraction: false,
+    sessionProblems: 20,
+    allowNegative: false,
+    allowFraction: false,
   }
 }
 
@@ -33,28 +35,22 @@ 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 settingSessionProblems = document.getElementById('setting-session-problems')
 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 progressInner = document.getElementById('progress_inner')
 const dotBtn = document.getElementById('dot')
 const negateBtn = document.getElementById('negate')
-const summaryPanel = document.getElementById('summary-panel')
+const summaryOverlay = document.getElementById('summary-overlay')
 const summaryText = document.getElementById('summary-text')
 const summaryBack = document.getElementById('summary-back')
+const statusEl = document.getElementById('status');
 
 // load settings from localStorage
 function loadSettings(){
@@ -69,50 +65,43 @@ function loadSettings(){
   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
+  settingSessionProblems.value = state.settings.sessionProblems
+  settingAllowNegative.checked = !!state.settings.allowNegative
+  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
+  state.settings.timedSeconds = Math.max(5, Math.min(600, parseInt(settingTimed.value,10) || 60))
+  state.settings.maxResult = Math.max(1, Math.min(999, parseInt(settingMaxResult.value,10) || 40))
+  state.settings.maxOperand = Math.max(1, Math.min(999, parseInt(settingMaxOperand.value,10) || 20))
+  state.settings.sessionProblems = Math.max(1, Math.min(500, parseInt(settingSessionProblems.value,10) || 20))
+  state.settings.allowNegative = !!settingAllowNegative.checked
+  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)
+  const parent = saveSettingsBtn.parentElement;
+  const feedback = document.createElement('span');
+  feedback.textContent = 'Zapisano!';
+  feedback.style.color = '#16a34a';
+  feedback.style.marginLeft = '12px';
+  parent.appendChild(feedback);
+  setTimeout(()=> parent.removeChild(feedback), 2000);
 }
 
 function resetSettings(){
-  state.settings = {timedSeconds:60, maxResult:40, maxOperand:20, sessionProblems:20}
-  saveSettings()
-  loadSettings()
+  state.settings = {timedSeconds:60, maxResult:40, maxOperand:20, sessionProblems:20, allowNegative: false, allowFraction: false};
+  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') }
@@ -121,14 +110,19 @@ opButtons.forEach(b => {
 })
 
 modeButtons.forEach(b => b.addEventListener('click', () => {
+  if (state.ops.size === 0) {
+    const hint = document.querySelector('.hint-text');
+    hint.style.color = '#dc2626';
+    hint.style.fontWeight = '600';
+    setTimeout(() => {
+        hint.style.color = '';
+        hint.style.fontWeight = '';
+    }, 2000);
+    return;
+  }
   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()
 }))
 
@@ -149,51 +143,43 @@ function startPlay(){
   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)
+    statusEl.textContent = 'Na czas';
+    timerEl.classList.remove('hidden');
   } else {
     progressInner.style.width = '0%'
     state.sessionSolved = 0
-    state.sessionTarget = Math.max(1, state.settings.sessionProblems || 20)
+    state.sessionTarget = Math.max(1, state.settings.sessionProblems)
     updateProgress()
-    hideTimer()
+    timerEl.classList.add('hidden');
   }
 }
 
 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
@@ -214,12 +200,10 @@ function generateProblem(){
         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}
@@ -233,7 +217,7 @@ function renderProblem(){
   const p = state.currentProblem
   const map = {add: '+', sub: '−', mul: '×', div: '÷'}
   const symbol = map[p.op] || '?'
-  problemEl.textContent = `${p.a} ${symbol} ${p.b} = ?`
+  problemEl.textContent = `${p.a} ${symbol} ${p.b}`
 }
 
 function submitAnswer(){
@@ -248,30 +232,40 @@ function submitAnswer(){
   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)
+
+  feedbackEl.style.opacity = 1;
   if (isCorrect) {
     state.score += 1
-    feedbackEl.textContent = '✔ dobrze'
+    feedbackEl.textContent = 'Dobrze!'
+    feedbackEl.classList.add('correct');
+    feedbackEl.classList.remove('incorrect');
   } else {
-    feedbackEl.textContent = `✖ poprawne: ${Number.isFinite(correct) ? correct : '—'}`
+    const correctAnswer = Number.isFinite(correct) ? parseFloat(correct.toFixed(2)) : '—';
+    feedbackEl.textContent = `Poprawna odpowiedź: ${correctAnswer}`
+    feedbackEl.classList.add('incorrect');
+    feedbackEl.classList.remove('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
+    state.sessionSolved++
     updateProgress()
     if (state.sessionSolved >= state.sessionTarget){
-      // reached limit -> show summary instead of next problem
       saveSessionToHistory()
-      showSummary()
+      setTimeout(showSummary, 1200);
       return
     }
   }
-  // otherwise generate next problem
-  state.currentProblem = generateProblem()
-  renderProblem()
+
+  setTimeout(() => {
+    feedbackEl.style.opacity = 0;
+    setTimeout(() => {
+        state.currentProblem = generateProblem()
+        renderProblem()
+    }, 200);
+  }, 1200);
 }
 
 submitBtn.addEventListener('click', submitAnswer)
@@ -318,13 +312,13 @@ backspaceBtn.addEventListener('click', ()=>{
 function startTimer(seconds){
   state.timeLeft = seconds
   timerEl.textContent = state.timeLeft
-  timerEl.classList.remove('hidden')
+
+  stopTimer();
   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 + '%'
+    const pct = Math.max(0, (state.timeLeft / seconds) * 100)
+    progressInner.style.width = pct + '%'
     if (state.timeLeft <= 0) {
       stopTimer()
       endSession()
@@ -337,58 +331,35 @@ function stopTimer(){
   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)
+  showSummary();
 }
 
 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')
+  const total = state.mode === 'timed' ? state.score : state.sessionTarget;
+  const correct = state.score;
+  const pct = total > 0 ? Math.round((correct / total) * 100) : 0;
+
+  if (state.mode === 'timed') {
+      summaryText.textContent = `Koniec czasu! Zdobyłeś ${correct} punktów.`;
+  } else {
+      summaryText.textContent = `Twój wynik: ${correct} / ${total} poprawnie (${pct}%)`;
+  }
+  summaryOverlay.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')
-})
+summaryBack.addEventListener('click', ()=>{
+  summaryOverlay.classList.add('hidden');
+  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))
+    const pct = Math.min(100, Math.round((state.sessionSolved/state.sessionTarget)*100))
     progressInner.style.width = pct + '%'
-    // show count in status
-    const status = document.getElementById('status')
-    if (status) status.textContent = `${solved}/${target}`
+    statusEl.textContent = `${state.sessionSolved}/${state.sessionTarget}`
   }
 }
 
@@ -402,69 +373,61 @@ function loadHistory(){
 
 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()
+  const sessionData = {
+      ts: Date.now(),
+      mode: state.mode,
+      score: state.score,
+      ops: Array.from(state.ops),
+      duration: state.mode === 'timed' ? state.settings.timedSeconds : null,
+      problems: state.mode === 'training' ? state.sessionTarget : null
+  };
+  h.unshift(sessionData);
+  while(h.length>50) h.pop()
   try{ localStorage.setItem('matma:history', JSON.stringify(h)) }catch(e){ }
 }
 
 function renderHistory(){
   const h = loadHistory()
-  historyList.innerHTML = ''
+  historyPanel.innerHTML = ''
   if (h.length === 0) {
-    historyList.innerHTML = '<div class="history-item">Brak zapisanych sesji</div>'
-  if (historyList) historyList.innerHTML = historyList.innerHTML
-  return
+    historyPanel.innerHTML = '<p class="history-empty">Brak zapisanych sesji.</p>'
+    return
   }
   h.forEach(item => {
-    const d = new Date(item.ts).toLocaleString()
+    const d = new Date(item.ts).toLocaleString('pl-PL', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' });
+    const modeText = item.mode === 'timed' ? `Na czas (${item.duration}s)` : `Trening (${item.problems} zadań)`;
+    const opsText = item.ops.join(', ').replace('add','+').replace('sub','-').replace('mul','×').replace('div','÷');
+
     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)
+    el.innerHTML = `
+        <div class="history-item-main">
+            <span class="history-score">Wynik: ${item.score}</span>
+            <span class="history-ops">${opsText}</span>
+        </div>
+        <div class="history-item-meta">
+            <span>${modeText}</span>
+            <span>${d}</span>
+        </div>`
+    historyPanel.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'
+// Toggle history panel
+const historyDetails = historyPanel.closest('details');
+if (historyDetails) {
+    historyDetails.addEventListener('toggle', () => {
+        if (historyDetails.open) {
+            renderHistory();
+        }
+    });
 }
 
-
-// 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
+// keyboard support
 window.addEventListener('keydown', (e)=>{
   if (playScreen.classList.contains('hidden')) return
   if (/^[0-9]$/.test(e.key)){
-    if (state.answerBuffer.length < 6) {
+    if (state.answerBuffer.length < 12) {
       state.answerBuffer += e.key
       answerEl.textContent = state.answerBuffer
     }
@@ -473,32 +436,18 @@ window.addEventListener('keydown', (e)=>{
     answerEl.textContent = state.answerBuffer
   } else if (e.key === 'Enter'){
     submitAnswer()
+  } else if (e.key === '.' || e.key === ',') {
+    dotBtn.click();
   }
 })
 
-// small helper to set initial focus - mobile browsers will not open keyboard for divs
-document.addEventListener('touchstart', ()=>{}, {passive:true})
-
-// Load commit SHA into footer (simple: prefer window.COMMIT_SHA/meta, else fetch /version.sha which contains only the hash)
-document.addEventListener('DOMContentLoaded', async () => {
-  const el = document.getElementById('commit-sha')
-  if (!el) return
-  let sha = (window.COMMIT_SHA || '').toString().trim()
-  if (!sha) {
-    const meta = document.querySelector('meta[name="commit-sha"]')
-    if (meta && meta.content) sha = meta.content.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) {
-      // ignore
-    }
-  }
-  if (sha) el.textContent = sha.slice(0,8)
-})
+// Set default active operations
+document.addEventListener('DOMContentLoaded', () => {
+    opButtons.forEach(btn => {
+        const op = btn.dataset.op;
+        if (['add', 'sub'].includes(op)) {
+            btn.classList.add('active');
+            state.ops.add(op);
+        }
+    });
+});