made pixel grid switch on by default for basic mode, and off for advanced mode

js/_editorMode.js

@@ -30,6 +30,9 @@ function switchMode(mustConfirm = true) {
 		document.querySelector('#sp-quickstart-container .mode-switcher').classList.add('advanced-mode');
 
         pixelEditorMode = 'Advanced';
+
+		//turn pixel grid off
+		togglePixelGrid('off');
     }
     //switch to basic mode
     else {
@@ -64,6 +67,7 @@ function switchMode(mustConfirm = true) {
 		document.querySelector('#sp-quickstart-container .mode-switcher').classList.remove('advanced-mode');
 
 		pixelEditorMode = 'Basic';
+		togglePixelGrid('on');
     }
 }
 

js/_pixelGrid.js

@@ -2,8 +2,8 @@
 let pixelGridColor = "#000000";
 // Distance between one line and another in HTML pixels
 let lineDistance = 12;
-// The grid is not visible at the beginning
-let pixelGridVisible = false;
+// The grid is visible by default
+let pixelGridVisible = true;
 // Saving the canvas containing the pixel grid
 pixelGridCanvas = document.getElementById("pixel-grid");
 
@@ -11,12 +11,15 @@ pixelGridCanvas = document.getElementById("pixel-grid");
  *  (triggered by the show pixel grid button in the top menu)
  * 
  */
-function togglePixelGrid(event) {
+function togglePixelGrid(newState) {
+	console.log('toggling pixel grid', newState)
     // Getting the button because I have to change its text
     let button = document.getElementById("toggle-pixelgrid-button");
 
-    // Toggling the state
-    pixelGridVisible = !pixelGridVisible;
+    //Set the state based on the passed newState variable, otherwise just toggle it
+	if (newState == 'on') pixelGridVisible = true;
+	else if (newState == 'off') pixelGridVisible = false;
+	else pixelGridVisible = !pixelGridVisible;
 
     // If it was visible, I hide it
     if (pixelGridVisible) {