feat(settings): menu navigation (unanimated)

2025-11-25 00:58:29 +01:00
parent ab2c6f2cc3
commit 9ca86caf46
26 changed files with 258 additions and 2 deletions
--- a/app/components/Settings/BottomScreen/Menus/Menus.vue
+++ b/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>