feat: 添加算法播放器Hook

Author: CC11001100

src/hooks/index.ts

@@ -0,0 +1 @@
+export { useAlgorithmPlayer } from './useAlgorithmPlayer';

src/hooks/useAlgorithmPlayer.ts

@@ -0,0 +1,117 @@
+import { useState, useCallback, useEffect, useRef } from 'react';
+import type { AlgorithmStep, AlgorithmType } from '../types';
+import { generateDPSteps } from '../algorithms/dpAlgorithm';
+import { generateGreedyBinarySteps } from '../algorithms/greedyBinaryAlgorithm';
+
+interface UseAlgorithmPlayerReturn {
+  steps: AlgorithmStep[];
+  currentStep: number;
+  currentStepData: AlgorithmStep | null;
+  isPlaying: boolean;
+  speed: number;
+  play: () => void;
+  pause: () => void;
+  nextStep: () => void;
+  prevStep: () => void;
+  reset: () => void;
+  seek: (step: number) => void;
+  setSpeed: (speed: number) => void;
+  generateSteps: (data: number[], algorithmType: AlgorithmType) => void;
+}
+
+export function useAlgorithmPlayer(): UseAlgorithmPlayerReturn {
+  const [steps, setSteps] = useState<AlgorithmStep[]>([]);
+  const [currentStep, setCurrentStep] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [speed, setSpeed] = useState(1);
+  const intervalRef = useRef<number | null>(null);
+
+  // 生成算法步骤
+  const generateSteps = useCallback((data: number[], algorithmType: AlgorithmType) => {
+    const newSteps = algorithmType === 'dp' 
+      ? generateDPSteps(data)
+      : generateGreedyBinarySteps(data);
+    setSteps(newSteps);
+    setCurrentStep(0);
+    setIsPlaying(false);
+  }, []);
+
+  // 播放
+  const play = useCallback(() => {
+    if (currentStep >= steps.length - 1) {
+      setCurrentStep(0);
+    }
+    setIsPlaying(true);
+  }, [currentStep, steps.length]);
+
+  // 暂停
+  const pause = useCallback(() => {
+    setIsPlaying(false);
+  }, []);
+
+  // 下一步
+  const nextStep = useCallback(() => {
+    setCurrentStep((prev) => Math.min(prev + 1, steps.length - 1));
+  }, [steps.length]);
+
+  // 上一步
+  const prevStep = useCallback(() => {
+    setCurrentStep((prev) => Math.max(prev - 1, 0));
+  }, []);
+
+  // 重置
+  const reset = useCallback(() => {
+    setCurrentStep(0);
+    setIsPlaying(false);
+  }, []);
+
+  // 跳转到指定步骤
+  const seek = useCallback((step: number) => {
+    setCurrentStep(Math.max(0, Math.min(step, steps.length - 1)));
+  }, [steps.length]);
+
+  // 自动播放
+  useEffect(() => {
+    if (isPlaying) {
+      const interval = 1000 / speed;
+      intervalRef.current = window.setInterval(() => {
+        setCurrentStep((prev) => {
+          if (prev >= steps.length - 1) {
+            setIsPlaying(false);
+            return prev;
+          }
+          return prev + 1;
+        });
+      }, interval);
+    } else {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    }
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, [isPlaying, speed, steps.length]);
+
+  const currentStepData = steps[currentStep] || null;
+
+  return {
+    steps,
+    currentStep,
+    currentStepData,
+    isPlaying,
+    speed,
+    play,
+    pause,
+    nextStep,
+    prevStep,
+    reset,
+    seek,
+    setSpeed,
+    generateSteps,
+  };
+}