pihkaal/pihkaal-me
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(nds): add pressed state for all buttons

Browse Source
This commit is contained in:
Stevan
2026-02-11 23:33:26 +01:00
parent 3a7f37ab5e
commit 172c78541c
57 changed files with 413 additions and 369 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
app/components/Settings/BottomScreen/Menus/Clock/Menu.vue
View File

@@ -4,6 +4,9 @@ const props = withDefaults(
x: number;
y: number;
opacity?: number;
pressed: string | null;
isAnyOtherMenuOpen: boolean;
submenuExtraOffsetY: number;
}>(),
{
opacity: 1,
@@ -12,46 +15,29 @@ const props = withDefaults(
const { onRender } = useScreen();
const settingsStore = useSettingsStore();
const menusContext = inject<{
isSubmenuSelected: ComputedRef<boolean>;
selectedSubmenuParent: ComputedRef<string | null>;
selectedSubmenuExtraOffsetY: ComputedRef<number>;
}>("menusContext")!;
const { assets } = useAssets();
const store = useSettingsStore();
const { assets } = useAssets((a) => a.images.settings.topScreen.clock);
const isOpen = computed(
() => settingsStore.currentMenu === "clock" && settingsStore.menuExpanded,
() => store.currentMenu === "clock" && store.menuExpanded,
);
const isAnyOtherMenuOpen = computed(() => {
if (settingsStore.currentSubMenu) {
return !settingsStore.currentSubMenu.startsWith("clock");
}
if (menusContext.isSubmenuSelected.value) {
return menusContext.selectedSubmenuParent.value !== "clock";
}
return false;
});
const animation = useMenuAnimation("clock", isOpen);
const submenuExtraOffset = (submenu: string) =>
settingsStore.selectedButton === submenu
? menusContext.selectedSubmenuExtraOffsetY.value
: 0;
store.selectedButton === submenu ? props.submenuExtraOffsetY : 0;
onRender((ctx) => {
ctx.globalAlpha = props.opacity;
ctx.translate(props.x, props.y);
if (isOpen.value || animation.playing) {
assets.images.settings.topScreen.clock.time.draw(
(props.pressed === "clockTime" ? assets.timePressed : assets.time).draw(
ctx,
48 - animation.stage2Offset,
-48 + animation.stage1Offset + submenuExtraOffset("clockTime"),
);
assets.images.settings.topScreen.clock.date.draw(
(props.pressed === "clockDate" ? assets.datePressed : assets.date).draw(
ctx,
0,
-96 +
@@ -59,17 +45,26 @@ onRender((ctx) => {
animation.stage1Offset +
submenuExtraOffset("clockDate"),
);
assets.images.settings.topScreen.clock.achievements.draw(
(props.pressed === "clockAchievements"
? assets.achievementsPressed
: assets.achievements
).draw(
ctx,
0,
-48 + animation.stage1Offset + submenuExtraOffset("clockAchievements"),
);
assets.images.settings.topScreen.clock.clockActive.draw(ctx, 0, 0);
} else if (isAnyOtherMenuOpen.value) {
assets.images.settings.topScreen.clock.clockDisabled.draw(ctx, 0, 0);
(props.pressed === "clock" ? assets.clockPressed : assets.clockActive).draw(
ctx,
0,
0,
);
} else if (props.pressed === "clock") {
assets.clockPressed.draw(ctx, 0, 0);
} else if (props.isAnyOtherMenuOpen) {
assets.clockDisabled.draw(ctx, 0, 0);
} else {
assets.images.settings.topScreen.clock.clock.draw(ctx, 0, 0);
assets.clock.draw(ctx, 0, 0);
}
});

146
app/components/Settings/BottomScreen/Menus/Menus.vue
View File

@@ -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>

10
app/components/Settings/BottomScreen/Menus/Options/2048.vue
View File

@@ -246,13 +246,21 @@ onRender((ctx) => {
onRender((ctx) => {
ctx.translate(0, intro.scoreOffsetY);
drawButton(ctx, `${$t("settings.options.2048.score")}: ${score}`, 10, 2, 118);
drawButton(
ctx,
`${$t("settings.options.2048.score")}: ${score}`,
10,
2,
118,
false,
);
drawButton(
ctx,
`${$t("settings.options.2048.highScore")}: ${savedState.value.highScore}`,
138,
2,
108,
false,
);
}, 110);

53
app/components/Settings/BottomScreen/Menus/Options/Menu.vue
View File

@@ -4,6 +4,9 @@ const props = withDefaults(
x: number;
y: number;
opacity?: number;
pressed: string | null;
isAnyOtherMenuOpen: boolean;
submenuExtraOffsetY: number;
}>(),
{
opacity: 1,
@@ -12,46 +15,32 @@ const props = withDefaults(
const { onRender } = useScreen();
const settingsStore = useSettingsStore();
const menusContext = inject<{
isSubmenuSelected: ComputedRef<boolean>;
selectedSubmenuParent: ComputedRef<string | null>;
selectedSubmenuExtraOffsetY: ComputedRef<number>;
}>("menusContext")!;
const { assets } = useAssets();
const store = useSettingsStore();
const { assets } = useAssets((a) => a.images.settings.topScreen.options);
const isOpen = computed(
() => settingsStore.currentMenu === "options" && settingsStore.menuExpanded,
() => store.currentMenu === "options" && store.menuExpanded,
);
const isAnyOtherMenuOpen = computed(() => {
if (settingsStore.currentSubMenu) {
return !settingsStore.currentSubMenu.startsWith("options");
}
if (menusContext.isSubmenuSelected.value) {
return menusContext.selectedSubmenuParent.value !== "options";
}
return false;
});
const animation = useMenuAnimation("options", isOpen);
const submenuExtraOffset = (submenu: string) =>
settingsStore.selectedButton === submenu
? menusContext.selectedSubmenuExtraOffsetY.value
: 0;
store.selectedButton === submenu ? props.submenuExtraOffsetY : 0;
onRender((ctx) => {
ctx.globalAlpha = props.opacity;
ctx.translate(props.x, props.y);
if (isOpen.value || animation.playing) {
assets.images.settings.topScreen.options._2048.draw(
(props.pressed === "options2048" ? assets._2048Pressed : assets._2048).draw(
ctx,
48 - animation.stage2Offset,
-48 + animation.stage1Offset + submenuExtraOffset("options2048"),
);
assets.images.settings.topScreen.options.renderingMode.draw(
(props.pressed === "optionsRenderingMode"
? assets.renderingModePressed
: assets.renderingMode
).draw(
ctx,
0,
-96 +
@@ -59,17 +48,25 @@ onRender((ctx) => {
animation.stage1Offset +
submenuExtraOffset("optionsRenderingMode"),
);
assets.images.settings.topScreen.options.language.draw(
(props.pressed === "optionsLanguage"
? assets.languagePressed
: assets.language
).draw(
ctx,
0,
-48 + animation.stage1Offset + submenuExtraOffset("optionsLanguage"),
);
assets.images.settings.topScreen.options.optionsActive.draw(ctx, 0, 0);
} else if (isAnyOtherMenuOpen.value) {
assets.images.settings.topScreen.options.optionsDisabled.draw(ctx, 0, 0);
(props.pressed === "options"
? assets.optionsPressed
: assets.optionsActive
).draw(ctx, 0, 0);
} else if (props.pressed === "options") {
assets.optionsPressed.draw(ctx, 0, 0);
} else if (props.isAnyOtherMenuOpen) {
assets.optionsDisabled.draw(ctx, 0, 0);
} else {
assets.images.settings.topScreen.options.options.draw(ctx, 0, 0);
assets.options.draw(ctx, 0, 0);
}
});

37
app/components/Settings/BottomScreen/Menus/TouchScreen/Menu.vue
View File

@@ -4,6 +4,8 @@ const props = withDefaults(
x: number;
y: number;
opacity?: number;
pressed: string | null;
isAnyOtherMenuOpen: boolean;
}>(),
{
opacity: 1,
@@ -12,39 +14,16 @@ const props = withDefaults(
const { onRender } = useScreen();
const settingsStore = useSettingsStore();
const menusContext = inject<{
isSubmenuSelected: ComputedRef<boolean>;
selectedSubmenuParent: ComputedRef<string | null>;
}>("menusContext")!;
const { assets } = useAssets();
// TODO: i don't like this
const isAnyOtherMenuOpen = computed(() => {
if (settingsStore.currentSubMenu) {
return !settingsStore.currentSubMenu.startsWith("touchScreen");
}
if (menusContext.isSubmenuSelected.value) {
return menusContext.selectedSubmenuParent.value !== "touchScreen";
}
return false;
});
const { assets } = useAssets((a) => a.images.settings.topScreen.touchScreen);
onRender((ctx) => {
ctx.globalAlpha = props.opacity;
if (isAnyOtherMenuOpen.value) {
assets.images.settings.topScreen.touchScreen.touchScreenDisabled.draw(
ctx,
props.x,
props.y,
);
if (props.pressed === "touchScreen") {
assets.touchScreenPressed.draw(ctx, props.x, props.y);
} else if (props.isAnyOtherMenuOpen) {
assets.touchScreenDisabled.draw(ctx, props.x, props.y);
} else {
assets.images.settings.topScreen.touchScreen.touchScreen.draw(
ctx,
props.x,
props.y,
);
assets.touchScreen.draw(ctx, props.x, props.y);
}
});

3
app/components/Settings/BottomScreen/Menus/TouchScreen/TapTap.vue
View File

@@ -393,6 +393,7 @@ onRender((ctx) => {
10,
2,
88,
false,
);
drawButton(
ctx,
@@ -400,6 +401,7 @@ onRender((ctx) => {
108,
2,
88,
false,
);
drawButton(
ctx,
@@ -407,6 +409,7 @@ onRender((ctx) => {
206,
2,
40,
false,
);
}, 110);

56
app/components/Settings/BottomScreen/Menus/User/Menu.vue
View File

@@ -4,6 +4,9 @@ const props = withDefaults(
x: number;
y: number;
opacity?: number;
pressed: string | null;
isAnyOtherMenuOpen: boolean;
submenuExtraOffsetY: number;
}>(),
{
opacity: 1,
@@ -12,51 +15,37 @@ const props = withDefaults(
const { onRender } = useScreen();
const settingsStore = useSettingsStore();
const menusContext = inject<{
isSubmenuSelected: ComputedRef<boolean>;
selectedSubmenuParent: ComputedRef<string | null>;
selectedSubmenuExtraOffsetY: ComputedRef<number>;
}>("menusContext")!;
const { assets } = useAssets();
const store = useSettingsStore();
const { assets } = useAssets((a) => a.images.settings.topScreen.user);
const isOpen = computed(
() => settingsStore.currentMenu === "user" && settingsStore.menuExpanded,
() => store.currentMenu === "user" && store.menuExpanded,
);
const isAnyOtherMenuOpen = computed(() => {
if (settingsStore.currentSubMenu) {
return !settingsStore.currentSubMenu.startsWith("user");
}
if (menusContext.isSubmenuSelected.value) {
return menusContext.selectedSubmenuParent.value !== "user";
}
return false;
});
const animation = useMenuAnimation("user", isOpen);
const submenuExtraOffset = (submenu: string) =>
settingsStore.selectedButton === submenu
? menusContext.selectedSubmenuExtraOffsetY.value
: 0;
store.selectedButton === submenu ? props.submenuExtraOffsetY : 0;
onRender((ctx) => {
ctx.globalAlpha = props.opacity;
ctx.translate(props.x, props.y);
if (isOpen.value || animation.playing) {
assets.images.settings.topScreen.user.birthday.draw(
(props.pressed === "userBirthday"
? assets.birthdayPressed
: assets.birthday
).draw(
ctx,
-48 + animation.stage2Offset,
-48 + animation.stage1Offset + submenuExtraOffset("userBirthday"),
);
assets.images.settings.topScreen.user.snake.draw(
(props.pressed === "userSnake" ? assets.snakePressed : assets.snake).draw(
ctx,
48 - animation.stage2Offset,
-48 + animation.stage1Offset + submenuExtraOffset("userSnake"),
);
assets.images.settings.topScreen.user.color.draw(
(props.pressed === "userColor" ? assets.colorPressed : assets.color).draw(
ctx,
0,
-96 +
@@ -64,17 +53,26 @@ onRender((ctx) => {
animation.stage1Offset +
submenuExtraOffset("userColor"),
);
assets.images.settings.topScreen.user.userName.draw(
(props.pressed === "userUserName"
? assets.userNamePressed
: assets.userName
).draw(
ctx,
0,
-48 + animation.stage1Offset + submenuExtraOffset("userUserName"),
);
assets.images.settings.topScreen.user.userActive.draw(ctx, 0, 0);
} else if (isAnyOtherMenuOpen.value) {
assets.images.settings.topScreen.user.userDisabled.draw(ctx, 0, 0);
(props.pressed === "user" ? assets.userPressed : assets.userActive).draw(
ctx,
0,
0,
);
} else if (props.pressed === "user") {
assets.userPressed.draw(ctx, 0, 0);
} else if (props.isAnyOtherMenuOpen) {
assets.userDisabled.draw(ctx, 0, 0);
} else {
assets.images.settings.topScreen.user.user.draw(ctx, 0, 0);
assets.user.draw(ctx, 0, 0);
}
});

3
app/components/Settings/BottomScreen/Menus/User/Snake.vue
View File

@@ -292,13 +292,14 @@ onRender((ctx) => {
onRender((ctx) => {
ctx.translate(0, intro.scoreOffsetY);
drawButton(ctx, $t("settings.user.snake.score", { score }), 10, 2, 118);
drawButton(ctx, $t("settings.user.snake.score", { score }), 10, 2, 118, true);
drawButton(
ctx,
$t("settings.user.snake.best", { best: highScore.value }),
138,
2,
108,
true,
);
}, 110);