Reorganized file tree, made Checkerboard a child of Layer

js/EditorState.js

@@ -18,6 +18,7 @@ const EditorState = (() => {
             document.getElementById('colors-menu').style.right = '200px'
     
             pixelEditorMode = 'Advanced';
+            document.getElementById("switch-mode-button").innerHTML = 'Switch to basic mode';
     
             //turn pixel grid off
             togglePixelGrid('off');
@@ -45,6 +46,7 @@ const EditorState = (() => {
             document.getElementById('colors-menu').style.right = '0px';
 
             pixelEditorMode = 'Basic';
+            document.getElementById("switch-mode-button").innerHTML = 'Switch to advanced mode';
             togglePixelGrid('on');
         }
     }

js/File.js

@@ -0,0 +1,12 @@
+// A file has layers
+    // It probably contains the LayerList, which should include the layers array
+// A file contains sprite scaling and canvas resizing
+
+/*
+    let canvasSize
+    let canvasView
+    let layerList
+
+    resizeCanvas()
+    scaleSprite()
+*/

js/Startup.js

@@ -39,8 +39,6 @@ const Startup = (() => {
         initLayers(width, height);
         initPalette();
 
-        //fill background of canvas with bg color
-        fillCheckerboard();
         fillPixelGrid();
 
         // Closing the "New Pixel dialogue"
@@ -111,7 +109,7 @@ const Startup = (() => {
         }
 
         // Adding the checkerboard behind it
-        checkerBoard = new Layer(width, height, checkerBoardCanvas);
+        checkerBoard = new Checkerboard(width, height, null);
 
         // Creating the vfx layer on top of everything
         VFXLayer = new Layer(width, height, 'vfx-canvas');

js/_checkerboard.js

@@ -1,71 +0,0 @@
-// This script contains all the functions used to manage the checkboard
-// Checkerboard color 1
-var firstCheckerBoardColor = 'rgba(179, 173, 182, 1)';
-// Checkerboard color 2
-var secondCheckerBoardColor = 'rgba(204, 200, 206, 1)';
-// Square size for the checkerboard
-var checkerBoardSquareSize = 16;
-// Checkerboard canvas
-var checkerBoardCanvas = document.getElementById('checkerboard');
-
-// Setting current colour (each square has a different colour
-var currentColor = firstCheckerBoardColor;
-// Saving number of squares filled until now
-var nSquaresFilled = 0;
-
-/** Fills the checkerboard canvas with squares with alternating colours
- * 
- */
-function fillCheckerboard() {
-    // Getting checkerboard context
-    var context = checkerBoard.context;
-    context.clearRect(0, 0, canvasSize[0], canvasSize[1]);
-
-    // Cycling through the canvas (using it as a matrix)
-    for (var i=0; i<canvasSize[0] / checkerBoardSquareSize; i++) {
-        nSquaresFilled = 0;
-
-        for (var j=0; j<canvasSize[1] / checkerBoardSquareSize; j++) {
-            var rectX;
-            var rectY;
-
-            // Managing the not perfect squares (the ones at the sides if the canvas' sizes are not powers of checkerBoardSquareSize
-            if (i * checkerBoardSquareSize < canvasSize[0]) {
-                rectX = i * checkerBoardSquareSize;
-            }
-            else {
-                rectX = canvasSize[0];
-            }
-
-            if (j * checkerBoardSquareSize < canvasSize[1]) {
-                rectY = j * checkerBoardSquareSize;
-            }
-            else {
-                rectY = canvasSize[1];
-            }
-
-            // Selecting the colour
-            context.fillStyle = currentColor;
-            context.fillRect(rectX, rectY, checkerBoardSquareSize, checkerBoardSquareSize);
-
-            // Changing colour
-            changeCheckerboardColor();
-
-            nSquaresFilled++;
-        }
-
-        // If the number of filled squares was even, I change colour for the next column
-        if ((nSquaresFilled % 2) == 0) {
-            changeCheckerboardColor();
-        }
-    }
-}
-
-// Simply switches the checkerboard colour
-function changeCheckerboardColor(isVertical) {
-    if (currentColor == firstCheckerBoardColor) {
-        currentColor = secondCheckerBoardColor;
-    } else if (currentColor == secondCheckerBoardColor) {
-        currentColor = firstCheckerBoardColor;
-    }
-}

js/_resizeCanvas.js

@@ -140,7 +140,7 @@ function resizeCanvas(event, size, customData, saveHistory = true) {
     }
 
     // Regenerate the checkerboard
-    fillCheckerboard();
+    checkerBoard.fillCheckerboard();
     fillPixelGrid();
     // Put the imageDatas in the right position
     switch (rcPivot)

js/data/variables.js

@@ -30,4 +30,6 @@ var pixelGrid;
 
 // REFACTOR: I was thinking that the special layers (pixel grid, checkerboard ecc) could be an extension
 // or a variatin of the standard Layer class? I wonder if we can use inheritance or something to
-// recycle stuff
+// recycle stuff
+
+let checkerBoard;

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

js/pixel-editor.js

@@ -1,7 +1,7 @@
 /**utilities**/
 //=include lib/cookies.js
 //=include _jscolor.js
-//=include _variables.js
+//=include data/variables.js
 //=include lib/sortable.js
 //=include Util.js
 //=include Events.js
@@ -29,10 +29,13 @@
 //=include tools/MoveSelectionTool.js
 
 /**init**/
-//=include _consts.js
+//=include data/consts.js
 //=include Settings.js
 //=include LayerList.js
-//=include Layer.js
+//=include layers/Layer.js
+//=include layers/Checkerboard.js
+//=include layers/PixelGrid.js
+
 //=include Startup.js
 //=include _pixelGrid.js
 //=include EditorState.js
@@ -40,7 +43,7 @@
 
 /**dropdown formatting**/
 //=include PresetModule.js
-//=include _palettes.js
+//=include data/palettes.js
 
 /**functions**/
 //=include _checkerboard.js