feat(common): animate label switching of common buttons

app/components/Common/Buttons.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import gsap from "gsap";
+
 const props = defineProps<{
   yOffset: number;
   opacity?: number;
@@ -12,7 +14,6 @@ const emit = defineEmits<{
 }>();
 
 const { onRender, onClick } = useScreen();
-
 const { assets } = useAssets();
 
 const BUTTON_WIDTH = assets.images.common.button.rect.width;
@@ -21,6 +22,59 @@ const BUTTON_HEIGHT = assets.images.common.button.rect.height;
 const B_BUTTON: Rect = [31, 172, BUTTON_WIDTH, BUTTON_HEIGHT];
 const A_BUTTON: Rect = [144, 172, BUTTON_WIDTH, BUTTON_HEIGHT];
 
+const LABEL_CHANGE_OFFSET = 20;
+const LABEL_CHANGE_DURATION = 0.167;
+const LABEL_CHANGE_PAUSE = 0.08;
+
+let bButtonOffsetY = 0;
+let aButtonOffsetY = 0;
+let displayedBLabel = props.bLabel;
+let displayedALabel = props.aLabel;
+
+const animateLabelChange = (
+  setter: (v: number) => void,
+  setLabel: (label: string) => void,
+  newLabel: string,
+) => {
+  const target = { v: 0 };
+  gsap
+    .timeline()
+    .to(target, {
+      v: LABEL_CHANGE_OFFSET,
+      duration: LABEL_CHANGE_DURATION,
+      ease: "none",
+      onUpdate: () => setter(target.v),
+      onComplete: () => setLabel(newLabel),
+    })
+    .to(target, {
+      v: 0,
+      duration: LABEL_CHANGE_DURATION,
+      delay: LABEL_CHANGE_PAUSE,
+      ease: "none",
+      onUpdate: () => setter(target.v),
+    });
+};
+
+watch(
+  () => props.bLabel,
+  (newLabel) =>
+    animateLabelChange(
+      (v) => (bButtonOffsetY = v),
+      (l) => (displayedBLabel = l),
+      newLabel,
+    ),
+);
+
+watch(
+  () => props.aLabel,
+  (newLabel) =>
+    animateLabelChange(
+      (v) => (aButtonOffsetY = v),
+      (l) => (displayedALabel = l),
+      newLabel,
+    ),
+);
+
 onRender((ctx) => {
   ctx.globalAlpha = props.opacity ?? 1;
   ctx.font = "10px NDS10";
@@ -28,15 +82,23 @@ onRender((ctx) => {
 
   ctx.translate(0, props.yOffset);
 
-  const drawButton = (icon: string, text: string, x: number) => {
+  const drawButton = (
+    icon: string,
+    text: string,
+    x: number,
+    buttonOffsetY: number,
+  ) => {
+    ctx.save();
+    ctx.translate(0, buttonOffsetY);
     assets.images.common.button.draw(ctx, x, 172);
 
     const label = `${icon} ${text}`;
     fillTextHCentered(ctx, label, x, 185, BUTTON_WIDTH);
+    ctx.restore();
   };
 
-  drawButton(ICONS.B, props.bLabel, 31);
+  drawButton(ICONS.B, displayedBLabel, 31, bButtonOffsetY);
-  drawButton(ICONS.A, props.aLabel, 144);
+  drawButton(ICONS.A, displayedALabel, 144, aButtonOffsetY);
 }, 60);
 
 onClick((x, y) => {