feat(nds): add audio in all menus

app/composables/useAssets.ts.in

@@ -7,14 +7,18 @@ type Rect = [number, number, number, number];
 let atlasImage: HTMLImageElement | null = null;
 const modelCache = new Map<string, THREE.Group>();
 
-const createAudio = (path: string) => ({
-    play: () => {
-      if (!import.meta.client) return;
-      const audio = new Audio(path);
+const createAudio = (path: string) => {
+  const source = import.meta.client ? new Audio(path) : null;
+  return {
+    play: (volume = 1) => {
+      if (!source) return;
+      const audio = source.cloneNode() as HTMLAudioElement;
+      audio.volume = volume;
       audio.addEventListener("ended", () => audio.remove(), { once: true });
       audio.play().catch(() => {});
     },
-});
+  };
+};
 
 const loaded = ref(0);
 const total = ref({{TOTAL}});
@@ -104,6 +108,7 @@ type ModelTree = {
 
 export type AudioEntry = ReturnType<typeof createAudio>;
 
+
 type AudioTree = {
   [key: string]: AudioEntry | AudioTree;
 };

app/composables/useButtonNavigation.ts

@@ -5,6 +5,7 @@ export const useButtonNavigation = <T extends Record<string, Rect>>({
   initialButton,
   canClickButton,
   onActivate,
+  onNavigate,
   navigation,
   disabled,
   selectorAnimation,
@@ -13,6 +14,7 @@ export const useButtonNavigation = <T extends Record<string, Rect>>({
   initialButton: keyof T;
   canClickButton?: (buttonName: keyof T) => boolean;
   onActivate?: (buttonName: keyof T) => void;
+  onNavigate?: (buttonName: keyof T) => void;
   navigation: Record<
     keyof T,
     {
@@ -231,6 +233,12 @@ export const useButtonNavigation = <T extends Record<string, Rect>>({
         if (selectedButton.value === buttonName) {
           onActivate?.(buttonName);
         } else {
+          if (onNavigate) {
+            onNavigate(buttonName);
+          } else {
+            const { assets } = useAssets();
+            assets.audio.tinyClick.play(0.8);
+          }
           const path = findPath(graph, selectedButton.value, buttonName);
 
           if (
@@ -356,6 +364,12 @@ export const useButtonNavigation = <T extends Record<string, Rect>>({
     }
 
     if (targetButton) {
+      if (onNavigate) {
+        onNavigate(targetButton);
+      } else {
+        const { assets } = useAssets();
+        assets.audio.tinyClick.play(0.8);
+      }
       const path = findPath(graph, selectedButton.value, targetButton);
       animateToButton(targetButton, path);
     }

app/composables/useClockTick.ts

@@ -0,0 +1,12 @@
+let lastSecond = -1;
+
+export const useClockTick = () => {
+  const { assets } = useAssets();
+
+  return (now: Date) => {
+    const s = now.getSeconds();
+    if (s === lastSecond) return;
+    lastSecond = s;
+    assets.audio.clockTick.play(s === 0 ? 1 : 0.7);
+  };
+};