feat(home): navigation and outro animation to settings

app/components/Home/BottomScreen/Buttons/Buttons.vue

@@ -2,6 +2,7 @@
 import GameButton from "./GameButton.vue";
 import ContactButton from "./ContactButton.vue";
 import DownloadPlayButton from "./DownloadPlayButton.vue";
+import SettingsButton from "./SettingsButton.vue";
 import Selector from "~/components/Common/ButtonSelector.vue";
 
 const store = useHomeStore();
@@ -11,10 +12,13 @@ const { selectedButton, selectorPosition } = useButtonNavigation({
     projects: [31, 23, 193, 49],
     contact: [31, 71, 97, 49],
     downloadPlay: [127, 71, 97, 49],
+    settings: [112, 167, 31, 26],
   },
   initialButton: "projects",
   onButtonClick: (button) => {
-    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')"
   />
+  <SettingsButton
+    :x="117"
+    :y="170 + getButtonOffset('settings')"
+    :opacity="getOpacity('settings')"
+  />
 
   <Selector :rect="selectorPosition" :opacity="getOpacity()" />
 </template>

app/components/Home/BottomScreen/Buttons/SettingsButton.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import BUTTON_IMAGE from "/assets/images/home/bottom-screen/buttons/settings.webp";
+
+const props = defineProps<{
+  x: number;
+  y: number;
+  opacity: number;
+}>();
+
+const [buttonImage] = useImages(BUTTON_IMAGE);
+
+useRender((ctx) => {
+  ctx.globalAlpha = props.opacity;
+  ctx.drawImage(buttonImage!, props.x, props.y);
+});
+
+defineOptions({
+  render: () => null,
+});
+</script>

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) {

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();

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

app/stores/home.ts

@@ -9,8 +9,9 @@ export const useHomeStore = defineStore("home", {
 
     outro: {
       buttonOffsetY: 0,
-      stage1Opacity: 0,
+      stage1Opacity: 1,
-      stage2Opacity: 0,
+      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}`);
           },
         },
       );