const imgPlayer = new Image();
const imgBullet = new Image();
const imgCar = new Image();
const map = new Image();
const map2 = new Image();
imgPlayer.src = "./assets/body.png";
imgBullet.src = "./assets/bullet.png";
imgCar.src = "./assets/car.png";
map.src = "./assets/map_principale.png"
map2.src = "./assets/map_secondaire.png";

class Render {
	constructor(idCanvas) {
		this.canvas = document.getElementById(idCanvas);
		this.ctx = canvas.getContext("2d");
		this.ReloadAff();
		this.map=0
	}

	RenderPlayer(player) {
		let x=player.x
		let y=player.y
		if(x>=2000 && y>=2000 && this.map==1) {
			x=player.x-2000
			y=player.y-2000
		}

		//this.map==1 && (x<2000 || y<2000)
		if((this.map==1 && player.x>=2000 && player.y>=2000) || (this.map==0 && x<2000 && y <2000)) {
			this.ctx.save();
		    this.ctx.translate(x, y);
		    this.ctx.rotate(player.angle);
		    this.ctx.drawImage(imgPlayer, -playerSize / 2, -playerSize / 2, playerSize, playerSize);
		    this.ctx.restore();
			this.ctx.fillStyle = 'white';
	        this.ctx.font="10pt arial";
	        this.ctx.fillText(player.name,x-name.length*10/3,y-playerSize/1.8);
	        if(player.id==this.playerid) {
				this.ctx.fillStyle = 'red';
			    this.ctx.fillRect(x-playerSize/2-5, y-playerSize/2, playerSize+10, 5);
				this.ctx.fillStyle = '#7AFF33';
			    this.ctx.fillRect(x-playerSize/2-5, y-playerSize/2, player.health*(playerSize+10)/defaulthealth, 5);
	        }
		}
	}

	RenderCar(x,y,angle) {
		if(this.map==0) {
		    this.ctx.save();
		    this.ctx.translate(x, y);
		    this.ctx.rotate(angle);
		    this.ctx.drawImage(imgCar, -carSize*1513/750 / 2, -carSize / 2, carSize*1513/750, carSize);
		    this.ctx.restore();
		}
	}

	RenderBullet(bullet) {
		let x = bullet.x
		let y = bullet.y
		if(this.map==1) {
			x = x-2000
			y = y-2000
		}
	    this.ctx.save();
	    this.ctx.translate(x, y);
	    this.ctx.drawImage(imgBullet, -20 / 2, -20 / 2, 20, 20);
	    this.ctx.restore();
	}

	ReloadAff() {
		/*
		const fond = new Image();
		if(player.x >= 2000 && player.y >=2000) {
			this.map=1;
		} else {
			this.map=0;
		}

		if(this.map==0) {
			fond.src = this.mapsrc;
		} else {
			fond.src = this.map2src;
		}
		*/
		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);
   		})
		this.bullets.forEach((bullet) => {
			this.RenderBullet(bullet);
		});
	}
}