feat(common): multiline confirmation modal text

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(() => {

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",