function drawBoard(canvas, cellSize) {
const ctx = canvas.getContext('2d');
ctx.strokeStyle = '#000';
// Vertical lines
ctx.beginPath();
ctx.moveTo(cellSize, 0);
ctx.lineTo(cellSize, canvas.height);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(cellSize * 2, 0);
ctx.lineTo(cellSize * 2, canvas.height);
ctx.stroke();
// Horizontal lines
ctx.beginPath();
ctx.moveTo(0, cellSize);
ctx.lineTo(canvas.width, cellSize);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(0, cellSize * 2);
ctx.lineTo(canvas.width, cellSize * 2);
ctx.stroke();
}
function drawSymbol(canvas, cellSize, row, col, symbol) {
const ctx = canvas.getContext('2d');
ctx.font = `${cellSize}px sans-serif`;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.strokeText(symbol, (col + 0.5) * cellSize, (row + 0.5) * cellSize);
}
function handleClick(canvas, gameState) {
canvas.addEventListener('click', event => {
const rect = canvas.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
const col = Math.floor(x / gameState.cellSize);
const row = Math.floor(y / gameState.cellSize);
if (gameState.board[row][col] !== null) {
// Cell is already occupied
return;
}
gameState.board[row][col] = gameState.
