From 1f820fd97e8bf5d4f30001c2de73f5f1b9853d37 Mon Sep 17 00:00:00 2001 From: skeddles Date: Tue, 6 Jul 2021 17:24:20 -0400 Subject: [PATCH] ported to static site, removed _ext folder, split hbs files into partials --- build.js | 17 +- {_ext/sass => css}/_zindex.scss | 0 css/pixel-editor.scss | 2 +- helpers/svg.js | 41 ++ js/_logs.js | 15 - js/_newPixel.js | 2 +- js/_onLoad.js | 67 +- js/_palettes.js | 123 +++- js/_splashPage.js | 2 +- js/_variables.js | 2 +- js/checkCompatibilityPixelEditor.js | 15 + {_ext/scripts/libraries => js/lib}/cookies.js | 0 js/{ => lib}/sortable.js | 0 js/pixel-editor.js | 29 +- js/util/ajax.js | 79 +++ .../utilities => js/util}/getSetText.js | 0 .../utilities => js/util}/getSetValue.js | 0 .../scripts/utilities => js/util}/hexToRgb.js | 0 .../scripts/utilities => js/util}/hslToRgb.js | 0 {_ext/scripts/utilities => js/util}/on.js | 0 .../utilities => js/util}/onChildren.js | 0 .../scripts/utilities => js/util}/onClick.js | 0 .../utilities => js/util}/onClickChildren.js | 0 .../scripts/utilities => js/util}/rgbToHex.js | 0 .../scripts/utilities => js/util}/rgbToHsl.js | 0 {_ext/scripts/utilities => js/util}/select.js | 0 package-lock.json | 11 +- package.json | 2 +- server.js | 47 +- {_ext/svg => svg}/adjust.svg | 0 {_ext/svg => svg}/arrows/bottom.svg | 0 {_ext/svg => svg}/arrows/bottomleft.svg | 0 {_ext/svg => svg}/arrows/bottomright.svg | 0 {_ext/svg => svg}/arrows/left.svg | 0 {_ext/svg => svg}/arrows/middle.svg | 0 {_ext/svg => svg}/arrows/right.svg | 0 {_ext/svg => svg}/arrows/top.svg | 0 {_ext/svg => svg}/arrows/topleft.svg | 0 {_ext/svg => svg}/arrows/topright.svg | 0 {_ext/svg => svg}/ellipse.svg | 0 {_ext/svg => svg}/eraser.svg | 0 {_ext/svg => svg}/eyedropper.svg | 0 {_ext/svg => svg}/fill.svg | 0 {_ext/svg => svg}/filledellipse.svg | 0 {_ext/svg => svg}/fullrect.svg | 82 +-- {_ext/svg => svg}/invisible.svg | 0 {_ext/svg => svg}/line.svg | 82 +-- {_ext/svg => svg}/lockedpadlock.svg | 0 {_ext/svg => svg}/lospec_logo_1x.svg | 0 {_ext/svg => svg}/minus.svg | 0 {_ext/svg => svg}/newfile.svg | 0 {_ext/svg => svg}/openfile.svg | 0 {_ext/svg => svg}/pan.svg | 0 {_ext/svg => svg}/pencil.svg | 0 {_ext/svg => svg}/plus.svg | 0 {_ext/svg => svg}/rectangle.svg | 82 +-- {_ext/svg => svg}/rectselect.svg | 216 +++--- {_ext/svg => svg}/trash.svg | 0 {_ext/svg => svg}/unlockedpadlock.svg | 0 {_ext/svg => svg}/visible.svg | 0 {_ext/svg => svg}/warning.svg | 6 +- {_ext/svg => svg}/x.svg | 0 {_ext/svg => svg}/zoom.svg | 0 views/about-popup.hbs | 10 + views/canvas-resize-popup.hbs | 59 ++ views/canvases.hbs | 9 + views/changelog-popup.hbs | 11 + views/colors-menu.hbs | 14 + views/compatibility-warning.hbs | 15 + views/credits-popup.hbs | 10 + views/data-asdfgasd.hbs | 0 views/help-popup.hbs | 44 ++ views/holders.hbs | 7 + views/index.hbs | 656 +----------------- logs/latestLog.html => views/latestLog.hbs | 1 - views/layers-menu.hbs | 49 ++ .../hbs => views}/layout-contribute.hbs | 0 views/main-menu.hbs | 68 ++ views/palette-popup.hbs | 74 ++ views/preload.hbs | 14 + views/settings-popup.hbs | 22 + views/splash-page-popup.hbs | 69 ++ views/sprite-resize-popup.hbs | 49 ++ views/start-pixel-popup.hbs | 28 + views/tool-previews.hbs | 3 + views/tools-menu.hbs | 46 ++ 86 files changed, 1203 insertions(+), 977 deletions(-) rename {_ext/sass => css}/_zindex.scss (100%) create mode 100644 helpers/svg.js delete mode 100644 js/_logs.js create mode 100644 js/checkCompatibilityPixelEditor.js rename {_ext/scripts/libraries => js/lib}/cookies.js (100%) rename js/{ => lib}/sortable.js (100%) create mode 100644 js/util/ajax.js rename {_ext/scripts/utilities => js/util}/getSetText.js (100%) rename {_ext/scripts/utilities => js/util}/getSetValue.js (100%) rename {_ext/scripts/utilities => js/util}/hexToRgb.js (100%) rename {_ext/scripts/utilities => js/util}/hslToRgb.js (100%) rename {_ext/scripts/utilities => js/util}/on.js (100%) rename {_ext/scripts/utilities => js/util}/onChildren.js (100%) rename {_ext/scripts/utilities => js/util}/onClick.js (100%) rename {_ext/scripts/utilities => js/util}/onClickChildren.js (100%) rename {_ext/scripts/utilities => js/util}/rgbToHex.js (100%) rename {_ext/scripts/utilities => js/util}/rgbToHsl.js (100%) rename {_ext/scripts/utilities => js/util}/select.js (100%) rename {_ext/svg => svg}/adjust.svg (100%) rename {_ext/svg => svg}/arrows/bottom.svg (100%) rename {_ext/svg => svg}/arrows/bottomleft.svg (100%) rename {_ext/svg => svg}/arrows/bottomright.svg (100%) rename {_ext/svg => svg}/arrows/left.svg (100%) rename {_ext/svg => svg}/arrows/middle.svg (100%) rename {_ext/svg => svg}/arrows/right.svg (100%) rename {_ext/svg => svg}/arrows/top.svg (100%) rename {_ext/svg => svg}/arrows/topleft.svg (100%) rename {_ext/svg => svg}/arrows/topright.svg (100%) rename {_ext/svg => svg}/ellipse.svg (100%) rename {_ext/svg => svg}/eraser.svg (100%) rename {_ext/svg => svg}/eyedropper.svg (100%) rename {_ext/svg => svg}/fill.svg (100%) rename {_ext/svg => svg}/filledellipse.svg (100%) rename {_ext/svg => svg}/fullrect.svg (94%) rename {_ext/svg => svg}/invisible.svg (100%) rename {_ext/svg => svg}/line.svg (94%) rename {_ext/svg => svg}/lockedpadlock.svg (100%) rename {_ext/svg => svg}/lospec_logo_1x.svg (100%) rename {_ext/svg => svg}/minus.svg (100%) rename {_ext/svg => svg}/newfile.svg (100%) rename {_ext/svg => svg}/openfile.svg (100%) rename {_ext/svg => svg}/pan.svg (100%) rename {_ext/svg => svg}/pencil.svg (100%) rename {_ext/svg => svg}/plus.svg (100%) rename {_ext/svg => svg}/rectangle.svg (94%) rename {_ext/svg => svg}/rectselect.svg (96%) rename {_ext/svg => svg}/trash.svg (100%) rename {_ext/svg => svg}/unlockedpadlock.svg (100%) rename {_ext/svg => svg}/visible.svg (100%) rename {_ext/svg => svg}/warning.svg (98%) rename {_ext/svg => svg}/x.svg (100%) rename {_ext/svg => svg}/zoom.svg (100%) create mode 100644 views/about-popup.hbs create mode 100644 views/canvas-resize-popup.hbs create mode 100644 views/canvases.hbs create mode 100644 views/changelog-popup.hbs create mode 100644 views/colors-menu.hbs create mode 100644 views/compatibility-warning.hbs create mode 100644 views/credits-popup.hbs create mode 100644 views/data-asdfgasd.hbs create mode 100644 views/help-popup.hbs create mode 100644 views/holders.hbs rename logs/latestLog.html => views/latestLog.hbs (99%) create mode 100644 views/layers-menu.hbs rename {_ext/modules/hbs => views}/layout-contribute.hbs (100%) create mode 100644 views/main-menu.hbs create mode 100644 views/palette-popup.hbs create mode 100644 views/preload.hbs create mode 100644 views/settings-popup.hbs create mode 100644 views/splash-page-popup.hbs create mode 100644 views/sprite-resize-popup.hbs create mode 100644 views/start-pixel-popup.hbs create mode 100644 views/tool-previews.hbs create mode 100644 views/tools-menu.hbs diff --git a/build.js b/build.js index b7558cc..607a923 100644 --- a/build.js +++ b/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', diff --git a/_ext/sass/_zindex.scss b/css/_zindex.scss similarity index 100% rename from _ext/sass/_zindex.scss rename to css/_zindex.scss diff --git a/css/pixel-editor.scss b/css/pixel-editor.scss index 305cccc..80f3149 100644 --- a/css/pixel-editor.scss +++ b/css/pixel-editor.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; diff --git a/helpers/svg.js b/helpers/svg.js new file mode 100644 index 0000000..1035433 --- /dev/null +++ b/helpers/svg.js @@ -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; +} diff --git a/js/_logs.js b/js/_logs.js deleted file mode 100644 index 30ee743..0000000 --- a/js/_logs.js +++ /dev/null @@ -1,15 +0,0 @@ -var rawFile = new XMLHttpRequest(); -rawFile.open("GET", '/pixel-editor/latestLog.html', false); -rawFile.onreadystatechange = function () -{ - if(rawFile.readyState === 4) - { - if(rawFile.status === 200 || rawFile.status == 0) - { - var allText = rawFile.responseText; - - document.getElementById("latest-update").innerHTML = allText; - } - } -} -rawFile.send(null); \ No newline at end of file diff --git a/js/_newPixel.js b/js/_newPixel.js index d8f7e0e..25bf417 100644 --- a/js/_newPixel.js +++ b/js/_newPixel.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'); diff --git a/js/_onLoad.js b/js/_onLoad.js index 48f83b9..008d59b 100644 --- a/js/_onLoad.js +++ b/js/_onLoad.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'); - //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); - } + //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 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); + }); + } }; \ No newline at end of file diff --git a/js/_palettes.js b/js/_palettes.js index bcf69c0..e16b728 100644 --- a/js/_palettes.js +++ b/js/_palettes.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,) => { + splashPalettes.refresh = function () { + splashPalettes.innerHTML = ''; + palettesMenu.innerHTML = ''; - const button = document.createElement('button'); - button.appendChild(document.createTextNode(paletteName)); + Object.keys(palettes).forEach((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 button = document.createElement('button'); + button.appendChild(document.createTextNode(paletteName)); - const buttonEvent = () => { - //hide the dropdown menu - Util.deselect('palette-menu'); - Util.deselect('palette-button'); - Util.deselect('palette-menu-splash'); - Util.deselect('palette-button-splash'); + //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'; + } - //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'); - //set the text of the dropdown to the newly selected preset - Util.setText('palette-button', paletteName); - Util.setText('palette-button-splash', paletteName); - } + //show empty palette option + noPaletteButton.style.display = 'block'; - // Making a copy for the splash page too - const copyButton = button.cloneNode(true); - copyButton.addEventListener('click', buttonEvent); - button.addEventListener('click', buttonEvent); + //set the text of the dropdown to the newly selected preset + Util.setText('palette-button', paletteName); + Util.setText('palette-button-splash', paletteName); + } - // Appending it to the splash palette menu - splashPalettes.appendChild(copyButton); - palettesMenu.appendChild(button); - }); + // 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 = () => { diff --git a/js/_splashPage.js b/js/_splashPage.js index 96bd305..278e70d 100644 --- a/js/_splashPage.js +++ b/js/_splashPage.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; \ No newline at end of file diff --git a/js/_variables.js b/js/_variables.js index 4c85ab9..aadeb48 100644 --- a/js/_variables.js +++ b/js/_variables.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"; diff --git a/js/checkCompatibilityPixelEditor.js b/js/checkCompatibilityPixelEditor.js new file mode 100644 index 0000000..b440d25 --- /dev/null +++ b/js/checkCompatibilityPixelEditor.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"; diff --git a/_ext/scripts/libraries/cookies.js b/js/lib/cookies.js similarity index 100% rename from _ext/scripts/libraries/cookies.js rename to js/lib/cookies.js diff --git a/js/sortable.js b/js/lib/sortable.js similarity index 100% rename from js/sortable.js rename to js/lib/sortable.js diff --git a/js/pixel-editor.js b/js/pixel-editor.js index 137a9bf..015dd46 100644 --- a/js/pixel-editor.js +++ b/js/pixel-editor.js @@ -1,18 +1,18 @@ /**utilities**/ -//=include utilities/on.js -//=include utilities/onChildren.js -//=include utilities/onClick.js -//=include utilities/onClickChildren.js -//=include utilities/select.js -//=include utilities/getSetText.js -//=include utilities/getSetValue.js -//=include utilities/hexToRgb.js -//=include utilities/rgbToHex.js -//=include utilities/rgbToHsl.js -//=include utilities/hslToRgb.js -//=include libraries/cookies.js +//=include util/on.js +//=include util/onChildren.js +//=include util/onClick.js +//=include util/onClickChildren.js +//=include util/select.js +//=include util/getSetText.js +//=include util/getSetValue.js +//=include util/hexToRgb.js +//=include util/rgbToHex.js +//=include util/rgbToHsl.js +//=include util/hslToRgb.js +//=include lib/cookies.js //=include _pixelEditorUtility.js -//=include sortable.js +//=include lib/sortable.js //=include _algorithms.js //=include Util.js @@ -36,7 +36,7 @@ //=include _colorChanged.js //=include _initColor.js //=include _dialogue.js -//=include _featuresLog.js +//!=include _featuresLog.js //=include _drawLine.js //=include _getCursorPosition.js //=include _fill.js @@ -53,7 +53,6 @@ //=include _colorPicker.js //=include _paletteBlock.js //=include _splashPage.js -//=include _logs.js /**load file**/ //=include _loadImage.js diff --git a/js/util/ajax.js b/js/util/ajax.js new file mode 100644 index 0000000..ae8b77e --- /dev/null +++ b/js/util/ajax.js @@ -0,0 +1,79 @@ +//GET: ajax(String url, Function success [,timeout]) +//POST: ajax(String url, Object postData, Function success [,timeout]) +Util.ajax = function (url, arg2, arg3, arg4) { + if (typeof arg2 == 'function') { + var success = arg2; + var timeout = arg3 || 10000; + } + else { + var postData = arg2; + var success = arg3; + var timeout = arg4 || 10000; + } + + var start = new Date(); + console.log('AJAX - STARTING REQUEST', url, '(' + timeout + ')'); + + //start new request + var xhr = new XMLHttpRequest(); + xhr.onreadystatechange = function() { + if (this.readyState == 4 && this.status == 200) { + var result; + + //try to parse as json + try { + result = JSON.parse(this.response); + console.log('AJAX - COMPLETE ('+(new Date()-start)+'ms) - json:', result); + } + catch (e) { + result = this.response; + console.log('AJAX - COMPLETE ('+(new Date()-start)+'ms) - string:', this.response, e); + } + + //return result + success(result); + + xhr = null; + } + else if (this.readyState == 4) { + console.log('ajax failed', this.readyState, this.status); + success({ error: 'failure' }); + } + }; + + xhr.ontimeout = function(e) { + console.log('ajax request timed out') + success({ error: 'timeout' }); + }; + + if (postData) { + //post request + console.log('post data: ', postData instanceof FormData, postData); + + //the the input isn't already formdata, convert it to form data + if (!(postData instanceof FormData)) { + console.log('converting to form data'); + + var formData = new FormData(); + + for (var key in postData) { + formData.append(key, postData[key]); + } + + postData = formData; + } + + //send to server + xhr.open("POST", url, true); + xhr.timeout = timeout; + xhr.send(postData); + } + else { + //get request + xhr.open("GET", url, true); + xhr.timeout = timeout; + xhr.send(); + } + + return xhr; +} \ No newline at end of file diff --git a/_ext/scripts/utilities/getSetText.js b/js/util/getSetText.js similarity index 100% rename from _ext/scripts/utilities/getSetText.js rename to js/util/getSetText.js diff --git a/_ext/scripts/utilities/getSetValue.js b/js/util/getSetValue.js similarity index 100% rename from _ext/scripts/utilities/getSetValue.js rename to js/util/getSetValue.js diff --git a/_ext/scripts/utilities/hexToRgb.js b/js/util/hexToRgb.js similarity index 100% rename from _ext/scripts/utilities/hexToRgb.js rename to js/util/hexToRgb.js diff --git a/_ext/scripts/utilities/hslToRgb.js b/js/util/hslToRgb.js similarity index 100% rename from _ext/scripts/utilities/hslToRgb.js rename to js/util/hslToRgb.js diff --git a/_ext/scripts/utilities/on.js b/js/util/on.js similarity index 100% rename from _ext/scripts/utilities/on.js rename to js/util/on.js diff --git a/_ext/scripts/utilities/onChildren.js b/js/util/onChildren.js similarity index 100% rename from _ext/scripts/utilities/onChildren.js rename to js/util/onChildren.js diff --git a/_ext/scripts/utilities/onClick.js b/js/util/onClick.js similarity index 100% rename from _ext/scripts/utilities/onClick.js rename to js/util/onClick.js diff --git a/_ext/scripts/utilities/onClickChildren.js b/js/util/onClickChildren.js similarity index 100% rename from _ext/scripts/utilities/onClickChildren.js rename to js/util/onClickChildren.js diff --git a/_ext/scripts/utilities/rgbToHex.js b/js/util/rgbToHex.js similarity index 100% rename from _ext/scripts/utilities/rgbToHex.js rename to js/util/rgbToHex.js diff --git a/_ext/scripts/utilities/rgbToHsl.js b/js/util/rgbToHsl.js similarity index 100% rename from _ext/scripts/utilities/rgbToHsl.js rename to js/util/rgbToHsl.js diff --git a/_ext/scripts/utilities/select.js b/js/util/select.js similarity index 100% rename from _ext/scripts/utilities/select.js rename to js/util/select.js diff --git a/package-lock.json b/package-lock.json index d9a02a2..a756d4c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3135,8 +3135,9 @@ } }, "handlebars-helper-svg": { - "version": "git+ssh://git@bitbucket.org/skeddles/npm-handlebars-helper-svg-lospec-open-source.git#2feeec5000aecce96ba2f714ec540880537ae208", - "from": "handlebars-helper-svg@git+https://bitbucket.org/skeddles/npm-handlebars-helper-svg-lospec-open-source.git", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/handlebars-helper-svg/-/handlebars-helper-svg-2.0.2.tgz", + "integrity": "sha512-uCLLeD3F+6pcTczOz2DH6OtFkJ2lKixWUT0nrZimME36BdCwHheAwL5tfyYpsUUUB/yle/ZRK0/Cv7Def/d5XA==", "requires": { "ltx": "^2.3.0", "resolve": "^1.1.7" @@ -3855,9 +3856,9 @@ } }, "ltx": { - "version": "2.9.2", - "resolved": "https://registry.npmjs.org/ltx/-/ltx-2.9.2.tgz", - "integrity": "sha512-llB7HflFhlfsYYT1SAe80elCBO5C20ryLdwPB/A/BZk38hhVeZztDlWQ9uTyvKNPX4aK6sA+JfS1f/mfzp5cxA==", + "version": "2.10.0", + "resolved": "https://registry.npmjs.org/ltx/-/ltx-2.10.0.tgz", + "integrity": "sha512-RB4zR6Mrp/0wTNS9WxMvpgfht/7u/8QAC9DpPD19opL/4OASPa28uoliFqeDkLUU8pQ4aeAfATBZmz1aSAHkMw==", "requires": { "inherits": "^2.0.4" } diff --git a/package.json b/package.json index cd8a3bc..0e2ad92 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "gulp-include": "^2.3.1", "gulp-rename": "^2.0.0", "gulp-sass": "^4.0.2", - "handlebars-helper-svg": "git+https://bitbucket.org/skeddles/npm-handlebars-helper-svg-lospec-open-source.git", + "handlebars-helper-svg": "^2.0.2", "nodemon": "^2.0.7", "open": "^8.0.6", "open-cli": "^6.0.1", diff --git a/server.js b/server.js index e6167ff..3bb5c2e 100644 --- a/server.js +++ b/server.js @@ -6,30 +6,10 @@ const app = express(); const BUILDDIR = process.argv[2] || './build'; const PORT = process.argv[3] || 3000; -//ROUTE - index.htm -app.get('/', (req, res) => { - res.sendFile(path.join(__dirname, BUILDDIR, 'index.htm'), {}, function (err) { - if (err) { - console.log('error sending file', err); - } else { - console.log("Server: Successfully served index.html"); - - /*setTimeout(()=>{ - console.log('closing server'); - res.app.server.close(); - process.exit(); - },1000*10); */ - } - }); -}); - -// Better to show landing page rather than 404 on editor page reload -app.get('/pixel-editor/app', (req, res) => { - res.redirect('/'); -}) //ROUTE - other files -app.use(express.static(path.join(__dirname, BUILDDIR))); +app.use('/pixel-editor', express.static(path.join(__dirname, BUILDDIR))); + // "reload" module allows us to trigger webpage reload automatically on file changes, but inside pixel editor it also // makes browser steal focus from any other window in order to ask user about unsaved changes. It might be quite @@ -46,3 +26,26 @@ if (process.env.RELOAD === "yes") { console.log(`Web server listening on port ${PORT}`); }) } + +// Better to show landing page rather than 404 on editor page reload +app.get('/', (req, res) => { + res.redirect('/pixel-editor'); +}) + + +//ROUTE - match / or any route with just numbers letters and dashes, and return index.htm (all other routes should have been handled already) +app.get(['/pixel-editor', /^\/pixel-editor\/[\/a-z0-9-]+$/gi ], (req, res) => { + res.sendFile(path.join(__dirname, BUILDDIR, 'index.htm'), {}, function (err) { + if (err) { + console.log('error sending file', err); + } else { + console.log("Server: Successfully served index.html", req.originalUrl); + } + }); +}); + +// Better to show landing page rather than 404 on editor page reload +app.get('/pixel-editor/app', (req, res) => { + res.redirect('/'); +}) + diff --git a/_ext/svg/adjust.svg b/svg/adjust.svg similarity index 100% rename from _ext/svg/adjust.svg rename to svg/adjust.svg diff --git a/_ext/svg/arrows/bottom.svg b/svg/arrows/bottom.svg similarity index 100% rename from _ext/svg/arrows/bottom.svg rename to svg/arrows/bottom.svg diff --git a/_ext/svg/arrows/bottomleft.svg b/svg/arrows/bottomleft.svg similarity index 100% rename from _ext/svg/arrows/bottomleft.svg rename to svg/arrows/bottomleft.svg diff --git a/_ext/svg/arrows/bottomright.svg b/svg/arrows/bottomright.svg similarity index 100% rename from _ext/svg/arrows/bottomright.svg rename to svg/arrows/bottomright.svg diff --git a/_ext/svg/arrows/left.svg b/svg/arrows/left.svg similarity index 100% rename from _ext/svg/arrows/left.svg rename to svg/arrows/left.svg diff --git a/_ext/svg/arrows/middle.svg b/svg/arrows/middle.svg similarity index 100% rename from _ext/svg/arrows/middle.svg rename to svg/arrows/middle.svg diff --git a/_ext/svg/arrows/right.svg b/svg/arrows/right.svg similarity index 100% rename from _ext/svg/arrows/right.svg rename to svg/arrows/right.svg diff --git a/_ext/svg/arrows/top.svg b/svg/arrows/top.svg similarity index 100% rename from _ext/svg/arrows/top.svg rename to svg/arrows/top.svg diff --git a/_ext/svg/arrows/topleft.svg b/svg/arrows/topleft.svg similarity index 100% rename from _ext/svg/arrows/topleft.svg rename to svg/arrows/topleft.svg diff --git a/_ext/svg/arrows/topright.svg b/svg/arrows/topright.svg similarity index 100% rename from _ext/svg/arrows/topright.svg rename to svg/arrows/topright.svg diff --git a/_ext/svg/ellipse.svg b/svg/ellipse.svg similarity index 100% rename from _ext/svg/ellipse.svg rename to svg/ellipse.svg diff --git a/_ext/svg/eraser.svg b/svg/eraser.svg similarity index 100% rename from _ext/svg/eraser.svg rename to svg/eraser.svg diff --git a/_ext/svg/eyedropper.svg b/svg/eyedropper.svg similarity index 100% rename from _ext/svg/eyedropper.svg rename to svg/eyedropper.svg diff --git a/_ext/svg/fill.svg b/svg/fill.svg similarity index 100% rename from _ext/svg/fill.svg rename to svg/fill.svg diff --git a/_ext/svg/filledellipse.svg b/svg/filledellipse.svg similarity index 100% rename from _ext/svg/filledellipse.svg rename to svg/filledellipse.svg diff --git a/_ext/svg/fullrect.svg b/svg/fullrect.svg similarity index 94% rename from _ext/svg/fullrect.svg rename to svg/fullrect.svg index 05958ee..23bae31 100644 --- a/_ext/svg/fullrect.svg +++ b/svg/fullrect.svg @@ -1,41 +1,41 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_ext/svg/invisible.svg b/svg/invisible.svg similarity index 100% rename from _ext/svg/invisible.svg rename to svg/invisible.svg diff --git a/_ext/svg/line.svg b/svg/line.svg similarity index 94% rename from _ext/svg/line.svg rename to svg/line.svg index f5aa17b..75cbe7c 100644 --- a/_ext/svg/line.svg +++ b/svg/line.svg @@ -1,41 +1,41 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_ext/svg/lockedpadlock.svg b/svg/lockedpadlock.svg similarity index 100% rename from _ext/svg/lockedpadlock.svg rename to svg/lockedpadlock.svg diff --git a/_ext/svg/lospec_logo_1x.svg b/svg/lospec_logo_1x.svg similarity index 100% rename from _ext/svg/lospec_logo_1x.svg rename to svg/lospec_logo_1x.svg diff --git a/_ext/svg/minus.svg b/svg/minus.svg similarity index 100% rename from _ext/svg/minus.svg rename to svg/minus.svg diff --git a/_ext/svg/newfile.svg b/svg/newfile.svg similarity index 100% rename from _ext/svg/newfile.svg rename to svg/newfile.svg diff --git a/_ext/svg/openfile.svg b/svg/openfile.svg similarity index 100% rename from _ext/svg/openfile.svg rename to svg/openfile.svg diff --git a/_ext/svg/pan.svg b/svg/pan.svg similarity index 100% rename from _ext/svg/pan.svg rename to svg/pan.svg diff --git a/_ext/svg/pencil.svg b/svg/pencil.svg similarity index 100% rename from _ext/svg/pencil.svg rename to svg/pencil.svg diff --git a/_ext/svg/plus.svg b/svg/plus.svg similarity index 100% rename from _ext/svg/plus.svg rename to svg/plus.svg diff --git a/_ext/svg/rectangle.svg b/svg/rectangle.svg similarity index 94% rename from _ext/svg/rectangle.svg rename to svg/rectangle.svg index 7ebcba9..8a68a92 100644 --- a/_ext/svg/rectangle.svg +++ b/svg/rectangle.svg @@ -1,41 +1,41 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_ext/svg/rectselect.svg b/svg/rectselect.svg similarity index 96% rename from _ext/svg/rectselect.svg rename to svg/rectselect.svg index edb2491..464768a 100644 --- a/_ext/svg/rectselect.svg +++ b/svg/rectselect.svg @@ -1,108 +1,108 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_ext/svg/trash.svg b/svg/trash.svg similarity index 100% rename from _ext/svg/trash.svg rename to svg/trash.svg diff --git a/_ext/svg/unlockedpadlock.svg b/svg/unlockedpadlock.svg similarity index 100% rename from _ext/svg/unlockedpadlock.svg rename to svg/unlockedpadlock.svg diff --git a/_ext/svg/visible.svg b/svg/visible.svg similarity index 100% rename from _ext/svg/visible.svg rename to svg/visible.svg diff --git a/_ext/svg/warning.svg b/svg/warning.svg similarity index 98% rename from _ext/svg/warning.svg rename to svg/warning.svg index bef18ae..5b49c2e 100644 --- a/_ext/svg/warning.svg +++ b/svg/warning.svg @@ -1,3 +1,3 @@ - - - + + + diff --git a/_ext/svg/x.svg b/svg/x.svg similarity index 100% rename from _ext/svg/x.svg rename to svg/x.svg diff --git a/_ext/svg/zoom.svg b/svg/zoom.svg similarity index 100% rename from _ext/svg/zoom.svg rename to svg/zoom.svg diff --git a/views/about-popup.hbs b/views/about-popup.hbs new file mode 100644 index 0000000..5c8760f --- /dev/null +++ b/views/about-popup.hbs @@ -0,0 +1,10 @@ +
+ +

