refacto image render et affichages menus

client/src/afficher.js

+import setHtml from './setHtml.js';
+import { Coordinate } from './Coordinate.js';
+
+export default class Afficher {
+	static afficherCredits(event) {
+		event.preventDefault();
+		document.querySelector('.divMain').innerHTML = setHtml.credits();
+		console.log(document.querySelector('.retourMenu'));
+		document
+			.querySelector('.retourMenu')
+			.addEventListener('click', Afficher.afficherMenu);
+	}
+
+	static afficherMenu(event) {
+		event.preventDefault();
+		console.log('afficherMenu');
+		document.querySelector('.divMain').innerHTML = setHtml.menu();
+		document
+			.querySelector('.buttonStart')
+			.addEventListener('click', Afficher.startGame);
+		document
+			.querySelector('.credits')
+			.addEventListener('click', Afficher.afficherCredits);
+	}
+
+	static afficherFinDePartie() {
+		canvas.style.display = 'none';
+		document.querySelector('.animation').style.display = '';
+		document.querySelector('.divMain').innerHTML = setHtml.finDePartie(
+			avatar,
+			t
+		);
+		document
+			.querySelector('.retourMenu')
+			.addEventListener('click', Afficher.afficherMenu);
+		return false;
+	}
+
+	static startGame(event) {
+		event.preventDefault();
+		const canvas = document.querySelector('.gameCanvas');
+		canvas.style.display = '';
+		document.querySelector('.divMain').innerHTML = setHtml.vide();
+		document.querySelector('.animation').style.display = 'none';
+		const canvasSize = new Coordinate(canvas.clientWidth, canvas.clientHeight);
+		return canvasSize;
+	}
+}

client/src/avatar.js

@@ -65,10 +65,6 @@ export class Avatar extends Entite {
 		return this.vies;
 	}
 
-	getScore() {
-		return this.score;
-	}
-
 	getNom() {
 		return this.nom;
 	}

client/src/main.js

 import { Avatar } from './avatar.js';
 import { io } from 'socket.io-client';
-import setHtml from './setHtml.js';
 import draw from './draw.js';
-import { Coordinate } from './Coordinate.js';
-import { bonusImages, colors } from './utils.js';
+import { bonusImages } from './utils.js';
 import Render from './render.js';
+import Afficher from './afficher.js';
 
 const socket = io();
 let min = 0;
 let sec = 0;
+let renderObject = new Render();
 
 const canvas = document.querySelector('.gameCanvas');
 const context = canvas.getContext('2d');
 const avatar = new Avatar('julien', 1);
-const imageMortier = new Image();
-const imageProjectile = new Image();
-const imageEnemi = new Image();
-const imageEnemi2 = new Image();
-const background = new Image();
-const imageCoeur = new Image();
 
