From e343fd57a3babd4518076c435f09c7ecc9c67021 Mon Sep 17 00:00:00 2001
From: Kum1ta <eddydhj@gmail.com>
Date: Tue, 8 Oct 2024 20:10:08 +0200
Subject: [PATCH] Game     - fix english     - add pfp on scoreboard

---
 .../djangoserver/file/server/server/Game.py   |  6 +-
 .../server/templates/multiOnlineGamePage.html |  2 +-
 .../djangoserver/file/server/server/urls.py   |  4 +-
 .../nginx/static/javascript/lobbyPage/main.js | 24 +++----
 .../static/javascript/multiOnlineGame/Map.js  | 65 ++++++++++++++-----
 .../javascript/multiOnlineGame/Player.js      |  3 +-
 .../multiOnlineGame/multiOnlineGamePage.js    |  7 +-
 .../tournamentPage/TournamentPage.js          | 20 +++++-
 .../javascript/typeResponse/typeTournament.js | 10 ++-
 .../static/javascript/waitingGame/main.js     |  4 +-
 .../nginx/static/style/game/games.css         |  9 ++-
 11 files changed, 105 insertions(+), 49 deletions(-)

diff --git a/docker-compose/requirements/djangoserver/file/server/server/Game.py b/docker-compose/requirements/djangoserver/file/server/server/Game.py
index 4d2bcbc..0e403bc 100644
--- a/docker-compose/requirements/djangoserver/file/server/server/Game.py
+++ b/docker-compose/requirements/djangoserver/file/server/server/Game.py
@@ -6,7 +6,7 @@
 #    By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+         #
 #                                                 +#+#+#+#+#+   +#+            #
 #    Created: 2024/09/13 16:20:58 by tomoron           #+#    #+#              #
-#    Updated: 2024/10/08 10:50:47 by tomoron          ###   ########.fr        #
+#    Updated: 2024/10/08 17:44:34 by edbernar         ###   ########.fr        #
 #                                                                              #
 # **************************************************************************** #
 
@@ -110,8 +110,8 @@ class Game:
 				self.p2.skin = skin
 			if(self.p2 != None and self.p1 != None):
 				print("both players here, send opponent to both players")
-				self.p1.socket.sync_send({"type":"game", "content":{"action":1,"id":self.p2.socket.id,"username":self.p2.socket.username, "skin":self.p2.skin}})
-				self.p2.socket.sync_send({"type":"game", "content":{"action":1,"id":self.p1.socket.id,"username":self.p1.socket.username, "skin":self.p1.skin}})
+				self.p1.socket.sync_send({"type":"game", "content":{"action":1,"id":self.p2.socket.id,"username":self.p2.socket.username, "skin":self.p2.skin, 'pfpOpponent':self.p2.socket.pfp, 'pfpSelf':self.p1.socket.pfp}})
+				self.p2.socket.sync_send({"type":"game", "content":{"action":1,"id":self.p1.socket.id,"username":self.p1.socket.username, "skin":self.p1.skin, 'pfpOpponent':self.p1.socket.pfp, 'pfpSelf':self.p2.socket.pfp}})
 		except Exception as e:
 			socket.sendError("invalid request", 9005, e)
 
diff --git a/docker-compose/requirements/djangoserver/file/server/server/templates/multiOnlineGamePage.html b/docker-compose/requirements/djangoserver/file/server/server/templates/multiOnlineGamePage.html
index ba5f5a3..5d3c685 100644
--- a/docker-compose/requirements/djangoserver/file/server/server/templates/multiOnlineGamePage.html
+++ b/docker-compose/requirements/djangoserver/file/server/server/templates/multiOnlineGamePage.html
@@ -3,7 +3,7 @@
 	<p id="ping">0 ms</p>
 </div>
 <div id="endGameDiv">
-	<p id="endGameText">You lose...</p>
+	<p id="endGameText">You lost...</p>
 	<p id="endGameScore">0 - 0</p>
 	<p id="endGameSimpleText">You will be redirected to the lobby in 5 seconds</p>
 </div>
diff --git a/docker-compose/requirements/djangoserver/file/server/server/urls.py b/docker-compose/requirements/djangoserver/file/server/server/urls.py
index e2b0430..e0037f0 100644
--- a/docker-compose/requirements/djangoserver/file/server/server/urls.py
+++ b/docker-compose/requirements/djangoserver/file/server/server/urls.py
@@ -25,9 +25,9 @@ urlpatterns = [
 	path("multiOnlineGamePage", views.multiOnlineGamePage, name='multiOnlineGamePage'),
 	path("waitingGamePage", views.waitingGamePage, name='waitingGamePage'),
 	path("profilPage", views.profilPage, name='profilPage'),
-	path("game", views.game, name='game'),
+	# path("game", views.game, name='game'),
 	path("wait_game", views.game, name='wait_game'),
-	#path("tournament", views.tournament, name='tournament'),
+	path("tournament", views.tournament, name='tournament'),
     path("login42", views.login42, name='login42'),
     path("logout", views.logout, name='logout'),
 	path("verify", views.verify, name='verify'),
diff --git a/docker-compose/requirements/nginx/static/javascript/lobbyPage/main.js b/docker-compose/requirements/nginx/static/javascript/lobbyPage/main.js
index 2e0d124..c2c6f69 100644
--- a/docker-compose/requirements/nginx/static/javascript/lobbyPage/main.js
+++ b/docker-compose/requirements/nginx/static/javascript/lobbyPage/main.js
@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/22 17:08:46 by madegryc          #+#    #+#             */
-/*   Updated: 2024/10/06 17:00:12 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/10/08 12:55:12 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -36,12 +36,13 @@ class LobbyPage
 {
 	static create()
 	{
-		const	methButton		= document.getElementById("homeButton");
-		const	startButton		= document.getElementsByClassName('buttonStartGame')[0];
-		const	usernameP		= document.getElementById('loginButton').getElementsByTagName('p')[0];
-		const	loginButton 	= document.getElementById('loginButton');
-		const	inputUser		= document.getElementById('searchInputUser');
-		const	func			= [selectGameModeOne, selectGameModeTwo, selectGameModeThree, selectGameModeFour];
+		const	methButton			= document.getElementById("homeButton");
+		const	startButton			= document.getElementsByClassName('buttonStartGame')[0];
+		const	usernameP			= document.getElementById('loginButton').getElementsByTagName('p')[0];
+		const	loginButton 		= document.getElementById('loginButton');
+		const	inputUser			= document.getElementById('searchInputUser');
+		const	tournamentCodeInput	= document.getElementById('tournamentCode');
+		const	func				= [selectGameModeOne, selectGameModeTwo, selectGameModeThree, selectGameModeFour];
 
 		document.body.style.opacity = 1;
 		if (userMeInfo.id == -1)
@@ -59,6 +60,10 @@ class LobbyPage
 		initButtonPopMenuLogin();
 		initButtonLaytout();
 		window.addEventListener('click', closePopUpWhenClickOutsite);
+		tournamentCodeInput.addEventListener('keypress', () => {
+			if (event.key == 'Enter')
+				startTournmament();
+		});
 		listSelectCard = document.getElementsByClassName('select-card');
 		listSelectCard[0].addEventListener('click', selectGameModeOne);
 		listSelectCard[1].addEventListener('click', selectGameModeTwo);
@@ -177,11 +182,6 @@ function startTournmament()
 	sendRequest("tournament", {action: 0, code: code});
 }
 
-function showGameMode()
-{
-	document.getElementById('loginPopup').style.display = 'flex';
-}
-
 function closePopUpWhenClickOutsite (event)
 {
     if (event.target == document.getElementById('loginPopup'))
diff --git a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Map.js b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Map.js
index 6454796..04ae3b9 100644
--- a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Map.js
+++ b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Map.js
@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/20 14:52:55 by hubourge          #+#    #+#             */
-/*   Updated: 2024/10/06 16:12:40 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/10/08 20:06:46 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -33,8 +33,8 @@ let textureTextScore			= null;
 let animationSpeed				= 0.02;
 let animateGoalObjectUpdate		= null;
 let animateGoalObjectUp			= false;
-const sourceImageLeft = "/static/img/default_pfp.jpg";
-const sourceImageRight = "/static/img/default_pfp.jpg";
+let sourceImageLeft 			= null;
+let sourceImageRight			= null;
 
 let path = [];
 
@@ -119,7 +119,7 @@ class Map
 		scene = null;
 	}
 
-	constructor(sceneToSet, length, obstacles)
+	constructor(sceneToSet, length, obstacles, pfpSelf, pfpOpponent)
 	{
 		loader	= new GLTFLoader();
 		scene	= sceneToSet;
@@ -153,6 +153,8 @@ class Map
 			0x0000CC
 			*/
 		}
