81 lines
2.9 KiB
JavaScript
81 lines
2.9 KiB
JavaScript
class Checkerboard extends Layer {
|
|
// Checkerboard color 1
|
|
firstCheckerBoardColor = 'rgba(179, 173, 182, 1)';
|
|
// Checkerboard color 2
|
|
secondCheckerBoardColor = 'rgba(204, 200, 206, 1)';
|
|
// Square size for the checkerboard
|
|
checkerBoardSquareSize = 16;
|
|
|
|
// Setting current colour (each square has a different colour
|
|
currentColor = undefined;
|
|
// Saving number of squares filled until now
|
|
nSquaresFilled = 0;
|
|
|
|
constructor(width, height, canvas, menuEntry) {
|
|
super(width, height, document.getElementById('checkerboard'), menuEntry);
|
|
this.initialize();
|
|
}
|
|
|
|
initialize() {
|
|
super.initialize();
|
|
////console.log("Square size: " + this.checkerBoardSquareSize);
|
|
this.currentColor = this.firstCheckerBoardColor;
|
|
this.fillCheckerboard();
|
|
}
|
|
|
|
/** Fills the checkerboard canvas with squares with alternating colours
|
|
*
|
|
*/
|
|
fillCheckerboard() {
|
|
this.context.clearRect(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]);
|
|
|
|
// Cycling through the canvas (using it as a matrix)
|
|
for (let i=0; i<currFile.canvasSize[0] / this.checkerBoardSquareSize; i++) {
|
|
this.nSquaresFilled = 0;
|
|
|
|
for (let j=0; j<currFile.canvasSize[1] / this.checkerBoardSquareSize; j++) {
|
|
let rectX;
|
|
let rectY;
|
|
|
|
// Managing the not perfect squares (the ones at the sides if the canvas' sizes are not powers of checkerBoardSquareSize
|
|
if (i * this.checkerBoardSquareSize < currFile.canvasSize[0]) {
|
|
rectX = i * this.checkerBoardSquareSize;
|
|
}
|
|
else {
|
|
rectX = currFile.canvasSize[0];
|
|
}
|
|
|
|
if (j * this.checkerBoardSquareSize < currFile.canvasSize[1]) {
|
|
rectY = j * this.checkerBoardSquareSize;
|
|
}
|
|
else {
|
|
rectY = currFile.canvasSize[1];
|
|
}
|
|
|
|
// Selecting the colour
|
|
this.context.fillStyle = this.currentColor;
|
|
this.context.fillRect(rectX, rectY, this.checkerBoardSquareSize, this.checkerBoardSquareSize);
|
|
|
|
// Changing colour
|
|
this.changeCheckerboardColor();
|
|
this.nSquaresFilled++;
|
|
}
|
|
|
|
// If the number of filled squares was even, I change colour for the next column
|
|
if ((this.nSquaresFilled % 2) == 0) {
|
|
this.changeCheckerboardColor();
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Simply switches the checkerboard colour
|
|
changeCheckerboardColor() {
|
|
if (this.currentColor == this.firstCheckerBoardColor) {
|
|
this.currentColor = this.secondCheckerBoardColor;
|
|
} else if (this.currentColor == this.secondCheckerBoardColor) {
|
|
this.currentColor = this.firstCheckerBoardColor;
|
|
}
|
|
}
|
|
|
|
} |