From c135e2838d2ea76539a073c27d9ad8a6bb70f296 Mon Sep 17 00:00:00 2001 From: Sam Keddy Date: Thu, 13 Jan 2022 14:40:35 -0500 Subject: [PATCH] fixed urls changed all urls to be relative (no starting slash) and without /pixel-editor/. Fixed the testing server to deal with these requests (and also include some better logging). --- build.js | 2 ++ css/_canvas.scss | 2 +- css/_colors-menu.scss | 2 +- css/_popup-container.scss | 4 +-- images/favicon.ico | Bin 0 -> 318 bytes js/tools/PanTool.js | 6 ++-- server.js | 65 ++++++++++++++++++++++++----------- views/index.hbs | 6 ++-- views/latestLog.hbs | 2 +- views/logs/splash-update.hbs | 10 +++--- views/popups/splash-page.hbs | 2 +- views/preload.hbs | 22 ++++++------ 12 files changed, 74 insertions(+), 49 deletions(-) create mode 100644 images/favicon.ico diff --git a/build.js b/build.js index 5b4b4d0..3a2b332 100644 --- a/build.js +++ b/build.js @@ -17,6 +17,8 @@ console.log('Building Pixel Editor'); function copy_images(){ // Icons gulp.src('./images/*.png').pipe(gulp.dest(BUILDDIR)); + //favicon + gulp.src('./images/*.ico').pipe(gulp.dest(BUILDDIR)); // Splash images gulp.src('./images/Splash images/*.png').pipe(gulp.dest(BUILDDIR)); // Logs images diff --git a/css/_canvas.scss b/css/_canvas.scss index 5d02f4c..8354543 100644 --- a/css/_canvas.scss +++ b/css/_canvas.scss @@ -1,7 +1,7 @@ .drawingCanvas { - cursor: url('/pixel-editor/pencil-tool-cursor.png'); + cursor: url('pencil-tool-cursor.png'); border: solid 1px #fff; image-rendering: optimizeSpeed; diff --git a/css/_colors-menu.scss b/css/_colors-menu.scss index ec70b43..a19277d 100644 --- a/css/_colors-menu.scss +++ b/css/_colors-menu.scss @@ -112,7 +112,7 @@ button { border: none; width: 100%; - cursor: url('/pixel-editor/eyedropper.png'), auto; + cursor: url('eyedropper.png'), auto; } //white outline &.selected button::before { content: ""; diff --git a/css/_popup-container.scss b/css/_popup-container.scss index b81cf3e..5e05ad3 100644 --- a/css/_popup-container.scss +++ b/css/_popup-container.scss @@ -116,7 +116,7 @@ } .dropdown-button { - background: $basehover url('/pixel-editor/dropdown-arrow.png') right center no-repeat; + background: $basehover url('dropdown-arrow.png') right center no-repeat; border: none; border-radius: 4px; color: $basehovertext; @@ -126,7 +126,7 @@ width: 200px; text-align: left; &:hover { - background: $baseselected url('/pixel-editor/dropdown-arrow-hover.png') right center no-repeat; + background: $baseselected url('dropdown-arrow-hover.png') right center no-repeat; color: $baseselectedtext; } &.selected { diff --git a/images/favicon.ico b/images/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..0c0b66baac28de389409732f33ecf039d419ee42 GIT binary patch literal 318 zcmb`AF$#b%5Cq3yXA=;tL#lKZ;{W_;K9E literal 0 HcmV?d00001 diff --git a/js/tools/PanTool.js b/js/tools/PanTool.js index af54a5e..628de71 100644 --- a/js/tools/PanTool.js +++ b/js/tools/PanTool.js @@ -10,7 +10,7 @@ class PanTool extends Tool { super.onStart(mousePos); if (target.className != 'drawingCanvas') return; - currFile.canvasView.style.cursor = "url(\'/pixel-editor/pan-held.png\'), auto"; + currFile.canvasView.style.cursor = "url(\'pan-held.png\'), auto"; } onDrag(mousePos, target) { @@ -31,12 +31,12 @@ class PanTool extends Tool { if (target.className != 'drawingCanvas') return; - currFile.canvasView.style.cursor = "url(\'/pixel-editor/pan.png\'), auto"; + currFile.canvasView.style.cursor = "url(\'pan.png\'), auto"; } onSelect() { super.onSelect(); - currFile.canvasView.style.cursor = "url(\'/pixel-editor/pan.png\'), auto"; + currFile.canvasView.style.cursor = "url(\'pan.png\'), auto"; } onDeselect() { diff --git a/server.js b/server.js index 3bb5c2e..3fcb6b0 100644 --- a/server.js +++ b/server.js @@ -5,12 +5,46 @@ const app = express(); const BUILDDIR = process.argv[2] || './build'; const PORT = process.argv[3] || 3000; +const FULLBUILDPATH = path.join(__dirname, BUILDDIR) +//LOGGING +app.use((req, res, next)=> { + //console.log('REQUEST', req.method+' '+req.originalUrl, res.statusCode); + next(); +}); + + +//apply to every request +app.use((req, res, next) => { + //disable caching + res.set("Cache-Control", "no-store"); + + //enabled/disable reload module + if (process.env.RELOAD === "yes") res.locals.reload = true; + + return next(); +}); //ROUTE - other files -app.use('/pixel-editor', express.static(path.join(__dirname, BUILDDIR))); +app.use('/', express.static(FULLBUILDPATH, { + //custom function required for logging static files + setHeaders: (res, filePath, fileStats) => { + console.info('GET', '/'+path.relative(FULLBUILDPATH, filePath), res.statusCode); + } +})); + +//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('/', (req, res, next) => { + console.log('root') + res.sendFile(path.join(__dirname, BUILDDIR, 'index.htm'), {}, function (err) { + console.log('sent file'); + return next(); + }); +}); + +//HOT RELOADING // "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 // intrusive so we decided to give option to choose preferred workflow. @@ -19,6 +53,7 @@ if (process.env.RELOAD === "yes") { //start server app.server = app.listen(PORT, () => { console.log(`Web server listening on port ${PORT} (with reload module)`); + }) }); } else { @@ -27,25 +62,13 @@ if (process.env.RELOAD === "yes") { }) } -// 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); - } - }); +app.use(function(req, res, next) { + res.status(404); + res.type('txt').send('The requested resource does not exist. Did you spell it right? Did you remember to build the app? It\'s probably your fault somehow.'); + return next(); }); -// Better to show landing page rather than 404 on editor page reload -app.get('/pixel-editor/app', (req, res) => { - res.redirect('/'); -}) - +//LOGGING +app.use((req, res, next)=> { + console.log(req.method+' '+req.originalUrl, res.statusCode); +}); diff --git a/views/index.hbs b/views/index.hbs index afc1e25..af4a57e 100644 --- a/views/index.hbs +++ b/views/index.hbs @@ -6,7 +6,7 @@ {{title}} - + {{{google-analytics}}} {{{favicons}}} @@ -40,7 +40,7 @@ {{> save-project}} - - + + {{#reload}}{{/reload}} \ No newline at end of file diff --git a/views/latestLog.hbs b/views/latestLog.hbs index 8c45377..ea85b0e 100644 --- a/views/latestLog.hbs +++ b/views/latestLog.hbs @@ -7,7 +7,7 @@ We have some good news for users as well! I've worked a bit on the pixel grid to make it look a bit better and less intrusive when zooming in. You can see the difference in behaviour between the new grid (left) and the old grid (right) in the image below. - + In addition, the pixel grid will now automatically be hidden when the zoom level becomes too low: in that way looking at big sprites becomes a lot less performance-heavy and it doesn't cause lag. diff --git a/views/logs/splash-update.hbs b/views/logs/splash-update.hbs index 6cdd02a..612057f 100644 --- a/views/logs/splash-update.hbs +++ b/views/logs/splash-update.hbs @@ -7,7 +7,7 @@ The editor now has a splash page! Besides a fancy cover image with beautiful art left of the page you'll be able to create a new custom pixel. You can also use the quickstart menu to quickly select a preset or load an existing file. It was designed by Skeddles himself! - + Pro tip: once you've created a new project, you can go back to the splash page by clicking on Editor -> Splash page @@ -19,7 +19,7 @@ You can now click on Edit -> Resize canvas to decrease the size drew an ant on a 1024x1024 canvas, just go to Edit -> Resize canvas and decrease the dimensions. - +

Sprite scaling

@@ -29,14 +29,14 @@ to scale up or down your work. With the nearest-neighbour algorithm you'll be ab in a pixel-perfect manner, while with bilinear interpolation it's possible to add (or remove, if you're scaling down a sprite) antialiasing. - +

Line tool

Our contributor Liam added a new line tool! Quality of life improvement are planned for it, the rectangle and the rectangular selection tools. - +

Advanced mode: colour picker and palette block

@@ -46,7 +46,7 @@ you'll find the new palette block, which lets you arrange your colours however y remove multiple colours at once. Changes made in the palette block will update the palette list you've always been familiar with. - +

Other changes: