12345678910111213141516171819202122232425262728293031323334353637 |
- import React, { useState } from 'react';
- import Cell from './Cell';
-
- interface Props {
- width?: number;
- height?: number;
- }
-
- const Board = (props: Props) => {
- const width = props.width ?? 5;
- const height = props.height ?? 5;
-
- const initialGrid: boolean[][] = Array(height).fill(Array(width).fill(false));
- const [grid, setGrid] = useState<boolean[][]>(initialGrid);
-
- const toggle = (x: number, y: number) => {
- const newGrid = [...grid];
- const newRow = [...newGrid[y]];
- newRow[x] = !newGrid[y][x];
- newGrid[y] = newRow;
- setGrid(newGrid);
- };
-
- return (
- <div className="board">
- {grid.map((row, y) => (
- <div className="row" key={y}>
- {row.map((cell, x) => (
- <Cell x={x} y={y} alive={cell} toggle={toggle} key={x} />
- ))}
- </div>
- ))}
- </div>
- );
- };
-
- export default Board;
|