-imageMortier.src = '/images/mortier.png';
-imageProjectile.src = '/images/bill.png';
-imageEnemi.src = '/images/koopa.png';
-imageEnemi2.src = '/images/bob_omb.png';
-background.src = '/images/background2.webp';
-imageCoeur.src = '/images/heart1.webp';
-let gameStarted = false;
-
-imageMortier.addEventListener('load', () => {
-	avatar.setImageCanvas(imageMortier, canvas);
+renderObject.imageMortier.addEventListener('load', () => {
+	avatar.setImageCanvas(renderObject.imageMortier, canvas);
 	requestAnimationFrame(render);
 });
 
-imageEnemi.addEventListener('load', () => {
+renderObject.imageEnemi.addEventListener('load', () => {
 	requestAnimationFrame(render);
 });
 
@@ -45,45 +31,15 @@ setInterval(function () {
 }, 1000);
 
 document.querySelector('.buttonStart').addEventListener('click', startGame);
-document.querySelector('.credits').addEventListener('click', afficherCredits);
-
-function afficherCredits(event) {
-	event.preventDefault();
-	document.querySelector('.divMain').innerHTML = setHtml.credits();
-	const retour = document.querySelector('.retourMenu');
-	retour.addEventListener('click', afficherMenu);
-}
-
-function afficherMenu(event) {
-	event.preventDefault();
-	document.querySelector('.divMain').innerHTML = setHtml.menu();
-	document.querySelector('.buttonStart').addEventListener('click', startGame);
-	document.querySelector('.credits').addEventListener('click', afficherCredits);
-}
-
-function afficherFinDePartie() {
-	gameStarted = false;
-	canvas.style.display = 'none';
-	document.querySelector('.animation').style.display = '';
-	document.querySelector('.divMain').innerHTML = setHtml.finDePartie(avatar, t);
-	document.querySelector('.retourMenu').addEventListener('click', afficherMenu);
-}
+document
+	.querySelector('.credits')
+	.addEventListener('click', Afficher.afficherCredits);
 
 function startGame(event) {
-	gameStarted = true;
-	socket.emit('start', gameStarted);
-	event.preventDefault();
-	canvas.style.display = '';
-	document.querySelector('.divMain').innerHTML = setHtml.vide();
-	document.querySelector('.animation').style.display = 'none';
-	const canvasSize = new Coordinate(canvas.clientWidth, canvas.clientHeight);
+	const canvasSize = Afficher.startGame(event, socket, canvas);
 	socket.emit('canvasSize', canvasSize);
 }
 
-setInterval(() => {
-	socket.emit('start', gameStarted);
-}, 1000 / 16);
-
 const canvasResizeObserver = new ResizeObserver(() => resampleCanvas());
 canvasResizeObserver.observe(canvas);
 
@@ -115,26 +71,12 @@ let newBonus = [];
 
 function render() {
 	context.clearRect(0, 0, canvas.width, canvas.height);
-	context.drawImage(background, 0, 0, canvas.width, canvas.height);
+	renderObject.renderBackground(canvas);
 	context.font = '40pt New Super Mario Font U';
 	for (let i = 1; i < avatars.length; i++) {
 		if (avatars[i] != undefined) {
-			context.fillStyle = colors[i - 1];
-			const x = 10 + i * 100;
-			if (avatars[i].score != undefined) {
-				context.fillText(avatars[i].score, x, 50);
-			}
-			imageCoeur.src = `/images/heart${i}.webp`;
-			console.log(imageCoeur.src);
-			for (let j = 0; j < avatars[i].vies; j++) {
-				context.drawImage(
-					imageCoeur,
-					avatars[i].x + (avatars[i].vies - j) * 20 - 15,
-					avatars[i].y + imageMortier.height,
-					20,
-					20
-				);
-			}
+			renderObject.renderScores(i, avatars[i], context);
+			renderObject.renderVies(avatars, context, i);
 		}
 	}
 
@@ -143,21 +85,9 @@ function render() {
 	context.fillText(0 + ':' + min + ':' + sec, canvas.width / 2, 50);
 
 	for (let avatarId in avatars) {
-		Render.renderProjectile(
-			context,
-			avatar,
-			avatars,
-			avatarId,
-			imageProjectile
-		);
+		renderObject.renderProjectile(context, avatar, avatars, avatarId);
 		for (let avatarId in avatars) {
-			Render.renderProjectile(
-				context,
-				avatar,
-				avatars,
-				avatarId,
-				imageProjectile
-			);
+			renderObject.renderProjectile(context, avatar, avatars, avatarId);
 		}
 		socket.on('bonusArray', data => {
 			newBonus = data;
@@ -173,21 +103,13 @@ function render() {
 			newEnemis = data;
 		});
 		newEnemis.forEach(enemi => {
-			Render.renderEnnemi(
-				canvas,
-				context,
-				imageEnemi,
-				imageEnemi2,
-				enemi.x,
-				enemi.y,
-				enemi
-			);
+			renderObject.renderEnnemi(canvas, context, enemi.x, enemi.y, enemi);
 		});
 		socket.on('bonusArray', data => {
 			newBonus = data;
 		});
 		newBonus.forEach(bonus => {
-			Render.renderBonus(
+			renderObject.renderBonus(
 				canvas,
 				context,
 				bonusImages[bonus.choix],

client/src/render.js

 import draw from './draw.js';
+import { colors } from './utils.js';
 export default class Render {
-	static renderProjectile(context, avatar, avatars, avatarId, imageProjectile) {
+	imageEnemi;
+	imageEnemi2;
+	imageProjectile;
+	imageCoeur;
+	imageMortier;
+	background;
+
+	constructor() {
+		this.imageEnemi = new Image();
+		this.imageEnemi2 = new Image();
+		this.imageProjectile = new Image();
+		this.imageCoeur = new Image();
+		this.imageMortier = new Image();
+		this.background = new Image();
+		this.imageProjectile.src = '/images/bill.png';
+		this.imageEnemi.src = '/images/koopa.png';
+		this.imageEnemi2.src = '/images/bob_omb.png';
+		this.imageMortier.src = '/images/mortier.png';
+		this.background.src = '/images/background2.webp';
+	}
+
+	renderProjectile(context, avatar, avatars, avatarId) {
 		context.drawImage(avatar.image, avatars[avatarId].x, avatars[avatarId].y);
 		if (avatars[avatarId].projectiles != undefined) {
 			avatars[avatarId].projectiles.forEach(projectile => {
-				context.drawImage(imageProjectile, projectile.x, projectile.y);
+				context.drawImage(this.imageProjectile, projectile.x, projectile.y);
 			});
 		}
 	}
 
-	static renderEnnemi(canvas, context, imageEnemi, imageEnemi2, x, y, enemi) {
+	renderEnnemi(canvas, context, x, y, enemi) {
 		if (enemi.difficulté == 1) {
-			draw(canvas, context, imageEnemi, x, y);
+			draw(canvas, context, this.imageEnemi, x, y);
 		} else if (enemi.difficulté == 2) {
-			draw(canvas, context, imageEnemi2, x, y);
+			draw(canvas, context, this.imageEnemi2, x, y);
 		}
 	}
 
-	static renderBonus(canvas, context, imgsrc, x, y) {
+	renderBonus(canvas, context, imgsrc, x, y) {
 		let img = new Image();
 		img.src = imgsrc;
 		img.width = 75;
 		img.height = 75;
 		draw(canvas, context, img, x, y);
 	}
+
+	renderScores(i, avatar, context) {
+		context.fillStyle = colors[i - 1];
+		const x = 10 + i * 100;
+		if (avatar.score != undefined) {
+			context.fillText(avatar.score, x, 50);
+		}
+	}
+
+	renderVies(avatars, context, i) {
+		this.imageCoeur.src = `/images/heart${i}.webp`;
+		for (let j = 0; j < avatars[i].vies; j++) {
+			context.drawImage(
+				this.imageCoeur,
+				avatars[i].x + (avatars[i].vies - j) * 20 - 15,
+				avatars[i].y + this.imageMortier.height,
+				20,
+				20
+			);
+		}
+	}
+
+	renderBackground(canvas) {
+		canvas
+			.getContext('2d')
+			.drawImage(this.background, 0, 0, canvas.width, canvas.height);
+	}
 }