feat(fonts): add more icons

app/components/Common/Buttons.vue

@@ -17,7 +17,6 @@ const { assets } = useAssets();
 
 const BUTTON_WIDTH = assets.images.common.button.rect.width;
 const BUTTON_HEIGHT = assets.images.common.button.rect.height;
-const LETTER_WIDTH = assets.images.common.B.rect.width;
 
 const B_BUTTON: Rect = [31, 172, BUTTON_WIDTH, BUTTON_HEIGHT];
 const A_BUTTON: Rect = [144, 172, BUTTON_WIDTH, BUTTON_HEIGHT];
@@ -29,24 +28,15 @@ onRender((ctx) => {
 
   ctx.translate(0, props.yOffset);
 
-  const drawButton = (
-    image: AtlasImage,
-    text: string,
-    x: number,
-    offset: number,
-  ) => {
+  const drawButton = (icon: string, text: string, x: number) => {
     assets.images.common.button.draw(ctx, x, 172);
 
-    const { actualBoundingBoxRight: textWidth } = ctx.measureText(text);
-    const width = LETTER_WIDTH + 4 + textWidth;
-    const left = Math.ceil(x + BUTTON_WIDTH / 2 - width / 2 - offset / 2);
-
-    image.draw(ctx, left, 176);
-    ctx.fillText(text, left + LETTER_WIDTH + 4, 185);
+    const label = `${icon} ${text}`;
+    fillTextHCentered(ctx, label, x, 185, BUTTON_WIDTH);
   };
 
-  drawButton(assets.images.common.B, props.bLabel, 31, 5);
-  drawButton(assets.images.common.A, props.aLabel, 144, 0);
+  drawButton(ICONS.B, props.bLabel, 31);
+  drawButton(ICONS.A, props.aLabel, 144);
 }, 60);
 
 onClick((x, y) => {

app/components/Settings/BottomScreen/Menus/Clock/Achievements.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { SettingsBottomScreenNumberInput as NumberInput } from "#components";
+import { ICONS } from "~/utils/icons";
 
 const APP_COLOR_TO_FONT_COLOR: Record<string, string> = {
   "#61829a": "#fbfbfb", // cyan
@@ -82,28 +83,17 @@ onRender((ctx) => {
   achievementAssets.viewAllButton.draw(ctx, 127, 2);
   achievementAssets.smallTrophy.draw(ctx, 131, 6);
 
-  const GAP = 4;
-
   ctx.font = "10px NDS10";
   ctx.textBaseline = "top";
   ctx.fillStyle = "#010101";
-  const viewAllText = $t("settings.clock.achievements.viewAll");
-  const { actualBoundingBoxRight: textWidth } = ctx.measureText(viewAllText);
 
-  const totalWidth = achievementAssets.X.rect.width + GAP + textWidth;
-  const left = Math.ceil(
-    145 +
-      (achievementAssets.viewAllButton.rect.width - 18) / 2 -
-      totalWidth / 2,
-  );
-
-  achievementAssets.X.draw(ctx, left, 7);
+  const label = `${ICONS.X} ${$t("settings.clock.achievements.viewAll")}`;
   fillTextHCentered(
     ctx,
-    viewAllText,
-    left + achievementAssets.X.rect.width + GAP,
+    label,
+    145,
     7,
-    textWidth,
+    achievementAssets.viewAllButton.rect.width - 18,
   );
 }, 1000);
 </script>

app/utils/icons.ts

@@ -4,5 +4,8 @@ export const ICONS = {
   X: "Χ",
   Y: "Υ",
   HEART: "Γ",
-  SAD: "Δ",
+  HAPPY: "Δ",
+  ANGRY: "Ε",
+  SAD: "Ζ",
+  NEUTRAL: "Η",
 } as const;