pixel-editor/js/layers/Checkerboard.js

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;
}
}
}