Using real textures of belts from spritesheet instead of icons

lib/npmPostinstall.js

@@ -19,12 +19,13 @@ directories.forEach(path => {
 	});
 });
 
-function download(url, file){
+function download(url, file, callback){
 	var writeStream = fs.createWriteStream(file);
 	var request = http.get(url, function(response) {
 	  response.pipe(writeStream);
 	  response.on("end", () => {
-		  console.log("Downloaded "+file+" from "+url)
+			if(callback && typeof callback == "function") callback(file);
+			console.log("Downloaded "+file+" from "+url);
 	  });
 	});
 }
@@ -32,7 +33,10 @@ function download(url, file){
 let downloadList = [
 	{
 		url: "http://fbpviewer.trakos.pl/images/spritesheet.json",
-		file: "static/pictures/spritesheet.json",
+		file: "static/pictures/spritesheet.js",
+		callback: function(file){
+			fs.writeFileSync("static/pictures/spritesheet.js", "export default\n"+fs.readFileSync("static/pictures/spritesheet.js"));
+		},
 	},
 	{
 		url: "http://fbpviewer.trakos.pl/images/spritesheet.png",
@@ -40,7 +44,7 @@ let downloadList = [
 	},
 ]
 downloadList.forEach(item => {
-	download(item.url, item.file);
+	download(item.url, item.file, item.callback);
 });
 
 // generate SSL certificates if they are missing

static/lib/entityDrawRules.js

@@ -1,3 +1,6 @@
+
+import spritesheetJson from "./../pictures/spritesheet.js";
+
 export var entityDrawRules = {
 	"big-electric-pole": {
 		sizeInTiles: {
@@ -35,5 +38,29 @@ for(let i = 1; i <= 3; i++){
 	entityDrawRules[name] = template3x3entity;
 };
 ["chemical-plant", "radar", "solar-panel", "lab", "electric-mining-drill", "beacon", "electric-furnace"].forEach(name => {
-	entityDrawRules[name] = template3x3entity;
+	entityDrawRules[name] = {
+		spritesheet: spritesheetJson.frames["images/factorio/entity/"+name+"/"+name+".png.0"],
+			sizeInTiles: {
+			x:3,
+			y:3,
+		},
+		positionOffset: {
+			x:-1,
+			y:-1,
+		},
+	}
+	// entityDrawRules[name] = template3x3entity;
 });
+["transport-belt", "fast-transport-belt", "express-transport-belt"].forEach(name => {
+	entityDrawRules[name] = {
+		rotOffset: 270,
+		spritesheet: spritesheetJson.frames["images/factorio/entity/"+name+"/"+name+".png.10"],
+		sizeInTiles: {
+			x:1.2,y:1.6,
+		},
+		positionOffset: {
+			x:0,y:0,
+		}
+	}
+});
+

static/remoteMap.js

@@ -6,6 +6,8 @@
 // rules for how entities are drawn (sizes, offset etc)
 import {entityDrawRules} from "./lib/entityDrawRules.js";
 import {getParameterByName} from "./lib/utility.js";
+import spritesheetJson from "./pictures/spritesheet.js";
+var global = {};
 
 const remoteMapConfig = {
 	mapSize : 64,
@@ -19,7 +21,11 @@ socket.on('hello', function (data) {
 		setInterval(()=>{
 			socket.emit("heartbeat"); // send our heartbeat to prevent being assumed dead
 		},10000);
-		requestMapDraw();
+		global.spritesheet = new Image();
+		global.spritesheet.onload = function(){
+			requestMapDraw();
+		}
+		global.spritesheet.src = "/pictures/spritesheet.png";
 	});
 	
 	socket.on("displayChunk", function(chunk){
@@ -56,12 +62,18 @@ function requestMapDraw(){
 		}
 	}
 }
-function drawImageWithRotation(ctx, image, x, y, w, h, degrees){
+// ctx, entityImages[name].img, xPos, yPos, size.x, size.y, rotation, sprWidth, sprHeight, offLeft, offTop
+function drawImageWithRotation(ctx, image, x, y, w, h, degrees, sprWidth, sprHeight, offLeft, offTop){
 	ctx.save();
 	ctx.translate(x+w/2, y+h/2);
 	ctx.rotate(degrees*Math.PI/180.0);
 	ctx.translate(-x-w/2, -y-h/2);
-	ctx.drawImage(image, x, y, w, h);
+	if(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 {
+		ctx.drawImage(image, x, y, w, h);
+	}
 	ctx.restore();
 }
 
@@ -152,6 +164,7 @@ function drawFromCache(){
 	});
 }
 var entityImages = {}; // cache to store images and details about entities, populated by drawEntity();
+
 function drawEntity(entity, dontCache){
 	if(entity.x && entity.y){
 		if(!dontCache){
@@ -187,14 +200,24 @@ function drawEntity(entity, dontCache){
 				entityImages[name].draw = function(entity){
 					if(this.loaded){
 						let name = entity.entity.name;
+						let image, sprWidth, sprHeight, offLeft, offTop
 						// check hardcoded entity draw rules for specifics (otherwise draw icon as 1x1 entity with rotation if specified)
 						if(entityDrawRules[name]){
+							let rules = entityDrawRules[name]
+							// console.log(entityDrawRules[name])
 							var offsetX = entityDrawRules[name].positionOffset.x;
 							var offsetY = entityDrawRules[name].positionOffset.y;
 							var size = {
 								x: remoteMapConfig.tileSize * entityDrawRules[name].sizeInTiles.x,
 								y: remoteMapConfig.tileSize * entityDrawRules[name].sizeInTiles.y,
 							};
+							if(rules.spritesheet){
+								sprWidth = rules.spritesheet.frame.w;
+								sprHeight = rules.spritesheet.frame.h;
+								offLeft = rules.spritesheet.frame.x;
+								offTop = rules.spritesheet.frame.y;
+								image = global.spritesheet
+							}
 						} else {
 							var offsetX = 0, offsetY = 0;
 							var size = {
@@ -205,10 +228,14 @@ function drawEntity(entity, dontCache){
 						let yPos = ((entity.y + offsetY) * 16) - playerPosition.y;
 						let rotation = 0;
 						if(entity.entity.rot && !isNaN(Number(entity.entity.rot))){
-							rotation = entity.entity.rot * 45;
+							if(entityDrawRules[name] && entityDrawRules[name].rotOffset){
+								rotation = ((entity.entity.rot * 45) + entityDrawRules[name].rotOffset);
+							} else {
+								rotation = entity.entity.rot * 45;
+							}
 						}
-						
-						drawImageWithRotation(ctx, entityImages[name].img, xPos, yPos, size.x, size.y, rotation);
+						if(!image) image = entityImages[name].img;
+						drawImageWithRotation(ctx, image, xPos, yPos, size.x, size.y, rotation, 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.