/**
* @fileoverview Functions to draw a game board with squares
* @author Robert Laing
* @module squares
*/
/**
* Convert row and colum indexes to centre x and y points (squares.rowcol2xy).
* @function module:squares~rowcol2xy
* @param {number} row - indexed from 0 top down
* @param {number} col - indexed from 0 left to right
* @param {number} sideLength - square dimension
* @returns {Array} [centerX, centerY]
*/
function rowcol2xy(row, col, sideLength) {
const centerX = (col * sideLength) + sideLength/2;
const centerY = (row * sideLength) + sideLength/2;
return [centerX, centerY];
}
/**
* Convert colum and row indexes to centre x and y points (squares.rowcol2xy).
* @function module:squares~rowcol2xy
* @param {number} col - indexed from 0 left to right
* @param {number} row - indexed from 0 top down
* @param {number} sideLength - square dimension
* @returns {Array} [centerX, centerY]
*/
function colrow2xy(col, row, sideLength) {
const centerX = (col * sideLength) + sideLength/2;
const centerY = (row * sideLength) + sideLength/2;
return [centerX, centerY];
}
/**
* Fill a square with a given colour (squares.fill).
* @function module:squares~fill
* @param {CanvasRenderingContext2D} ctx - for either HTML element or equivalent for OffscreenCanvas
* @param {number} column - indexed from 0
* @param {number} row - indexed from 0
* @param {pixels} sideLength - square dimension
* @param {string} colour - for ctx.fillStyle
*/
function fill(ctx, column, row, sideLength, colour) {
const x = column * sideLength;
const y = row * sideLength;
ctx.fillStyle = colour;
ctx.fillRect(x, y, sideLength, sideLength);
}
/**
* Fill a square with a given colour (squares.stroke).
* @function module:squares~stroke
* @param {CanvasRenderingContext2D} ctx - for either HTML element or equivalent for OffscreenCanvas
* @param {number} column - indexed from 0
* @param {number} row - indexed from 0
* @param {pixels} sideLength - square dimension
* @param {string} colour - for ctx.fillStyle
* @param {pixels} lineWidth - for ctx.lineWidth
*/
function stroke(ctx, column, row, sideLength, colour, lineWidth) {
const x = column * sideLength;
const y = row * sideLength;
ctx.save();
ctx.lineWidth = lineWidth;
ctx.strokeStyle = colour;
ctx.strokeRect(x, y, sideLength, sideLength);
ctx.restore();
}
/**
* Draw a tictactoe-style board (squares.innerGrid).
* @function module:squares~innerGrid
* @param {CanvasRenderingContext2D} ctx - for either HTML element or equivalent for OffscreenCanvas
* @param {number} rows - number of squares from top to bottom
* @param {number} columns - number of squares from left to right
* @param {number} sideLength - square dimension
* @param {string} colour - for ctx.fillStyle
* @param {number} lineWidth - for ctx.lineWidth
*/
function innerGrid(ctx, rows, columns, sideLength, colour, lineWidth) {
let row;
let col;
ctx.lineWidth = lineWidth;
ctx.lineCap = "round";
ctx.strokeStyle = colour;
ctx.beginPath();
for (row = 1; row < rows; row +=1) {
ctx.moveTo(lineWidth/2, row * sideLength);
ctx.lineTo(window.canvas.width - lineWidth/2, row * sideLength);
}
for (col = 1; col < columns; col +=1) {
ctx.moveTo(col * sideLength, lineWidth/2);
ctx.lineTo(col * sideLength, window.canvas.height - lineWidth/2);
}
ctx.stroke();
}
export default Object.freeze({rowcol2xy, colrow2xy, fill, stroke, innerGrid});