ported to static site, removed _ext folder, split hbs files into partials

Author: skeddles

build.js

@@ -2,11 +2,11 @@ const fs = require('fs');
 const path = require('path');
 const gulp = require('gulp');
 const include = require('gulp-include');
-const hb = require('gulp-hb');
+const handlebars = require('gulp-hb');
 const sass = require('gulp-sass');
 const rename = require('gulp-rename');
 
-const hb_svg = require('handlebars-helper-svg');
+//const hb_svg = require('handlebars-helper-svg');
 
 const BUILDDIR = process.argv[2] || './build/';
 
@@ -30,7 +30,6 @@ function copy_logs() {
 function render_js(){
     gulp.src('./js/*.js')
         .pipe(include({includePaths: [
-            '_ext/scripts',
             'js',
             '!js/_*.js',
         ]}))
@@ -41,16 +40,18 @@ function render_js(){
 
 function render_css(){
     gulp.src('css/*.scss')
-        .pipe(sass({includePaths: ['css', '_ext/sass', '_ext/modules/css']}))
+        .pipe(sass({includePaths: ['css']}))
         .pipe(gulp.dest(BUILDDIR));
 }
 
 function compile_page(){
     gulp.src(path.join('./views/index.hbs'))
-        .pipe(hb({encoding: 'utf8'})
-            .partials('./_ext/modules/_*.hbs')
-            .helpers({ svg: hb_svg })
-            .helpers('./_ext/modules/hbs/helpers/**/*.js')
+		.pipe(include({includePaths: ['/svg']}))
+
+        .pipe(handlebars({encoding: 'utf8', debug: true, bustCache: true})
+            .partials('./views/[!index]*.hbs')
+            //.helpers({ svg: hb_svg })
+            .helpers('./helpers/**/*.js')
             .data({
                 projectSlug: 'pixel-editor',
                 title: 'Lospec Pixel Editor',

_ext/sass/_zindex.scss css/_zindex.scss

@@ -296,7 +296,7 @@ svg {
 }
 
 .drawingCanvas {
-	cursor: url('/pixel-art-where-to-start/pencil-tool-cursor.png');
+	cursor: url('/pixel-editor/pencil-tool-cursor.png');
 
 	border: solid 1px #fff;
 	image-rendering: optimizeSpeed;

css/pixel-editor.scss

@@ -0,0 +1,41 @@
+const fs = require("fs");
+const handlebars = require("handlebars");
+const ltx = require("ltx");
+const resolve = require("resolve");
+
+const path = "../svg/";
+const nameToModule = {};
+const cache = {};
+
+module.exports = function (name, opts) {
+	name = path + name;
+
+	const mod =
+		nameToModule[name] ||
+		(nameToModule[name] = resolve.sync(name, {
+			extensions: [".svg"],
+		}));
+
+	const content =
+		cache[name] || (cache[name] = fs.readFileSync(mod, "utf-8"));
+
+	const svg = parse(content);
+
+	Object.assign(svg.attrs, opts.hash);
+
+	return new handlebars.SafeString(svg.root().toString());
+};
+
+module.exports.cache = cache;
+
+function parse(xml, mod) {
+	const svg = ltx.parse(xml);
+	if (svg.name != "svg") {
+		throw new TypeError("Input must be an SVG");
+	}
+
+	delete svg.attrs.xmlns;
+	delete svg.attrs["xmlns:xlink"];
+
+	return svg;
+}

helpers/svg.js

@@ -103,7 +103,7 @@ function newPixel (width, height, editorMode, fileContent = null) {
 
 	// If the user selected a palette and isn't opening a file, I load the selected palette
 	if (selectedPalette != 'Choose a palette...' && fileContent == null) {
-
+		console.log('HELO', selectedPalette, palettes[selectedPalette])
 		//if this palette isnt the one specified in the url, then reset the url
 		if (!palettes[selectedPalette].specified)
 		  history.pushState(null, null, '/pixel-editor');

js/_logs.js

@@ -1,17 +1,68 @@
+
+
+
+
 //when the page is done loading, you can get ready to start
 window.onload = function () {
 
     featureToggles.onLoad();
 
     currentTool.updateCursor();
+	
+	//check if there are any url parameters
+	if (window.location.pathname.replace('/pixel-editor/','').length <= 1)  {
+		console.log('no url parameters were found');
+
+		//show splash screen
+		showDialogue('splash', false);
+	}
+
+	//url parameters were specified
+	else {
+		console.log('loading preset from url parameters', window.location.pathname);
+
+		let args = window.location.pathname.split('/');
+		let paletteSlug = args[2];
+		let dimentions = args[3];
+
+		//fetch palette via lospec palette API
+		fetch('https://lospec.com/palette-list/'+paletteSlug+'.json')
+			.then(response => response.json())
+			.then(data => {
+				//palette loaded successfully
+				console.log('loaded palette', data);
+				palettes[paletteSlug] = data;
+				palettes[paletteSlug].specified = true;
+
+				//refresh list of palettes
+				document.getElementById('palette-menu-splash').refresh();
 
-    //if the user specified dimensions
-    if (specifiedDimentions) {
-        //create a new pixel
-        newPixel(getValue('size-width'), getValue('size-height'), getValue('editor-mode'));
-    } else {
-        //otherwise show the new pixel dialog
-        showDialogue('splash', false);
-    }
+				//if the dimentions were specified
+				if (dimentions && dimentions.length >= 3 && dimentions.includes('x')) {
+					let width = dimentions.split('x')[0];
+					let height = dimentions.split('x')[1];
+					
+					console.log('dimentions were specified',width,'x',height)
+					
+					//firstPixel = false;
 
+					//create new document
+					newPixel(width, height, getValue('editor-mode'));
+				}
+				
+				//dimentions were not specified -- show splash screen with palette preselected
+				else {
+					//show splash
+					showDialogue('new-pixel', false);
+				}
+				
+			})
+			//error fetching url (either palette doesn't exist, or lospec is down)
+			.catch((error) => {
+				console.warn('failed to load palette "'+paletteSlug+'"', error);
+				
+				//proceed to splash screen
+				showDialogue('splash', false);
+			});
+	} 
 };

js/_newPixel.js

@@ -1,3 +1,59 @@
+
+palettes = {
+	"Endesga 32": {
+		colors: "be4a2f,d77643,ead4aa,e4a672,b86f50,733e39,3e2731,a22633,e43b44,f77622,feae34,fee761,63c74d,3e8948,265c42,193c3e,124e89,0099db,2ce8f5,ffffff,c0cbdc,8b9bb4,5a6988,3a4466,262b44,181425,ff0044,68386c,b55088,f6757a,e8b796,c28569".split(
+			","
+		),
+	},
+
+	"Resurrect 64": {
+		colors: "2e222f,3e3546,625565,966c6c,ab947a,694f62,7f708a,9babb2,c7dcd0,ffffff,6e2727,b33831,ea4f36,f57d4a,ae2334,e83b3b,fb6b1d,f79617,f9c22b,7a3045,9e4539,cd683d,e6904e,fbb954,4c3e24,676633,a2a947,d5e04b,fbff86,165a4c,239063,1ebc73,91db69,cddf6c,313638,374e4a,547e64,92a984,b2ba90,0b5e65,0b8a8f,0eaf9b,30e1b9,8ff8e2,323353,484a77,4d65b4,4d9be6,8fd3ff,45293f,6b3e75,905ea9,a884f3,eaaded,753c54,a24b6f,cf657f,ed8099,831c5d,c32454,f04f78,f68181,fca790,fdcbb0".split(
+			","
+		),
+	},
+
+	"AAP-64": {
+		colors: "060608,141013,3b1725,73172d,b4202a,df3e23,fa6a0a,f9a31b,ffd541,fffc40,d6f264,9cdb43,59c135,14a02e,1a7a3e,24523b,122020,143464,285cc4,249fde,20d6c7,a6fcdb,ffffff,fef3c0,fad6b8,f5a097,e86a73,bc4a9b,793a80,403353,242234,221c1a,322b28,71413b,bb7547,dba463,f4d29c,dae0ea,b3b9d1,8b93af,6d758d,4a5462,333941,422433,5b3138,8e5252,ba756a,e9b5a3,e3e6ff,b9bffb,849be4,588dbe,477d85,23674e,328464,5daf8d,92dcba,cdf7e2,e4d2aa,c7b08b,a08662,796755,5a4e44,423934".split(
+			","
+		),
+	},
+
+	"Zughy 32": {
+		colors: "472d3c,5e3643,7a444a,a05b53,bf7958,eea160,f4cca1,b6d53c,71aa34,397b44,3c5956,302c2e,5a5353,7d7071,a0938e,cfc6b8,dff6f5,8aebf1,28ccdf,3978a8,394778,39314b,564064,8e478c,cd6093,ffaeb6,f4b41b,f47e1b,e6482e,a93b3b,827094,4f546b".split(
+			","
+		),
+	},
+
+	Journey: {
+		colors: "050914,110524,3b063a,691749,9c3247,d46453,f5a15d,ffcf8e,ff7a7d,ff417d,d61a88,94007a,42004e,220029,100726,25082c,3d1132,73263d,bd4035,ed7b39,ffb84a,fff540,c6d831,77b02a,429058,2c645e,153c4a,052137,0e0421,0c0b42,032769,144491,488bd4,78d7ff,b0fff1,faffff,c7d4e1,928fb8,5b537d,392946,24142c,0e0f2c,132243,1a466b,10908e,28c074,3dff6e,f8ffb8,f0c297,cf968c,8f5765,52294b,0f022e,35003b,64004c,9b0e3e,d41e3c,ed4c40,ff9757,d4662f,9c341a,691b22,450c28,2d002e".split(
+			","
+		),
+	},
+
+	Vinik24: {
+		colors: "000000,6f6776,9a9a97,c5ccb8,8b5580,c38890,a593a5,666092,9a4f50,c28d75,7ca1c0,416aa3,8d6268,be955c,68aca9,387080,6e6962,93a167,6eaa78,557064,9d9f7f,7e9e99,5d6872,433455".split(
+			","
+		),
+	},
+
+	"Sweetie 16": {
+		colors: "1a1c2c,5d275d,b13e53,ef7d57,ffcd75,a7f070,38b764,257179,29366f,3b5dc9,41a6f6,73eff7,f4f4f4,94b0c2,566c86,333c57".split(
+			","
+		),
+	},
+
+	Lospec500: {
+		colors: "10121c,2c1e31,6b2643,ac2847,ec273f,94493a,de5d3a,e98537,f3a833,4d3533,6e4c30,a26d3f,ce9248,dab163,e8d282,f7f3b7,1e4044,006554,26854c,5ab552,9de64e,008b8b,62a477,a6cb96,d3eed3,3e3b65,3859b3,3388de,36c5f4,6dead6,5e5b8c,8c78a5,b0a7b8,deceed,9a4d76,c878af,cc99ff,fa6e79,ffa2ac,ffd1d5,f6e8e0,ffffff".split(
+			","
+		),
+	},
+};
+palettes["Commodore 64"] = {"name":"Commodore 64","author":"","colors":["000000","626262","898989","adadad","ffffff","9f4e44","cb7e75","6d5412","a1683c","c9d487","9ae29b","5cab5e","6abfc6","887ecb","50459b","a057a3"]};
+palettes["PICO-8"] = {"name":"PICO-8","author":"","colors":["000000","1D2B53","7E2553","008751","AB5236","5F574F","C2C3C7","FFF1E8","FF004D","FFA300","FFEC27","00E436","29ADFF","83769C","FF77A8","FFCCAA"]};
+palettes["Gameboy Color"] = {"name":"Nintendo Gameboy (Black Zero)","author":"","colors":["2e463d","385d49","577b46","7e8416"]};
+
+
+
 //populate palettes list in new pixel menu
 (() => {
     const palettesMenu = document.getElementById('palette-menu');
@@ -9,43 +65,50 @@
     const loadPaletteButton = document.getElementById('load-palette-button');
     const loadPaletteButtonSplash = document.getElementById('load-palette-button-splash');
 
-    Object.keys(palettes).forEach((paletteName,) => {
-
-        const button = document.createElement('button');
-        button.appendChild(document.createTextNode(paletteName));
-
-        //if the palette was specified by the user, change the dropdown to it
-        if (palettes[paletteName].specified) {
-            Util.setText('palette-button', paletteName);
-            Util.setText('palette-button-splash', paletteName)
-            //Show empty palette option
-            noPaletteButton.style.display = 'block';
-        }
-
-        const buttonEvent = () => {
-            //hide the dropdown menu
-            Util.deselect('palette-menu');
-            Util.deselect('palette-button');
-            Util.deselect('palette-menu-splash');
-            Util.deselect('palette-button-splash');
-
-            //show empty palette option
-            noPaletteButton.style.display = 'block';
-
-            //set the text of the dropdown to the newly selected preset
-            Util.setText('palette-button', paletteName);
-            Util.setText('palette-button-splash', paletteName);
-        }
-
-        // Making a copy for the splash page too
-        const copyButton = button.cloneNode(true);
-        copyButton.addEventListener('click', buttonEvent);
-        button.addEventListener('click', buttonEvent);
-
-        // Appending it to the splash palette menu
-        splashPalettes.appendChild(copyButton);
-        palettesMenu.appendChild(button);
-    });
+	splashPalettes.refresh = function () {
+		splashPalettes.innerHTML = '';
+		palettesMenu.innerHTML = '';
+
+		Object.keys(palettes).forEach((paletteName,) => {
+
+			const button = document.createElement('button');
+			button.appendChild(document.createTextNode(paletteName));
+
+			//if the palette was specified by the user, change the dropdown to it
+			if (palettes[paletteName].specified) {
+				Util.setText('palette-button', paletteName);
+				Util.setText('palette-button-splash', paletteName)
+				//Show empty palette option
+				noPaletteButton.style.display = 'block';
+			}
+
+			const buttonEvent = () => {
+				//hide the dropdown menu
+				Util.deselect('palette-menu');
+				Util.deselect('palette-button');
+				Util.deselect('palette-menu-splash');
+				Util.deselect('palette-button-splash');
+
+				//show empty palette option
+				noPaletteButton.style.display = 'block';
+
+				//set the text of the dropdown to the newly selected preset
+				Util.setText('palette-button', paletteName);
+				Util.setText('palette-button-splash', paletteName);
+			}
+
+			// Making a copy for the splash page too
+			const copyButton = button.cloneNode(true);
+			copyButton.addEventListener('click', buttonEvent);
+			button.addEventListener('click', buttonEvent);
+
+			// Appending it to the splash palette menu
+			splashPalettes.appendChild(copyButton);
+			palettesMenu.appendChild(button);
+		});
+	}	
+
+	splashPalettes.refresh();
 
 
     const loadPaletteButtonEvent = () => {

js/_onLoad.js

@@ -18,6 +18,6 @@ let coverImage = document.getElementById('editor-logo');
 let authorLink = coverImage.getElementsByTagName('a')[0];
 let chosenImage = images[Math.round(Math.random() * (images.length - 1))];
 
-coverImage.style.backgroundImage = 'url("/pixel-editor/' + chosenImage.path + '.png")';
+coverImage.style.backgroundImage = 'url("' + chosenImage.path + '.png")';
 authorLink.setAttribute('href', chosenImage.link);
 authorLink.innerHTML = 'Art by ' + chosenImage.author;

js/_palettes.js

@@ -3,7 +3,7 @@ var canvasSize;
 var zoom = 7;
 var dragging = false;
 var lastMouseClickPos = [0,0];
-var dialogueOpen = false;
+var dialogueOpen = true;
 var documentCreated = false;
 var pixelEditorMode = "Advanced";
 

js/_splashPage.js

@@ -0,0 +1,15 @@
+function closeCompatibilityWarning() {
+	document.getElementById("compatibility-warning").style.visibility =	"hidden";
+}
+
+//check browser/version
+if (
+	(bowser.firefox && bowser.version >= 28) ||
+	(bowser.chrome && bowser.version >= 29) ||
+	(!bowser.mobile && !bowser.tablet)
+)
+	console.log("compatibility check passed");
+
+
+//show warning
+else document.getElementById("compatibility-warning").style.visibility = "visible";