diff --git a/app/assets/images/settings/top-screen/notification.webp b/app/assets/images/settings/top-screen/notification.webp
new file mode 100644
index 0000000..836c64f
Binary files /dev/null and b/app/assets/images/settings/top-screen/notification.webp differ
diff --git a/app/components/Settings/BottomScreen/Menus/ClockMenu.vue b/app/components/Settings/BottomScreen/Menus/ClockMenu.vue
index 1628514..004662d 100644
--- a/app/components/Settings/BottomScreen/Menus/ClockMenu.vue
+++ b/app/components/Settings/BottomScreen/Menus/ClockMenu.vue
@@ -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);
diff --git a/app/components/Settings/BottomScreen/Menus/Menus.vue b/app/components/Settings/BottomScreen/Menus/Menus.vue
index f7898cf..6cbf6ee 100644
--- a/app/components/Settings/BottomScreen/Menus/Menus.vue
+++ b/app/components/Settings/BottomScreen/Menus/Menus.vue
@@ -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 },
+);
-
-
-
-
+
+
+
+
diff --git a/app/components/Settings/BottomScreen/Menus/OptionsMenu.vue b/app/components/Settings/BottomScreen/Menus/OptionsMenu.vue
index e8ddbf7..21d86ac 100644
--- a/app/components/Settings/BottomScreen/Menus/OptionsMenu.vue
+++ b/app/components/Settings/BottomScreen/Menus/OptionsMenu.vue
@@ -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);
diff --git a/app/components/Settings/BottomScreen/Menus/TouchScreenMenu.vue b/app/components/Settings/BottomScreen/Menus/TouchScreenMenu.vue
index 0b01080..ab05c68 100644
--- a/app/components/Settings/BottomScreen/Menus/TouchScreenMenu.vue
+++ b/app/components/Settings/BottomScreen/Menus/TouchScreenMenu.vue
@@ -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);
diff --git a/app/components/Settings/BottomScreen/Menus/UserMenu.vue b/app/components/Settings/BottomScreen/Menus/UserMenu.vue
index dea2d97..52ea109 100644
--- a/app/components/Settings/BottomScreen/Menus/UserMenu.vue
+++ b/app/components/Settings/BottomScreen/Menus/UserMenu.vue
@@ -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);
diff --git a/app/components/Settings/TopScreen/Notifications.vue b/app/components/Settings/TopScreen/Notifications.vue
index 392305a..d244e7a 100644
--- a/app/components/Settings/TopScreen/Notifications.vue
+++ b/app/components/Settings/TopScreen/Notifications.vue
@@ -1,10 +1,66 @@