diff --git a/src/pages/GamePage.tsx b/src/pages/GamePage.tsx index 3d8e6e8..5e82fb5 100644 --- a/src/pages/GamePage.tsx +++ b/src/pages/GamePage.tsx @@ -49,6 +49,7 @@ export function GamePage() { settings, null, { onStep: (direction) => arrowGameRef.current?.handleStep(direction) }, + 'toes-only', ) const gameReady = calibrationStatus === 'ready' diff --git a/src/pose/usePoseLoop.ts b/src/pose/usePoseLoop.ts index b71ff70..ff3bd4b 100644 --- a/src/pose/usePoseLoop.ts +++ b/src/pose/usePoseLoop.ts @@ -23,6 +23,8 @@ export interface PoseLoopState { videoSource: VideoSource | null } +export type DrawMode = 'full' | 'toes-only' + export function usePoseLoop( videoRef: React.RefObject, canvasRef: React.RefObject, @@ -30,6 +32,7 @@ export function usePoseLoop( settings: PoseSettings, fileUrl: string | null, callbacks: PoseLoopCallbacks, + drawMode: DrawMode = 'full', ): PoseLoopState { const [loading, setLoading] = useState(true) const [error, setError] = useState(null) @@ -145,15 +148,24 @@ export function usePoseLoop( // Draw pose landmarks for (const landmarks of result.landmarks) { - drawingUtils.drawLandmarks(landmarks, { - radius: 4, - color: '#00FF00', - fillColor: '#00FF0080', - }) - drawingUtils.drawConnectors(landmarks, PoseLandmarker.POSE_CONNECTIONS, { - color: '#00FFFF', - lineWidth: 2, - }) + if (drawMode === 'toes-only') { + const toes = [31, 32].map(i => landmarks[i]).filter(Boolean) + drawingUtils.drawLandmarks(toes, { + radius: 10, + color: '#00FFCC', + fillColor: '#00FFCC', + }) + } else { + drawingUtils.drawLandmarks(landmarks, { + radius: 4, + color: '#00FF00', + fillColor: '#00FF0080', + }) + drawingUtils.drawConnectors(landmarks, PoseLandmarker.POSE_CONNECTIONS, { + color: '#00FFFF', + lineWidth: 2, + }) + } } // Debug 3D overlay