ps/mathstuff
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor: Improve i18n support and fix multiplication steps layout
Some checks failed
continuous-integration/drone/push Build is failing
Details

Browse source 
- 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)
This commit is contained in:
Juan José Gutiérrez de Quevedo Pérez 2025-11-25 17:46:30 +01:00
parent 382b0b235c
commit b907866c85
7 changed files with 23 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

34
script.js
View file

@ -66,8 +66,11 @@ window.addEventListener('load', async () => {
*/
function handleDifficultyChange() {
gameState.difficulty = parseInt(difficultySlider.value);
difficultyDisplay.textContent = gameState.difficulty;
difficultyDescription.textContent = difficultyConfig[gameState.difficulty].description;
document.getElementById('difficulty-display').textContent = gameState.difficulty;
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;
intermediateHTML += '<div class="line" style="justify-content: flex-start; 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>';
}
const totalWidth = maxResultWidth;
intermediateHTML += '<div class="line" style="justify-content: flex-end; gap: 5px;">';
// 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
if (gameState.points >= 20) {
// Check if reached 10 points
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');