import { buildBoard, Cell, directions, Exit } from "interface";

const GameBoard = () => {
  const board: Cell[][] = buildBoard();

  return (
    <div className="game-board">
      {board.flatMap((row) =>
        row.map((cell) => (
          <div className={"cell " + cell.cellType.toLowerCase()}>
            {directions.map((direction) => {
              const traversedNode = cell.getNodeAt(direction).traverseBorder();
              const isExit = traversedNode instanceof Exit;
              if (!isExit) return;
              const className =
                `exit-${direction.toLowerCase()}` +
                ` exit-${(traversedNode as Exit).type.toLowerCase()}`;
              return (
                <div className="exit">
                  <div className={className} />
                </div>
              );
            })}
          </div>
        )),
      )}
    </div>
  );
};

export default GameBoard;
