From 2ab163ab689784a8c967c3e76c4faa2f6888dc8d Mon Sep 17 00:00:00 2001
From: Danielv123 <tranen.bananen@gmail.com>
Date: Mon, 26 Mar 2018 16:09:15 +0200
Subject: [PATCH] remoteMap don't error on broken image links

---
 static/lib/utility.js | 24 ++++++++++++++++++++++--
 static/remoteMap.js   |  4 ++--
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/static/lib/utility.js b/static/lib/utility.js
index 6e8a32d7..930f9653 100644
--- a/static/lib/utility.js
+++ b/static/lib/utility.js
@@ -23,11 +23,31 @@ export function drawImageWithRotation(ctx, image, x, y, w, h, degrees, sprWidth,
 		ctx.scale(1, -1);
 	}
 	
-	if(sprWidth != undefined && sprHeight != undefined && offLeft != undefined && offTop != undefined){
+	if(isImageOk(image) && sprWidth != undefined && sprHeight != undefined && offLeft != undefined && offTop != undefined){
 		// console.log(sprWidth+" "+sprHeight+" "+offLeft+" "+offTop+" "+w+" "+h)
 		ctx.drawImage(image, offLeft, offTop, sprWidth, sprHeight, x, y, w, h);
-	} else {
+	} else if(isImageOk(image)){
 		ctx.drawImage(image, x, y, w, h);
+	} else {
+		// console.log("Image is not OK! "+image.src);
 	}
 	ctx.restore();
+}
+export function isImageOk(img) {
+	// During the onload event, IE correctly identifies any images that
+	// weren't downloaded as not complete. Others should too. Gecko-based
+	// browsers act like NS4 in that they report this incorrectly.
+	if (!img.complete) {
+		return false;
+	}
+
+	// However, they do have two very useful properties: naturalWidth and
+	// naturalHeight. These give the true size of the image. If it failed
+	// to load, either of these should be zero.
+	if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) {
+		return false;
+	}
+
+	// No other way of checking: assume it's ok.
+	return true;
 }
\ No newline at end of file
diff --git a/static/remoteMap.js b/static/remoteMap.js
index f5166e15..5cfe1db3 100644
--- a/static/remoteMap.js
+++ b/static/remoteMap.js
@@ -20,7 +20,7 @@ console.log(":)")
 /// ES6 imports
 // rules for how entities are drawn (sizes, offset etc)
 import {entityDrawRules} from "./lib/entityDrawRules.js";
-import {getParameterByName, drawImageWithRotation} from "./lib/utility.js";
+import {getParameterByName, drawImageWithRotation, isImageOk} from "./lib/utility.js";
 import spritesheetJson from "./pictures/spritesheet.js";
 import {itemSelector} from "./remoteMap/itemSelection.js";
 var global = {};
@@ -407,7 +407,7 @@ function renderLoop(){
 		for(let y = 0-dh; y < remoteMapConfig.tileSize * remoteMapConfig.mapSize + dh; y += dh){
 			let dx = x - playerPosition.x % dw;
 			let dy = y - playerPosition.y % dh;
-			backgroundCtx.drawImage(global.grassBackground, 0, 64, 1024, 64, dx, dy, dw, dh);
+			if(global.grassBackground && isImageOk(global.grassBackground)) backgroundCtx.drawImage(global.grassBackground, 0, 64, 1024, 64, dx, dy, dw, dh);
 		}
 	}
 }