Working (dé)connections

js/game.js

@@ -15,6 +15,60 @@ players=Net.getPlayersToAdd();
 
 let dt = 1;
 
+let playerToUpdate;
+
+function update()
+{
+	playerToUpdate = Net.getPlayersToUpdate();
+	for (let i = 0;i<playerToUpdate.length;i++)
+	{
+		for (let j = 0;j<players.length;j++)
+		{
+			if(players[j].id==playerToUpdate[i].id)
+			{
+				players[j].x=playerToUpdate[i].x;
+				players[j].y=playerToUpdate[i].y;
+				players[j].dir=playerToUpdate[i].dir;
+				players[j].visibleDir=playerToUpdate[i].visibleDir;
+				break;
+			}
+		}
+	}
+}
+
+function addPlayers()
+{
+	let playersToAdd = Net.getPlayersToAdd();
+	if (playersToAdd.length==0)
+		return;
+	
+	playersToAdd.forEach((p) => {
+		console.log("New player: ",playersToAdd[0].id);
+		players.push(playersToAdd[0]);
+		Renderer.AddPlayer(p);
+	});
+}
+
+function remPlayers()
+{
+	let playerToRemove = Net.getPlayersToRemove();
+	if(playerToRemove.length==0)
+		return;
+	for(let i=0;i<playerToRemove.length;i++)
+	{
+		let id = playerToRemove[i];
+		Renderer.RemPlayer(id);
+		console.log("deleting Player ",id);
+		for(let i = 0;i<players.length;i++)
+		{
+			if (players[i].id==id)
+			{
+				players.splice(i,1);
+				break;
+			}
+		}
+	}
+}
 
 let currentTime = new Date();
 function game() {
@@ -31,50 +85,18 @@ function game() {
 			Renderer.AddPlayer(player)
 			players.forEach((p) => {
 				Renderer.AddPlayer(p)
-			})
+			});
 		}
 	}
 	else
 	{
-		let playerToUpdate = Net.getPlayersToUpdate();
+		update();
-		for (let i = 0;i<playerToUpdate.length;i++)
+		addPlayers();
-		{
+		remPlayers();
-			for (let j = 0;j<players.length;j++)
-			{
-				if(players[j].id==playerToUpdate[i].id)
-				{
-					//console.log("updated player",playerToUpdate[i].id);
-					players[j].x=playerToUpdate[i].x;
-					players[j].y=playerToUpdate[i].y;
-					players[j].dir=playerToUpdate[i].dir;
-					players[j].visibleDir=playerToUpdate[i].visibleDir;
-					//console.log();
-					break;
-				}
-			}
-		}
-		let playersToAdd = Net.getPlayersToAdd();
-		if (playersToAdd.length!=0)
-			console.log("added ",playersToAdd.length);
-		players.concat(playersToAdd);
-		let playerToRemove = Net.getPlayersToRemove();
-		for(let id in playerToRemove)
-		{
-			console.log("deleting ",id);
-			for(let i = 0;i<players.length;i++)
-			{
-				if (players[i].id==id)
-				{
-					players.splice(i,1);
-					break;
-				}
-			}
-		}
 		player.update([],[], dt);
 		for (var i = players.length - 1; i >= 0; i--) {
 			players[i].update([],[], dt);//squares, circles
 		}
-		//console.log(Inp.calculateAngle(500,500))
 		Renderer.ReloadAff();
 	}
 

js/render.js

@@ -1,4 +1,8 @@
+const img = new Image();
+img.src = "./assets/body3.png";
+
 class Render {
+
 	constructor(id, mapsrc) {
 		this.canvas = document.getElementById(id);
 		this.ctx = canvas.getContext("2d");
@@ -8,16 +12,21 @@ class Render {
 	}
 
 	AddPlayer(player) {
-		this.players[player.id] = player;
+		this.players.push(player);
 	}
 
 	RemPlayer(id) {
-		this.players[id] = null
+		for(let i=0;i<this.players.length;i++)
+		{
+			if(this.players[i].id==id)
+			{
+				this.players.splice(i,1);
+				break;
+			}
+		}
 	}
 
 	RenderPlayer(player) {
-		const img = new Image();
-		img.src = "./assets/body3.png";
 	    this.ctx.save();
 	    this.ctx.translate(player.x, player.y);
 	    this.ctx.rotate(player.angle);