+		sourceImageLeft = pfpSelf;
+		sourceImageRight = pfpOpponent;
 		this.putScoreboard(0xCCCCFF);
 		path = [
 			{name: 'goal', 			onChoice: true, src: files.goalVideoPub},
@@ -456,10 +458,12 @@ class Map
 		meshBoardLeftBack		= new THREE.Mesh(geometryBoardLeftBack, materialBoardLeftBack);
 		materialBoardRightBack	= new THREE.MeshPhysicalMaterial({color: color});
 		geometryBoardRightBack	= new THREE.BoxGeometry(width, height, depth);
-		meshBoardRightBack	= new THREE.Mesh(geometryBoardRightBack, materialBoardRightBack);
+		meshBoardRightBack		= new THREE.Mesh(geometryBoardRightBack, materialBoardRightBack);
 
-		meshBoardLeftFront.position.set(-spacing - width / 2 - 0.3, 1.6, -8.5);
-		meshBoardRightFront.position.set(spacing + width / 2 + 0.3, 1.6, -8.5);
+		meshBoardLeftFront.position.set(-spacing - width / 2 - 0.3, 1.6, -8.2);
+		meshBoardLeftFront.rotation.y = Math.PI + 0.4;
+		meshBoardRightFront.position.set(spacing + width / 2 + 0.3, 1.6, -8.2);
+		meshBoardRightFront.rotation.y = Math.PI - 0.4;
 
 		meshBoardLeftBack.rotation.y = Math.PI;
 		meshBoardLeftBack.position.set(-spacing - width / 2 - 0.3, 1.6, 8.5);
@@ -488,14 +492,12 @@ class Map
 		canvasImageLeft.width = 960;
 		canvasImageLeft.height = 960;
 		textureImageLeft = new THREE.CanvasTexture(canvasImageLeft);
-
+		textureImageLeft.imageSmoothingEnabled = false;
 		contextImageLeft.clearRect(0, 0, canvasImageLeft.width, canvasImageLeft.height);
 		const imageLeft = new Image();
 		imageLeft.src = sourceImageLeft;
-		imageLeft.onload = () => {
-			contextImageLeft.drawImage(imageLeft, 0, 0, canvasImageLeft.width, canvasImageLeft.height);
-			textureImageLeft.needsUpdate = true;
-		};
+		canvasImageLeft.classList.add('imgScoreBoard');
+		imageLeft.onload = () => this.#putPlayerPfp(canvasImageLeft, contextImageLeft, textureImageLeft, imageLeft);
 
 		canvasImageRight = document.createElement('canvas');
 		contextImageRight = canvasImageRight.getContext('2d');
@@ -505,11 +507,9 @@ class Map
 
 		contextImageLeft.clearRect(0, 0, canvasImageLeft.width, canvasImageLeft.height);
 		const imageRight = new Image();
+		imageRight.setAttribute('class', 'imgScoreBoard');
 		imageRight.src = sourceImageRight;
-		imageRight.onload = () => {
-			contextImageRight.drawImage(imageRight, 0, 0, canvasImageRight.width, canvasImageRight.height);
-			textureImageRight.needsUpdate = true;
-		};
+		imageRight.onload = () => this.#putPlayerPfp(canvasImageRight, contextImageRight, textureImageRight, imageRight);
 
 		let materialProfileLeft			= null;
 		let materialProfileRight		= null;
@@ -537,8 +537,10 @@ class Map
 		geometryProfileRightBack	= new THREE.PlaneGeometry(width - 0.15, height - 0.15);
 		meshProfileRightBack		= new THREE.Mesh(geometryProfileRightBack, materialProfileRight);
 
-		meshProfileLeftFront.position.set(-spacing - width / 2 - 0.325, 1.6, - 8.5 + depth / 2 + 0.001);
-		meshProfileRightFront.position.set(spacing + width / 2 + 0.325, 1.6, - 8.5 + depth / 2 + 0.01);
+		meshProfileLeftFront.position.set(-spacing - width / 2 - 0.275, 1.6, - 8.15);
+		meshProfileLeftFront.rotation.y = 0.4;
+		meshProfileRightFront.position.set(spacing + width / 2 + 0.275, 1.6, - 8.15);
+		meshProfileRightFront.rotation.y = -0.4;
 
 		meshProfileLeftBack.rotation.y = Math.PI;
 		meshProfileLeftBack.position.set(-spacing - width / 2 - 0.325, 1.6, 8.5 - depth / 2 - 0.001);
@@ -554,6 +556,33 @@ class Map
 		this.arrObject.push({mesh: meshProfileLeftBack, name: "", type: "profileBoard"});
 		this.arrObject.push({mesh: meshProfileRightBack, name: "", type: "profileBoard"});
 	};
