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);

60
app/components/Settings/TopScreen/Notifications.vue
View File

@@ -1,10 +1,66 @@
<script setup lang="ts">
import NOTIFICATION_IMAGE from "/assets/images/settings/top-screen/notification.webp";
import TITLE_IMAGE from "/assets/images/settings/top-screen/notification-title.webp";
import OPTIONS_IMAGE from "/assets/images/settings/top-screen/options/options.webp";
import CLOCK_IMAGE from "/assets/images/settings/top-screen/clock/clock.webp";
import USER_IMAGE from "/assets/images/settings/top-screen/user/user.webp";
import TOUCH_SCREEN_IMAGE from "/assets/images/settings/top-screen/touch_screen/touch-screen.webp";
const [titleImage] = useImages(TITLE_IMAGE);
const store = useSettingsStore();
const [
notificationImage,
titleImage,
optionsImage,
clockImage,
userImage,
touchScreenImage,
] = useImages(
NOTIFICATION_IMAGE,
TITLE_IMAGE,
OPTIONS_IMAGE,
CLOCK_IMAGE,
USER_IMAGE,
TOUCH_SCREEN_IMAGE,
);
const activeMenu = computed(() => {
if (!store.activeMenu) return null;
if (/^options[A-Z]/.test(store.activeMenu)) {
return { text: "Options", image: optionsImage };
}
if (/^clock[A-Z]/.test(store.activeMenu)) {
return { text: "Clock", image: clockImage };
}
if (/^user[A-Z]/.test(store.activeMenu)) {
return { text: "User", image: userImage };
}
if (/^touchScreen[A-Z]/.test(store.activeMenu)) {
return { text: "Touch Screen", image: touchScreenImage };
}
return null;
});
useRender((ctx) => {
ctx.drawImage(titleImage!, 0, 144);
ctx.translate(0, activeMenu.value ? 144 - 16 : 144);
ctx.drawImage(titleImage!, 0, 0);
if (activeMenu.value) {
ctx.translate(0, 16);
ctx.drawImage(notificationImage!, 0, 0);
ctx.drawImage(activeMenu.value.image!, 2, 2);
ctx.font = "10px NDS10";
ctx.fillStyle = "#282828";
ctx.fillText(activeMenu.value.text, 52, 13);
ctx.fillStyle = "#fbfbfb";
ctx.fillText("TODO", 52, 36);
}
});
defineOptions({