feat(nds): add help button with hints for all physical buttons

app/components/NDS2D.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import gsap from "gsap";
 
+const app = useAppStore();
 const ndsScale = ref(1);
-const showHelp = ref(false);
-const helpTimeline = ref<gsap.core.Timeline | null>(null);
+const hintsContainer = useTemplateRef<HTMLElement>("hintsContainer");
 
 const updateScale = () => {
   const scaleX = (window.innerWidth - 40) / 235;
@@ -11,72 +11,37 @@ const updateScale = () => {
   ndsScale.value = Math.min(scaleX, scaleY);
 };
 
-const animateHelpLabels = async (yoyo = false) => {
-  if (showHelp.value) return;
-  showHelp.value = true;
-
-  helpTimeline.value?.kill();
-
-  await nextTick();
-  const timeline = gsap
-    .timeline()
-    .fromTo(
-      ".nds2d-hints-container",
-      { opacity: 0 },
-      { opacity: 1, duration: 0.2, ease: "power1.out" },
-    )
-    .to(
-      ".nds2d-help-btn",
-      { color: "#ffffff", opacity: 1, duration: 0.2, ease: "power1.out" },
-      "<",
-    )
-    .to(".nds2d-hints-container", {
-      opacity: 0,
-      duration: 0.2,
-      ease: "power1.in",
-      delay: 3,
-    })
-    .to(
-      ".nds2d-help-btn",
-      { color: "#666666", opacity: 0.5, duration: 0.2, ease: "power1.in" },
-      "<",
-    )
-    .call(() => {
-      showHelp.value = false;
-    });
-
-  if (yoyo) {
-    timeline.to(".nds2d-help-btn", {
-      color: "#ffffff",
-      opacity: 1,
-      duration: 0.3,
-      repeat: 5,
-      yoyo: true,
-      delay: 0.3,
-    });
-  }
-
-  helpTimeline.value = timeline;
-};
-
-onMounted(async () => {
+onMounted(() => {
   updateScale();
   window.addEventListener("resize", updateScale);
-
-  if (ndsScale.value >= 1) {
-    await animateHelpLabels(true);
-  }
-});
-
-useKeyDown(async ({ key }) => {
-  if (key.toLocaleLowerCase() === "h") {
-    await animateHelpLabels();
-  }
 });
 
 onUnmounted(() => {
   window.removeEventListener("resize", updateScale);
 });
+
+watch(
+  () => app.hintsVisible,
+  async (show) => {
+    await nextTick();
+    if (!hintsContainer.value) return;
+    if (show) {
+      gsap.fromTo(
+        hintsContainer.value,
+        { opacity: 0 },
+        { opacity: 1, duration: 0.2, ease: "power1.out" },
+      );
+    } else {
+      gsap.to(hintsContainer.value, {
+        opacity: 0,
+        duration: 0.2,
+        ease: "power1.in",
+      });
+    }
+  },
+);
+
+defineExpose({ ndsScale });
 </script>
 
 <template>
@@ -122,7 +87,11 @@ onUnmounted(() => {
         <div class="nds2d-small-button nds2d-start"></div>
         <div class="nds2d-small-button nds2d-select"></div>
 
-        <div v-if="showHelp" class="nds2d-hints-container">
+        <div
+          ref="hintsContainer"
+          class="nds2d-hints-container"
+          style="opacity: 0"
+        >
           <div class="nds2d-hint nds2d-hint-dpad">Arrows</div>
           <div class="nds2d-hint nds2d-hint-x">{{ mapNDSToKey("X") }}</div>
           <div class="nds2d-hint nds2d-hint-a">{{ mapNDSToKey("A") }}</div>
@@ -137,8 +106,6 @@ onUnmounted(() => {
         </div>
       </div>
     </div>
-
-    <button class="nds2d-help-btn" @click="animateHelpLabels()">?</button>
   </div>
 </template>
 
@@ -602,25 +569,4 @@ onUnmounted(() => {
   bottom: 28px;
   transform: translateX(-100%);
 }
-
-.nds2d-help-btn {
-  position: fixed;
-  bottom: 16px;
-  left: 16px;
-  width: 30px;
-  height: 30px;
-  border: none;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.1);
-  color: #666;
-  font-size: 18px;
-  cursor: pointer;
-  opacity: 0.5;
-  transition: opacity 0.2s;
-  user-select: none;
-}
-
-.nds2d-help-btn:hover {
-  opacity: 1;
-}
 </style>