Reorganized file tree, made Checkerboard a child of Layer

js/layers/Checkerboard.js

@@ -0,0 +1,81 @@
+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, this.canvasSize[0], this.canvasSize[1]);
+
+        // Cycling through the canvas (using it as a matrix)
+        for (let i=0; i<this.canvasSize[0] / this.checkerBoardSquareSize; i++) {
+            this.nSquaresFilled = 0;
+
+            for (let j=0; j<this.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 < this.canvasSize[0]) {
+                    rectX = i * this.checkerBoardSquareSize;
+                }
+                else {
+                    rectX = this.canvasSize[0];
+                }
+
+                if (j * this.checkerBoardSquareSize < this.canvasSize[1]) {
+                    rectY = j * this.checkerBoardSquareSize;
+                }
+                else {
+                    rectY = this.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;
+        }
+    }
+
+}