diff --git a/app/components/Common/ConfirmationModal.vue b/app/components/Common/ConfirmationModal.vue index 8b7ba90..7d02a9f 100644 --- a/app/components/Common/ConfirmationModal.vue +++ b/app/components/Common/ConfirmationModal.vue @@ -11,7 +11,8 @@ const BG_HEIGHT = assets.images.common.confirmationModal.rect.height; const BG_X = Math.floor((LOGICAL_WIDTH - BG_WIDTH) / 2); const BG_Y = Math.floor((LOGICAL_HEIGHT - BG_HEIGHT) / 2); -const TEXT_Y = BG_Y + Math.floor(BG_HEIGHT / 2) - 8 - 16 + 2 + 2; +const LINE_HEIGHT = 15; +const MAX_LINES = 3; const BOTTOM_BAR_HEIGHT = 24; const CLIP_HEIGHT = LOGICAL_HEIGHT - BOTTOM_BAR_HEIGHT; @@ -41,7 +42,19 @@ onRender((ctx) => { ctx.textBaseline = "top"; ctx.fillStyle = "#ffffff"; - fillTextCentered(ctx, confirmationModal.text, BG_X, TEXT_Y, BG_WIDTH); + const lines = confirmationModal.text.split("\n").slice(0, MAX_LINES); + const totalTextHeight = lines.length * LINE_HEIGHT; + const textStartY = BG_Y + Math.floor((BG_HEIGHT - totalTextHeight) / 2) - 2; + + for (let i = 0; i < lines.length; i++) { + fillTextHCentered( + ctx, + lines[i]!, + BG_X, + textStartY + i * LINE_HEIGHT, + BG_WIDTH, + ); + } }, 100); onUnmounted(() => { diff --git a/i18n/locales/en.json b/i18n/locales/en.json index ab8f1a3..0fcda79 100644 --- a/i18n/locales/en.json +++ b/i18n/locales/en.json @@ -63,6 +63,7 @@ "2048": { "title": "2048", "description": "Play 2048!", + "quitConfirmation": "Quit the game?\nYour score is saved.", "restartConfirmation": "Restart game?", "gameOver": "Game Over!\nRestart?", "score": "Score",