feat(nds): add pressed state for all buttons
This commit is contained in:
@@ -19,20 +19,20 @@ import TouchScreenTapTap from "./TouchScreen/TapTap.vue";
|
||||
import Selector from "~/components/Common/ButtonSelector.vue";
|
||||
|
||||
const app = useAppStore();
|
||||
const settingsStore = useSettingsStore();
|
||||
const store = useSettingsStore();
|
||||
const { assets } = useAssets();
|
||||
const { onRender } = useScreen();
|
||||
|
||||
onRender((ctx) => {
|
||||
if (settingsStore.submenuBackground.opacity > 0) {
|
||||
ctx.globalAlpha = settingsStore.submenuBackground.opacity;
|
||||
ctx.translate(0, settingsStore.submenuBackground.offsetY);
|
||||
if (store.submenuBackground.opacity > 0) {
|
||||
ctx.globalAlpha = store.submenuBackground.opacity;
|
||||
ctx.translate(0, store.submenuBackground.offsetY);
|
||||
assets.images.home.topScreen.background.draw(ctx, 0, 0);
|
||||
}
|
||||
});
|
||||
|
||||
if (app.previousScreen === "home") {
|
||||
settingsStore.selectedButton = "options";
|
||||
store.selectedButton = "options";
|
||||
}
|
||||
|
||||
const isMainMenu = (button: string): button is SettingsMenu =>
|
||||
@@ -47,7 +47,7 @@ const getParentMenu = (submenu: string): SettingsMenu => {
|
||||
return match[1] as SettingsMenu;
|
||||
};
|
||||
|
||||
const { select, selected, selectorPosition } = useButtonNavigation({
|
||||
const { select, selected, pressed, selectorPosition } = useButtonNavigation({
|
||||
buttons: {
|
||||
options: [31, 119, 49, 49],
|
||||
optionsLanguage: [31, 71, 49, 49],
|
||||
@@ -67,16 +67,15 @@ const { select, selected, selectorPosition } = useButtonNavigation({
|
||||
|
||||
touchScreen: [175, 119, 49, 49],
|
||||
},
|
||||
initialButton: settingsStore.selectedButton,
|
||||
initialButton: store.selectedButton,
|
||||
onActivate: (buttonName) => {
|
||||
if (isSubMenu(buttonName)) {
|
||||
settingsStore.openSubMenu(buttonName);
|
||||
store.openSubMenu(buttonName);
|
||||
} else {
|
||||
if (buttonName === "options") select("optionsLanguage");
|
||||
if (buttonName === "clock") select("clockAchievements");
|
||||
if (buttonName === "user") select("userUserName");
|
||||
if (buttonName === "touchScreen")
|
||||
settingsStore.openSubMenu("touchScreenTapTap");
|
||||
if (buttonName === "touchScreen") store.openSubMenu("touchScreenTapTap");
|
||||
}
|
||||
},
|
||||
navigation: {
|
||||
@@ -153,17 +152,17 @@ const { select, selected, selectorPosition } = useButtonNavigation({
|
||||
canClickButton: (buttonName) => {
|
||||
if (isSubMenu(buttonName)) {
|
||||
const parent = getParentMenu(buttonName);
|
||||
return settingsStore.currentMenu === parent && settingsStore.menuExpanded;
|
||||
return store.currentMenu === parent && store.menuExpanded;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
disabled: computed(
|
||||
() =>
|
||||
settingsStore.currentSubMenu !== null ||
|
||||
settingsStore.submenuTransition.opacity < 1 ||
|
||||
settingsStore.isIntro ||
|
||||
settingsStore.isOutro ||
|
||||
settingsStore.animatingNotification,
|
||||
store.currentSubMenu !== null ||
|
||||
store.submenuTransition.opacity < 1 ||
|
||||
store.isIntro ||
|
||||
store.isOutro ||
|
||||
store.animatingNotification,
|
||||
),
|
||||
selectorAnimation: {
|
||||
duration: 0.11,
|
||||
@@ -172,34 +171,34 @@ const { select, selected, selectorPosition } = useButtonNavigation({
|
||||
});
|
||||
|
||||
const isSubmenuSelected = computed(() => isSubMenu(selected.value));
|
||||
const selectedSubmenuParent = computed(() =>
|
||||
isSubmenuSelected.value ? getParentMenu(selected.value) : null,
|
||||
);
|
||||
|
||||
const selectedSubmenuExtraOffsetY = computed(
|
||||
() =>
|
||||
settingsStore.submenuTransition.selectorOffsetY -
|
||||
settingsStore.submenuTransition.offsetY,
|
||||
store.submenuTransition.selectorOffsetY - store.submenuTransition.offsetY,
|
||||
);
|
||||
|
||||
provide("menusContext", {
|
||||
isSubmenuSelected,
|
||||
selectedSubmenuParent,
|
||||
selectedSubmenuExtraOffsetY,
|
||||
});
|
||||
const isAnyOtherMenuOpen = (menu: SettingsMenu) => {
|
||||
if (store.currentSubMenu) {
|
||||
return !store.currentSubMenu.startsWith(menu);
|
||||
}
|
||||
if (isSubmenuSelected.value) {
|
||||
return getParentMenu(selected.value) !== menu;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
watch(
|
||||
selected,
|
||||
(newSelected) => {
|
||||
settingsStore.selectedButton = newSelected;
|
||||
store.selectedButton = newSelected;
|
||||
|
||||
if (settingsStore.currentSubMenu === null) {
|
||||
if (store.currentSubMenu === null) {
|
||||
if (isMainMenu(newSelected)) {
|
||||
settingsStore.openMenu(newSelected, false);
|
||||
store.openMenu(newSelected, false);
|
||||
} else if (isSubMenu(newSelected)) {
|
||||
const parentMenu = getParentMenu(newSelected);
|
||||
if (parentMenu) {
|
||||
settingsStore.openMenu(parentMenu, true);
|
||||
store.openMenu(parentMenu, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -231,18 +230,13 @@ const selectorXOffset = computed(() => {
|
||||
|
||||
switch (menu) {
|
||||
case "clock":
|
||||
return Math.min(0, settingsStore.menuOffsets[1]);
|
||||
return Math.min(0, store.menuOffsets[1]);
|
||||
case "user":
|
||||
return Math.min(
|
||||
0,
|
||||
settingsStore.menuOffsets[1] + settingsStore.menuOffsets[2],
|
||||
);
|
||||
return Math.min(0, store.menuOffsets[1] + store.menuOffsets[2]);
|
||||
case "touchScreen":
|
||||
return Math.min(
|
||||
0,
|
||||
settingsStore.menuOffsets[1] +
|
||||
settingsStore.menuOffsets[2] +
|
||||
settingsStore.menuOffsets[3],
|
||||
store.menuOffsets[1] + store.menuOffsets[2] + store.menuOffsets[3],
|
||||
);
|
||||
default:
|
||||
return 0;
|
||||
@@ -251,91 +245,81 @@ const selectorXOffset = computed(() => {
|
||||
|
||||
const selectorTransitionOffsetY = computed(() => {
|
||||
if (isSubmenuSelected.value || selected.value === "touchScreen") {
|
||||
return settingsStore.submenuTransition.selectorOffsetY;
|
||||
return store.submenuTransition.selectorOffsetY;
|
||||
}
|
||||
return settingsStore.submenuTransition.offsetY;
|
||||
return store.submenuTransition.offsetY;
|
||||
});
|
||||
|
||||
const handleActivateB = () => {
|
||||
if (
|
||||
settingsStore.isIntro ||
|
||||
settingsStore.isOutro ||
|
||||
settingsStore.submenuTransition.opacity < 1
|
||||
)
|
||||
if (store.isIntro || store.isOutro || store.submenuTransition.opacity < 1)
|
||||
return;
|
||||
|
||||
if (isSubmenuSelected.value) {
|
||||
select(getParentMenu(selected.value));
|
||||
} else {
|
||||
settingsStore.animateOutro();
|
||||
store.animateOutro();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<template v-if="!settingsStore.currentSubMenu">
|
||||
<template v-if="!store.currentSubMenu">
|
||||
<TouchScreenMenu
|
||||
:x="
|
||||
177 +
|
||||
settingsStore.menuOffsets[1] +
|
||||
settingsStore.menuOffsets[2] +
|
||||
settingsStore.menuOffsets[3]
|
||||
177 + store.menuOffsets[1] + store.menuOffsets[2] + store.menuOffsets[3]
|
||||
"
|
||||
:y="
|
||||
121 +
|
||||
settingsStore.menuYOffset +
|
||||
store.menuYOffset +
|
||||
(selected === 'touchScreen'
|
||||
? settingsStore.submenuTransition.selectorOffsetY
|
||||
: settingsStore.submenuTransition.offsetY)
|
||||
? store.submenuTransition.selectorOffsetY
|
||||
: store.submenuTransition.offsetY)
|
||||
"
|
||||
:opacity="settingsStore.submenuTransition.opacity"
|
||||
:opacity="store.submenuTransition.opacity"
|
||||
:pressed="pressed"
|
||||
:is-any-other-menu-open="isAnyOtherMenuOpen('touchScreen')"
|
||||
/>
|
||||
<UserMenu
|
||||
:x="129 + settingsStore.menuOffsets[1] + settingsStore.menuOffsets[2]"
|
||||
:y="
|
||||
121 +
|
||||
settingsStore.menuYOffset +
|
||||
settingsStore.submenuTransition.offsetY
|
||||
"
|
||||
:opacity="settingsStore.submenuTransition.opacity"
|
||||
:x="129 + store.menuOffsets[1] + store.menuOffsets[2]"
|
||||
:y="121 + store.menuYOffset + store.submenuTransition.offsetY"
|
||||
:opacity="store.submenuTransition.opacity"
|
||||
:pressed="pressed"
|
||||
:is-any-other-menu-open="isAnyOtherMenuOpen('user')"
|
||||
:submenu-extra-offset-y="selectedSubmenuExtraOffsetY"
|
||||
/>
|
||||
<ClockMenu
|
||||
:x="81 + settingsStore.menuOffsets[1]"
|
||||
:y="
|
||||
121 +
|
||||
settingsStore.menuYOffset +
|
||||
settingsStore.submenuTransition.offsetY
|
||||
"
|
||||
:opacity="settingsStore.submenuTransition.opacity"
|
||||
:x="81 + store.menuOffsets[1]"
|
||||
:y="121 + store.menuYOffset + store.submenuTransition.offsetY"
|
||||
:opacity="store.submenuTransition.opacity"
|
||||
:pressed="pressed"
|
||||
:is-any-other-menu-open="isAnyOtherMenuOpen('clock')"
|
||||
:submenu-extra-offset-y="selectedSubmenuExtraOffsetY"
|
||||
/>
|
||||
<OptionsMenu
|
||||
:x="33"
|
||||
:y="
|
||||
121 +
|
||||
settingsStore.menuYOffset +
|
||||
settingsStore.submenuTransition.offsetY
|
||||
"
|
||||
:opacity="settingsStore.submenuTransition.opacity"
|
||||
:y="121 + store.menuYOffset + store.submenuTransition.offsetY"
|
||||
:opacity="store.submenuTransition.opacity"
|
||||
:pressed="pressed"
|
||||
:is-any-other-menu-open="isAnyOtherMenuOpen('options')"
|
||||
:submenu-extra-offset-y="selectedSubmenuExtraOffsetY"
|
||||
/>
|
||||
|
||||
<Selector
|
||||
:rect="[
|
||||
selectorPosition[0] + selectorXOffset,
|
||||
selectorPosition[1] +
|
||||
settingsStore.menuYOffset +
|
||||
selectorTransitionOffsetY,
|
||||
selectorPosition[1] + store.menuYOffset + selectorTransitionOffsetY,
|
||||
selectorPosition[2],
|
||||
selectorPosition[3],
|
||||
]"
|
||||
:opacity="settingsStore.submenuTransition.opacity"
|
||||
:opacity="store.submenuTransition.opacity"
|
||||
/>
|
||||
|
||||
<CommonButtons
|
||||
:y-offset="settingsStore.barOffsetY + settingsStore.submenuButtonsOffsetY"
|
||||
:y-offset="store.barOffsetY + store.submenuButtonsOffsetY"
|
||||
:b-label="isSubmenuSelected ? $t('common.goBack') : $t('common.quit')"
|
||||
:a-label="$t('common.select')"
|
||||
@activate-b="handleActivateB()"
|
||||
/>
|
||||
</template>
|
||||
<component :is="viewComponents[settingsStore.currentSubMenu]" v-else />
|
||||
<component :is="viewComponents[store.currentSubMenu]" v-else />
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user