Game of Life

1'use client';
2 
3import { cn } from '@/lib/utils';
4import * as React from 'react';
5 
6interface GameOfLifeProps
7  extends React.CanvasHTMLAttributes<HTMLCanvasElement> {
8  size?: number;
9  interval?: number;
10  backgroundColor?: string;
11  cellColor?: string;
12  density?: number; // Value between 0 and 1, default 0.1 (10% cells alive)
13}
14 
15const GameOfLife = React.forwardRef<HTMLCanvasElement, GameOfLifeProps>(
16  (
17    {
18      className,
19      size = 12,
20      interval = 150,
21      backgroundColor = '#000000',
22      cellColor = '#1e1e1e',
23      density = 0.1,
24      ...props
25    },
26    ref
27  ) => {
28    const canvasRef = React.useRef<HTMLCanvasElement | null>(null);
29    const frameRef = React.useRef<number>(0);
30    const gridRef = React.useRef<boolean[][]>([]);
31    const lastUpdateRef = React.useRef<number>(0);
32    const transitionRef = React.useRef<{
33      from: boolean[][];
34      to: boolean[][];
35      progress: number;
36    } | null>(null);
37    const [isReady, setIsReady] = React.useState(false);
38    const isInitialRender = React.useRef(true);
39 
40    React.useEffect(() => {
41      const canvas = canvasRef.current;
42      if (!canvas) return;
43 
44      const ctx = canvas.getContext('2d', { alpha: false });
45      if (!ctx) return;
46 
47      const parent = canvas.parentElement;
48      if (!parent) return;
49 
50      // Keep size constant
51      const cellSize = size;
52      let width = parent.clientWidth;
53      let height = parent.clientHeight;
54      let cols = Math.floor(width / cellSize);
55      let rows = Math.floor(height / cellSize);
56 
57      const createGrid = (): boolean[][] => {
58        const parent = canvas.parentElement;
59        if (!parent)
60          return Array.from({ length: cols }, () =>
61            new Array(rows).fill(false)
62          );
63 
64        width = parent.clientWidth;
65        height = parent.clientHeight;
66        cols = Math.floor(width / cellSize);
67        rows = Math.floor(height / cellSize);
68 
69        // Update canvas size to match parent
70        canvas.width = width;
71        canvas.height = height;
72 
73        // Create a random initial pattern based on density prop
74        const grid = Array.from({ length: cols }, () =>
75          Array.from({ length: rows }, () => Math.random() < density)
76        );
77 
78        return grid;
79      };
80 
81      const updateGrid = (grid: boolean[][]): boolean[][] => {
82        const next: boolean[][] = Array.from({ length: cols }, () =>
83          new Array(rows).fill(false)
84        );
85 
86        for (let i = 0; i < cols; i++) {
87// … truncated