hello apk

app/src/main/assets/css/styles.css

@@ -265,7 +265,7 @@ body {
 }
 
 .progress-bar {
-  width: 100%;
+  width: 120px;
   height: 8px;
   background-color: #e2e8f0;
   border-radius: 4px;

app/src/main/assets/dyktando.html

@@ -39,7 +39,9 @@
         <span id="blank-progress" class="play-progress"></span>
       </header>
 
-  <div id="progressbar-placeholder"></div>
+      <div class="play-progress-bar">
+        <div id="dyk-progress-bar-inner" class="play-progress-bar-inner"></div>
+      </div>
 
       <div class="play-body">
         <div class="play-scroll-area" id="dyk-scroll">
@@ -69,9 +71,6 @@
       }).then(html => {
         document.getElementById('header-placeholder').outerHTML = html;
       });
-      loadComponent('components/progress-bar.html', {'{PROGRESS_ID}': 'dyk-progress-bar-inner'}).then(html => {
-        document.getElementById('progressbar-placeholder').outerHTML = html;
-      });
       loadComponent('components/footer.html').then(html => {
         document.getElementById('footer-placeholder').outerHTML = html;
       });

app/src/main/assets/dzielenie.html

@@ -51,7 +51,9 @@
           <span id="progress-label" class="progress-text">0/20</span>
         </div>
       </header>
-  <div id="progressbar-placeholder"></div>
+      <div class="read-progress-bar">
+        <div id="progress-inner" class="read-progress-bar-inner"></div>
+      </div>
 
       <div class="play-body">
         <div class="problem-display">
@@ -105,9 +107,6 @@
     }).then(html => {
       document.getElementById('header-placeholder').outerHTML = html;
     });
-    loadComponent('components/progress-bar.html', {'{PROGRESS_ID}': 'progress-inner'}).then(html => {
-      document.getElementById('progressbar-placeholder').outerHTML = html;
-    });
     loadComponent('components/footer.html').then(html => {
       document.getElementById('footer-placeholder').outerHTML = html;
     });

app/src/main/assets/js/app.js

@@ -55,7 +55,7 @@ const statusEl = document.getElementById('status');
 // load settings from localStorage
 function loadSettings(){
   try{
-  let progressInner = null
+    const raw = localStorage.getItem('matma:settings')
     if (raw) {
       const s = JSON.parse(raw)
       state.settings = Object.assign(state.settings, s)

app/src/main/assets/js/czytanie.js

@@ -21,7 +21,7 @@
   const readViewport  = document.getElementById('read-viewport')
   const readTextEl    = document.getElementById('read-text')
   const nextLineBtn   = document.getElementById('next-line-btn')
-  let progressBar = null
+  const progressBar   = document.getElementById('read-progress-bar-inner')
 
   // ── Load text list from dyktanda.json ────────────────────────────────────
   fetch('json/dyktanda.json')
@@ -132,7 +132,6 @@
 
   function updateProgressBar() {
     const progress = maxOffset > 0 ? (yOffset / maxOffset) * 100 : 100
-    if (!progressBar) progressBar = document.getElementById('read-progress-bar-inner')
-    if (progressBar) progressBar.style.width = `${progress}%`
+    progressBar.style.width = `${progress}%`
   }
 })()

app/src/main/assets/js/dyktando.js

@@ -35,7 +35,7 @@
   const summaryScore   = document.getElementById('summary-score')
   const summaryBackBtn = document.getElementById('summary-back-btn')
   const dykScroll      = document.getElementById('dyk-scroll')
-  let progressBar = null
+  const progressBar    = document.getElementById('dyk-progress-bar-inner')
 
   // ── Load texts ────────────────────────────────────────────────────────────
   fetch('json/dyktanda.json')
@@ -53,20 +53,6 @@
       textList.innerHTML = '<p style="color:var(--muted)">Nie udało się wczytać tekstów.</p>'
     })
 
