tom/METH_Transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Game multi - Prepare image display in scoreboard

Browse Source
This commit is contained in:
hubourge
2024-10-07 17:56:09 +02:00
parent e77b2e8c05
commit 1ad3e5aee0
1 changed files with 51 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Map.js
View File

@ -33,6 +33,8 @@ let textureTextScore = null;
let animationSpeed = 0.02; let animationSpeed = 0.02;
let animateGoalObjectUpdate = null; let animateGoalObjectUpdate = null;
let animateGoalObjectUp = false; let animateGoalObjectUp = false;
const sourceImageLeft = "/static/img/default_pfp.jpg";
const sourceImageRight = "/static/img/default_pfp.jpg";
let path = []; let path = [];
@ -367,7 +369,7 @@ class Map
putScoreboard(color) putScoreboard(color)
{ {
this.#putPlayerProfile("", "", color); this.#putPlayerProfile(color); // METTRE NE ARGUMENT LE CHEMIN DES IMAGES
let materialScoreboard = null; let materialScoreboard = null;
let geometryScoreboard1 = null; let geometryScoreboard1 = null;
@ -383,7 +385,7 @@ class Map
let height = 1.8; let height = 1.8;
let width = 5; let width = 5;
let depth = 0.2; let depth = 0.05;
materialScoreboard = new THREE.MeshPhysicalMaterial({color: color}); materialScoreboard = new THREE.MeshPhysicalMaterial({color: color});
geometryScoreboard1 = new THREE.BoxGeometry(width, height, depth); geometryScoreboard1 = new THREE.BoxGeometry(width, height, depth);
@ -408,8 +410,8 @@ class Map
meshText1.rotation.y = Math.PI; meshText1.rotation.y = Math.PI;
meshScoreboard1.position.set(0, 1.60, 8.5); meshScoreboard1.position.set(0, 1.60, 8.5);
meshScoreboard2.position.set(0, 1.60, -8.5); meshScoreboard2.position.set(0, 1.60, -8.5);
meshText1.position.set(0, 1.60, 8.5 - depth / 2 - 0.01); meshText1.position.set(0, 1.60, 8.5 - depth / 2 - 0.001);
meshText2.position.set(0, 1.60, - 8.5 + depth / 2 + 0.01); meshText2.position.set(0, 1.60, - 8.5 + depth / 2 + 0.001);
scene.add(meshScoreboard1); scene.add(meshScoreboard1);
scene.add(meshScoreboard2); scene.add(meshScoreboard2);
@ -421,12 +423,11 @@ class Map
this.arrObject.push({mesh: meshText2, name: "", type: "scoreboard"}); this.arrObject.push({mesh: meshText2, name: "", type: "scoreboard"});
}; };
#putPlayerProfile(nameLeft, nameRight, color) #putPlayerProfile(color)
{ {
let materialBoardLeftFront; let materialBoardLeftFront;
let geometryBoardLeftFront; let geometryBoardLeftFront;
let meshBoardLeftFront; let meshBoardLeftFront;
let materialBoardRightFront; let materialBoardRightFront;
let geometryBoardRightFront; let geometryBoardRightFront;
let meshBoardRightFront; let meshBoardRightFront;
@ -434,20 +435,18 @@ class Map
let materialBoardLeftBack; let materialBoardLeftBack;
let geometryBoardLeftBack; let geometryBoardLeftBack;
let meshBoardLeftBack; let meshBoardLeftBack;
let materialBoardRightBack; let materialBoardRightBack;
let geometryBoardRightBack; let geometryBoardRightBack;
let meshBoardRightBack; let meshBoardRightBack;
let height = 1.8; let height = 1.8;
let width = 1.5; let width = 1.5;
let depth = 0.2; let depth = 0.05;
let spacing = 2.5; let spacing = 2.4;
materialBoardLeftFront = new THREE.MeshPhysicalMaterial({color: color}); materialBoardLeftFront = new THREE.MeshPhysicalMaterial({color: color});
geometryBoardLeftFront = new THREE.BoxGeometry(width, height, depth); geometryBoardLeftFront = new THREE.BoxGeometry(width, height, depth);
meshBoardLeftFront = new THREE.Mesh(geometryBoardLeftFront, materialBoardLeftFront); meshBoardLeftFront = new THREE.Mesh(geometryBoardLeftFront, materialBoardLeftFront);
materialBoardRightFront = new THREE.MeshPhysicalMaterial({color: color}); materialBoardRightFront = new THREE.MeshPhysicalMaterial({color: color});
geometryBoardRightFront = new THREE.BoxGeometry(width, height, depth); geometryBoardRightFront = new THREE.BoxGeometry(width, height, depth);
meshBoardRightFront = new THREE.Mesh(geometryBoardRightFront, materialBoardRightFront); meshBoardRightFront = new THREE.Mesh(geometryBoardRightFront, materialBoardRightFront);
@ -455,7 +454,6 @@ class Map
materialBoardLeftBack = new THREE.MeshPhysicalMaterial({color: color}); materialBoardLeftBack = new THREE.MeshPhysicalMaterial({color: color});
geometryBoardLeftBack = new THREE.BoxGeometry(width, height, depth); geometryBoardLeftBack = new THREE.BoxGeometry(width, height, depth);
meshBoardLeftBack = new THREE.Mesh(geometryBoardLeftBack, materialBoardLeftBack); meshBoardLeftBack = new THREE.Mesh(geometryBoardLeftBack, materialBoardLeftBack);
materialBoardRightBack = new THREE.MeshPhysicalMaterial({color: color}); materialBoardRightBack = new THREE.MeshPhysicalMaterial({color: color});
geometryBoardRightBack = new THREE.BoxGeometry(width, height, depth); geometryBoardRightBack = new THREE.BoxGeometry(width, height, depth);
meshBoardRightBack = new THREE.Mesh(geometryBoardRightBack, materialBoardRightBack); meshBoardRightBack = new THREE.Mesh(geometryBoardRightBack, materialBoardRightBack);
@ -477,29 +475,43 @@ class Map
this.arrObject.push({mesh: meshBoardLeftBack, name: "", type: "profileBoard"}); this.arrObject.push({mesh: meshBoardLeftBack, name: "", type: "profileBoard"});
this.arrObject.push({mesh: meshBoardRightBack, name: "", type: "profileBoard"}); this.arrObject.push({mesh: meshBoardRightBack, name: "", type: "profileBoard"});
let canvasProfileNameLeft = null; let canvasImageLeft = null;
let contextProfileNameLeft = null; let contextImageLeft = null;
let textureProfileNameLeft = null; let textureImageLeft = null;
let canvasProfileNameRight = null; let canvasImageRight = null;
let contextProfileNameRight = null; let contextImageRight = null;
let textureProfileNameRight = null; let textureImageRight = null;
canvasProfileNameLeft = document.createElement('canvas'); canvasImageLeft = document.createElement('canvas');
contextProfileNameLeft = canvasProfileNameLeft.getContext('2d'); contextImageLeft = canvasImageLeft.getContext('2d');
canvasProfileNameLeft.width = 960; canvasImageLeft.width = 960;
canvasProfileNameLeft.height = 540 / 2; canvasImageLeft.height = 960;
drawName(nameLeft, canvasProfileNameLeft, contextProfileNameLeft); textureImageLeft = new THREE.CanvasTexture(canvasImageLeft);
textureProfileNameLeft = new THREE.CanvasTexture(canvasProfileNameLeft);
canvasProfileNameRight = document.createElement('canvas'); contextImageLeft.clearRect(0, 0, canvasImageLeft.width, canvasImageLeft.height);
contextProfileNameRight = canvasProfileNameRight.getContext('2d'); const imageLeft = new Image();
canvasProfileNameRight.width = 960; imageLeft.src = sourceImageLeft;
canvasProfileNameRight.height = 540 / 2; imageLeft.onload = () => {
drawName(nameRight, canvasProfileNameRight, contextProfileNameRight); contextImageLeft.drawImage(imageLeft, 0, 0, canvasImageLeft.width, canvasImageLeft.height);
textureProfileNameRight = new THREE.CanvasTexture(canvasProfileNameRight); textureImageLeft.needsUpdate = true;
};
let materialProfileLeft = null; canvasImageRight = document.createElement('canvas');
contextImageRight = canvasImageRight.getContext('2d');
canvasImageRight.width = 960;
canvasImageRight.height = 960;
textureImageRight = new THREE.CanvasTexture(canvasImageRight);
contextImageLeft.clearRect(0, 0, canvasImageLeft.width, canvasImageLeft.height);
const imageRight = new Image();
imageRight.src = sourceImageRight;
imageRight.onload = () => {
contextImageRight.drawImage(imageRight, 0, 0, canvasImageRight.width, canvasImageRight.height);
textureImageRight.needsUpdate = true;
};
let materialProfileLeft = null;
let materialProfileRight = null; let materialProfileRight = null;
let geometryProfileLeftFront = null; let geometryProfileLeftFront = null;
@ -507,33 +519,31 @@ class Map
let geometryProfileRightFront = null; let geometryProfileRightFront = null;
let meshProfileRightFront = null; let meshProfileRightFront = null;
let geometryProfileLeftBack = null; let geometryProfileLeftBack = null;
let meshProfileLeftBack = null; let meshProfileLeftBack = null;
let geometryProfileRightBack = null; let geometryProfileRightBack = null;
let meshProfileRightBack = null; let meshProfileRightBack = null;
materialProfileLeft = new THREE.MeshBasicMaterial({ map: textureProfileNameLeft }); materialProfileLeft = new THREE.MeshBasicMaterial({ map: textureImageLeft });
materialProfileRight = new THREE.MeshBasicMaterial({ map: textureProfileNameRight }); materialProfileRight = new THREE.MeshBasicMaterial({ map: textureImageRight });
geometryProfileLeftFront = new THREE.PlaneGeometry(width - 0.15, height - 0.15); geometryProfileLeftFront = new THREE.PlaneGeometry(width - 0.15, height - 0.15);
meshProfileLeftFront = new THREE.Mesh(geometryProfileLeftFront, materialProfileLeft); meshProfileLeftFront = new THREE.Mesh(geometryProfileLeftFront, materialProfileLeft);
geometryProfileRightFront = new THREE.PlaneGeometry(width - 0.15, height - 0.15); geometryProfileRightFront = new THREE.PlaneGeometry(width - 0.15, height - 0.15);
meshProfileRightFront = new THREE.Mesh(geometryProfileRightFront, materialProfileRight); meshProfileRightFront = new THREE.Mesh(geometryProfileRightFront, materialProfileRight);
geometryProfileLeftBack = new THREE.PlaneGeometry(width - 0.15, height - 0.15); geometryProfileLeftBack = new THREE.PlaneGeometry(width - 0.15, height - 0.15);
meshProfileLeftBack = new THREE.Mesh(geometryProfileLeftBack, materialProfileLeft); meshProfileLeftBack = new THREE.Mesh(geometryProfileLeftBack, materialProfileLeft);
geometryProfileRightBack = new THREE.PlaneGeometry(width - 0.15, height - 0.15); geometryProfileRightBack = new THREE.PlaneGeometry(width - 0.15, height - 0.15);
meshProfileRightBack = new THREE.Mesh(geometryProfileRightBack, materialProfileRight); meshProfileRightBack = new THREE.Mesh(geometryProfileRightBack, materialProfileRight);
meshProfileLeftFront.position.set(-spacing - width / 2 - 0.325, 1.6, - 8.5 + depth / 2 + 0.01); 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); meshProfileRightFront.position.set(spacing + width / 2 + 0.325, 1.6, - 8.5 + depth / 2 + 0.01);
meshProfileLeftBack.rotation.y = Math.PI; meshProfileLeftBack.rotation.y = Math.PI;
meshProfileLeftBack.position.set(-spacing - width / 2 - 0.325, 1.6, 8.5 - depth / 2 - 0.01); meshProfileLeftBack.position.set(-spacing - width / 2 - 0.325, 1.6, 8.5 - depth / 2 - 0.001);
meshProfileRightBack.rotation.y = Math.PI; meshProfileRightBack.rotation.y = Math.PI;
meshProfileRightBack.position.set(spacing + width / 2 + 0.325, 1.6, 8.5 - depth / 2 - 0.01); meshProfileRightBack.position.set(spacing + width / 2 + 0.325, 1.6, 8.5 - depth / 2 - 0.001);
scene.add(meshProfileLeftFront); scene.add(meshProfileLeftFront);
scene.add(meshProfileRightFront); scene.add(meshProfileRightFront);
@ -1007,15 +1017,6 @@ function drawScore(score)
contextTextScore.fillText(score.player + " - " + score.opponent, canvasTextScore.width / 2, canvasTextScore.height - canvasTextScore.height / 4); contextTextScore.fillText(score.player + " - " + score.opponent, canvasTextScore.width / 2, canvasTextScore.height - canvasTextScore.height / 4);
}; };
function drawName(name, canvas, context)
{
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "white";
context.font = "bold 175px Poppins";
context.textAlign = "center";
context.fillText(name, canvas.width / 2, canvas.height - canvas.height / 4);
}
function createTriangle(colorO) { function createTriangle(colorO) {
const shape = new THREE.Shape(); const shape = new THREE.Shape();
shape.moveTo(0, 1); shape.moveTo(0, 1);