From 4d9371f1b031dec1a2358353da5675f080abcbd6 Mon Sep 17 00:00:00 2001 From: Pihkaal Date: Wed, 26 Nov 2025 11:07:03 +0100 Subject: [PATCH] feat(settings): render top and bottom bar, implement notifications stack and submenu navigation --- .../settings/bottom-screen/bottom-bar.webp | Bin 0 -> 148 bytes .../settings/bottom-screen/top-bar.webp | Bin 0 -> 106 bytes .../top-screen/notification-title.webp | Bin 780 -> 0 bytes .../Settings/BottomScreen/Background.vue | 10 ++- .../Settings/BottomScreen/BottomScreen.vue | 31 ++++++++- .../Menus/{ClockMenu.vue => Clock/Menu.vue} | 0 .../Settings/BottomScreen/Menus/Menus.vue | 20 ++++-- .../BottomScreen/Menus/Options/GbaMode.vue | 11 ++++ .../BottomScreen/Menus/Options/Language.vue | 11 ++++ .../{OptionsMenu.vue => Options/Menu.vue} | 0 .../BottomScreen/Menus/Options/StartUp.vue | 11 ++++ .../Menu.vue} | 0 .../Menus/{UserMenu.vue => User/Menu.vue} | 0 .../Settings/TopScreen/Notifications.vue | 60 ++++++++++++++---- app/stores/settings.ts | 18 +++++- i18n/locales/en.json | 21 +++++- 16 files changed, 169 insertions(+), 24 deletions(-) create mode 100644 app/assets/images/settings/bottom-screen/bottom-bar.webp create mode 100644 app/assets/images/settings/bottom-screen/top-bar.webp delete mode 100644 app/assets/images/settings/top-screen/notification-title.webp rename app/components/Settings/BottomScreen/Menus/{ClockMenu.vue => Clock/Menu.vue} (100%) create mode 100644 app/components/Settings/BottomScreen/Menus/Options/GbaMode.vue create mode 100644 app/components/Settings/BottomScreen/Menus/Options/Language.vue rename app/components/Settings/BottomScreen/Menus/{OptionsMenu.vue => Options/Menu.vue} (100%) create mode 100644 app/components/Settings/BottomScreen/Menus/Options/StartUp.vue rename app/components/Settings/BottomScreen/Menus/{TouchScreenMenu.vue => TouchScreen/Menu.vue} (100%) rename app/components/Settings/BottomScreen/Menus/{UserMenu.vue => User/Menu.vue} (100%) 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 0000000000000000000000000000000000000000..0fa33c40bfc957b390464e7cc2a1e4d2a3b279a2 GIT binary patch literal 148 zcmV;F0BiqJNk&GD00012MM6+kP&iC~0000l|G)(RHLz(TNfL#{yy1om;b1g`8wf|} z?fIe^qix&t|0he$Iygu)3>g!riTZCgZJWAyu6xEv%xCuL&+5~k-G!gSthWO;0f1WX zyXOGH2LRR{2k0&U$_HTWalpvj^m$5#&du6$dw~p;&VaV(E?s=|k9*w1^{jW7@h$*> CTSp}T literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..b75ebf5d03a99f188d8dd584dae92d00231f21e0 GIT binary patch literal 106 zcmV-w0G0nzNk&Fu00012MM6+kP&iCg0000l|G)(RHK>VXwX%R_N=hUk0}GK5QSVbF zMA|mqP!S!E3f&d7{n0wAZfB5|;Kikot0QF}Q{Rt5NCgrCU{RvQi M%Ir^?{Rsvi09QOLn*aa+ literal 0 HcmV?d00001 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 a01e4807ec1de27842a95f522321771a5ae5755c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 780 zcmV+n1M~b+Nk&El0{{S5MM6+kP&iEZ0ssIn|G*0Xg{0bc!$@j4qBF~aQgj+ZQ7{BU zFoa(I)pVpU>AMqeBl-`)k>t3|EYh$DQE2M0$RscLI)35&_4B2zA3QDXzSwejza(_H$`&j0BF|kRFOx8hnYsPU?-!2bRh-pR zW=5b_5p!KMo6DAKx4D8t-tQ?WP>VpfBBrNJGYg0FyBhE3FU>QsFE%5ZhX5i%*|Z=K z_cPwl8$D!=faW0x#&mQU7tL9C6K`N<7K|Q&0yQ<9sXMW5bIcJO#xKdqw&9$ffqk)2 z0a#TaD0ev?v|LsK{tcXA{pL93u|!xNI7)2+-bX3;$Z!R3J4(IbBf_CV@y|0sa5*AM z8%!mIyCk?_(AGi}gFG|Ai!s6U3ByuHWs0~TwgeqPbTgM|-nr(DVmHg0{dGqHp%d>% zRl+#q)9GD;RrDlwnN4`6Ya^j9*I2?3d7@ObqeE$8UaN{;Im{f)0C~UcDT=1t0|h&7 zTIg3WLg5i5eT@mIHm2zJ4%GliLoPF@4t$(d5{vg?Jx+^-nG;>#m`FK0Wkk)jbncSq zhNwyJRG$3)(A>j`4M|~)rh}@vpThe%o@sFkBe_RJ^UfIltYr?_xuT~mngmZC{{3ok zzhorQx^#8pt**wz%aEE#49P!oy3IL+in8%uT4+5Y7fMDD- zcY?pyINWF8j3CG3aG!x1{>t}3@)l7I2RCc}t~KL|X8EKK@}QJEH;W_d-UaT0=Df22 z@^qS+a`}|a9OA|EQWQ+AxR670y|)eBd1nVO6mA+6r_U`Jq#Nv#WMZQA-mb_{3jpEr zDL6Dk?xTJHqyexmqIG96m07STkl~P+N9XKeCoUz{?h7fOLTRtdH1)jjul~@>hG@7 KI?&(U&tC)3_jY*z 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",