34 lines
753 B
TypeScript
34 lines
753 B
TypeScript
import React, { useState } from "react";
|
|
import cn from "classnames";
|
|
import { Cell } from "../types";
|
|
import styles from "../styles/board.module.css";
|
|
|
|
interface BoardProps {
|
|
cells: Cell[];
|
|
cellWidth: number;
|
|
focusedCellIndex?: number;
|
|
onCellClick: (index: number) => void;
|
|
}
|
|
|
|
const Board = (props: BoardProps) => (
|
|
<div
|
|
className={styles.gridContainer}
|
|
style={{
|
|
gridTemplateColumns: `repeat(${props.cellWidth}, 1fr)`,
|
|
}}
|
|
>
|
|
{props.cells.map((cell, i) => (
|
|
<button
|
|
className={cn(styles.gridCell, {
|
|
[styles.cellClicked]: i === props.focusedCellIndex,
|
|
})}
|
|
onClick={() => props.onCellClick(i)}
|
|
>
|
|
{cell.piece}
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
|
|
export default Board;
|