Source: squares-1.js

/**
 * @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});