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

class Render {

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

	SetPlayerId(id) {
		this.playerid=id
	}

	AddPlayer(player) {
		this.players.push(player);
	}

	addBullet(bullet) {
		this.bullets.push(bullet);
	}

	remBullet(bullet) {
		for(let i=0;i<this.bullets.length;i++) {
			if(bullet==this.bullets[i]) {
				this.bullets.splice(i,1);
			}
		}
	}

	RemPlayer(id) {
		for(let i=0;i<this.players.length;i++)
		{
			if(this.players[i].id==id)
			{
				this.players.splice(i,1);
				break;
			}
		}
	}

	RenderPlayer(player) {
	    this.ctx.save();
	    this.ctx.translate(player.x, player.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,player.x-player.name.length*10/3,player.y-playerSize/1.8);
        if(player.id==this.playerid) {
			this.ctx.fillStyle = 'red';
		    this.ctx.fillRect(player.x-playerSize/2-5, player.y-playerSize/2, playerSize+10, 5);
			this.ctx.fillStyle = '#7AFF33';
		    this.ctx.fillRect(player.x-playerSize/2-5, player.y-playerSize/2, player.health*(playerSize+10)/defaulthealth, 5);
        }
	}

	RenderCar(x,y,angle) {
	    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) {
	    this.ctx.save();
	    this.ctx.translate(bullet.x, bullet.y);
	    this.ctx.drawImage(imgBullet, -20 / 2, -20 / 2, 20, 20);
	    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);
   		})
		this.bullets.forEach((bullet) => {
			this.RenderBullet(bullet);
		});
	}
}