cosmetic improvements

app.js

@@ -33,6 +33,7 @@ const STRINGS = {
     congratulations: 'Congratulations!',
     pleaseSelect: 'Please select all options',
     installApp: 'Install App',
+    sec: 'sec',
     systemNames: {
       binary: 'Binary', octal: 'Octal', hex: 'Hexadecimal',
       ternary: 'Balanced Ternary', braille: 'Braille Decimal',
@@ -70,6 +71,7 @@ const STRINGS = {
     congratulations: '\u041F\u043E\u0437\u0434\u0440\u0430\u0432\u043B\u044F\u0435\u043C!',
     pleaseSelect: '\u041F\u043E\u0436\u0430\u043B\u0443\u0439\u0441\u0442\u0430, \u0432\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0432\u0441\u0435 \u043F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u044B',
     installApp: '\u0423\u0441\u0442\u0430\u043D\u043E\u0432\u0438\u0442\u044C \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435',
+    sec: '\u0441\u0435\u043A',
     systemNames: {
       binary: '\u0414\u0432\u043E\u0438\u0447\u043D\u0430\u044F',
       octal: '\u0412\u043E\u0441\u044C\u043C\u0435\u0440\u0438\u0447\u043D\u0430\u044F',
@@ -171,10 +173,10 @@ const MODES = [
 ];
 
 const TIMINGS = [
-  { label: '60 sec', value: 60 },
+  { value: 60 },
-  { label: '40 sec', value: 40 },
+  { value: 40 },
-  { label: '10 sec', value: 10 },
+  { value: 10 },
-  { label: 'nolimit', value: 0 },
+  { value: 0 },
 ];
 
 const ROUNDS = [10, 25, 50, 100];
@@ -296,7 +298,7 @@ function renderSetupOptions() {
   TIMINGS.forEach((tm, i) => {
     const btn = document.createElement('button');
     btn.className = 'option-btn' + (i === defaultTiming ? ' selected' : '');
-    btn.textContent = tm.value === 0 ? t('noLimit') : tm.label;
+    btn.textContent = tm.value === 0 ? t('noLimit') : tm.value + ' ' + t('sec');
     btn.addEventListener('click', () => {
       timingDiv.querySelectorAll('.option-btn').forEach(b => b.classList.remove('selected'));
       btn.classList.add('selected');
@@ -324,6 +326,8 @@ function renderSetupOptions() {
 
 // ---- GAME ----
 let lastSetupState = null;
+const MARK_CORRECT = '\u2713 ';
+const MARK_INCORRECT = '\u2717 ';
 
 function startGame() {
   lastSetupState = { ...setupState };
@@ -337,9 +341,10 @@ function startGame() {
   game.mistakes = [];
   game.lastAnswer = null;
 
-  document.getElementById('score-correct').textContent = '0';
+  document.getElementById('score-system-range').textContent = systemName(game.system) + ': ' + game.range.label;
-  document.getElementById('score-total').textContent = '0';
+  document.getElementById('score-round').textContent = '0/' + game.rounds;
-  document.getElementById('score-system').textContent = systemName(game.system);
+  document.getElementById('score-correct').textContent = MARK_CORRECT + '0';
+  document.getElementById('score-incorrect').textContent = MARK_INCORRECT + '0';
 
   showScreen('game');
   nextRound();
@@ -360,8 +365,8 @@ function nextRound() {
   game.correctAnswer = num;
   game.lastAnswer = num;
 
-  document.getElementById('score-total').textContent = game.currentRound;
+  document.getElementById('score-round').textContent = game.currentRound + '/' + game.rounds;
-  document.getElementById('score-correct').textContent = game.correctCount;
+  document.getElementById('score-correct').textContent = MARK_CORRECT + game.correctCount;
 
   const display = SYSTEMS[game.system].toDisplay(game.correctAnswer);
   const numEl = document.getElementById('number-display');
@@ -411,7 +416,7 @@ function handleChoice(idx, val, choices) {
 
   if (val === game.correctAnswer) {
     game.correctCount++;
-    document.getElementById('score-correct').textContent = game.correctCount;
+      document.getElementById('score-correct').textContent = MARK_CORRECT + game.correctCount;
     allBtns[idx].classList.add('correct-choice');
     feedback.textContent = t('correct');
     feedback.className = 'answer-feedback correct';
@@ -427,6 +432,7 @@ function handleChoice(idx, val, choices) {
       systemName: systemName(game.system),
     });
   }
+  document.getElementById('score-incorrect').textContent = MARK_INCORRECT + (game.currentRound - game.correctCount);
 
   document.getElementById('btn-next').classList.remove('hidden');
 }
@@ -466,7 +472,7 @@ function renderNumpad() {
     const feedback = document.getElementById('answer-feedback');
     if (val === game.correctAnswer) {
       game.correctCount++;
-      document.getElementById('score-correct').textContent = game.correctCount;
+    document.getElementById('score-correct').textContent = MARK_CORRECT + game.correctCount;
       feedback.textContent = t('correct');
       feedback.className = 'answer-feedback correct';
     } else {
@@ -478,6 +484,7 @@ function renderNumpad() {
         systemName: systemName(game.system),
       });
     }
+    document.getElementById('score-incorrect').textContent = MARK_INCORRECT + (game.currentRound - game.correctCount);
 
     document.getElementById('btn-next').classList.remove('hidden');
   };
@@ -518,12 +525,12 @@ function startTimer() {
 
   timerArea.classList.add('visible');
   game.timeLeft = game.timing;
-  timerEl.textContent = game.timeLeft + 's';
+  timerEl.textContent = game.timeLeft + ' ' + t('sec');
   timerEl.classList.remove('urgent');
 
   game.timerInterval = setInterval(() => {
     game.timeLeft--;
-    timerEl.textContent = game.timeLeft + 's';
+  timerEl.textContent = game.timeLeft + ' ' + t('sec');
 
     if (game.timeLeft <= 10) {
       timerEl.classList.add('urgent');
@@ -541,6 +548,7 @@ function startTimer() {
           decimal: game.correctAnswer,
           systemName: systemName(game.system),
         });
+  document.getElementById('score-incorrect').textContent = MARK_INCORRECT + (game.currentRound - game.correctCount);
 
         document.getElementById('btn-next').classList.remove('hidden');
 

index.html

@@ -10,7 +10,7 @@
   <link rel="manifest" href="manifest.json">
   <link rel="icon" type="image/svg+xml" href="icon.svg">
   <link rel="apple-touch-icon" href="icon-192.png">
-  <link rel="stylesheet" href="styles.css?v=41">
+  <link rel="stylesheet" href="styles.css?v=46">
 </head>
 <body>
   <div id="app">
@@ -93,8 +93,9 @@
     <div id="screen-game" class="screen">
       <div class="game-header">
         <div class="score-display">
-          <span id="score-correct">0</span>/<span id="score-total">0</span>
+          <span id="score-round">0/0</span>
-          <span id="score-system"></span>
+          <span id="score-correct" class="score-correct">0</span>
+          <span id="score-incorrect" class="score-incorrect">0</span>
         </div>
         <div class="timer-area" id="timer-area">
           <span class="timer-label" data-i18n="timeLeft">Time left</span>
@@ -105,6 +106,8 @@
         </div>
       </div>
 
+      <div class="system-range-label" id="score-system-range"></div>
+
       <div class="game-body">
         <div class="number-display" id="number-display"></div>
         <div class="answer-feedback" id="answer-feedback"></div>
@@ -155,10 +158,10 @@
 
   </div>
 
-  <script type="module" src="app.js?v=41"></script>
+  <script type="module" src="app.js?v=46"></script>
   <script>
     if ('serviceWorker' in navigator) {
-      navigator.serviceWorker.register('/sw.js?v=41').catch(() => {});
+      navigator.serviceWorker.register('/sw.js?v=46').catch(() => {});
     }
   </script>
 </body>

styles.css

@@ -252,14 +252,24 @@ body {
 }
 
 .score-display {
+  display: flex;
+  align-items: center;
+  gap: 10px;
   font-size: 1.2rem;
   font-weight: 700;
 }
 
-#score-system {
+.score-correct { 
-  margin-left: 8px;
+  color: var(--correct);
+  margin-left: 16px;
+}
+.score-incorrect { color: var(--incorrect); }
+
+.system-range-label {
+  text-align: center;
+  font-size: 1rem;
   color: var(--text-dim);
-  font-size: 0.9rem;
+  padding: 8px 20px 0;
 }
 
 .timer-area {
@@ -522,6 +532,9 @@ body {
   font-size: 1.5rem;
   font-weight: 700;
   color: var(--correct);
+}
+
+.results-congrats:not(:empty) {
   margin-bottom: 16px;
   min-height: 48px;
 }

sw.js

@@ -1,4 +1,4 @@
-const CACHE_NAME = 'numnum-v41';
+const CACHE_NAME = 'numnum-v46';
 const ASSETS = [
   '/',
   '/index.html',