#61 Basic canvas rendering is now working

lib/chunkStore.js

@@ -15,9 +15,9 @@ module.exports = class chunkStore {
 	}
 	setEntity(x/**{number}*/, y/**{number}*/, newEntity/**{object}*/){
 		return new Promise((resolve, reject) => {
-			var localX = Math.round(x % this.chunkSize);
+			var localX = x > 0 ? Math.round(x % this.chunkSize) : Math.round(x % this.chunkSize)-64;
 			x = Math.floor(Math.round(x)/this.chunkSize);
-			var localY = Math.round(y % this.chunkSize);
+			var localY = y > 0 ? Math.round(y % this.chunkSize) : Math.round(x % this.chunkSize)-64;
 			y = Math.floor(Math.round(y)/this.chunkSize);
 			
 			this.getChunk(x,y).then(chunk => {
@@ -43,7 +43,7 @@ module.exports = class chunkStore {
 	setChunk(x, y, chunk){
 		return new Promise((resolve, reject) => {
 			mkdirp(this.path+this.name+"/"+x).then(() => {
-				fs.writeFile(this.path+this.name+"/"+x+"/"+y, JSON.stringify(chunk), function(err){
+				fs.writeFile(this.path+this.name+"/"+x+"/"+y, JSON.stringify(chunk, null, 4), function(err){
 					if(err) {
 						reject(err);
 					} else resolve();

sharedPlugins/remoteMap/control.lua

@@ -50,19 +50,14 @@ function writeout_objects(surface, area)
 	--if my_client_id ~= 1 then return end
 	header = "objects "..area.left_top.x..","..area.left_top.y..";"..area.right_bottom.x..","..area.right_bottom.y..": "
 	line = ''
-	lines={}
 	for idx, ent in pairs(surface.find_entities(area)) do
 		if area.left_top.x <= ent.position.x and ent.position.x < area.right_bottom.x and area.left_top.y <= ent.position.y and ent.position.y < area.right_bottom.y then
 			if ent.prototype.collision_mask ~= nil and ent.prototype.collision_mask['player-layer'] then
-				line=line..","..ent.name.." "..ent.position.x.." "..ent.position.y
-				if idx % 100 == 0 then
-					table.insert(lines,line)
-					line=''
-				end
+				line = line .. ent.name.." "..ent.position.x.." "..ent.position.y.."\n"
 			end
 		end
 	end
-	table.insert(lines,line)
+	write_file(line)
 	--write_file(header..table.concat(lines,"").."\n")
 	--write_file(table.concat(lines,"").."\n")
 	line=nil

static/remoteMap.html

@@ -9,7 +9,8 @@
 	<%- include("sidebar.html") %>
 	<div id="body">
 		<h2>remoteMap</h2>
-		<div id="remoteMap">
-		</div>
+		<canvas id="remoteMap" width="2500px" height="2500px" style="border:1px solid #000000;">
+			
+		</canvas>
 	</div>
 </body>

static/remoteMap.js

@@ -5,9 +5,49 @@ socket.on('hello', function (data) {
 	
 	socket.on("displayChunk", function(chunk){
 		console.log(chunk)
+		drawChunk(chunk, ctx)
 	});
 });
 
 function requestChunk(x,y){
 	socket.emit('requestChunk', {x:x, y:y, instanceID: '1611985668'});
+}
+setTimeout(function(){
+	canvas = document.getElementById("remoteMap");
+	ctx = canvas.getContext("2d");
+	ctx.beginPath();
+	ctx.arc(95,50,40,0,2*Math.PI);
+	ctx.stroke();
+	ctx.font = "30px Arial";
+	ctx.fillText("Hello World",10,50);
+	
+	var img = new Image();
+	img.onload = function() {
+		ctx.drawImage(img, 0, 0, 32, 32);
+	};
+	img.src = 'https://wiki.factorio.com/images/Lab.png';
+	
+	requestChunk(0, -1);
+}, 500);
+entityImages = {};
+entityImages["express-transport-belt"] = new Image();
+entityImages["express-transport-belt"].src = 'https://wiki.factorio.com/images/Express_transport_belt.png';
+function drawChunk(chunk, ctx){
+	Object.keys(chunk.dataObject).forEach(xValue => {
+		let xRow = chunk.dataObject[xValue];
+		Object.keys(xRow).forEach(yValue => {
+			let yCell = xRow[yValue];
+			if(yCell && yCell.name && yCell.name){
+				let img = new Image();
+				let xPos = (xValue*16)+(chunk.position.x*64*16)+(64*16*3);
+				let yPos = (yValue*16)+(chunk.position.y*64*16)+(64*16);
+				img.onload = function() {
+					ctx.drawImage(img, xPos, yPos, 16, 16);
+					console.log("X: "+xPos+", Y: "+yPos)
+				};
+				img.src = getImageFromName(yCell.name);
+				//img.src = entityImages[yCell.name].src;
+			}
+		});
+	});
 }