From 2067dc57f34dd424e4d17bfd92900d8c79283ee7 Mon Sep 17 00:00:00 2001
From: Mathis Decoster <mathis.decoster.etu@univ-lille.fr>
Date: Thu, 28 Mar 2024 18:03:37 +0100
Subject: [PATCH] affichage dynamique
---
client/src/avatar.js | 4 ++++
client/src/main.js | 24 +++++++++++++++++-------
client/src/{choixBonus.js => utils.js} | 1 +
server/index.js | 8 +++-----
4 files changed, 25 insertions(+), 12 deletions(-)
rename client/src/{choixBonus.js => utils.js} (69%)
diff --git a/client/src/avatar.js b/client/src/avatar.js
index bfb2d49..3ed74c8 100644
--- a/client/src/avatar.js
+++ b/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);
diff --git a/client/src/main.js b/client/src/main.js
index 46c4e3e..21b464c 100644
--- a/client/src/main.js
+++ b/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);
diff --git a/client/src/choixBonus.js b/client/src/utils.js
similarity index 69%
rename from client/src/choixBonus.js
rename to client/src/utils.js
index 78c4529..9927cec 100644
--- a/client/src/choixBonus.js
+++ b/client/src/utils.js
@@ -1,3 +1,4 @@
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'];
diff --git a/server/index.js b/server/index.js
index 23577dd..b075ad7 100644
--- a/server/index.js
+++ b/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)) {
--
GitLab