From c45e2232273bf2b4391ad546139403a88b002fd4 Mon Sep 17 00:00:00 2001
From: Pihkaal <hello@pihkaal.me>
Date: Mon, 17 Nov 2025 00:38:40 +0100
Subject: [PATCH] feat(selector): improve api

---
 app/components/Common/ButtonSelector.vue      | 24 +++++++------------
 .../Contact/BottomScreen/BottomScreen.vue     |  5 +---
 .../Home/BottomScreen/Buttons/Buttons.vue     |  8 +------
 3 files changed, 10 insertions(+), 27 deletions(-)

diff --git a/app/components/Common/ButtonSelector.vue b/app/components/Common/ButtonSelector.vue
index 597d76d..97f3d36 100644
--- a/app/components/Common/ButtonSelector.vue
+++ b/app/components/Common/ButtonSelector.vue
@@ -1,10 +1,7 @@
 <script setup lang="ts">
 const props = withDefaults(
   defineProps<{
-    x: number;
-    y: number;
-    width: number;
-    height: number;
+    rect: [x: number, y: number, width: number, height: number];
     opacity?: number;
   }>(),
   {
@@ -16,18 +13,16 @@ const cornerImage = useTemplateRef("cornerImage");
 
 const ANIMATION_SPEED = 0.25;
 
-let currentX = props.x;
-let currentY = props.y;
-let currentWidth = props.width;
-let currentHeight = props.height;
+let [currentX, currentY, currentWidth, currentHeight] = props.rect;
 
 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;
+  const [targetX, targetY, targetWidth, targetHeight] = props.rect;
+  const dx = targetX - currentX;
+  const dy = targetY - currentY;
+  const dw = targetWidth - currentWidth;
+  const dh = targetHeight - currentHeight;
 
   if (
     Math.abs(dx) < 0.5 &&
@@ -35,10 +30,7 @@ useRender((ctx) => {
     Math.abs(dw) < 0.5 &&
     Math.abs(dh) < 0.5
   ) {
-    currentX = props.x;
-    currentY = props.y;
-    currentWidth = props.width;
-    currentHeight = props.height;
+    [currentX, currentY, currentWidth, currentHeight] = props.rect;
   } else {
     currentX += dx * ANIMATION_SPEED;
     currentY += dy * ANIMATION_SPEED;
diff --git a/app/components/Contact/BottomScreen/BottomScreen.vue b/app/components/Contact/BottomScreen/BottomScreen.vue
index 4b36c0e..d82747c 100644
--- a/app/components/Contact/BottomScreen/BottomScreen.vue
+++ b/app/components/Contact/BottomScreen/BottomScreen.vue
@@ -41,10 +41,7 @@ const { selectorPosition } = useButtonNavigation({
 
   <Buttons />
   <ButtonSelector
-    :x="selectorPosition[0]"
-    :y="selectorPosition[1]"
-    :width="selectorPosition[2]"
-    :height="selectorPosition[3]"
+    :rect="selectorPosition"
     :opacity="store.isIntro ? store.intro.stage3Opacity : 1"
   />
 
diff --git a/app/components/Home/BottomScreen/Buttons/Buttons.vue b/app/components/Home/BottomScreen/Buttons/Buttons.vue
index 800a959..047c4b1 100644
--- a/app/components/Home/BottomScreen/Buttons/Buttons.vue
+++ b/app/components/Home/BottomScreen/Buttons/Buttons.vue
@@ -73,11 +73,5 @@ const getOpacity = (button?: ButtonType) => {
     :opacity="getOpacity('contact')"
   />
 
-  <Selector
-    :x="selectorPosition[0]"
-    :y="selectorPosition[1]"
-    :width="selectorPosition[2]"
-    :height="selectorPosition[3]"
-    :opacity="getOpacity()"
-  />
+  <Selector :rect="selectorPosition" :opacity="getOpacity()" />
 </template>