- fix english
    - add pfp on scoreboard
This commit is contained in:
Kum1ta
2024-10-08 20:10:08 +02:00
parent 7401ea3c17
commit e343fd57a3
11 changed files with 105 additions and 49 deletions

View File

@ -6,7 +6,7 @@
# By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ # # By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ #
# +#+#+#+#+#+ +#+ # # +#+#+#+#+#+ +#+ #
# Created: 2024/09/13 16:20:58 by tomoron #+# #+# # # 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 self.p2.skin = skin
if(self.p2 != None and self.p1 != None): if(self.p2 != None and self.p1 != None):
print("both players here, send opponent to both players") 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.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}}) 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: except Exception as e:
socket.sendError("invalid request", 9005, e) socket.sendError("invalid request", 9005, e)

View File

@ -3,7 +3,7 @@
<p id="ping">0 ms</p> <p id="ping">0 ms</p>
</div> </div>
<div id="endGameDiv"> <div id="endGameDiv">
<p id="endGameText">You lose...</p> <p id="endGameText">You lost...</p>
<p id="endGameScore">0 - 0</p> <p id="endGameScore">0 - 0</p>
<p id="endGameSimpleText">You will be redirected to the lobby in 5 seconds</p> <p id="endGameSimpleText">You will be redirected to the lobby in 5 seconds</p>
</div> </div>

View File