-    // Poczekaj na dynamiczne załadowanie progress bara
-    document.addEventListener('DOMContentLoaded', () => {
-      // progress bar jest ładowany przez loadComponent w dyktando.html
-      const checkProgressBar = () => {
-        const el = document.getElementById('dyk-progress-bar-inner')
-        if (el) {
-          progressBar = el
-        } else {
-          setTimeout(checkProgressBar, 50)
-        }
-      }
-      checkProgressBar()
-    })
-
   customStartBtn.addEventListener('click', () => {
     const txt = customInput.value.trim()
     if (!txt) return
@@ -112,7 +98,7 @@
     textDisplay.classList.remove('hidden')
     choicesEl.classList.remove('hidden')
     progressEl.textContent = ''
-    if (progressBar) progressBar.style.width = '0%'
+    progressBar.style.width = '0%'
 
     listWrap.classList.add('hidden')
     playWrap.classList.remove('hidden')

app/src/main/assets/js/dzielenie.js

@@ -8,7 +8,7 @@
   const problemEl     = document.getElementById('problem')
   const answerEl      = document.getElementById('answer')
   const feedbackEl    = document.getElementById('feedback')
-  let progressInner = null
+  const progressInner = document.getElementById('progress-inner')
   const progressLabel = document.getElementById('progress-label')
   const summaryText   = document.getElementById('summary-text')
   const totalInput    = document.getElementById('total-input')
@@ -99,10 +99,7 @@
 
   function updateBar() {
     const pct = st.total > 0 ? Math.round((st.solved / st.total) * 100) : 0
-    if (!progressInner) {
-      progressInner = document.getElementById('progress-inner')
-    }
-    if (progressInner) progressInner.style.width = pct + '%'
+    progressInner.style.width = pct + '%'
     progressLabel.textContent = `${st.solved}/${st.total}`
   }
 

app/src/main/assets/js/mnozenie.js

@@ -8,7 +8,7 @@
   const problemEl     = document.getElementById('problem')
   const answerEl      = document.getElementById('answer')
   const feedbackEl    = document.getElementById('feedback')
-  let progressInner = null
+  const progressInner = document.getElementById('progress-inner')
   const progressLabel = document.getElementById('progress-label')
   const scoreLabel    = document.getElementById('score-label') // This element is removed, but we might re-purpose the logic
   const summaryText   = document.getElementById('summary-text')
@@ -99,8 +99,7 @@
 
   function updateBar() {
     const pct = st.total > 0 ? Math.round((st.solved / st.total) * 100) : 0
-    if (!progressInner) progressInner = document.getElementById('progress-inner')
-    if (progressInner) progressInner.style.width = pct + '%'
+    progressInner.style.width = pct + '%'
     progressLabel.textContent = `${st.solved}/${st.total}`
     // scoreLabel is removed, so we comment this out
     // scoreLabel.textContent = `✔ ${st.score}`

app/src/main/assets/mnozenie.html

@@ -51,7 +51,9 @@
           <span id="progress-label" class="progress-text">0/20</span>
         </div>
       </header>
-  <div id="progressbar-placeholder"></div>
+      <div class="read-progress-bar">
+        <div id="progress-inner" class="read-progress-bar-inner"></div>
+      </div>
 
       <div class="play-body">
         <div class="problem-display">
@@ -105,9 +107,6 @@
     }).then(html => {
       document.getElementById('header-placeholder').outerHTML = html;
     });
-    loadComponent('components/progress-bar.html', {'{PROGRESS_ID}': 'progress-inner'}).then(html => {
-      document.getElementById('progressbar-placeholder').outerHTML = html;
-    });
     loadComponent('components/footer.html').then(html => {
       document.getElementById('footer-placeholder').outerHTML = html;
     });

app/src/main/assets/testy.html

@@ -100,7 +100,9 @@
         <div id="status" class="play-status">Trening</div>
         <div id="score" class="play-score">0</div>
       </header>
-  <div id="progressbar-placeholder"></div>
+      <div class="play-progress-bar">
+        <div id="progress_inner" class="play-progress-bar-inner"></div>
+      </div>
 
       <div class="play-body">
         <div class="problem-display">
@@ -159,9 +161,6 @@
     }).then(html => {
       document.getElementById('header-placeholder').outerHTML = html;
     });
-    loadComponent('components/progress-bar.html', {'{PROGRESS_ID}': 'progress_inner'}).then(html => {
-      document.getElementById('progressbar-placeholder').outerHTML = html;
-    });
     loadComponent('components/footer.html').then(html => {
       document.getElementById('footer-placeholder').outerHTML = html;
     });