From ab2c6f2cc32232420a0430b4facb42b718b017d3 Mon Sep 17 00:00:00 2001 From: Pihkaal Date: Mon, 24 Nov 2025 11:17:13 +0100 Subject: [PATCH] feat(home): navigation and outro animation to settings --- .../home/bottom-screen/buttons/alarm.webp | Bin 0 -> 66 bytes .../home/bottom-screen/buttons/settings.webp | Bin 0 -> 108 bytes .../home/bottom-screen/buttons/theme.webp | Bin 0 -> 68 bytes .../Home/BottomScreen/Buttons/Buttons.vue | 16 +++++++++++++- .../BottomScreen/Buttons/SettingsButton.vue | 20 ++++++++++++++++++ app/components/Home/TopScreen/Calendar.vue | 4 ++-- app/components/Home/TopScreen/Clock.vue | 4 ++-- app/components/Home/TopScreen/StatusBar.vue | 3 ++- app/stores/home.ts | 10 +++++---- 9 files changed, 47 insertions(+), 10 deletions(-) create mode 100644 app/assets/images/home/bottom-screen/buttons/alarm.webp create mode 100644 app/assets/images/home/bottom-screen/buttons/settings.webp create mode 100644 app/assets/images/home/bottom-screen/buttons/theme.webp create mode 100644 app/components/Home/BottomScreen/Buttons/SettingsButton.vue diff --git a/app/assets/images/home/bottom-screen/buttons/alarm.webp b/app/assets/images/home/bottom-screen/buttons/alarm.webp new file mode 100644 index 0000000000000000000000000000000000000000..cdea916e8ed7d00336c58d1ffadb0ddac1143435 GIT binary patch literal 66 zcmWIYbaS&}U|>n|fU)XH)S0q{Wl97yy;17hC`U literal 0 HcmV?d00001 diff --git a/app/assets/images/home/bottom-screen/buttons/settings.webp b/app/assets/images/home/bottom-screen/buttons/settings.webp new file mode 100644 index 0000000000000000000000000000000000000000..62ae88301dcc3221a4cf5ecae7a923029f5a2489 GIT binary patch literal 108 zcmV-y0F(bxNk&Fw00012MM6+kP&iCj0000l6aWPP1*_Or0#T1hw~keeK!g{A&y}a! zAfo>hz|*Aqeg)Ne8Fgw~UVa|{ysN)tmJydj+cKoiZ%Yp91ZZIZ17d142pLkJB|~LT Oae3JHE7c_{$^ literal 0 HcmV?d00001 diff --git a/app/assets/images/home/bottom-screen/buttons/theme.webp b/app/assets/images/home/bottom-screen/buttons/theme.webp new file mode 100644 index 0000000000000000000000000000000000000000..2c6a88eea9d5965797e11791f7bd594a9588da92 GIT binary patch literal 68 zcmWIYbaS&|U|-QnNO7yfe^*sqmU XG|o { - store.animateOutro(`/${button}`); + if (button === "downloadPlay") throw new Error("Not implemented"); + + store.animateOutro(button); }, navigation: { projects: { @@ -26,10 +30,15 @@ const { selectedButton, selectorPosition } = useButtonNavigation({ contact: { up: "projects", right: "downloadPlay", + down: "settings", }, downloadPlay: { up: "projects", left: "contact", + down: "settings", + }, + settings: { + up: "last", }, }, }); @@ -63,6 +72,11 @@ const getOpacity = (button?: (typeof selectedButton)["value"]) => { :y="72 + getButtonOffset('contact')" :opacity="getOpacity('contact')" /> + diff --git a/app/components/Home/BottomScreen/Buttons/SettingsButton.vue b/app/components/Home/BottomScreen/Buttons/SettingsButton.vue new file mode 100644 index 0000000..134ea3a --- /dev/null +++ b/app/components/Home/BottomScreen/Buttons/SettingsButton.vue @@ -0,0 +1,20 @@ + diff --git a/app/components/Home/TopScreen/Calendar.vue b/app/components/Home/TopScreen/Calendar.vue index e6c61ee..1b9b1f8 100644 --- a/app/components/Home/TopScreen/Calendar.vue +++ b/app/components/Home/TopScreen/Calendar.vue @@ -32,7 +32,7 @@ useRender((ctx) => { ctx.globalAlpha = store.isIntro ? store.intro.stage1Opacity - : store.isOutro + : store.isOutro && store.outro.animateTop ? store.outro.stage1Opacity : 1; ctx.drawImage(calendarImage!, CALENDAR_LEFT - 3, CALENDAR_TOP - 33); @@ -44,7 +44,7 @@ useRender((ctx) => { ctx.globalAlpha = store.isIntro ? store.intro.stage1Opacity - : store.isOutro + : store.isOutro && store.outro.animateTop ? store.outro.stage2Opacity : 1; for (let col = 0; col < CALENDAR_ROWS + (extraRow ? 1 : 0); col += 1) { diff --git a/app/components/Home/TopScreen/Clock.vue b/app/components/Home/TopScreen/Clock.vue index 829dd00..b4c0e2d 100644 --- a/app/components/Home/TopScreen/Clock.vue +++ b/app/components/Home/TopScreen/Clock.vue @@ -56,14 +56,14 @@ function drawLine( useRender((ctx) => { ctx.globalAlpha = store.isIntro ? store.intro.stage1Opacity - : store.isOutro + : store.isOutro && store.outro.animateTop ? store.outro.stage1Opacity : 1; ctx.drawImage(clockImage!, 13, 45); ctx.globalAlpha = store.isIntro ? store.intro.stage1Opacity - : store.isOutro + : store.isOutro && store.outro.animateTop ? store.outro.stage2Opacity : 1; const now = new Date(); diff --git a/app/components/Home/TopScreen/StatusBar.vue b/app/components/Home/TopScreen/StatusBar.vue index 3f1ab83..318b2d1 100644 --- a/app/components/Home/TopScreen/StatusBar.vue +++ b/app/components/Home/TopScreen/StatusBar.vue @@ -19,7 +19,8 @@ useRender((ctx) => { ctx.translate(0, store.isIntro ? store.intro.statusBarY : 0); - ctx.globalAlpha = store.isOutro ? store.outro.stage2Opacity : 1; + ctx.globalAlpha = + store.isOutro && store.outro.animateTop ? store.outro.stage2Opacity : 1; ctx.drawImage(statusBarImage!, 0, 0); ctx.fillStyle = "#ffffff"; diff --git a/app/stores/home.ts b/app/stores/home.ts index 5df0327..450fccc 100644 --- a/app/stores/home.ts +++ b/app/stores/home.ts @@ -9,8 +9,9 @@ export const useHomeStore = defineStore("home", { outro: { buttonOffsetY: 0, - stage1Opacity: 0, - stage2Opacity: 0, + stage1Opacity: 1, + stage2Opacity: 1, + animateTop: false, }, isIntro: true, @@ -54,8 +55,9 @@ export const useHomeStore = defineStore("home", { ); }, - animateOutro(to?: string) { + animateOutro(to: "contact" | "projects" | "settings") { this.isOutro = true; + this.outro.animateTop = to !== "settings"; const duration = 0.4; const delay = 0.08; @@ -74,7 +76,7 @@ export const useHomeStore = defineStore("home", { ease: "none", onComplete: () => { this.isOutro = true; - if (to) navigateTo(to); + navigateTo(`/${to}`); }, }, );