diff --git a/app/assets/images/settings/bottom-screen/bottom-bar.webp b/app/assets/images/settings/bottom-screen/bottom-bar.webp
new file mode 100644
index 0000000..0fa33c4
Binary files /dev/null and b/app/assets/images/settings/bottom-screen/bottom-bar.webp differ
diff --git a/app/assets/images/settings/bottom-screen/top-bar.webp b/app/assets/images/settings/bottom-screen/top-bar.webp
new file mode 100644
index 0000000..b75ebf5
Binary files /dev/null and b/app/assets/images/settings/bottom-screen/top-bar.webp differ
diff --git a/app/assets/images/settings/top-screen/notification-title.webp b/app/assets/images/settings/top-screen/notification-title.webp
deleted file mode 100644
index a01e480..0000000
Binary files a/app/assets/images/settings/top-screen/notification-title.webp and /dev/null differ
diff --git a/app/components/Settings/BottomScreen/Background.vue b/app/components/Settings/BottomScreen/Background.vue
index 87f3064..2217928 100644
--- a/app/components/Settings/BottomScreen/Background.vue
+++ b/app/components/Settings/BottomScreen/Background.vue
@@ -1,10 +1,18 @@
-
+
+
diff --git a/app/components/Settings/BottomScreen/Menus/ClockMenu.vue b/app/components/Settings/BottomScreen/Menus/Clock/Menu.vue
similarity index 100%
rename from app/components/Settings/BottomScreen/Menus/ClockMenu.vue
rename to app/components/Settings/BottomScreen/Menus/Clock/Menu.vue
diff --git a/app/components/Settings/BottomScreen/Menus/Menus.vue b/app/components/Settings/BottomScreen/Menus/Menus.vue
index 6cbf6ee..3b92df8 100644
--- a/app/components/Settings/BottomScreen/Menus/Menus.vue
+++ b/app/components/Settings/BottomScreen/Menus/Menus.vue
@@ -1,8 +1,8 @@
diff --git a/app/components/Settings/BottomScreen/Menus/Options/Language.vue b/app/components/Settings/BottomScreen/Menus/Options/Language.vue
new file mode 100644
index 0000000..155d6b3
--- /dev/null
+++ b/app/components/Settings/BottomScreen/Menus/Options/Language.vue
@@ -0,0 +1,11 @@
+
diff --git a/app/components/Settings/BottomScreen/Menus/OptionsMenu.vue b/app/components/Settings/BottomScreen/Menus/Options/Menu.vue
similarity index 100%
rename from app/components/Settings/BottomScreen/Menus/OptionsMenu.vue
rename to app/components/Settings/BottomScreen/Menus/Options/Menu.vue
diff --git a/app/components/Settings/BottomScreen/Menus/Options/StartUp.vue b/app/components/Settings/BottomScreen/Menus/Options/StartUp.vue
new file mode 100644
index 0000000..02cf6a0
--- /dev/null
+++ b/app/components/Settings/BottomScreen/Menus/Options/StartUp.vue
@@ -0,0 +1,11 @@
+
diff --git a/app/components/Settings/BottomScreen/Menus/TouchScreenMenu.vue b/app/components/Settings/BottomScreen/Menus/TouchScreen/Menu.vue
similarity index 100%
rename from app/components/Settings/BottomScreen/Menus/TouchScreenMenu.vue
rename to app/components/Settings/BottomScreen/Menus/TouchScreen/Menu.vue
diff --git a/app/components/Settings/BottomScreen/Menus/UserMenu.vue b/app/components/Settings/BottomScreen/Menus/User/Menu.vue
similarity index 100%
rename from app/components/Settings/BottomScreen/Menus/UserMenu.vue
rename to app/components/Settings/BottomScreen/Menus/User/Menu.vue
diff --git a/app/components/Settings/TopScreen/Notifications.vue b/app/components/Settings/TopScreen/Notifications.vue
index 5bd2ecc..eb902e4 100644
--- a/app/components/Settings/TopScreen/Notifications.vue
+++ b/app/components/Settings/TopScreen/Notifications.vue
@@ -5,6 +5,9 @@ import OPTIONS_IMAGE from "/assets/images/settings/top-screen/options/options.we
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";
+import START_UP_IMAGE from "/assets/images/settings/top-screen/options/start-up.webp";
+import LANGUAGE_IMAGE from "/assets/images/settings/top-screen/options/language.webp";
+import GBA_MODE_IMAGE from "/assets/images/settings/top-screen/options/gba-mode.webp";
const store = useSettingsStore();
@@ -15,6 +18,9 @@ const [
clockImage,
userImage,
touchScreenImage,
+ startUpImage,
+ languageImage,
+ gbaModeImage,
] = useImages(
NOTIFICATION_IMAGE,
SETTINGS_IMAGE,
@@ -22,6 +28,9 @@ const [
CLOCK_IMAGE,
USER_IMAGE,
TOUCH_SCREEN_IMAGE,
+ START_UP_IMAGE,
+ LANGUAGE_IMAGE,
+ GBA_MODE_IMAGE,
);
const activeMenu = computed(() => {
@@ -64,25 +73,50 @@ const renderNotification = (
}
};
-useRender((ctx) => {
- ctx.translate(0, activeMenu.value ? 144 - 16 : 144);
-
- renderNotification(
- ctx,
- settingsImage!,
- $t(`settings.title`),
- $t(`settings.description`),
- );
+const notificationStack = computed(() => {
+ const stack: Array<{ id: string; image: HTMLImageElement }> = [
+ { id: "main", image: settingsImage! },
+ ];
if (activeMenu.value) {
- ctx.translate(0, 16);
+ stack.push({ id: activeMenu.value.id, image: activeMenu.value.image! });
+ }
+
+ for (const view of store.navigationStack) {
+ const menuMatch = view.match(/^(options|clock|user|touchScreen)(.+)$/);
+ if (menuMatch) {
+ const [, menu, submenu] = menuMatch;
+ const submenuKey = submenu!.charAt(0).toLowerCase() + submenu!.slice(1);
+ const imageMap: Record = {
+ optionsStartUp: startUpImage!,
+ optionsLanguage: languageImage!,
+ optionsGbaMode: gbaModeImage!,
+ };
+ if (imageMap[view]) {
+ stack.push({ id: `${menu}.${submenuKey}`, image: imageMap[view]! });
+ }
+ }
+ }
+
+ return stack;
+});
+
+useRender((ctx) => {
+ const stackSize = notificationStack.value.length;
+
+ ctx.translate(0, 144 - (stackSize - 1) * 16);
+
+ for (let i = 0; i < stackSize; i++) {
+ const notification = notificationStack.value[i]!;
renderNotification(
ctx,
- activeMenu.value.image!,
- $t(`settings.${activeMenu.value.id}.title`),
- $t(`settings.${activeMenu.value.id}.description`),
+ notification.image,
+ $t(`settings.${notification.id}.title`),
+ $t(`settings.${notification.id}.description`),
);
+
+ ctx.translate(0, 16);
}
});
diff --git a/app/stores/settings.ts b/app/stores/settings.ts
index 516ee57..d3327b9 100644
--- a/app/stores/settings.ts
+++ b/app/stores/settings.ts
@@ -1,23 +1,37 @@
export const useSettingsStore = defineStore("settings", {
state: () => ({
activeMenu: null as string | null,
+ navigationStack: [] as string[],
}),
getters: {
isMenuOpen: (state) => (menu: string) => {
if (!state.activeMenu) return false;
return new RegExp(`^${menu}[A-Z]`).test(state.activeMenu);
},
+
isAnyOtherMenuOpen: (state) => (excludeMenu: string) => {
if (!state.activeMenu) return false;
- const menus = ["options", "clock", "user", "touchScreen"];
- return menus
+ return ["options", "clock", "user", "touchScreen"]
.filter((m) => m !== excludeMenu)
.some((m) => new RegExp(`^${m}[A-Z]`).test(state.activeMenu!));
},
+
+ currentView: (state) => {
+ if (state.navigationStack.length === 0) return "menu";
+ return state.navigationStack[state.navigationStack.length - 1];
+ },
},
actions: {
setActiveMenu(menu: string | null) {
this.activeMenu = menu;
},
+
+ pushNavigation(view: string) {
+ this.navigationStack.push(view);
+ },
+
+ popNavigation() {
+ this.navigationStack.pop();
+ },
},
});
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index fc838b4..a6d5e1b 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -1,11 +1,26 @@
{
"settings": {
- "title": "Settings",
- "description": "Change system settings here. Select\nthe settings you'd like to change.",
+ "main": {
+ "title": "Settings",
+ "description": "Change system settings here. Select\nthe settings you'd like to change."
+ },
"options": {
"title": "Options",
- "description": "Change other settings."
+ "description": "Change other settings.",
+
+ "startUp": {
+ "title": "Start-up",
+ "description": "Set how you would like your system to\nstart up when you turn the power on."
+ },
+ "language": {
+ "title": "Language",
+ "description": "Select the language to use."
+ },
+ "gbaMode": {
+ "title": "GBA Mode",
+ "description": "Select the screen you would like to use\nwhen starting GBA Mode."
+ }
},
"clock": {
"title": "Clock",