class Render {
	constructor(id, mapsrc) {
		this.canvas = document.getElementById(id);
		this.ctx = canvas.getContext("2d");
		this.players = [];
		this.mapsrc=mapsrc
		this.ReloadAff();
	}

	AddPlayer(player) {
		this.players[player.id] = player;
	}

	RenderPlayer(player) {
		const img = new Image();
		img.src = "./assets/body.png";
	    this.ctx.save();
	    this.ctx.translate(player.x, player.y);
	    this.ctx.rotate(player.angle);
	    this.ctx.drawImage(img, -playerSize / 2, -playerSize / 2, playerSize, playerSize);
	    this.ctx.restore();
	}

	ReloadAff() {
		/*this.ctx.fillStyle = "red";
   		this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height);
		*/
		const fond = new Image();
		fond.src = this.mapsrc;
		mapWidth = fond.width
		mapHeith = fond.height
		this.ctx.canvas.width = mapWidth
		this.ctx.canvas.height = mapHeith
	    this.ctx.drawImage(fond, 0, 0, mapWidth, mapHeith);
   		this.players.forEach((player) => {
   			this.RenderPlayer(player);
   		})
	}
}