142 lines
3.1 KiB
Vue
142 lines
3.1 KiB
Vue
<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",
|
|
},
|
|
},
|
|
});
|
|
|
|
const isMenuOpen = (menu: string) => {
|
|
const regex = new RegExp(`^${menu}[A-Z]`);
|
|
return regex.test(selected.value);
|
|
};
|
|
|
|
const isAnyOtherMenuOpen = (excludeMenu: string) => {
|
|
return ["options", "clock", "user"]
|
|
.filter((menu) => menu !== excludeMenu)
|
|
.some((menu) => isMenuOpen(menu));
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<OptionsMenu
|
|
:x="33"
|
|
:y="121"
|
|
:is-open="isMenuOpen('options')"
|
|
:is-any-other-menu-open="isAnyOtherMenuOpen('options')"
|
|
/>
|
|
<ClockMenu
|
|
:x="81"
|
|
:y="121"
|
|
:is-open="isMenuOpen('clock')"
|
|
:is-any-other-menu-open="isAnyOtherMenuOpen('clock')"
|
|
/>
|
|
<UserMenu
|
|
:x="129"
|
|
:y="121"
|
|
:is-open="isMenuOpen('user')"
|
|
:is-any-other-menu-open="isAnyOtherMenuOpen('user')"
|
|
/>
|
|
<TouchScreenMenu
|
|
:x="177"
|
|
:y="121"
|
|
:opacity="1"
|
|
:is-any-other-menu-open="isAnyOtherMenuOpen('touchScreen')"
|
|
/>
|
|
|
|
<Selector :rect="selectorPosition" :opacity="1" />
|
|
</template>
|