Various changes

	- added `/:paletteSlug/:resolution` functionality for localhost testing
	- created `currFile.sublayers` for *things that should zoom with the canvas layers*
	- `currFile.layers` now solely contains the canvas layers
	- added `getProjectData` to `FileManager`'s exported methods
	---
	- added `FileManager.localStorageSave` (it's basically just: localStorage.setItem("lpe-cache",FileManager.getProjectData()))
	- added `FileManager.localStorageCheck` (it's basically just: `!!localStorage.getItem("lpe-cache")`)
	- added `FileManager.localStorageLoad` (it's basically just: `return localStorage.getItem("lpe-cache")`)
	- added `FileManager.localStorageReset` (for debugging purity)
	---
	- calling `FileManager.localStorageSave()` on mouse up (we should stress test this)
	---
	- changed lpe file format to `{canvasWidth:number,canvasHeight:number,selectedLayer:number,colors:[],layers:[]}`
	- added backward compatibility for the old lpe file format
	---
	- added some canvas utility functions in `canvas_util`
	- added Unsettled's color similarity utility functions in `color_util2`
	---
	- html boilerplate - wang tiles
	-
	- POC - tiny text boilerplate
	- POC - tiny text font scraper
	---
	- WIP - added two optional url route parameters `/:paletteSlug/:resolution/:prefillWidth/:prefillBinaryStr`
	- WIP POC - hbs_parser.js (outputs tree data about hbs file relationships)

Author: pxlvxl

css/_canvas.scss

@@ -24,12 +24,12 @@
 	height: 400px;
 	position: fixed;
 	display: none;
-	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.64);
 	background-color: transparent;
 }
 
 #checkerboard {
 	z-index: 1;
+	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.64);
 }
 
 #pixel-canvas {

hbs_parser.js

@@ -0,0 +1,52 @@
+const fs = require('fs');
+const path = require('path');
+const HANDLEBARS = require('handlebars');
+const sass = require('sass');
+
+const result = sass.compile('./css/pixel-editor.scss');
+fs.writeFileSync("./css/pixel-editor.css",result.css);
+
+// fs.readFile('/css/pixel-editor.scss', function(err, scssFile) {
+//   compiler.compile(scssFile.toString(), function(err, css) {
+//   });
+// });
+
+const hbsArr = [
+    ...fs.readdirSync("./views/").filter(n=>n.slice(-3)==="hbs").map(n=>"./views/" + n),
+    ...fs.readdirSync("./views/components/").filter(n=>n.slice(-3)==="hbs").map(n=>"./views/components/" + n),
+    ...fs.readdirSync("./views/logs/").filter(n=>n.slice(-3)==="hbs").map(n=>"./views/logs/" + n),
+    ...fs.readdirSync("./views/popups/").filter(n=>n.slice(-3)==="hbs").map(n=>"./views/popups/" + n),
+];
+const HBS_STR_MAP = {};
+const HBS_SPEC_MAP = {};
+const HBS_TEMPLATE_MAP = {};
+const HBS_META_DATA = hbsArr.reduce((r,filePath,i)=>{
+
+    const fileStr = fs.readFileSync(filePath,"utf8");
+    const sp0 = fileStr.split("{{> ").slice(1);
+    const partialArr = sp0.map(n=>n.split("}}")[0]);
+    const sp1 = fileStr.split("{{").slice(1);
+
+    if(sp0.length || sp1.length) {
+        const dblCurlsArr = sp1.map(n=>n.split("}}")[0]);
+
+        HBS_STR_MAP[filePath] = fileStr;
+
+        HBS_SPEC_MAP[filePath] = HANDLEBARS.precompile(fileStr);
+        // HBS_TEMPLATE_MAP[filePath] = HANDLEBARS.template(HBS_SPEC_MAP[filePath]);
+
+        r[filePath] = {
+            fileStr,
+            filePath,
+            dblCurlsArr,
+            partialArr
+        };
+    }
+    
+    return r;
+},{});
+
+fs.writeFileSync(
+    "./js/HBS_META_DATA.js",
+    "const HBS_META_DATA = " + JSON.stringify(HBS_META_DATA,null,4)
+);

images/icons_14x14.png

@@ -30,7 +30,7 @@ class Color {
                 this.hsv = Color.rgbToHsv(this.rgb);
                 break;
             default:
-                console.error("Unsupported color mode " + fmt);
+                //console.error("Unsupported color mode " + fmt);
                 break;
         }
     }

images/le_button_18x19.png

