Add playback speed for best game
This commit is contained in:
@@ -9,6 +9,7 @@ interface SnakeCanvasProps {
|
||||
showGrid?: boolean;
|
||||
size?: 'small' | 'normal' | 'large';
|
||||
showStats?: boolean; // Show score/length/steps even in small mode
|
||||
playbackSpeed?: number; // Steps per second (default: 15)
|
||||
}
|
||||
|
||||
const CELL_SIZES = {
|
||||
@@ -19,7 +20,7 @@ const CELL_SIZES = {
|
||||
|
||||
const CANVAS_PADDING = 10;
|
||||
|
||||
export default function SnakeCanvas({ network, gridSize, showGrid = true, size = 'normal', showStats = false }: SnakeCanvasProps) {
|
||||
export default function SnakeCanvas({ network, gridSize, showGrid = true, size = 'normal', showStats = false, playbackSpeed = 15 }: SnakeCanvasProps) {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const [currentGame, setCurrentGame] = useState<GameState | null>(null);
|
||||
const animationFrameRef = useRef<number>();
|
||||
@@ -43,7 +44,7 @@ export default function SnakeCanvas({ network, gridSize, showGrid = true, size =
|
||||
useEffect(() => {
|
||||
if (!network || !currentGame) return;
|
||||
|
||||
const STEPS_PER_SECOND = 10; // Speed of game playback
|
||||
const STEPS_PER_SECOND = playbackSpeed; // Use prop
|
||||
const UPDATE_INTERVAL = 1000 / STEPS_PER_SECOND;
|
||||
|
||||
const animate = (timestamp: number) => {
|
||||
@@ -82,7 +83,7 @@ export default function SnakeCanvas({ network, gridSize, showGrid = true, size =
|
||||
cancelAnimationFrame(animationFrameRef.current);
|
||||
}
|
||||
};
|
||||
}, [network?.id, !!currentGame, gridSize]); // Use ID and boolean existence check to prevent loop restart on every frame
|
||||
}, [network?.id, !!currentGame, gridSize, playbackSpeed]); // Added playbackSpeed dependency
|
||||
|
||||
// Set canvas size once when props change (not on every render)
|
||||
useEffect(() => {
|
||||
|
||||
Reference in New Issue
Block a user