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",