feat(settings): menu navigation (unanimated)

app/components/Settings/BottomScreen/BottomScreen.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import Background from "./Background.vue";
+import Menus from "./Menus/Menus.vue";
 
 const store = useSettingsStore();
 
@@ -10,4 +11,5 @@ onMounted(() => {
 
 <template>
   <Background />
+  <Menus />
 </template>

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

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import MENU_IMAGE from "/assets/images/settings/top-screen/clock/clock.webp";
+import ALARM_IMAGE from "/assets/images/settings/top-screen/clock/alarm.webp";
+import TIME_IMAGE from "/assets/images/settings/top-screen/clock/time.webp";
+import DATE_IMAGE from "/assets/images/settings/top-screen/clock/date.webp";
+
+const props = defineProps<{
+  x: number;
+  y: number;
+  isOpen: boolean;
+}>();
+
+const [menuImage, alarmImage, timeImage, dateImage] = useImages(
+  MENU_IMAGE,
+  ALARM_IMAGE,
+  TIME_IMAGE,
+  DATE_IMAGE,
+);
+
+useRender((ctx) => {
+  ctx.translate(props.x, props.y);
+
+  ctx.drawImage(menuImage!, 0, 0);
+
+  if (props.isOpen) {
+    ctx.drawImage(alarmImage!, 0, -48);
+    ctx.drawImage(timeImage!, 48, -48);
+    ctx.drawImage(dateImage!, 0, -96);
+  }
+});
+
+defineOptions({
+  render: () => null,
+});
+</script>

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

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import OptionsMenu from "./OptionsMenu.vue";
+import ClockMenu from "./ClockMenu.vue";
+import UserMenu from "./UserMenu.vue";
+import TouchScreenMenu from "./TouchScreenMenu.vue";
+import Selector from "~/components/Common/ButtonSelector.vue";
+
+const { selectedButton: selected, selectorPosition } = useButtonNavigation({
+  buttons: {
+    options: [31, 119, 49, 49],
+    optionsLanguage: [31, 71, 49, 49],
+    optionsGbaMode: [79, 71, 49, 49],
+    optionsStartUp: [31, 23, 49, 49],
+
+    clock: [79, 119, 49, 49],
+    clockAlarm: [79, 71, 49, 49],
+    clockTime: [127, 71, 49, 49],
+    clockDate: [79, 23, 49, 49],
+
+    user: [127, 119, 49, 49],
+    userBirthday: [79, 71, 49, 49],
+    userName: [127, 71, 49, 49],
+    userMessage: [175, 71, 49, 49],
+    userColor: [127, 23, 49, 49],
+
+    touchScreen: [175, 119, 49, 49],
+  },
+  initialButton: "options",
+  navigation: {
+    options: {
+      right: "clock",
+      up: "optionsLanguage",
+    },
+    optionsLanguage: {
+      down: "options",
+      up: "optionsStartUp",
+      right: "optionsGbaMode",
+    },
+    optionsGbaMode: {
+      down: "options",
+      left: "optionsLanguage",
+      up: "optionsStartUp",
+    },
+    optionsStartUp: {
+      right: "optionsGbaMode",
+      down: "optionsLanguage",
+    },
+
+    clock: {
+      left: "options",
+      right: "user",
+      up: "clockAlarm",
+    },
+    clockAlarm: {
+      down: "clock",
+      up: "clockDate",
+      right: "clockTime",
+    },
+    clockTime: {
+      down: "clock",
+      left: "clockAlarm",
+      up: "clockDate",
+    },
+    clockDate: {
+      right: "clockTime",
+      down: "clockAlarm",
+    },
+
+    user: {
+      left: "clock",
+      right: "touchScreen",
+      up: "userName",
+    },
+    userBirthday: {
+      down: "user",
+      up: "userColor",
+      right: "userName",
+    },
+    userName: {
+      down: "user",
+      left: "userBirthday",
+      right: "userMessage",
+      up: "userColor",
+    },
+    userMessage: {
+      down: "user",
+      left: "userName",
+      up: "userColor",
+    },
+    userColor: {
+      left: "userBirthday",
+      right: "userMessage",
+      down: "userName",
+    },
+
+    touchScreen: {
+      left: "user",
+    },
+  },
+});
+</script>
+
+<template>
+  <OptionsMenu :x="33" :y="121" :is-open="/^options[A-Z]/.test(selected)" />
+  <ClockMenu :x="81" :y="121" :is-open="/^clock[A-Z]/.test(selected)" />
+  <UserMenu :x="129" :y="121" :is-open="/^user[A-Z]/.test(selected)" />
+  <TouchScreenMenu :x="177" :y="121" :opacity="1" />
+
+  <Selector :rect="selectorPosition" :opacity="1" />
+</template>

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

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import MENU_IMAGE from "/assets/images/settings/top-screen/options/options.webp";
+import GBA_MODE_IMAGE from "/assets/images/settings/top-screen/options/gba-mode.webp";
+import LANGUAGE_IMAGE from "/assets/images/settings/top-screen/options/language.webp";
+import START_UP_IMAGE from "/assets/images/settings/top-screen/options/start-up.webp";
+
+const props = defineProps<{
+  x: number;
+  y: number;
+  isOpen: boolean;
+}>();
+
+const [menuImage, gbaModeImage, languageImage, startUpImage] = useImages(
+  MENU_IMAGE,
+  GBA_MODE_IMAGE,
+  LANGUAGE_IMAGE,
+  START_UP_IMAGE,
+);
+
+useRender((ctx) => {
+  ctx.translate(props.x, props.y);
+
+  ctx.drawImage(menuImage!, 0, 0);
+
+  if (props.isOpen) {
+    ctx.drawImage(languageImage!, 0, -48);
+    ctx.drawImage(gbaModeImage!, 48, -48);
+    ctx.drawImage(startUpImage!, 0, -96);
+  }
+});
+
+defineOptions({
+  render: () => null,
+});
+</script>

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

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import MENU_IMAGE from "/assets/images/settings/top-screen/touch_screen/touch_screen.webp";
+
+const props = defineProps<{
+  x: number;
+  y: number;
+}>();
+
+const [menuImage] = useImages(MENU_IMAGE);
+
+useRender((ctx) => {
+  ctx.drawImage(menuImage!, props.x, props.y);
+});
+
+defineOptions({
+  render: () => null,
+});
+</script>

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

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import MENU_IMAGE from "/assets/images/settings/top-screen/user/user.webp";
+import BIRTHDAY_IMAGE from "/assets/images/settings/top-screen/user/birthday.webp";
+import COLOR_IMAGE from "/assets/images/settings/top-screen/user/color.webp";
+import MESSAGE_IMAGE from "/assets/images/settings/top-screen/user/message.webp";
+import USER_NAME_IMAGE from "/assets/images/settings/top-screen/user/user_name.webp";
+
+const props = defineProps<{
+  x: number;
+  y: number;
+  isOpen: boolean;
+}>();
+
+const [menuImage, birthdayImage, colorImage, messageImage, userNameImage] =
+  useImages(
+    MENU_IMAGE,
+    BIRTHDAY_IMAGE,
+    COLOR_IMAGE,
+    MESSAGE_IMAGE,
+    USER_NAME_IMAGE,
+  );
+
+useRender((ctx) => {
+  ctx.translate(props.x, props.y);
+
+  ctx.drawImage(menuImage!, 0, 0);
+
+  if (props.isOpen) {
+    ctx.drawImage(birthdayImage!, -48, -48);
+    ctx.drawImage(userNameImage!, 0, -48);
+    ctx.drawImage(messageImage!, 48, -48);
+    ctx.drawImage(colorImage!, 0, -96);
+  }
+});
+
+defineOptions({
+  render: () => null,
+});
+</script>

app/components/Settings/TopScreen/Calendar.vue

@@ -13,6 +13,8 @@ useRender((ctx) => {
   ctx.fillStyle = "black";
   ctx.font = "7px NDS7";
 
+  ctx.translate(0, -16);
+
   const CALENDAR_COLS = 7;
   const CALENDAR_ROWS = 5;
   const CALENDAR_LEFT = 128;

app/components/Settings/TopScreen/Clock.vue

@@ -52,6 +52,8 @@ function drawLine(
 }
 
 useRender((ctx) => {
+  ctx.translate(0, -16);
+
   ctx.drawImage(clockImage!, 13, 45);
 
   const now = new Date();

app/components/Settings/TopScreen/Notifications.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import TITLE_IMAGE from "/assets/images/settings/top-screen/notification-title.webp";
+
+const [titleImage] = useImages(TITLE_IMAGE);
+
+useRender((ctx) => {
+  ctx.drawImage(titleImage!, 0, 144);
+});
+
+defineOptions({
+  render: () => null,
+});
+</script>

app/components/Settings/TopScreen/TopScreen.vue

@@ -3,6 +3,7 @@ import Background from "./Background.vue";
 import Calendar from "./Calendar.vue";
 import Clock from "./Clock.vue";
 import StatusBar from "./StatusBar.vue";
+import Notifications from "./Notifications.vue";
 </script>
 
 <template>
@@ -10,4 +11,5 @@ import StatusBar from "./StatusBar.vue";
   <Calendar />
   <Clock />
   <StatusBar />
+  <Notifications />
 </template>