feat(settings/user/userName): implement

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

@@ -7,6 +7,7 @@ import OptionsGbaMode from "./Options/GbaMode.vue";
 import UserMenu from "./User/Menu.vue";
 import UserColor from "./User/Color.vue";
 import UserBirthday from "./User/Birthday.vue";
+import UserUserName from "./User/UserName.vue";
 
 import ClockMenu from "./Clock/Menu.vue";
 import ClockDate from "./Clock/Date.vue";
@@ -43,7 +44,7 @@ const { select, selected, selectorPosition } = useButtonNavigation({
 
     user: [127, 119, 49, 49],
     userBirthday: [79, 71, 49, 49],
-    userName: [127, 71, 49, 49],
+    userUserName: [127, 71, 49, 49],
     userMessage: [175, 71, 49, 49],
     userColor: [127, 23, 49, 49],
 
@@ -56,7 +57,7 @@ const { select, selected, selectorPosition } = useButtonNavigation({
     } else {
       if (buttonName === "options") select("optionsLanguage");
       if (buttonName === "clock") select("clockAlarm");
-      if (buttonName === "user") select("userName");
+      if (buttonName === "user") select("userUserName");
       if (buttonName === "touchScreen") throw new Error("Not implemented");
     }
   },
@@ -103,14 +104,14 @@ const { select, selected, selectorPosition } = useButtonNavigation({
     user: {
       left: "clock",
       right: "touchScreen",
-      up: "userName",
+      up: "userUserName",
     },
     userBirthday: {
       down: ["user", false],
       up: ["userColor", false],
-      right: "userName",
+      right: "userUserName",
     },
-    userName: {
+    userUserName: {
       down: "user",
       left: "userBirthday",
       right: "userMessage",
@@ -118,13 +119,13 @@ const { select, selected, selectorPosition } = useButtonNavigation({
     },
     userMessage: {
       down: ["user", false],
-      left: "userName",
+      left: "userUserName",
       up: ["userColor", false],
     },
     userColor: {
       left: ["userBirthday", false],
       right: ["userMessage", false],
-      down: "userName",
+      down: "userUserName",
     },
 
     touchScreen: {
@@ -171,6 +172,7 @@ const viewComponents: Record<string, Component> = {
 
   userColor: UserColor,
   userBirthday: UserBirthday,
+  userUserName: UserUserName,
 };
 </script>
 

app/components/Settings/BottomScreen/Menus/User/UserName.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+const store = useSettingsStore();
+
+const { onRender } = useScreen();
+const { assets: atlas } = useAssets();
+const assets = atlas.images.settings.bottomScreen;
+
+const USER_NAME = "pihkaal";
+const REAL_NAME = "Stevan";
+
+const handleCancel = () => {
+  store.closeSubMenu();
+};
+
+const handleConfirm = () => {
+  store.closeSubMenu();
+};
+
+onRender((ctx) => {
+  ctx.font = "10px NDS10";
+  ctx.textBaseline = "top";
+
+  assets.background.draw(ctx, 0, 0);
+
+  const drawTextField = (
+    title: string,
+    text: string,
+    x: number,
+    y: number,
+  ): void => {
+    // title
+    ctx.fillStyle = "#282828";
+    assets.user.nameTitle.draw(ctx, x + 12, y);
+    fillTextHCentered(ctx, title, x + 12, y + 4, 169);
+
+    // field
+    ctx.fillStyle = "#fbfbfb";
+    assets.user.nameField.draw(
+      ctx,
+      x,
+      y + assets.user.nameTitle.rect.height - 1,
+    );
+
+    for (let i = 0; i < text.length; i += 1, x += 16) {
+      ctx.fillText(text[i]!, x + 20, y + assets.user.nameTitle.rect.height + 3);
+    }
+  };
+
+  drawTextField($t("settings.user.userName.userName"), USER_NAME, 31, 48);
+  drawTextField($t("settings.user.userName.firstName"), REAL_NAME, 31, 96);
+});
+
+defineOptions({ render: () => null });
+</script>
+
+<template>
+  <CommonButtons
+    :y-offset="0"
+    b-label="Cancel"
+    a-label="Confirm"
+    @activate-b="handleCancel"
+    @activate-a="handleConfirm"
+  />
+</template>