feat(achievements): handle 2 lines text in notification

app/components/Common/AchievementNotification.vue

@@ -13,10 +13,12 @@ const isAnimating = ref(false);
 
 const PADDING = 4;
 const LOGO_SIZE = assets.images.common.achievementNotificationLogo.rect.height;
-const NOTIF_HEIGHT = LOGO_SIZE + PADDING * 2;
 const NOTIF_WIDTH = 120;
+const NOTIF_HEIGHT = LOGO_SIZE + PADDING * 2;
 const NOTIF_Y = 3;
 const NOTIF_X_VISIBLE = LOGICAL_WIDTH - NOTIF_WIDTH;
+const TEXT_X_OFFSET = LOGO_SIZE + PADDING * 2;
+const LINE_HEIGHT = 8;
 
 achievements.$onAction(({ name, args, after }) => {
   if (name === "unlock") {
@@ -65,34 +67,36 @@ onRender((ctx) => {
   if (!currentAchievement.value) return;
 
   const logo = assets.images.common.achievementNotificationLogo;
-  const textOffset = LOGO_SIZE + PADDING * 2;
 
-  // Shadow
+  // shadow
   ctx.fillStyle = "rgba(0, 0, 0, 0.3)";
   ctx.fillRect(x.value + 1, NOTIF_Y + 1, NOTIF_WIDTH, NOTIF_HEIGHT);
 
-  // Outer border (dark) - no right border
+  // border
   ctx.fillStyle = "#282828";
   ctx.fillRect(x.value, NOTIF_Y, NOTIF_WIDTH, 1); // Top
   ctx.fillRect(x.value, NOTIF_Y, 1, NOTIF_HEIGHT); // Left
   ctx.fillRect(x.value, NOTIF_Y + NOTIF_HEIGHT - 1, NOTIF_WIDTH, 1); // Bottom
 
-  // Inner background (light)
+  // background
   ctx.fillStyle = "#fafafa";
   ctx.fillRect(x.value + 1, NOTIF_Y + 1, NOTIF_WIDTH - 1, NOTIF_HEIGHT - 2);
 
-  // Logo
+  // logo
   logo.draw(ctx, x.value + PADDING, NOTIF_Y + PADDING);
 
-  // Text
+  // text (1 or 2 lines)
-  ctx.font = "8px NDS10";
+  ctx.font = "7px NDS7";
   ctx.textBaseline = "top";
   ctx.fillStyle = "#282828";
-  ctx.fillText(
+
-    $t(`achievements.${currentAchievement.value}`),
+  const lines = $t(`achievements.${currentAchievement.value}`).split("\n");
-    x.value + textOffset,
+  const textY =
-    NOTIF_Y + PADDING + (LOGO_SIZE - 8) / 2,
+    lines.length === 1 ? NOTIF_Y + PADDING + 4 : NOTIF_Y + PADDING + 1;
-  );
+
+  for (let i = 0; i < lines.length; i++) {
+    ctx.fillText(lines[i]!, x.value + TEXT_X_OFFSET, textY + i * LINE_HEIGHT);
+  }
 }, 200);
 
 defineOptions({ render: () => null });

i18n/locales/en.json

@@ -1,4 +1,20 @@
 {
+  "achievements": {
+    "boot": "Boot up the system",
+    "projects_visit": "Visit the projects\nsection",
+    "projects_view_5": "View 5 projects",
+    "projects_open_link": "Open a project link",
+    "gallery_visit": "Visit the photo\ngallery",
+    "contact_visit": "Visit the contact\nsection",
+    "contact_git_visit": "Visit my Git profile",
+    "settings_color_change": "Change the system\ncolor",
+    "snake_play": "Play Snake",
+    "snake_score_40": "Score 40 points\nin Snake",
+    "settings_color_try_all": "Try all colors",
+    "settings_language_try_all": "Try all languages",
+    "settings_visit_all": "Visit all settings\nsubmenus",
+    "contact_36_notifications": "Trigger 36\nnotifications"
+  },
   "intro": {
     "copyright": "WARNING - COPYRIGHT",
     "text": "THIS IS A NON-COMMERCIAL FAN-MADE\nRECREATION. NOT AFFILIATED WITH\nOR ENDORSED BY NINTENDO.\nNINTENDO DS IS A TRADEMARK OF\nNINTENDO CO., LTD.",
@@ -67,6 +83,20 @@
         "description": "My username and first name.",
         "userName": "User Name",
         "firstName": "First Name"
+      },
+      "message": {
+        "title": "Message",
+        "description": "My personal message.",
+        "message": "Hello there!\n\nI hope you\nlike the\nwebsite!"
+      },
+      "personalMessage": {
+        "title": "Personal Message",
+        "description": "Play a quick game of Snake!",
+        "score": "Score: {score}",
+        "best": "Best: {best}",
+        "startPrompt": "[A] Start",
+        "quitConfirmation": "Quit the game?",
+        "restartConfirmation": "Restart the game?"
       }
     },
     "touchScreen": {