Merge pull request #71 from lospec/url-fix-test

fixed urls

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

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;

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: "";

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 {

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() {

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);
+});

views/index.hbs

@@ -6,7 +6,7 @@
     <title>{{title}}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,700,900" rel="stylesheet">
-    <link rel="stylesheet" href="/pixel-editor/pixel-editor.css" />
+    <link rel="stylesheet" href="/pixel-editor.css" />
     <meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
     {{{google-analytics}}}
     {{{favicons}}}
@@ -40,7 +40,7 @@
 		{{> save-project}}
     </div>
 
-    <script src="/pixel-editor/pixel-editor.js"></script>
-    <script src="/reload/reload.js"></script>
+    <script src="/pixel-editor.js"></script>
+    {{#reload}}<script src="/reload/reload.js"></script>{{/reload}}
 </body>
 </html>

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.
-<img src="/pixel-editor/grid.png"/>
+<img src="grid.png"/>
 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.
 

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 <a href="https://twitter.com/skeddles">Skeddles</a> himself!
 
-<img src="/pixel-editor/splash.gif"/>
+<img src="splash.gif"/>
 
 <strong>Pro tip: </strong> once you've created a new project, you can go back to the splash page
 by clicking on <strong>Editor -> Splash page</strong>
@@ -19,7 +19,7 @@ You can now click on <strong>Edit -> Resize canvas</strong> to decrease the size
 drew an ant on a 1024x1024 canvas, just go to <strong>Edit -> Resize canvas</strong> and decrease
 the dimensions.
 
-<img src="/pixel-editor/resize-canvas.gif"/>
+<img src="resize-canvas.gif"/>
 
 <h2>Sprite scaling</h2>
 
@@ -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.
 
-<img src="/pixel-editor/scale-sprite.gif"/>
+<img src="scale-sprite.gif"/>
 
 <h2>Line tool</h2>
 
 Our contributor <a href="https://github.com/liamortiz">Liam</a> added a new line tool! Quality of
 life improvement are planned for it, the rectangle and the rectangular selection tools.
 
-<img src="/pixel-editor/line-tool.gif"/>
+<img src="line-tool.gif"/>
 
 <h2>Advanced mode: colour picker and palette block</h2>
 
@@ -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.
 
-<img src="/pixel-editor/palette-block.gif"/>
+<img src="palette-block.gif"/>
 
 <h2>Other changes:</h2>
 <ul>

views/popups/splash-page.hbs

@@ -12,7 +12,7 @@
 		<div id="editor-logo">
 			<div id="black">
 				<div id="sp-coverdata">
-					<img src="https://lospec.com/brand/lospec_logo_3x.png"/> pixel editor
+					<img src="https://cdn.lospec.com/static/brand/lospec_logo_3x.png"/> pixel editor
 					<p>Version 1.4.0</p>
 					<a href="https://cdn.discordapp.com/attachments/506277390050131978/795660870221955082/final.png">Art by Unsettled</a>
 				</div>

views/preload.hbs

@@ -1,14 +1,14 @@
 <div class="preload">
-	<img src="/pixel-editor/dropdown-arrow.png" />
-	<img src="/pixel-editor/dropdown-arrow-hover.png" />
-	<img src="/pixel-editor/eyedropper.png" />
-	<img src="/pixel-editor/fill.png" />
-	<img src="/pixel-editor/pan.png" />
-	<img src="/pixel-editor/pan-held.png" />
-	<img src="/pixel-editor/pencil.png" />
-	<img src="/pixel-editor/zoom-in.png" />
-	<img src = "/pixel-editor/eraser.png"/>
-	<img src = "/pixel-editor/rectselect.png"/>
+	<img src="dropdown-arrow.png" />
+	<img src="dropdown-arrow-hover.png" />
+	<img src="eyedropper.png" />
+	<img src="fill.png" />
+	<img src="pan.png" />
+	<img src="pan-held.png" />
+	<img src="pencil.png" />
+	<img src="zoom-in.png" />
+	<img src = "eraser.png"/>
+	<img src = "rectselect.png"/>
 	<!-- TODO: [ELLIPSE] Where is this icon used? Do we need similar one for ellipsis? -->
-	<img src= "/pixel-editor/rectangle.png">
+	<img src= "rectangle.png">
 </div>