class LeaderBoard {
	constructor(id) {
		this.canvas = document.getElementById(id);
		this.ctx = this.canvas.getContext("2d");
		this.nbjoueur=0
	}

	ReloadAff(players, player) {
		this.px=10
		this.py=10
		this.players=[]
		players.forEach((p) => {
			if(p != null) {
				this.players.push(p)
			}
		})
		this.players.push(player);

		this.players.sort(function (a, b) {
			return b.kill - a.kill;
		});

	    // tableau du leaderboard (le fonc "blanc")
	    this.ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
	    this.ctx.fillRect(this.px, this.py, this.px+240, this.py+100+this.nbjoueur*20);
	    this.nbjoueur=0
	    this.ctx.font = '20px Arial';
	    this.ctx.fillStyle = '#000000';
	    this.ctx.fillText('Leaderboard', this.px+80, this.py+30);

	    // lignes noires
	    this.ctx.strokeStyle = '#000000';
	    this.ctx.lineWidth = 2;
	    this.ctx.beginPath();
	    this.ctx.moveTo(this.px, this.py+50);
	    this.ctx.lineTo(this.px+250, this.py+50);
	    this.ctx.moveTo(this.px, this.py+100);
	    this.ctx.lineTo(this.px+250, this.py+100);
	    this.ctx.stroke();

	    //donné user
	    this.ctx.fillStyle = '#000000';
	    this.ctx.font = '15px Arial';
	    this.ctx.fillText('#', this.px+10, this.py+80);
	    this.ctx.fillText('Username', this.px+30, this.py+80);
	    this.ctx.fillText('K', this.px+180, this.py+80);
	    this.ctx.fillText('D', this.px+200, this.py+80);
	    this.ctx.fillText('K/D', this.px+220, this.py+80);
	    this.ctx.font = '10px Arial';

	    this.players.forEach((p) => {
			if(p != null) {
				this.ctx.fillText((this.nbjoueur+1), this.px+10, this.py+120+20*this.nbjoueur);
	    		this.ctx.fillText(p.name, this.px+30, this.py+120+20*this.nbjoueur);
			    this.ctx.fillText(p.kill, this.px+180, this.py+120+20*this.nbjoueur);
			    this.ctx.fillText(p.death, this.px+200, this.py+120+20*this.nbjoueur);
			    this.ctx.fillText(p.kill/p.death, this.px+220, this.py+120+20*this.nbjoueur);

				this.nbjoueur++
			}
		});

	    /*this.ctx.fillText('1', this.px+20, this.py+120);
	    this.ctx.fillText('Player1', this.px+50, this.py+120);
	    this.ctx.fillText('10/20', this.px+180, this.py+120);

	    this.ctx.fillText('2', this.px+20, this.py+120+20);
	    this.ctx.fillText('Player2', this.px+50, this.py+120+20);
	    this.ctx.fillText('10/2', this.px+180, this.py+120+20);
		*/
	}
}