Refactor: Improve i18n support and fix multiplication steps layout

- Integrate i18n translations for difficulty descriptions
- Fix intermediate steps alignment in long multiplication display
- Simplify spacing calculations for better layout consistency
- Update translation files for all supported languages (en, es, el, sv)

MathHomeworkHelper/app/src/main/assets/script.js

@@ -448,8 +448,8 @@ function handleSubmitAnswer() {
         showFeedback('🎉 Correct! +1 point', 'correct');
         updateScore();
         
-        // Check if reached 20 points
+        // Check if reached 10 points
-        if (gameState.points >= 20) {
+        if (gameState.points >= 10) {
             showVictoryModal();
             return;
         }
@@ -502,7 +502,7 @@ function clearFeedback() {
  * Update score display
  */
 function updateScore() {
-    pointsScoreDisplay.textContent = `${gameState.points}/20`;
+    pointsScoreDisplay.textContent = `${gameState.points}/10`;
 }
 
 /**
@@ -643,7 +643,7 @@ function updateUIText() {
         modalTitle.textContent = i18n.t('congratulations');
     }
     if (modalText) {
-        modalText.textContent = i18n.t('youReached20Points');
+        modalText.textContent = i18n.t('youReached10Points');
     }
     if (playAgainButton) {
         playAgainButton.textContent = i18n.t('playAgain');

index.html

@@ -62,7 +62,7 @@
             <section class="score-section">
                 <div class="score-box">
                     <p class="score-label">Points:</p>
-                    <p class="score-value" id="points-score">0/20</p>
+                    <p class="score-value" id="points-score">0/10</p>
                 </div>
             </section>
 
@@ -83,4 +83,4 @@
     <script src="translations.js"></script>
     <script src="script.js"></script>
 </body>
-</html>
+</html>

script.js

@@ -66,8 +66,11 @@ window.addEventListener('load', async () => {
  */
 function handleDifficultyChange() {
     gameState.difficulty = parseInt(difficultySlider.value);
-    difficultyDisplay.textContent = gameState.difficulty;
+    document.getElementById('difficulty-display').textContent = gameState.difficulty;
-    difficultyDescription.textContent = difficultyConfig[gameState.difficulty].description;
+    const config = difficultyConfig[gameState.difficulty];
+    if (config && config.descriptionKey) {
+        difficultyDescription.textContent = i18n.t(config.descriptionKey);
+    }
     generateNewProblem();
 }
 
@@ -166,19 +169,8 @@ function displayProblem() {
             
             for (let i = 0; i < steps.length; i++) {
                 const stepProduct = steps[i].product.toString();
-                const totalWidth = stepProduct.length + steps[i].shift;
+                const totalWidth = maxResultWidth;
-                intermediateHTML += '<div class="line" style="justify-content: flex-start; gap: 5px;">';
+                intermediateHTML += '<div class="line" style="justify-content: flex-end; gap: 5px;">';
-                
-                // Each row is offset one position to the left
-                // Add offset spaces at the beginning (left side)
-                for (let offset = 0; offset < i; offset++) {
-                    intermediateHTML += '<span style="width: 90px;"></span>';
-                }
-                
-                // Add empty spaces for shift
-                for (let s = 0; s < steps[i].shift; s++) {
-                    intermediateHTML += '<span style="width: 90px;"></span>';
-                }
                 
                 // Add input fields for each digit
                 for (let j = 0; j < stepProduct.length; j++) {
@@ -186,9 +178,9 @@ function displayProblem() {
                 }
                 
                 // Add trailing empty spaces on the right
-                const trailingSpaces = maxResultWidth - totalWidth - i;
+                const trailingSpaces = i;
                 for (let e = 0; e < trailingSpaces; e++) {
-                    intermediateHTML += '<span style="width: 90px;"></span>';
+                    intermediateHTML += `<span style="width: 90px"></span>`;
                 }
                 
                 intermediateHTML += '</div>';
@@ -448,8 +440,8 @@ function handleSubmitAnswer() {
         showFeedback('🎉 Correct! +1 point', 'correct');
         updateScore();
         
-        // Check if reached 20 points
+        // Check if reached 10 points
-        if (gameState.points >= 20) {
+        if (gameState.points >= 10) {
             showVictoryModal();
             return;
         }
@@ -502,7 +494,7 @@ function clearFeedback() {
  * Update score display
  */
 function updateScore() {
-    pointsScoreDisplay.textContent = `${gameState.points}/20`;
+    pointsScoreDisplay.textContent = `${gameState.points}/10`;
 }
 
 /**
@@ -643,7 +635,7 @@ function updateUIText() {
         modalTitle.textContent = i18n.t('congratulations');
     }
     if (modalText) {
-        modalText.textContent = i18n.t('youReached20Points');
+        modalText.textContent = i18n.t('youReached10Points');
     }
     if (playAgainButton) {
         playAgainButton.textContent = i18n.t('playAgain');

translations/el.json

@@ -13,7 +13,7 @@
   "points": "Πόντοι:",
   "newProblem": "Νέο Πρόβλημα",
   "congratulations": "🎉 Συγχαρητήρια! 🎉",
-  "youReached20Points": "Έφτασες τους 20 πόντους!",
+  "youReached10Points": "Έφτασες τους 10 πόντους!",
   "playAgain": "Παίξε Ξανά",
   "correct": "Σωστό! Εξαιρετική δουλειά! 🎉",
   "incorrect": "Λάθος. Προσπάθησε ξανά! 💪"

translations/en.json

@@ -13,7 +13,7 @@
   "points": "Points:",
   "newProblem": "New Problem",
   "congratulations": "🎉 Congratulations! 🎉",
-  "youReached20Points": "You've reached 20 points!",
+  "youReached10Points": "You've reached 10 points!",
   "playAgain": "Play Again",
   "correct": "Correct! Great job! 🎉",
   "incorrect": "Incorrect. Try again! 💪"

translations/es.json

@@ -13,7 +13,7 @@
   "points": "Puntos:",
   "newProblem": "Nuevo Problema",
   "congratulations": "🎉 ¡Felicitaciones! 🎉",
-  "youReached20Points": "¡Has alcanzado 20 puntos!",
+  "youReached10Points": "¡Has alcanzado 10 puntos!",
   "playAgain": "Jugar de Nuevo",
   "correct": "¡Correcto! ¡Excelente trabajo! 🎉",
   "incorrect": "Incorrecto. ¡Intenta de nuevo! 💪"

translations/sv.json

@@ -13,7 +13,7 @@
   "points": "Poäng:",
   "newProblem": "Nytt Problem",
   "congratulations": "🎉 Grattis! 🎉",
-  "youReached20Points": "Du har nått 20 poäng!",
+  "youReached10Points": "Du har nått 10 poäng!",
   "playAgain": "Spela Igen",
   "correct": "Rätt! Bra jobbat! 🎉",
   "incorrect": "Fel. Försök igen! 💪"