affichage dynamique

client/src/avatar.js

@@ -38,6 +38,10 @@ export class Avatar extends Entite {
 		this.score -= nb;
 	}
 
+	getScore() {
+		return this.score;
+	}
+
 	tirer() {
 		let projectile = new Projectile(this.x, this.y);
 		this.projectiles.push(projectile);

client/src/main.js

@@ -5,7 +5,7 @@ import timer from '../../server/timer.js';
 import setHtml from './setHtml.js';
 import draw from './draw.js';
 import { Coordinate } from './Coordinate.js';
-import { bonusImages } from './choixBonus.js';
+import { bonusImages, colors } from './utils.js';
 import Bonus from '../../server/bonus.js';
 
 const socket = io();
@@ -116,16 +116,24 @@ let newEnemis = [];
 let newBonus = [];
 
 function render() {
-	console.log(sec);
 	context.clearRect(0, 0, canvas.width, canvas.height);
 	context.drawImage(background, 0, 0, canvas.width, canvas.height);
-
 	context.font = '40pt New Super Mario Font U';
+	let vies = 0;
+	for (let i = 1; i < avatars.length; i++) {
+		if (avatars[i] != undefined) {
+			context.fillStyle = colors[i - 1];
+			const x = 10 + i * 60;
+			context.fillText(avatars[i].score, x, 50);
+			vies += avatars[i].vies;
+		}
+	}
+
 	context.fillStyle = 'blue';
-	context.fillText(avatar.getScore(), 10, 50);
+
 	context.fillText(0 + ':' + min + ':' + sec, canvas.width / 2, 50);
 
-	for (let i = 0; i < avatar.getVies(); i++) {
+	for (let i = 0; i < vies; i++) {
 		context.drawImage(imageCoeur, canvas.width - (3 - i) * 50, 0, 50, 50);
 	}
 
@@ -151,7 +159,6 @@ function render() {
 		newBonus = data;
 	});
 	newBonus.forEach(bonus => {
-		console.log(bonus);
 		let img = new Image();
 		img.src = bonusImages[bonus.choix];
 		img.width = 75;
@@ -174,11 +181,15 @@ socket.on('avatarsData', avatarData => {
 			avatars[data.id].x = data.x;
 			avatars[data.id].y = data.y;
 			avatars[data.id].projectiles = data.projectiles;
+			avatars[data.id].vies = data.vies;
+			avatars[data.id].score = data.score;
 		} else {
 			avatars[data.id] = {
 				x: data.x,
 				y: data.y,
 				projectiles: data.projectiles,
+				vies: data.vies,
+				score: data.score,
 			};
 		}
 	});
@@ -212,4 +223,3 @@ document.addEventListener('keyup', event => {
 
 	event.preventDefault();
 });
-console.log(canvas.width);

client/src/choixBonus.js → client/src/utils.js

 export const bonusNoms = ['vie', 'invincibilite'];
 export const bonusImages = ['/images/vie.webp', '/images/vie.png'];
 export const bonusTaille = [1, 5];
+export const colors = ['#be0027', '#371777', '#2c9f45', '#cf8d2e'];

server/index.js

@@ -7,11 +7,7 @@ import enemi from './enemis.js';
 import { Coordinate } from '../client/src/Coordinate.js';
 import timer from './timer.js';
 import Bonus from './bonus.js';
-import {
-	bonusImages,
-	bonusNoms,
-	bonusTaille,
-} from '../client/src/choixBonus.js';
+import { bonusImages, bonusNoms, bonusTaille } from '../client/src/utils.js';
 
 const app = express();
 
@@ -196,6 +192,8 @@ setInterval(() => {
 			x: avatar.getX(),
 			y: avatar.getY(),
 			projectiles: avatar.projectiles,
+			vies: avatar.getVies(),
+			score: avatar.getScore(),
 		});
 		bonusArray.forEach(bonus => {
 			if (bonus.hitbox.colision(avatar.hitbox)) {