@@ -57,7 +57,7 @@ const ColorModule = (() => {
             if (newColorHex == colors[i].jscolor.toString()) {
                 //if the color isnt the one that has the picker currently open
                 if (!colors[i].parentElement.classList.contains('jscolor-active')) {
-                    //console.log('%cColor is duplicate', colorCheckingStyle);
+                    //////console.log('%cColor is duplicate', colorCheckingStyle);
 
                     //show the duplicate color warning
                     duplicateColorWarning.style.visibility = 'visible';
@@ -251,7 +251,7 @@ const ColorModule = (() => {
 
             //loop through colors
             for (var i = 0; i < colors.length; i++) {
-                //console.log(color,'=',colors[i].jscolor.toString());
+                //////console.log(color,'=',colors[i].jscolor.toString());
 
                 if (color == colors[i].jscolor.toString()) {
                     //set color to the color button
@@ -346,7 +346,7 @@ const ColorModule = (() => {
      * @param {*} paletteColors The colours of the palette
      */
     function createColorPalette(paletteColors) {
-        console.log("creating palette");
+        ////console.log("creating palette");
         //remove current palette
         while (colorsMenu.childElementCount > 1)
             colorsMenu.children[0].remove();
@@ -358,7 +358,7 @@ const ColorModule = (() => {
         for (var i = 0; i < paletteColors.length; i++) {
             var newColor = new Color("hex", paletteColors[i]);
             var newColorElement = ColorModule.addColor(newColor.hex);
-
+            ////console.log('newColor.hex === ',newColor.hex);
             var newColRgb = newColor.rgb;
 
             var lightestColorRgb = lightestColor.rgb;
@@ -382,6 +382,8 @@ const ColorModule = (() => {
 
         //set as current color
         updateCurrentColor(darkestColor.hex);
+
+        ////console.log('getCurrentPalette() === ',getCurrentPalette());
     }
 
     /** Creates the palette with the colours used in all the layers
@@ -421,7 +423,7 @@ const ColorModule = (() => {
         //create palette from colors array
         createColorPalette(colorPaletteArray);
 
-        console.log("Done 2");
+        ////console.log("Done 2");
     }
 
     function updateCurrentColor(color, refLayer) {

images/lospec_mock1.png

@@ -696,7 +696,7 @@ const ColorPicker = (() => {
                 }
                 break;
             default:
-                console.log("How did you select the " + currentPickingMode + ", hackerman?");
+                ////console.log("How did you select the " + currentPickingMode + ", hackerman?");
                 break;
         }
 

images/lospec_mock2.png

@@ -5,7 +5,7 @@ const Dialogue = (() => {
     let currentOpenDialogue = "";
     let dialogueOpen = true;
 
-    const popUpContainer = document.getElementById("pop-up-container");
+    const popUpContainer = document.getElementById("pop-up-container") ?? document.createElement("div");
     const cancelButtons = popUpContainer.getElementsByClassName('close-button');
 
     Events.onCustom("esc-pressed", closeDialogue);
@@ -31,6 +31,9 @@ const Dialogue = (() => {
      * @param {*} trackEvent Should I track the GA event?
      */
     function showDialogue (dialogueName, trackEvent) {
+
+        
+
         if (typeof trackEvent === 'undefined') trackEvent = true; 
 
         // Updating currently open dialogue
@@ -83,4 +86,4 @@ const Dialogue = (() => {
     }
 })();
 
-console.log("Dialog: " + Dialogue);
+////console.log("Dialog: " + Dialogue);

images/rotate_test_8x8_x16.png

@@ -9,8 +9,10 @@ const EditorState = (() => {
         return pixelEditorMode;
     }
 
-    function switchMode(newMode) {
-        if (!firstFile && newMode == "Basic" && !confirm('Switching to basic mode will flatten all the visible layers. Are you sure you want to continue?')) {
+    function switchMode(newMode, skipConfirm = false) {
+        ////console.trace();
+        const switchText = 'Switching to basic mode will flatten all the visible layers. Are you sure you want to continue?';
+        if (!firstFile && newMode == "Basic" && !skipConfirm && !confirm(switchText)) {
             return;
         }
         //switch to advanced mode

images/sked_tree_32x32.png

@@ -100,8 +100,9 @@ const Events = (() => {
      */
      function on(event, elementId, functionCallback, ...args) {
         //if element provided is string, get the actual element
+        if(!elementId)return;
         const element = Util.getElement(elementId);
-
+        if(!element)return;
         element.addEventListener(event,
         function (e) {
             functionCallback(...args, e);

images/sked_x1.png

@@ -2,11 +2,12 @@ class File {
     // Canvas, canvas state
     canvasSize = [];
     zoom = 7;
-    canvasView = document.getElementById("canvas-view");
+    canvasView = document.getElementById("canvas-view") ?? document.createElement("canvas");
     inited = false;
 
     // Layers
     layers = [];
+    sublayers = [];
     currentLayer = undefined;
     VFXLayer = undefined;
     TMPLayer = undefined;
@@ -129,11 +130,9 @@ class File {
 
         // Save all imageDatas
         for (let i=0; i<currFile.layers.length; i++) {
-            if (currFile.layers[i].hasCanvas()) {
-                imageDatas.push(currFile.layers[i].context.getImageData(
-                    0, 0, currFile.canvasSize[0], currFile.canvasSize[1])
-                );
-            }
+            imageDatas.push(currFile.layers[i].context.getImageData(
+                0, 0, currFile.canvasSize[0], currFile.canvasSize[1])
+            );
         }
 
         // Saving the history only if I'm not already undoing or redoing
@@ -154,16 +153,20 @@ class File {
         currFile.canvasSize[1] = parseInt(currFile.canvasSize[1]) + 
             this.rcBorders.top + this.rcBorders.bottom;
 
-        console.trace();
-        console.log(currFile.canvasSize);
+        ////console.trace();
+        ////console.log(currFile.canvasSize);
 
         // Resize the canvases
         for (let i=0; i<currFile.layers.length; i++) {
             currFile.layers[i].canvas.width = currFile.canvasSize[0];
             currFile.layers[i].canvas.height = currFile.canvasSize[1];
-
             currFile.layers[i].resize();
         }
+        for (let i=0; i<currFile.sublayers.length; i++) {
+            currFile.sublayers[i].canvas.width = currFile.canvasSize[0];
+            currFile.sublayers[i].canvas.height = currFile.canvasSize[1];
+            currFile.sublayers[i].resize();
+        }
 
         // Regenerate the checkerboard
         currFile.checkerBoard.fillCheckerboard();
@@ -213,16 +216,14 @@ class File {
 
         // Putting all the data for each layer with the right offsets (decided by the pivot)
         for (let i=0; i<currFile.layers.length; i++) {
-            if (currFile.layers[i].hasCanvas()) {
-                if (customData == undefined) {
-                    currFile.layers[i].context.putImageData(imageDatas[copiedDataIndex], leftOffset, topOffset);
-                }
-                else {
-                    currFile.layers[i].context.putImageData(customData[copiedDataIndex], 0, 0);
-                }
-                currFile.layers[i].updateLayerPreview();
-                copiedDataIndex++;
+            if (customData == undefined) {
+                currFile.layers[i].context.putImageData(imageDatas[copiedDataIndex], leftOffset, topOffset);
+            }
+            else {
+                currFile.layers[i].context.putImageData(customData[copiedDataIndex], 0, 0);
             }
+            currFile.layers[i].updateLayerPreview();
+            copiedDataIndex++;
         }
 
         Dialogue.closeDialogue();
@@ -246,7 +247,7 @@ class File {
         this.rcPivot = "topleft";
 
         // Computing the min and max coordinates in which there's a non empty pixel
-        for (let i=1; i<currFile.layers.length - nAppLayers; i++) {
+        for (let i=0; i<currFile.layers.length; i++) {
             let imageData = currFile.layers[i].context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]);
             let pixelPosition;
 
@@ -291,12 +292,10 @@ class File {
 
         // Saving the data
         for (let i=0; i<currFile.layers.length; i++) {
-            if (currFile.layers[i].hasCanvas()) {
-                imageDatas.push(currFile.layers[i].context.getImageData(minX - 1, currFile.layers[i].canvasSize[1] - maxY, maxX-minX + 1, maxY-minY + 1));
-            }
+            imageDatas.push(currFile.layers[i].context.getImageData(minX - 1, currFile.layers[i].canvasSize[1] - maxY, maxX-minX + 1, maxY-minY + 1));
         }
 
-        //console.log("sx: " + borders.left + "dx: " + borders.right + "top: " + borders.top + "btm: " + borders.bottom);
+        //////console.log("sx: " + borders.left + "dx: " + borders.right + "top: " + borders.top + "btm: " + borders.bottom);
 
         document.getElementById("rc-border-left").value = this.rcBorders.left;
         document.getElementById("rc-border-right").value = this.rcBorders.right;
@@ -430,11 +429,9 @@ class File {
 
         // Get all the image datas
         for (let i=0; i<currFile.layers.length; i++) {
-            if (currFile.layers[i].hasCanvas()) {
-                rsImageDatas.push(currFile.layers[i].context.getImageData(
-                    0, 0, currFile.canvasSize[0], currFile.canvasSize[1])
-                );
-            }
+            rsImageDatas.push(currFile.layers[i].context.getImageData(
+                0, 0, currFile.canvasSize[0], currFile.canvasSize[1])
+            );
         }
 
         // event is null when the user is undoing
@@ -450,13 +447,11 @@ class File {
 
         // Put the image datas on the new canvases
         for (let i=0; i<currFile.layers.length; i++) {
-            if (currFile.layers[i].hasCanvas()) {
-                currFile.layers[i].context.putImageData(
-                    this.resizeImageData(rsImageDatas[layerIndex], newWidth, newHeight, this.currentAlgo), 0, 0
-                );
-                currFile.layers[i].updateLayerPreview();
-                layerIndex++;
-            }
+            currFile.layers[i].context.putImageData(
+                this.resizeImageData(rsImageDatas[layerIndex], newWidth, newHeight, this.currentAlgo), 0, 0
+            );
+            currFile.layers[i].updateLayerPreview();
+            layerIndex++;
         }
 
         // Updating start values when I finish scaling the sprite