@ -25,9 +25,9 @@ urlpatterns = [
path("multiOnlineGamePage", views.multiOnlineGamePage, name='multiOnlineGamePage'), path("multiOnlineGamePage", views.multiOnlineGamePage, name='multiOnlineGamePage'),
path("waitingGamePage", views.waitingGamePage, name='waitingGamePage'), path("waitingGamePage", views.waitingGamePage, name='waitingGamePage'),
path("profilPage", views.profilPage, name='profilPage'), 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("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("login42", views.login42, name='login42'),
path("logout", views.logout, name='logout'), path("logout", views.logout, name='logout'),
path("verify", views.verify, name='verify'), path("verify", views.verify, name='verify'),

View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/22 17:08:46 by madegryc #+# #+# */ /* 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() static create()
{ {
const methButton = document.getElementById("homeButton"); const methButton = document.getElementById("homeButton");
const startButton = document.getElementsByClassName('buttonStartGame')[0]; const startButton = document.getElementsByClassName('buttonStartGame')[0];
const usernameP = document.getElementById('loginButton').getElementsByTagName('p')[0]; const usernameP = document.getElementById('loginButton').getElementsByTagName('p')[0];
const loginButton = document.getElementById('loginButton'); const loginButton = document.getElementById('loginButton');
const inputUser = document.getElementById('searchInputUser'); const inputUser = document.getElementById('searchInputUser');
const func = [selectGameModeOne, selectGameModeTwo, selectGameModeThree, selectGameModeFour]; const tournamentCodeInput = document.getElementById('tournamentCode');
const func = [selectGameModeOne, selectGameModeTwo, selectGameModeThree, selectGameModeFour];
document.body.style.opacity = 1; document.body.style.opacity = 1;
if (userMeInfo.id == -1) if (userMeInfo.id == -1)
@ -59,6 +60,10 @@ class LobbyPage
initButtonPopMenuLogin(); initButtonPopMenuLogin();
initButtonLaytout(); initButtonLaytout();
window.addEventListener('click', closePopUpWhenClickOutsite); window.addEventListener('click', closePopUpWhenClickOutsite);
tournamentCodeInput.addEventListener('keypress', () => {
if (event.key == 'Enter')
startTournmament();
});
listSelectCard = document.getElementsByClassName('select-card'); listSelectCard = document.getElementsByClassName('select-card');
listSelectCard[0].addEventListener('click', selectGameModeOne); listSelectCard[0].addEventListener('click', selectGameModeOne);
listSelectCard[1].addEventListener('click', selectGameModeTwo); listSelectCard[1].addEventListener('click', selectGameModeTwo);
@ -177,11 +182,6 @@ function startTournmament()
sendRequest("tournament", {action: 0, code: code}); sendRequest("tournament", {action: 0, code: code});
} }
function showGameMode()
{
document.getElementById('loginPopup').style.display = 'flex';
}
function closePopUpWhenClickOutsite (event) function closePopUpWhenClickOutsite (event)
{ {
if (event.target == document.getElementById('loginPopup')) if (event.target == document.getElementById('loginPopup'))

View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/20 14:52:55 by hubourge #+# #+# */ /* 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 animationSpeed = 0.02;
let animateGoalObjectUpdate = null; let animateGoalObjectUpdate = null;
let animateGoalObjectUp = false; let animateGoalObjectUp = false;
const sourceImageLeft = "/static/img/default_pfp.jpg"; let sourceImageLeft = null;
const sourceImageRight = "/static/img/default_pfp.jpg"; let sourceImageRight = null;
let path = []; let path = [];
@ -119,7 +119,7 @@ class Map
scene = null; scene = null;
} }
constructor(sceneToSet, length, obstacles) constructor(sceneToSet, length, obstacles, pfpSelf, pfpOpponent)
{ {
loader = new GLTFLoader(); loader = new GLTFLoader();
scene = sceneToSet; scene = sceneToSet;
@ -153,6 +153,8 @@ class Map
0x0000CC 0x0000CC
*/ */
} }
sourceImageLeft = pfpSelf;
sourceImageRight = pfpOpponent;
this.putScoreboard(0xCCCCFF); this.putScoreboard(0xCCCCFF);
path = [ path = [
{name: 'goal', onChoice: true, src: files.goalVideoPub}, {name: 'goal', onChoice: true, src: files.goalVideoPub},
@ -456,10 +458,12 @@ class Map
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);
meshBoardLeftFront.position.set(-spacing - width / 2 - 0.3, 1.6, -8.5); meshBoardLeftFront.position.set(-spacing - width / 2 - 0.3, 1.6, -8.2);
meshBoardRightFront.position.set(spacing + width / 2 + 0.3, 1.6, -8.5); 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.rotation.y = Math.PI;
meshBoardLeftBack.position.set(-spacing - width / 2 - 0.3, 1.6, 8.5); meshBoardLeftBack.position.set(-spacing - width / 2 - 0.3, 1.6, 8.5);
@ -488,14 +492,12 @@ class Map
canvasImageLeft.width = 960; canvasImageLeft.width = 960;
canvasImageLeft.height = 960; canvasImageLeft.height = 960;
textureImageLeft = new THREE.CanvasTexture(canvasImageLeft); textureImageLeft = new THREE.CanvasTexture(canvasImageLeft);
textureImageLeft.imageSmoothingEnabled = false;
contextImageLeft.clearRect(0, 0, canvasImageLeft.width, canvasImageLeft.height); contextImageLeft.clearRect(0, 0, canvasImageLeft.width, canvasImageLeft.height);
const imageLeft = new Image(); const imageLeft = new Image();
imageLeft.src = sourceImageLeft; imageLeft.src = sourceImageLeft;
imageLeft.onload = () => { canvasImageLeft.classList.add('imgScoreBoard');
contextImageLeft.drawImage(imageLeft, 0, 0, canvasImageLeft.width, canvasImageLeft.height); imageLeft.onload = () => this.#putPlayerPfp(canvasImageLeft, contextImageLeft, textureImageLeft, imageLeft);
textureImageLeft.needsUpdate = true;
};
canvasImageRight = document.createElement('canvas'); canvasImageRight = document.createElement('canvas');
contextImageRight = canvasImageRight.getContext('2d'); contextImageRight = canvasImageRight.getContext('2d');
@ -505,11 +507,9 @@ class Map
contextImageLeft.clearRect(0, 0, canvasImageLeft.width, canvasImageLeft.height); contextImageLeft.clearRect(0, 0, canvasImageLeft.width, canvasImageLeft.height);
const imageRight = new Image(); const imageRight = new Image();
imageRight.setAttribute('class', 'imgScoreBoard');
imageRight.src = sourceImageRight; imageRight.src = sourceImageRight;
imageRight.onload = () => { imageRight.onload = () => this.#putPlayerPfp(canvasImageRight, contextImageRight, textureImageRight, imageRight);
contextImageRight.drawImage(imageRight, 0, 0, canvasImageRight.width, canvasImageRight.height);
textureImageRight.needsUpdate = true;
};
let materialProfileLeft = null; let materialProfileLeft = null;
let materialProfileRight = null; let materialProfileRight = null;
@ -537,8 +537,10 @@ class Map
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.001); meshProfileLeftFront.position.set(-spacing - width / 2 - 0.275, 1.6, - 8.15);
meshProfileRightFront.position.set(spacing + width / 2 + 0.325, 1.6, - 8.5 + depth / 2 + 0.01); 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.rotation.y = Math.PI;
meshProfileLeftBack.position.set(-spacing - width / 2 - 0.325, 1.6, 8.5 - depth / 2 - 0.001); 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: meshProfileLeftBack, name: "", type: "profileBoard"});
this.arrObject.push({mesh: meshProfileRightBack, 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) putVideoOnCanvas(nbImage, vNameNb)
{ {

View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/18 00:30:31 by edbernar #+# #+# */ /* 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; let mapLength = 0;
const goalAnimation = ["triangle", "cylinder", "star", "box", "rectangle", "ring"]; const goalAnimation = ["triangle", "cylinder", "star", "box", "rectangle", "ring"];
const controllerModelFactory = new XRControllerModelFactory(); const controllerModelFactory = new XRControllerModelFactory();
let motionController = null;
let key = null; let key = null;
let controller1 = null; let controller1 = null;
let controller2 = null; let controller2 = null;

View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/18 00:53:53 by edbernar #+# #+# */ /* 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 bar1 = createBarPlayer(availableSkins[skin.player]);
const bar2 = createBarPlayer(availableSkins[skin.opponent]); const bar2 = createBarPlayer(availableSkins[skin.opponent]);
console.log('skin : ', skin);
document.body.setAttribute('style', ''); document.body.setAttribute('style', '');
scene = new THREE.Scene() 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 = new THREE.WebGLRenderer({antialias: true});
renderer.shadowMap.enabled = true; renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.shadowMap.type = THREE.PCFSoftShadowMap;
@ -264,7 +265,7 @@ class MultiOnlineGamePage
if (map && map.score) if (map && map.score)
endGameScore.innerText = `${map.score.player} - ${map.score.opponent}`; endGameScore.innerText = `${map.score.player} - ${map.score.opponent}`;
if (content.won) if (content.won)
scoreText.innerText = "You win !" scoreText.innerText = "You won !"
endGameDiv.style.display = 'flex'; endGameDiv.style.display = 'flex';
intervalEnd = setInterval(() => { intervalEnd = setInterval(() => {
if (content.opponentLeft) if (content.opponentLeft)

View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/10/01 13:42:29 by edbernar #+# #+# */ /* 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 divInfo = null;
let divChat = null; let divChat = null;
// gerer quand la personne finit sa partie pour remettre tout comme il le faut
class TournamentPage class TournamentPage
{ {
static create(code) 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'); divTopInfo = document.getElementById('actuality-tournament');
divInfo = document.getElementsByClassName('infoo')[0]; divInfo = document.getElementsByClassName('infoo')[0];
divChat = document.getElementsByClassName('chat')[0]; divChat = document.getElementsByClassName('chat')[0];
@ -48,6 +57,11 @@ class TournamentPage
divTopInfo = null; divTopInfo = null;
divInfo = null; divInfo = null;
divChat = null; divChat = null;
Object.values(playerList).forEach((info) => {
info.id = 0;
info.username = null;
info.pfp = null;
});
} }
static newOpponent(content) static newOpponent(content)

View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/10/01 13:29:50 by edbernar #+# #+# */ /* 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) else if (content.started)
CN.new("Information", "This tournament has already started"); CN.new("Information", "This tournament has already started");
else 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 }; export { typeTournament };

View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/14 21:20:45 by edbernar #+# #+# */ /* 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(() => { setTimeout(() => {
document.body.style.animation = 'anim3 0.5s'; document.body.style.animation = 'anim3 0.5s';
document.body.style.opacity = 0; 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); }, 1000);
}, 500); }, 500);
document.body.removeChild(returnButton); document.body.removeChild(returnButton);

View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/20 11:23:41 by edbernar #+# #+# */ /* 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; padding: 0;
color: white; color: white;
background-color: rgba(0, 0, 0, 0.367); background-color: rgba(0, 0, 0, 0.367);
}
.imgScoreBoard {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
} }