1

src/components/puzzle-runtime/PuzzleRuntimeShell.tsx

@@ -11,7 +11,7 @@ import {
   Sparkles,
   Trophy,
 } from 'lucide-react';
-import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 
 import type {
   DragPuzzlePieceRequest,
@@ -472,6 +472,17 @@ export function PuzzleRuntimeShell({
   const { resolvedUrl: resolvedUiBackgroundImage } = useResolvedAssetReadUrl(
     currentLevel?.uiBackgroundImageSrc ?? null,
   );
+  const tryPlayBackgroundMusic = useCallback(() => {
+    const audio = backgroundAudioRef.current;
+    if (!audio || !resolvedBackgroundMusicSrc || runtimeStatus !== 'playing') {
+      if (audio) {
+        audio.pause();
+      }
+      return;
+    }
+    audio.volume = Math.max(0, Math.min(1, musicVolume));
+    void audio.play().catch(() => {});
+  }, [musicVolume, resolvedBackgroundMusicSrc, runtimeStatus]);
   const mocapInput = useMocapInput({enabled: runtimeStatus === 'playing'});
   const primaryMocapHand = mocapInput.latestCommand?.primaryHand;
   const primaryMocapHandState = primaryMocapHand?.state;
@@ -498,16 +509,8 @@ export function PuzzleRuntimeShell({
   }, [currentLevel]);
 
   useEffect(() => {
-    const audio = backgroundAudioRef.current;
-    if (!audio || !resolvedBackgroundMusicSrc || runtimeStatus !== 'playing') {
-      if (audio) {
-        audio.pause();
-      }
-      return;
-    }
-    audio.volume = Math.max(0, Math.min(1, musicVolume));
-    void audio.play().catch(() => {});
-  }, [musicVolume, resolvedBackgroundMusicSrc, runtimeStatus]);
+    tryPlayBackgroundMusic();
+  }, [tryPlayBackgroundMusic]);
 
   const commitSelectedPieceId = (pieceId: string | null) => {
     selectedPieceIdRef.current = pieceId;
@@ -949,6 +952,7 @@ export function PuzzleRuntimeShell({
     if (isInteractionLocked) {
       return;
     }
+    tryPlayBackgroundMusic();
 
     if (!selectedPieceIdBeforeInput) {
       commitSelectedPieceId(pieceId);
@@ -1257,6 +1261,7 @@ export function PuzzleRuntimeShell({
     if (isInteractionLocked) {
       return;
     }
+    tryPlayBackgroundMusic();
     event.preventDefault();
     resetDragInteraction();
     event.currentTarget.setPointerCapture?.(event.pointerId);