remoteMap stone/steel furnace scaling, inserter rotations

static/lib/entityDrawRules.js

@@ -15,8 +15,8 @@ export var entityDrawRules = {
 	"accumulator": {
 		spritesheet: spritesheetJson.frames["images/factorio/entity/accumulator/accumulator.png"],
 		sizeInTiles: {
-			x:4,
-			y:4,
+			x:3.5,
+			y:3.5,
 		},
 		positionOffset: {
 			x:-1,
@@ -45,6 +45,28 @@ export var entityDrawRules = {
 			y:-1,
 		},
 	},
+	"stone-furnace": {
+		spritesheet: spritesheetJson.frames["images/factorio/entity/stone-furnace/stone-furnace.png"],
+		sizeInTiles: {
+			x:3,
+			y:2.2,
+		},
+		positionOffset: {
+			x:-0.9,
+			y:-1,
+		},
+	},
+	"steel-furnace": {
+		spritesheet: spritesheetJson.frames["images/factorio/entity/steel-furnace/steel-furnace.png"],
+		sizeInTiles: {
+			x:2.5,
+			y:2.5,
+		},
+		positionOffset: {
+			x:-1.2,
+			y:-1.1,
+		},
+	},
 };
 let template3x3entity = {
 	sizeInTiles: {
@@ -101,22 +123,7 @@ for(let i = 1; i <= 3; i++){
 		},
 	}
 });
-// 2 tile entities
-[{name: "stone-furnace", ref:"images/factorio/entity/stone-furnace/stone-furnace.png"},
-	{name: "steel-furnace", ref:"images/factorio/entity/steel-furnace/steel-furnace.png"}
-	].forEach(ent => {
-	entityDrawRules[ent.name] = {
-		spritesheet: spritesheetJson.frames[ent.ref],
-		sizeInTiles: {
-			x:2.5,
-			y:2.5,
-		},
-		positionOffset: {
-			x:-1,
-			y:-1,
-		},
-	}
-});
+
 ["transport-belt", "fast-transport-belt", "express-transport-belt"].forEach(name => {
 	entityDrawRules[name] = {
 		rotOffset: 270,
@@ -129,6 +136,11 @@ for(let i = 1; i <= 3; i++){
 		}
 	}
 });
+["inserter", "fast-inserter", "stack-inserter", "filter-inserter"].forEach(inserter => {
+	entityDrawRules[inserter] = {
+		rotOffset:90,
+	}
+});
 entityDrawRules["oil-refinery"] = {
 	spritesheet: spritesheetJson.frames["images/factorio/entity/oil-refinery/oil-refinery.png.0"],
 	sizeInTiles: {

static/remoteMap.js

@@ -405,7 +405,7 @@ function drawEntity(entity, dontCache){
 		if(entity.entity && entity.entity.name && typeof entity.entity.name == "string"){
 			let name = entity.entity.name;
 			if(!entityImages[name]){
-				console.log("Downloading image")
+				console.log("Downloading image "+name);
 				// download the entityImages and add stuff  to queue
 				entityImages[name] = {
 					img: new Image(),
@@ -418,14 +418,13 @@ function drawEntity(entity, dontCache){
 						let image, sprWidth, sprHeight, offLeft, offTop
 						let rotation = 0;
 						// check hardcoded entity draw rules for specifics (otherwise draw icon as 1x1 entity with rotation if specified)
-						if(entityDrawRules[name]){
+						if(entityDrawRules[name] && entityDrawRules[name].positionOffset){
 							let rules = entityDrawRules[name]
-							// console.log(entityDrawRules[name])
-							var offsetX = entityDrawRules[name].positionOffset.x;
-							var offsetY = entityDrawRules[name].positionOffset.y;
+							var offsetX = rules.positionOffset.x;
+							var offsetY = rules.positionOffset.y;
 							var size = {
-								x: remoteMapConfig.tileSize * entityDrawRules[name].sizeInTiles.x,
-								y: remoteMapConfig.tileSize * entityDrawRules[name].sizeInTiles.y,
+								x: remoteMapConfig.tileSize * rules.sizeInTiles.x,
+								y: remoteMapConfig.tileSize * rules.sizeInTiles.y,
 							};
 							if(rules.spritesheet && Array.isArray(rules.spritesheet)){
 								let dir = Number(entity.entity.rot);
@@ -465,7 +464,7 @@ function drawEntity(entity, dontCache){
 							}
 						}
 						if(!image) image = entityImages[name].img;
-						drawImageWithRotation(ctx, image, xPos, yPos, size.x, size.y, rotation, sprWidth, sprHeight, offLeft, offTop);
+						drawImageWithRotation(ctx, image, xPos, yPos, size.x, size.y, rotation%360, sprWidth, sprHeight, offLeft, offTop);
 						//console.log("Drawing "+name+" at X: "+xPos+", Y: "+yPos+" with with rotation "+rotation);
 					} else {
 						// we are waiting for the image to load, push the task to our queue. It will be processed once the image loads.
@@ -484,7 +483,7 @@ function drawEntity(entity, dontCache){
 				entityImages[name].queue.push(entity);
 				entityImages[name].img.onload = imageLoaded()
 				
-				if(entityDrawRules[name]){
+				if(entityDrawRules[name] && entityDrawRules[name].spritesheet){
 					imageLoaded();
 				} else entityImages[name].img.src = getImageFromName(name);
 			} else {

static/remoteMap/itemSelection.js

@@ -21,8 +21,8 @@ export class itemSelector {
 		// direction selector
 		HTML += "<div id='directionSelector'>";
 			HTML += "<h2>Direction: </h2>";
+			HTML += "<h2 id='directionDisplay'>"+this.directionToCardinal(0)+"</h2>"
 			HTML += "<p>Press R to rotate</p>";
-			HTML += "<p id='directionDisplay'>0</p>"
 		HTML += "</div>";
 		
 		// write styles
@@ -53,10 +53,29 @@ export class itemSelector {
 		// handle direction keyboard event
 		Mousetrap.bind('r', ()=>this.rotate());
 	}
+	directionToCardinal(dir){
+		if(dir == 0){
+			return "north";
+		} else if(dir == 1){
+			return "north-east";
+		} else if(dir == 2){
+			return "east";
+		} else if(dir == 3){
+			return "south-east";
+		} else if(dir == 4){
+			return "south";
+		} else if(dir == 5){
+			return "south-west";
+		} else if(dir == 6){
+			return "west";
+		} else if(dir == 7){
+			return "north-west";
+		}
+	}
 	rotate(){
 		this.direction = (this.direction + 2) % 8;
 		// update display
-		document.querySelector("#directionDisplay").innerHTML = this.direction;
+		document.querySelector("#directionDisplay").innerHTML = this.directionToCardinal(this.direction);
 	}
 	getItem(){
 		let name = document.querySelector(this.containerSelector+" > .itemSelector > select").value;