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

feat(settings): render title and menu image in notification

Browse Source
This commit is contained in:
Stevan
2025-11-25 18:13:52 +01:00
parent 9f1e2015c6
commit 2e06600293
8 changed files with 128 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
app/components/Settings/BottomScreen/Menus/ClockMenu.vue
View File

@@ -9,10 +9,10 @@ import DATE_IMAGE from "/assets/images/settings/top-screen/clock/date.webp";
const props = defineProps<{
x: number;
y: number;
isOpen: boolean;
isAnyOtherMenuOpen: boolean;
}>();
const settingsStore = useSettingsStore();
const [
menuImage,
menuActiveImage,
@@ -29,12 +29,17 @@ const [
DATE_IMAGE,
);
const animation = useMenuAnimation(toRef(() => props.isOpen));
const isOpen = computed(() => settingsStore.isMenuOpen("clock"));
const isAnyOtherMenuOpen = computed(() =>
settingsStore.isAnyOtherMenuOpen("clock"),
);
const animation = useMenuAnimation(isOpen);
useRender((ctx) => {
ctx.translate(props.x, props.y);
if (props.isOpen || animation.playing) {
if (isOpen.value || animation.playing) {
ctx.drawImage(
timeImage!,
48 - animation.stage2Offset,
@@ -48,7 +53,7 @@ useRender((ctx) => {
ctx.drawImage(alarmImage!, 0, -48 + animation.stage1Offset);
ctx.drawImage(menuActiveImage!, 0, 0);
} else if (props.isAnyOtherMenuOpen) {
} else if (isAnyOtherMenuOpen.value) {
ctx.drawImage(menuDisabledImage!, 0, 0);
} else {
ctx.drawImage(menuImage!, 0, 0);

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

@@ -99,43 +99,22 @@ const { selectedButton: selected, selectorPosition } = useButtonNavigation({
},
});
const isMenuOpen = (menu: string) => {
const regex = new RegExp(`^${menu}[A-Z]`);
return regex.test(selected.value);
};
const settingsStore = useSettingsStore();
const isAnyOtherMenuOpen = (excludeMenu: string) => {
return ["options", "clock", "user"]
.filter((menu) => menu !== excludeMenu)
.some((menu) => isMenuOpen(menu));
};
watch(
selected,
(newSelected) => {
settingsStore.setActiveMenu(newSelected);
},
{ immediate: true },
);
</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')"
/>
<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>

15
app/components/Settings/BottomScreen/Menus/OptionsMenu.vue
View File

@@ -9,10 +9,10 @@ import START_UP_IMAGE from "/assets/images/settings/top-screen/options/start-up.
const props = defineProps<{
x: number;
y: number;
isOpen: boolean;
isAnyOtherMenuOpen: boolean;
}>();
const settingsStore = useSettingsStore();
const [
menuImage,
menuActiveImage,
@@ -29,12 +29,17 @@ const [
START_UP_IMAGE,
);
const animation = useMenuAnimation(toRef(() => props.isOpen));
const isOpen = computed(() => settingsStore.isMenuOpen("options"));
const isAnyOtherMenuOpen = computed(() =>
settingsStore.isAnyOtherMenuOpen("options"),
);
const animation = useMenuAnimation(isOpen);
useRender((ctx) => {
ctx.translate(props.x, props.y);
if (props.isOpen || animation.playing) {
if (isOpen.value || animation.playing) {
ctx.drawImage(languageImage!, 0, -48 + animation.stage1Offset);
ctx.drawImage(
gbaModeImage!,
@@ -48,7 +53,7 @@ useRender((ctx) => {
);
ctx.drawImage(menuActiveImage!, 0, 0);
} else if (props.isAnyOtherMenuOpen) {
} else if (isAnyOtherMenuOpen.value) {
ctx.drawImage(menuDisabledImage!, 0, 0);
} else {
ctx.drawImage(menuImage!, 0, 0);

9
app/components/Settings/BottomScreen/Menus/TouchScreenMenu.vue
View File

@@ -5,16 +5,21 @@ import MENU_DISABLED_IMAGE from "/assets/images/settings/top-screen/touch_screen
const props = defineProps<{
x: number;
y: number;
isAnyOtherMenuOpen: boolean;
}>();
const settingsStore = useSettingsStore();
const [menuImage, menuDisabledImage] = useImages(
MENU_IMAGE,
MENU_DISABLED_IMAGE,
);
const isAnyOtherMenuOpen = computed(() =>
settingsStore.isAnyOtherMenuOpen("touchScreen"),
);
useRender((ctx) => {
if (props.isAnyOtherMenuOpen) {
if (isAnyOtherMenuOpen.value) {
ctx.drawImage(menuDisabledImage!, props.x, props.y);
} else {
ctx.drawImage(menuImage!, props.x, props.y);

15
app/components/Settings/BottomScreen/Menus/UserMenu.vue
View File

@@ -10,10 +10,10 @@ import USER_NAME_IMAGE from "/assets/images/settings/top-screen/user/user-name.w
const props = defineProps<{
x: number;
y: number;
isOpen: boolean;
isAnyOtherMenuOpen: boolean;
}>();
const settingsStore = useSettingsStore();
const [
menuImage,
menuActiveImage,
@@ -32,12 +32,17 @@ const [
USER_NAME_IMAGE,
);
const animation = useMenuAnimation(toRef(() => props.isOpen));
const isOpen = computed(() => settingsStore.isMenuOpen("user"));
const isAnyOtherMenuOpen = computed(() =>
settingsStore.isAnyOtherMenuOpen("user"),
);
const animation = useMenuAnimation(isOpen);
useRender((ctx) => {
ctx.translate(props.x, props.y);
if (props.isOpen || animation.playing) {
if (isOpen.value || animation.playing) {
ctx.drawImage(
birthdayImage!,
-48 + animation.stage2Offset,
@@ -56,7 +61,7 @@ useRender((ctx) => {
);
ctx.drawImage(menuActiveImage!, 0, 0);
} else if (props.isAnyOtherMenuOpen) {
} else if (isAnyOtherMenuOpen.value) {
ctx.drawImage(menuDisabledImage!, 0, 0);
} else {
ctx.drawImage(menuImage!, 0, 0);