Add playback speed for best game

This commit is contained in:
Peter Stockings
2026-01-10 11:56:13 +11:00
parent de1563dae6
commit e9cb8b52df
2 changed files with 24 additions and 3 deletions

View File

@@ -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(() => {