feat: add shared runtime input device layer

src/components/puzzle-runtime/PuzzleRuntimeShell.test.tsx

@@ -207,8 +207,11 @@ test('拼图界面在 mocap open_palm 时显示体感光标', () => {
 
   const cursor = screen.getByTestId('puzzle-mocap-cursor');
   expect(cursor).toBeTruthy();
-  expect(cursor).toHaveStyle({left: '42%', top: '58%'});
+  expect(Number.parseFloat(cursor.style.left)).toBeCloseTo(42);
+  expect(Number.parseFloat(cursor.style.top)).toBeCloseTo(58);
   mocapMock.state = 'grab';
+  mocapMock.x = 0.42;
+  mocapMock.y = 0.58;
 });
 
 test('抓握时会触发拖拽提交并在松开时落子', () => {
@@ -301,6 +304,144 @@ test('抓握时会触发拖拽提交并在松开时落子', () => {
   );
 });
 
+test('mocap 抓握合并大块时按大块锚点提交拖拽', () => {
+  const originalRequestAnimationFrame = window.requestAnimationFrame;
+  const originalCancelAnimationFrame = window.cancelAnimationFrame;
+  mocapMock.state = 'open_palm';
+  mocapMock.x = 0.2;
+  mocapMock.y = 0.2;
+  const onDragPiece = vi.fn();
+  const mergedRun: PuzzleRunSnapshot = {
+    ...clearedRun,
+    currentLevel: {
+      ...clearedRun.currentLevel!,
+      status: 'playing',
+      startedAtMs: Date.now(),
+      remainingMs: 300_000,
+      timeLimitMs: 300_000,
+      board: {
+        ...clearedRun.currentLevel!.board,
+        allTilesResolved: false,
+        mergedGroups: [
+          {
+            groupId: 'group-large',
+            pieceIds: ['piece-0', 'piece-1', 'piece-3'],
+            occupiedCells: [
+              { row: 0, col: 0 },
+              { row: 0, col: 1 },
+              { row: 1, col: 0 },
+            ],
+          },
+        ],
+        pieces: clearedRun.currentLevel!.board.pieces.map((piece) =>
+          ['piece-0', 'piece-1', 'piece-3'].includes(piece.pieceId)
+            ? { ...piece, mergedGroupId: 'group-large' }
+            : piece,
+        ),
+      },
+    },
+  };
+
+  Object.defineProperty(window, 'requestAnimationFrame', {
+    configurable: true,
+    value: vi.fn(() => 1),
+  });
+  Object.defineProperty(window, 'cancelAnimationFrame', {
+    configurable: true,
+    value: vi.fn(),
+  });
+
+  const { container, rerender, unmount } = renderPuzzleRuntime(
+    <PuzzleRuntimeShell
+      run={mergedRun}
+      onBack={vi.fn()}
+      onSwapPieces={vi.fn()}
+      onDragPiece={onDragPiece}
+      onAdvanceNextLevel={vi.fn()}
+    />,
+  );
+  const board = container.querySelector(
+    '[data-testid="puzzle-board"]',
+  ) as HTMLElement | null;
+  if (!board) {
+    throw new Error('缺少测试棋盘');
+  }
+  board.getBoundingClientRect = () =>
+    ({
+      x: 0,
+      y: 0,
+      left: 0,
+      top: 0,
+      right: 300,
+      bottom: 300,
+      width: 300,
+      height: 300,
+      toJSON: () => ({}),
+    }) as DOMRect;
+
+  mocapMock.state = 'grab';
+  mocapMock.x = 0.2;
+  mocapMock.y = 0.2;
+  rerender(
+    <AuthUiContext.Provider value={createAuthValue()}>
+      <PuzzleRuntimeShell
+        run={mergedRun}
+        onBack={vi.fn()}
+        onSwapPieces={vi.fn()}
+        onDragPiece={onDragPiece}
+        onAdvanceNextLevel={vi.fn()}
+      />
+    </AuthUiContext.Provider>,
+  );
+
+  mocapMock.x = 0.7;
+  mocapMock.y = 0.7;
+  rerender(
+    <AuthUiContext.Provider value={createAuthValue()}>
+      <PuzzleRuntimeShell
+        run={mergedRun}
+        onBack={vi.fn()}
+        onSwapPieces={vi.fn()}
+        onDragPiece={onDragPiece}
+        onAdvanceNextLevel={vi.fn()}
+      />
+    </AuthUiContext.Provider>,
+  );
+
+  mocapMock.state = 'open_palm';
+  rerender(
+    <AuthUiContext.Provider value={createAuthValue()}>
+      <PuzzleRuntimeShell
+        run={mergedRun}
+        onBack={vi.fn()}
+        onSwapPieces={vi.fn()}
+        onDragPiece={onDragPiece}
+        onAdvanceNextLevel={vi.fn()}
+      />
+    </AuthUiContext.Provider>,
+  );
+
+  expect(onDragPiece).toHaveBeenCalledTimes(1);
+  expect(onDragPiece).toHaveBeenCalledWith({
+    pieceId: 'piece-0',
+    targetRow: 2,
+    targetCol: 2,
+  });
+
+  unmount();
+  Object.defineProperty(window, 'requestAnimationFrame', {
+    configurable: true,
+    value: originalRequestAnimationFrame,
+  });
+  Object.defineProperty(window, 'cancelAnimationFrame', {
+    configurable: true,
+    value: originalCancelAnimationFrame,
+  });
+  mocapMock.state = 'grab';
+  mocapMock.x = 0.42;
+  mocapMock.y = 0.58;
+});
+
 test('通关后显示结算弹窗、排行榜和下一关按钮', () => {
   vi.useFakeTimers();
   const onAdvanceNextLevel = vi.fn();
@@ -820,6 +961,9 @@ test('移动端点击拼图片时立即触发一次震动反馈', () => {
   const originalRequestAnimationFrame = window.requestAnimationFrame;
   const originalCancelAnimationFrame = window.cancelAnimationFrame;
   const vibrate = vi.fn();
+  mocapMock.state = 'open_palm';
+  mocapMock.x = 0.42;
+  mocapMock.y = 0.58;
   const playingRun: PuzzleRunSnapshot = {
     ...clearedRun,
     currentLevel: {