feat(home): add 'to' parameter to outro

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

@@ -8,13 +8,13 @@
 import GameButton from "./GameButton.vue";
 import PictochatButton from "./PictochatButton.vue";
 import DownloadPlayButton from "./DownloadPlayButton.vue";
-import Selector from "./Selector.vue";
+import Selector from "~/components/Common/ButtonSelector.vue";
 
 const store = useHomeStore();
 
 const BUTTONS_CONFIG = {
   game: [31, 23, 193, 49],
-  pictochat: [31, 71, 97, 49],
+  contact: [31, 71, 97, 49],
   downloadPlay: [127, 71, 97, 49],
 } as const satisfies Record<string, ButtonConfig>;
 
@@ -23,23 +23,23 @@ type ButtonType = keyof typeof BUTTONS_CONFIG;
 const { selectedButton, selectorPosition } = useButtonNavigation({
   buttons: BUTTONS_CONFIG,
   initialButton: "game",
-  onButtonClick: () => {
+  onButtonClick: (button) => {
-    store.animateOutro();
+    store.animateOutro(`/${button}`);
   },
   navigation: {
     game: {
       down: "last",
-      left: "pictochat",
+      left: "contact",
       right: "downloadPlay",
       horizontalMode: "preview",
     },
-    pictochat: {
+    contact: {
       up: "game",
       right: "downloadPlay",
     },
     downloadPlay: {
       up: "game",
-      left: "pictochat",
+      left: "contact",
     },
   },
 });
@@ -69,8 +69,8 @@ const getOpacity = (button?: ButtonType) => {
   />
   <PictochatButton
     :x="32"
-    :y="72 + getButtonOffset('pictochat')"
+    :y="72 + getButtonOffset('contact')"
-    :opacity="getOpacity('pictochat')"
+    :opacity="getOpacity('contact')"
   />
 
   <Selector

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

@@ -1,76 +0,0 @@
-<script setup lang="ts">
-const props = defineProps<{
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  opacity: number;
-}>();
-
-const cornerImage = useTemplateRef("cornerImage");
-
-let currentX = props.x;
-let currentY = props.y;
-let currentWidth = props.width;
-let currentHeight = props.height;
-
-const animationSpeed = 0.25;
-
-useRender((ctx) => {
-  if (!cornerImage.value) return;
-
-  const dx = props.x - currentX;
-  const dy = props.y - currentY;
-  const dw = props.width - currentWidth;
-  const dh = props.height - currentHeight;
-
-  if (
-    Math.abs(dx) < 0.5 &&
-    Math.abs(dy) < 0.5 &&
-    Math.abs(dw) < 0.5 &&
-    Math.abs(dh) < 0.5
-  ) {
-    currentX = props.x;
-    currentY = props.y;
-    currentWidth = props.width;
-    currentHeight = props.height;
-  } else {
-    currentX += dx * animationSpeed;
-    currentY += dy * animationSpeed;
-    currentWidth += dw * animationSpeed;
-    currentHeight += dh * animationSpeed;
-  }
-
-  const x = Math.floor(currentX);
-  const y = Math.floor(currentY);
-  const w = Math.floor(currentWidth);
-  const h = Math.floor(currentHeight);
-
-  ctx.globalAlpha = props.opacity;
-
-  ctx.drawImage(cornerImage.value, x, y);
-
-  ctx.save();
-  ctx.scale(-1, 1);
-  ctx.drawImage(cornerImage.value, -(x + w), y);
-  ctx.restore();
-
-  ctx.save();
-  ctx.scale(1, -1);
-  ctx.drawImage(cornerImage.value, x, -(y + h));
-  ctx.restore();
-
-  ctx.save();
-  ctx.scale(-1, -1);
-  ctx.drawImage(cornerImage.value, -(x + w), -(y + h));
-  ctx.restore();
-});
-</script>
-
-<template>
-  <img
-    ref="cornerImage"
-    src="/assets/images/home/bottom-screen/buttons/corner.png"
-    hidden
-  />
-</template>

app/stores/home.ts

@@ -51,7 +51,7 @@ export const useHomeStore = defineStore("home", {
       );
     },
 
-    animateOutro() {
+    animateOutro(to?: string) {
       this.isOutro = true;
 
       const duration = 0.4;
@@ -71,6 +71,7 @@ export const useHomeStore = defineStore("home", {
           ease: "none",
           onComplete: () => {
             this.isOutro = true;
+            if (to) navigateTo(to);
           },
         },
       );