About Lospec Pixel Editor

+
version 1.1.0
+

This is a web-based tool for creating and editing pixel art.

+

The goal of this tool is to be an accessible and intuitive tool that's simple enough for a first time pixel artist while still being usable enough for a veteran.

+

In the future I hope to add enough features to become a full fledged pixel art editor, with everything an artist could need.

+

About Lospec

+

Lospec is a website created to host tools for pixel artists. To see more of our tools, visit our homepage. To hear about any updates or new tools, follow us on Twitter.

+
\ No newline at end of file diff --git a/views/canvas-resize-popup.hbs b/views/canvas-resize-popup.hbs new file mode 100644 index 0000000..5c4fb40 --- /dev/null +++ b/views/canvas-resize-popup.hbs @@ -0,0 +1,59 @@ + +
+ +

Resize canvas

+ + + + + + + + + + + + + + + +

Size

+
+ + Width: + + + + Height: + +
+ + + +

Borders offsets

+
+ + Left: + + + + Right: + + + + Top: + + + + Bottom: + +
+ + +
\ No newline at end of file diff --git a/views/canvases.hbs b/views/canvases.hbs new file mode 100644 index 0000000..b17615f --- /dev/null +++ b/views/canvases.hbs @@ -0,0 +1,9 @@ + +
+ + + + + +
+
\ No newline at end of file diff --git a/views/changelog-popup.hbs b/views/changelog-popup.hbs new file mode 100644 index 0000000..ec94ca3 --- /dev/null +++ b/views/changelog-popup.hbs @@ -0,0 +1,11 @@ +
+ + +