+	
+	#putPlayerPfp(canvasImage, contextImage, textureImage, img)
+	{
+		const canvasWidth = canvasImage.width;
+		const canvasHeight = canvasImage.height;
+		const imageWidth = img.width;
+		const imageHeight = img.height;
+		const canvasRatio = canvasWidth / canvasHeight;
+		const imageRatio = imageWidth / imageHeight;
+		let drawWidth, drawHeight;
+	
+		if (imageRatio > canvasRatio)
+		{
+			drawWidth = canvasWidth;
+			drawHeight = canvasWidth / imageRatio;
+		}
+		else
+		{
+			drawWidth = canvasHeight * imageRatio;
+			drawHeight = canvasHeight;
+		}
+		const offsetX = (canvasWidth - drawWidth) / 2;
+		const offsetY = (canvasHeight - drawHeight) / 2;
+		contextImage.clearRect(0, 0, canvasWidth, canvasHeight);
+		contextImage.drawImage(img, offsetX, offsetY, drawWidth, drawHeight);
+		textureImage.needsUpdate = true;
+	}
 
 	putVideoOnCanvas(nbImage, vNameNb)
 	{
diff --git a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Player.js b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Player.js
index f07ff12..5b44527 100644
--- a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Player.js
+++ b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Player.js
@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/18 00:30:31 by edbernar          #+#    #+#             */
-/*   Updated: 2024/10/06 16:15:27 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/10/08 13:26:01 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -54,7 +54,6 @@ let	pressedButton				= [];
 let mapLength					= 0;
 const goalAnimation				= ["triangle", "cylinder", "star", "box", "rectangle", "ring"];
 const controllerModelFactory	= new XRControllerModelFactory();
-let	motionController			= null;
 let	key							= null;
 let controller1					= null;
 let controller2					= null;
diff --git a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/multiOnlineGamePage.js b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/multiOnlineGamePage.js
index 3747b5e..48147d7 100644
--- a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/multiOnlineGamePage.js
+++ b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/multiOnlineGamePage.js
@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/18 00:53:53 by edbernar          #+#    #+#             */
-/*   Updated: 2024/10/08 03:10:55 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/10/08 18:54:22 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -90,9 +90,10 @@ class MultiOnlineGamePage
 		const bar1		= createBarPlayer(availableSkins[skin.player]);
 		const bar2		= createBarPlayer(availableSkins[skin.opponent]);
 
+		console.log('skin : ', skin);
 		document.body.setAttribute('style', '');
 		scene					= new THREE.Scene()
-		map						= new Map(scene, 13, false);
+		map						= new Map(scene, 13, false, skin.pfp, skin.pfpOpponent);
 		renderer				= new THREE.WebGLRenderer({antialias: true});
 		renderer.shadowMap.enabled = true;
 		renderer.shadowMap.type = THREE.PCFSoftShadowMap;
@@ -264,7 +265,7 @@ class MultiOnlineGamePage
 		if (map && map.score)
 			endGameScore.innerText = `${map.score.player} - ${map.score.opponent}`;
 		if (content.won)
-			scoreText.innerText = "You win !"
+			scoreText.innerText = "You won !"
 		endGameDiv.style.display = 'flex';
 		intervalEnd = setInterval(() => {
 			if (content.opponentLeft)
diff --git a/docker-compose/requirements/nginx/static/javascript/tournamentPage/TournamentPage.js b/docker-compose/requirements/nginx/static/javascript/tournamentPage/TournamentPage.js
index 8e39769..2985a41 100644
--- a/docker-compose/requirements/nginx/static/javascript/tournamentPage/TournamentPage.js
+++ b/docker-compose/requirements/nginx/static/javascript/tournamentPage/TournamentPage.js
@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/10/01 13:42:29 by edbernar          #+#    #+#             */
-/*   Updated: 2024/10/05 03:48:19 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/10/08 13:13:38 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -28,12 +28,21 @@ let		divTopInfo	= null;
 let		divInfo		= null;
 let		divChat		= null;
 
-// gerer quand la personne finit sa partie pour remettre tout comme il le faut
-
 class TournamentPage
 {
 	static create(code)
 	{
+		document.body.removeAttribute('style');
+		for (let i = 0; i < document.body.children.length; i++)
+		{
+			document.body.children[i].style.animation = 'animShowMenuDiv 0.5s';
+		}
+		setTimeout(() => {
+			for (let i = 0; i < document.body.children.length; i++)
+			{
+				document.body.children[i].style.animation = 'none';
+			}
+		}, 500);
 		divTopInfo = document.getElementById('actuality-tournament');
 		divInfo = document.getElementsByClassName('infoo')[0];
 		divChat = document.getElementsByClassName('chat')[0];
@@ -48,6 +57,11 @@ class TournamentPage
 		divTopInfo = null;
 		divInfo = null;
 		divChat = null;
+		Object.values(playerList).forEach((info) => {
+			info.id = 0;
+			info.username = null;
+			info.pfp = null;
+		});
 	}
 
 	static newOpponent(content)
diff --git a/docker-compose/requirements/nginx/static/javascript/typeResponse/typeTournament.js b/docker-compose/requirements/nginx/static/javascript/typeResponse/typeTournament.js
index 52d6391..cff9b67 100644
--- a/docker-compose/requirements/nginx/static/javascript/typeResponse/typeTournament.js
+++ b/docker-compose/requirements/nginx/static/javascript/typeResponse/typeTournament.js
@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/10/01 13:29:50 by edbernar          #+#    #+#             */
-/*   Updated: 2024/10/06 15:32:04 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/10/08 13:03:19 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -54,7 +54,13 @@ function joinTournament(content)
 	else if (content.started)
 		CN.new("Information", "This tournament has already started");
 	else
-		pageRenderer.changePage('tournamentPage', false, content.code);
+	{
+		document.body.style.animation = "none";
+		document.body.style.animation = "startGameAnim 0.5s";
+		setTimeout(() => {
+			pageRenderer.changePage('tournamentPage', false, content.code);
+		}, 400);
+	}
 }
 
 export { typeTournament };
\ No newline at end of file
diff --git a/docker-compose/requirements/nginx/static/javascript/waitingGame/main.js b/docker-compose/requirements/nginx/static/javascript/waitingGame/main.js
index 0cedd66..8b01d2b 100644
--- a/docker-compose/requirements/nginx/static/javascript/waitingGame/main.js
+++ b/docker-compose/requirements/nginx/static/javascript/waitingGame/main.js
@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/09/14 21:20:45 by edbernar          #+#    #+#             */
-/*   Updated: 2024/10/03 14:35:54 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/10/08 17:48:27 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -90,7 +90,7 @@ class WaitingGamePage
 			setTimeout(() => {
 				document.body.style.animation = 'anim3 0.5s';
 				document.body.style.opacity = 0;
-				pageRenderer.changePage("multiOnlineGamePage", false, {player: lastSelected ? lastSelected.id : 0, opponent: content.skin, opponentGoaldId: content.goalId});
+				pageRenderer.changePage("multiOnlineGamePage", false, {player: lastSelected ? lastSelected.id : 0, opponent: content.skin, opponentGoaldId: content.goalId, pfp: content.pfpSelf, pfpOpponent: content.pfpOpponent});
 			}, 1000);
 		}, 500);
 		document.body.removeChild(returnButton);
diff --git a/docker-compose/requirements/nginx/static/style/game/games.css b/docker-compose/requirements/nginx/static/style/game/games.css
index e9008ff..9431138 100644
--- a/docker-compose/requirements/nginx/static/style/game/games.css
+++ b/docker-compose/requirements/nginx/static/style/game/games.css
@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/20 11:23:41 by edbernar          #+#    #+#             */
-/*   Updated: 2024/10/05 02:14:49 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/10/08 19:48:26 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -264,4 +264,11 @@ body {
 	padding: 0;
 	color: white;
 	background-color: rgba(0, 0, 0, 0.367);
+}
+
+.imgScoreBoard {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: 50% 50%;
 }
\ No newline at end of file