Before presenting my question, here is the relevant code snippet:
const App: FC = () => {
const [boardWidth, _setBoardWidth] = useState<number>(1400);
const [boardHeight, _setBoardHeight] = useState<number>(1000);
const [cellWidth, _setCellWidth] = useState<number>(50);
const [cellHeight, _setCellHeight] = useState<number>(50);
const [gameBoard, setGameBoard] = useState<number[][]>();
useEffect(() => {
setGameBoard(generateGameBoard());
}, [boardWidth, boardHeight]);
const generateGameBoard = (): number[][] => {
const numOfRows: number = boardHeight / cellHeight;
const numOfColumns: number = boardWidth / cellWidth;
let board: number[][] = [];
for (let i = 0; i < numOfRows; i++) {
board.push(new Array(numOfColumns).fill(Cell.DEAD));
}
return board;
};
return (
<div>
<div
className="gameBoard"
style={{ width: boardWidth, height: boardHeight }}
>
{gameBoard &&
gameBoard.map((row) =>
row.map((c, idx) => (
<div
key={idx}
className={`${c === Cell.ALIVE ? "alive" : "dead"} cell`}
style={{ height: cellHeight, width: cellWidth }}
/>
))
)}
</div>
</div>
);
};
export default App;
Next, I will include the corresponding CSS styling:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
}
#root {
height: 100vh;
}
.gameBoard {
border: 1px solid #e0e0e0;
box-shadow: 2px 3px 5px #e0e0e0;
margin-top: 20px;
display: flex;
flex-wrap: wrap;
}
.cell {
background: rgba(0, 0, 0, 0.5);
}
In this scenario, I expected a grid of 50x50 cells to span a 1400 x 1000 area, resulting in 20 rows with 28 cells each row. However, while the cells are correctly sized, there seems to be an issue where the rows are wrapping one cell short. You can view a screenshot highlighting this border discrepancy at https://gyazo.com/9a6ceb392816539b58c5ec08105bc305.
If anyone could provide assistance with resolving this matter, it would be greatly appreciated. Thank you.