feat(selector): improve api

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;

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

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>