133 lines
2.9 KiB
Vue
133 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
import OptionsMenu from "./Options/Menu.vue";
|
|
import ClockMenu from "./Clock/Menu.vue";
|
|
import UserMenu from "./User/Menu.vue";
|
|
import TouchScreenMenu from "./TouchScreen/Menu.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",
|
|
onButtonClick: (buttonName: string) => {
|
|
if (isSubmenu(buttonName)) {
|
|
settingsStore.pushNavigation(buttonName);
|
|
}
|
|
},
|
|
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",
|
|
},
|
|
},
|
|
});
|
|
|
|
const settingsStore = useSettingsStore();
|
|
|
|
const isSubmenu = (buttonName: string) => {
|
|
return (
|
|
/^(options|clock|user|touchScreen)[A-Z]/.test(buttonName) &&
|
|
!["options", "clock", "user", "touchScreen"].includes(buttonName)
|
|
);
|
|
};
|
|
|
|
watch(
|
|
selected,
|
|
(newSelected) => {
|
|
settingsStore.setActiveMenu(newSelected);
|
|
},
|
|
{ immediate: true },
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<OptionsMenu :x="33" :y="121" />
|
|
<ClockMenu :x="81" :y="121" />
|
|
<UserMenu :x="129" :y="121" />
|
|
<TouchScreenMenu :x="177" :y="121" :opacity="1" />
|
|
|
|
<Selector :rect="selectorPosition" :opacity="1" />
|
|
</template>
|