feat: smooth mocap palm cursor

src/components/puzzle-runtime/PuzzleRuntimeShell.tsx

@@ -221,6 +221,7 @@ const PUZZLE_PIECE_PRESS_HAPTIC_PATTERN_MS = 12;
 const PUZZLE_EXIT_REMODEL_PROMPT_STORAGE_PREFIX =
   'genarrative.puzzle-runtime.exit-remodel-prompt.v1';
 const PUZZLE_MOCAP_DRAG_INPUT_ID = 'mocap:primary-hand';
+const PUZZLE_MOCAP_CURSOR_FRAME_MS = 1000 / 60;
 
 const shownExitRemodelPromptProfileIds = new Set<string>();
 
@@ -300,6 +301,10 @@ type PuzzleMocapCursorState = {
   state: string;
 };
 
+type PuzzleMocapCursorSample = PuzzleMocapCursorState & {
+  receivedAtMs: number;
+};
+
 type PuzzleRuntimeDragTargetState = {
   pieceId: string;
   groupId: string | null;
@@ -394,6 +399,14 @@ export function PuzzleRuntimeShell({
   const [mocapCursor, setMocapCursor] = useState<PuzzleMocapCursorState | null>(
     null,
   );
+  const mocapCursorPreviousSampleRef = useRef<PuzzleMocapCursorSample | null>(
+    null,
+  );
+  const mocapCursorTargetSampleRef = useRef<PuzzleMocapCursorSample | null>(null);
+  const mocapCursorIntervalRef = useRef<number | null>(null);
+  const updateMocapCursorSampleRef = useRef<(
+    nextSample: PuzzleMocapCursorSample,
+  ) => void>(() => {});
   const runtimeDragInputControllerRef = useRef(
     createRuntimeDragInputController<string>(),
   );
@@ -930,6 +943,21 @@ export function PuzzleRuntimeShell({
       readRuntimeInputElementBounds(boardRef.current),
     );
 
+  const resetMocapCursorInterpolation = () => {
+    mocapCursorPreviousSampleRef.current = null;
+    mocapCursorTargetSampleRef.current = null;
+    setMocapCursor(null);
+  };
+
+  updateMocapCursorSampleRef.current = (nextSample: PuzzleMocapCursorSample) => {
+    const previousTarget = mocapCursorTargetSampleRef.current;
+    mocapCursorPreviousSampleRef.current = previousTarget ?? nextSample;
+    mocapCursorTargetSampleRef.current = nextSample;
+    if (!previousTarget) {
+      setMocapCursor(nextSample);
+    }
+  };
+
   const syncRuntimeDragFromController = (
     session: RuntimeDragInputSession<string> | null,
   ) => {
@@ -994,7 +1022,7 @@ export function PuzzleRuntimeShell({
     const activeSession = runtimeDragInputControllerRef.current.getSession();
     if (!board || runtimeStatus !== 'playing' || isInteractionLocked) {
       runtimeDragInputControllerRef.current.cancel();
-      setMocapCursor(null);
+      resetMocapCursorInterpolation();
       return;
     }
     if (
@@ -1003,19 +1031,18 @@ export function PuzzleRuntimeShell({
       typeof primaryMocapHandY !== 'number'
     ) {
       runtimeDragInputControllerRef.current.cancel(PUZZLE_MOCAP_DRAG_INPUT_ID);
-      setMocapCursor(null);
+      resetMocapCursorInterpolation();
       return;
     }
 
-    setMocapCursor({
+    const nextSample = {
       x: primaryMocapHandX,
       y: primaryMocapHandY,
       state: primaryMocapHandState,
-    });
-    const handPoint = resolveBoardInputPointFromNormalized(
-      primaryMocapHandX,
-      primaryMocapHandY,
-    );
+      receivedAtMs: performance.now(),
+    };
+    updateMocapCursorSampleRef.current(nextSample);
+    const handPoint = resolveBoardInputPointFromNormalized(nextSample.x, nextSample.y);
     if (primaryMocapHandState === 'grab') {
       if (activeSession?.inputId !== PUZZLE_MOCAP_DRAG_INPUT_ID) {
         const sourceCell = resolveRuntimeInputGridCell(handPoint, board);
@@ -1063,6 +1090,64 @@ export function PuzzleRuntimeShell({
     runtimeStatus,
   ]);
 
+  useEffect(() => {
+    if (!board || runtimeStatus !== 'playing') {
+      if (mocapCursorIntervalRef.current !== null) {
+        window.clearInterval(mocapCursorIntervalRef.current);
+        mocapCursorIntervalRef.current = null;
+      }
+      return;
+    }
+
+    const tickMocapCursor = () => {
+      const targetSample = mocapCursorTargetSampleRef.current;
+      if (!targetSample) {
+        return;
+      }
+      const previousSample = mocapCursorPreviousSampleRef.current ?? targetSample;
+      const durationMs = Math.max(
+        PUZZLE_MOCAP_CURSOR_FRAME_MS,
+        targetSample.receivedAtMs - previousSample.receivedAtMs,
+      );
+      const progress = targetSample.receivedAtMs === previousSample.receivedAtMs
+        ? 1
+        : Math.min(
+            1,
+            Math.max(0, (performance.now() - targetSample.receivedAtMs) / durationMs),
+          );
+      const nextCursor = {
+        x: previousSample.x + (targetSample.x - previousSample.x) * progress,
+        y: previousSample.y + (targetSample.y - previousSample.y) * progress,
+        state: targetSample.state,
+      };
+      const nextPoint = resolveBoardInputPointFromNormalized(
+        nextCursor.x,
+        nextCursor.y,
+      );
+      setMocapCursor(nextCursor);
+      const activeSession = runtimeDragInputControllerRef.current.getSession();
+      if (activeSession?.inputId === PUZZLE_MOCAP_DRAG_INPUT_ID) {
+        runtimeDragInputControllerRef.current.move({
+          inputId: PUZZLE_MOCAP_DRAG_INPUT_ID,
+          point: nextPoint,
+          forceDragging: true,
+        });
+      }
+    };
+
+    tickMocapCursor();
+    mocapCursorIntervalRef.current = window.setInterval(
+      tickMocapCursor,
+      PUZZLE_MOCAP_CURSOR_FRAME_MS,
+    );
+    return () => {
+      if (mocapCursorIntervalRef.current !== null) {
+        window.clearInterval(mocapCursorIntervalRef.current);
+        mocapCursorIntervalRef.current = null;
+      }
+    };
+  }, [board, runtimeStatus]);
+
   if (!run || !currentLevel || !board) {
     return (
       <div