Changelog

+ {{#each changelog}} +

Version {{@key}}

+ + {{/each}} +
\ No newline at end of file diff --git a/views/colors-menu.hbs b/views/colors-menu.hbs new file mode 100644 index 0000000..bba9602 --- /dev/null +++ b/views/colors-menu.hbs @@ -0,0 +1,14 @@ + + +
+ # +
{{svg "warning.svg" width="14" + height="12" }}
+ +
+ +
+ {{svg "adjust.svg" width="20" height="20" }} +
\ No newline at end of file diff --git a/views/compatibility-warning.hbs b/views/compatibility-warning.hbs new file mode 100644 index 0000000..29b7d78 --- /dev/null +++ b/views/compatibility-warning.hbs @@ -0,0 +1,15 @@ +
+
+
+

Warning: a modern, desktop, web browser is required to use this tool.

+

We detected that you may have an out of date or unsupported web browser. This tool, like many others on + this site and across the web uses features only available in new web browsers. We reccommend updating + your current browser or downloading Firefox or Chrome.

+ +
+
+
+ + \ No newline at end of file diff --git a/views/credits-popup.hbs b/views/credits-popup.hbs new file mode 100644 index 0000000..a36577e --- /dev/null +++ b/views/credits-popup.hbs @@ -0,0 +1,10 @@ +
+ +

Credits

+

Icons

+ +
\ No newline at end of file diff --git a/views/data-asdfgasd.hbs b/views/data-asdfgasd.hbs new file mode 100644 index 0000000..e69de29 diff --git a/views/help-popup.hbs b/views/help-popup.hbs new file mode 100644 index 0000000..a02ce58 --- /dev/null +++ b/views/help-popup.hbs @@ -0,0 +1,44 @@ +
+ +

Help

+

Palette

+ +

Hotkeys

+ +

Mouse Shortcuts

+ +

Layers

+ +
\ No newline at end of file diff --git a/views/holders.hbs b/views/holders.hbs new file mode 100644 index 0000000..1c83b49 --- /dev/null +++ b/views/holders.hbs @@ -0,0 +1,7 @@ +
+ dl + dl + + + +
\ No newline at end of file diff --git a/views/index.hbs b/views/index.hbs index 0683cbf..db5ce38 100644 --- a/views/index.hbs +++ b/views/index.hbs @@ -6,651 +6,39 @@ {{title}} - + {{{google-analytics}}} {{{favicons}}} -
-
-

Warning: a modern, desktop, web browser is required to use this tool.

-

We detected that you may have an out of date or unsupported web browser. This tool, like many others on this site and across the web uses features only available in new web browsers. We reccommend updating your current browser or downloading Firefox or Chrome.

- -
-
- + {{> compatibility-warning}} + {{> preload}} -
- - - - - - - - - - - - -
- - - - - - - - - - - - - -
-
- - -
- - - - - -
-
- -
- dl - dl - - - -
- -
- # -
{{svg "warning.svg" width="14" height="12" }}
- -
- -
- {{svg "adjust.svg" width="20" height="20" }} -
+ {{> main-menu}} + {{> tools-menu}} + {{> colors-menu}} + {{> layers-menu}} + {{> tool-previews}} + {{> canvases}} + {{> holders}} +
- -
- -

New Pixel

- - -

Editor mode

- - - -

- - -

Preset

- - - -

Size

- {{svg "x.svg" width="16" height="16" class="dimentions-x"}} -

Palette

- - - -
Creating a new pixel will discard your current one.
-
- -
-
- - -
-
-
-

Latest updates

-
-
- -
- - -
-
-

New Custom Pixel

- -

Editor mode

-
-
-

Basic

-

Advanced

-
-
- -

Size

-
- {{svg "x.svg" width="16" height="16" class="dimentions-x"}} -
- -

Palette

- - - -
Creating a new pixel will discard your current one.
-
- -
-
- -
-
- Quickstart -
- -
-

Load

-

New Gameboy

-

New C64

-

New Pico8

-

New 16x16

-

New 32x32

-

New 64x64

-

New 128x128

-

New 256x256

-

New 512x512

-
-
-
-
-
- - -
- -

Scale sprite

- -

New size

- -
- - Width: - - - - Height: - -
- - -

Resize percentages

- -
- - Width % - - - - Height % - -
-
- - Keep current ratio - - - Scaling algorithm: - - -
- -
- -
- - -
- -

Resize canvas

- - - - - - - - - - - - - - - -

Size

-
- - Width: - - - - Height: - -
- - - -

Borders offsets

-
- - Left: - - - - Right: - - - - Top: - - - - Bottom: - -
- - -
- - -
- - -

Edit palette

- -
-
- - - - -
- -
- -
-
- - - -
- -
- - - -
- -
- - - -
-
- -
- -
- -
-
- -
-
- #123456 -
-
- -
- - - - - - -
-
-
- -
-
    -
  • -
  • -
-
- -
- - -
-
- -
- -

Help

-

Palette

-
    -
  • Left Click - Choose Color
    • -
  • Right Click - Edit Color
    • -
-

Hotkeys

-
    -
  • Pencil: B or 1
    • -
  • Eraser: R
    • -
  • Rectangle: U
    • -
  • Line: L
    • -
  • Fill: F or 2
    • -
  • Eyedropper: E or 3
    • -
  • Pan: P or M or 4
    • -
  • Zoom: Z or 5
    • -
  • Undo: Ctrl + Z
    • -
  • Redo: Ctrl + Y or Ctrl + Alt + Z
    • -
  • Rectangular selection: M
    • -
-

Mouse Shortcuts

-
    -
  • Eyedropper: Alt + Click
    • -
  • Pan: Space + Click
    • -
  • Zoom: Alt + Scroll Wheel
    • -
-

Layers

-
    -
  • {{svg "visible.svg" width="15" height="15" class = "default-icon"}}: show / hide layer
    • -
  • {{svg "lockedpadlock.svg" width="15" height="15" class = "default-icon"}}: lock / unlock layer, when a layer is locked it's not possible to draw on it
    • -
  • Right click on a layer to open the menu: -
      -
    • Rename: change the name of the layer
      • -
    • Duplicate: duplicate the layer
      • -
    • Delete: delete the layer (doesn't work if there's only one layer)
      • -
    • Merge below: merges the selected the layer with the one below it
      • -
    • Flatten visible: merges all the visible layers
      • -
    • Flatten all: merges all the layers
      • -
    -
    • -
-
-
- -

About Lospec Pixel Editor

-
version 1.1.0
-

This is a web-based tool for creating and editing pixel art.

-

The goal of this tool is to be an accessible and intuitive tool that's simple enough for a first time pixel artist while still being usable enough for a veteran.

-

In the future I hope to add enough features to become a full fledged pixel art editor, with everything an artist could need.

-

About Lospec

-

Lospec is a website created to host tools for pixel artists. To see more of our tools, visit our homepage. To hear about any updates or new tools, follow us on Twitter.

-
-
- - -

Changelog

- {{#each changelog}} -

Version {{@key}}

-
    {{#each this}} -
  • {{change}} - {{author}}
    • - {{/each}}
- {{/each}} -
-
- -

Credits

-

Icons

- -
-
- -

Settings

- -
-

History

-
- -
- -

Pixel grid

-
- -
-
- -

Your browsers cookies are disabled, settings will be lost upon closing this page.

- -
- -
-
+ {{> start-pixel-popup}} + {{> splash-page-popup}} + {{> sprite-resize-popup}} + {{> canvas-resize-popup}} + {{> palette-popup}} + {{> help-popup}} + {{> about-popup}} + {{> changelog-popup}} + {{> credits-popup}} + {{> settings-popup}}
- - + \ No newline at end of file diff --git a/logs/latestLog.html b/views/latestLog.hbs similarity index 99% rename from logs/latestLog.html rename to views/latestLog.hbs index 9871410..6cdd02a 100644 --- a/logs/latestLog.html +++ b/views/latestLog.hbs @@ -1,4 +1,3 @@ -

Latest update

Hello there, welcome to the latest version of the Lospec Pixel Editor. As you can see, we changed quite a lot of things. Let's go through all them, starting from this page. diff --git a/views/layers-menu.hbs b/views/layers-menu.hbs new file mode 100644 index 0000000..c4ea3b3 --- /dev/null +++ b/views/layers-menu.hbs @@ -0,0 +1,49 @@ + + + + \ No newline at end of file diff --git a/_ext/modules/hbs/layout-contribute.hbs b/views/layout-contribute.hbs similarity index 100% rename from _ext/modules/hbs/layout-contribute.hbs rename to views/layout-contribute.hbs diff --git a/views/main-menu.hbs b/views/main-menu.hbs new file mode 100644 index 0000000..0b31a8a --- /dev/null +++ b/views/main-menu.hbs @@ -0,0 +1,68 @@ + \ No newline at end of file diff --git a/views/palette-popup.hbs b/views/palette-popup.hbs new file mode 100644 index 0000000..e5a3ae5 --- /dev/null +++ b/views/palette-popup.hbs @@ -0,0 +1,74 @@ + +
+ + +

Edit palette

+ +
+
+ + + + +
+ +
+ +
+
+ + + +
+ +
+ + + +
+ +
+ + + +
+
+ +
+ +
+ +
+
+ +
+
+ #123456 +
+
+ +
+ + + + + + +
+
+
+ +
+
    +
  • +
  • +
+
+ +
+ + +
+
\ No newline at end of file diff --git a/views/preload.hbs b/views/preload.hbs new file mode 100644 index 0000000..127eff7 --- /dev/null +++ b/views/preload.hbs @@ -0,0 +1,14 @@ +
+ + + + + + + + + + + + +
\ No newline at end of file diff --git a/views/settings-popup.hbs b/views/settings-popup.hbs new file mode 100644 index 0000000..a283ec3 --- /dev/null +++ b/views/settings-popup.hbs @@ -0,0 +1,22 @@ +
+ +

Settings

+ +
+

History

+
+ +
+ +

Pixel grid

+
+ +
+
+ +

Your browsers cookies are disabled, settings will be lost upon closing this page.

+ +
+ +
+
\ No newline at end of file diff --git a/views/splash-page-popup.hbs b/views/splash-page-popup.hbs new file mode 100644 index 0000000..2cecd55 --- /dev/null +++ b/views/splash-page-popup.hbs @@ -0,0 +1,69 @@ + +
+
+
+

Latest updates

+ + {{> latestLog}} +
+
+ +
+ + +
+
+

New Custom Pixel

+ +

Editor mode

+
+
+

Basic

+

Advanced

+
+
+ +

Size

+
+ {{svg "x.svg" width="16" height="16" class="dimentions-x"}} +
+ +

Palette

+ + + +
Creating a new pixel will discard your current one.
+
+ +
+
+ +
+
+ Quickstart +
+ +
+

Load

+

New Gameboy

+

New C64

+

New Pico8

+

New 16x16

+

New 32x32

+

New 64x64

+

New 128x128

+

New 256x256

+

New 512x512

+
+
+
+
+
\ No newline at end of file diff --git a/views/sprite-resize-popup.hbs b/views/sprite-resize-popup.hbs new file mode 100644 index 0000000..8db0ec0 --- /dev/null +++ b/views/sprite-resize-popup.hbs @@ -0,0 +1,49 @@ + +
+ +

Scale sprite

+ +

New size

+ +
+ + Width: + + + + Height: + +
+ + +

Resize percentages

+ +
+ + Width % + + + + Height % + +
+
+ + Keep current ratio + + + Scaling algorithm: + + +
+ +
+ +
\ No newline at end of file diff --git a/views/start-pixel-popup.hbs b/views/start-pixel-popup.hbs new file mode 100644 index 0000000..896325b --- /dev/null +++ b/views/start-pixel-popup.hbs @@ -0,0 +1,28 @@ + +
+ +

New Pixel

+ + +

Editor mode

+ + + +

+ + +

Preset

+ + + +

Size

+ {{svg "x.svg" width="16" height="16" class="dimentions-x"}} +

Palette

+ + + +
Creating a new pixel will discard your current one.
+
+ +
+
\ No newline at end of file diff --git a/views/tool-previews.hbs b/views/tool-previews.hbs new file mode 100644 index 0000000..0615d60 --- /dev/null +++ b/views/tool-previews.hbs @@ -0,0 +1,3 @@ + +
+
\ No newline at end of file diff --git a/views/tools-menu.hbs b/views/tools-menu.hbs new file mode 100644 index 0000000..9748228 --- /dev/null +++ b/views/tools-menu.hbs @@ -0,0 +1,46 @@ + \ No newline at end of file