Module: squares

Functions to draw a game board with squares
Author:
  • Robert Laing
Source:

Methods

(inner) colrow2xy(coordinatees, row, column, spine) → {Array}

Convert row and colum indexes to center x and y coordinates for drawing procedures (squares.rowcol2xy). Something I learnt from jslint writing this is "Don't declare variables in a switch."
Parameters:
Name Type Description
coordinatees string "odd-row", "even-row", "odd-col", "even-col"
row number indexed from 0
column number indexed from 0
spine number hex side length
Source:
Returns:
[xCenter, yCenter] for canvas drawing procedures
Type
Array

(inner) fill(ctx, column, row, sideLength, colour)

Fill a square with a given colour (squares.fill).
Parameters:
Name Type Description
ctx CanvasRenderingContext2D for either HTML element or equivalent for OffscreenCanvas
column number indexed from 0
row number indexed from 0
sideLength pixels square dimension
colour string for ctx.fillStyle
Source:

(inner) innerGrid(ctx, rows, columns, sideLength, colour, lineWidth)

Draw a tictactoe-style board (squares.innerGrid).
Parameters:
Name Type Description
ctx CanvasRenderingContext2D for either HTML element or equivalent for OffscreenCanvas
rows number number of squares from top to bottom
columns number number of squares from left to right
sideLength number square dimension
colour string for ctx.fillStyle
lineWidth number for ctx.lineWidth
Source:

(inner) rowcol2xy(row, col, sideLength) → {Array}

Convert row and colum indexes to centre x and y points (squares.rowcol2xy).
Parameters:
Name Type Description
row number indexed from 0 top down
col number indexed from 0 left to right
sideLength number square dimension
Source:
Returns:
[centerX, centerY]
Type
Array

(inner) rowcol2xy(col, row, sideLength) → {Array}

Convert colum and row indexes to centre x and y points (squares.rowcol2xy).
Parameters:
Name Type Description
col number indexed from 0 left to right
row number indexed from 0 top down
sideLength number square dimension
Source:
Returns:
[centerX, centerY]
Type
Array

(inner) stroke(ctx, column, row, sideLength, colour, lineWidth)

Fill a square with a given colour (squares.stroke).
Parameters:
Name Type Description
ctx CanvasRenderingContext2D for either HTML element or equivalent for OffscreenCanvas
column number indexed from 0
row number indexed from 0
sideLength pixels square dimension
colour string for ctx.fillStyle
lineWidth pixels for ctx.lineWidth
Source:

(inner) xy2colrow(coordinatees, x, y, spine) → {Array}

Convert pointer x,y coordiantes to row and colum indexes (squares.xy2colrow).
Parameters:
Name Type Description
coordinatees string "odd-row", "even-row", "odd-col", "even-col"
x number event.offsetX
y number event.offsetY
spine number hex side length
Source:
Returns:
[row, col] indexed from 0
Type
Array