feat: animate home screen buttons on click

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import gsap from "gsap";
 import GameButton from "./GameButton.vue";
 import PictochatButton from "./PictochatButton.vue";
 import DownloadPlayButton from "./DownloadPlayButton.vue";
@@ -26,15 +27,44 @@ const nextBottomButton = ref<"downloadPlay" | "pictochat">("pictochat");
 
 const selectorPosition = computed(() => BUTTONS_CONFIG[selectedButton.value]);
 
+const animationPercentage = ref(0);
+
+const getButtonOffset = (button: ButtonType) => {
+  if (selectedButton.value === button) return animationPercentage.value * -200;
+  return 0;
+};
+
+const getOpacity = () => (1 - animationPercentage.value) * 100;
+
 useScreenClick((x: number, y: number) => {
-  for (const [buttonName, config] of Object.entries(BUTTONS_CONFIG)) {
+  if (animationPercentage.value != 0) return;
+
+  for (const [buttonName, config] of Object.entries(BUTTONS_CONFIG) as [
+    ButtonType,
+    ButtonConfig,
+  ][]) {
     if (
       x >= config.sx &&
       x <= config.sx + config.sw &&
       y >= config.sy &&
       y <= config.sy + config.sh
     ) {
-      selectedButton.value = buttonName as ButtonType;
+      if (selectedButton.value === buttonName) {
+        gsap.fromTo(
+          animationPercentage,
+          { value: 0 },
+          {
+            value: 1,
+            duration: 0.35,
+            ease: "none",
+            onComplete: () => {
+              throw new Error("not implemented: onComplete in button click");
+            },
+          },
+        );
+      } else {
+        selectedButton.value = buttonName;
+      }
 
       if (buttonName === "pictochat" || buttonName === "downloadPlay") {
         nextBottomButton.value = buttonName;
@@ -99,14 +129,20 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <GameButton :x="BUTTONS_CONFIG.game.x" :y="BUTTONS_CONFIG.game.y" />
+  <GameButton
+    :x="BUTTONS_CONFIG.game.x"
+    :y="BUTTONS_CONFIG.game.y + getButtonOffset('game')"
+    :opacity="getOpacity()"
+  />
   <DownloadPlayButton
     :x="BUTTONS_CONFIG.downloadPlay.x"
-    :y="BUTTONS_CONFIG.downloadPlay.y"
+    :y="BUTTONS_CONFIG.downloadPlay.y + getButtonOffset('downloadPlay')"
+    :opacity="getOpacity()"
   />
   <PictochatButton
     :x="BUTTONS_CONFIG.pictochat.x"
-    :y="BUTTONS_CONFIG.pictochat.y"
+    :y="BUTTONS_CONFIG.pictochat.y + getButtonOffset('pictochat')"
+    :opacity="getOpacity()"
   />
 
   <Selector
@@ -114,5 +150,6 @@ onUnmounted(() => {
     :y="selectorPosition.sy"
     :width="selectorPosition.sw"
     :height="selectorPosition.sh"
+    :opacity="getOpacity()"
   />
 </template>