- skin working
    - fix bug three js lobby page
    - add notification for join a invitation
Game
    - fix bug fade
This commit is contained in:
Kum1ta
2024-09-28 03:15:41 +02:00
parent b2bc0f2190
commit afb5742e65
13 changed files with 116 additions and 108 deletions

View File

@ -6,7 +6,7 @@
# By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ #
# +#+#+#+#+#+ +#+ #
# Created: 2024/09/13 16:20:58 by tomoron #+# #+# #
# Updated: 2024/09/28 02:15:53 by tomoron ### ########.fr #
# Updated: 2024/09/28 02:31:10 by edbernar ### ########.fr #
# #
# **************************************************************************** #
@ -70,7 +70,7 @@ class Game:
self.bot = withBot
self.started = False
self.end = False
slef.left = None
self.left = None
self.p1Pos = {"pos":0, "up": False}
self.p2Pos = {"pos":0, "up": False}

View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/25 00:00:21 by edbernar #+# #+# */
/* Updated: 2024/09/26 16:37:29 by edbernar ### ########.fr */
/* Updated: 2024/09/28 02:43:26 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -16,6 +16,7 @@ import { settingsPage } from "/static/javascript/settingsPage/settingsPage.js"
import { WaitingGamePage } from "/static/javascript/waitingGame/main.js"
import { ProfilPage } from "/static/javascript/profilPage/main.js";
import { LobbyPage } from "/static/javascript/lobbyPage/main.js";
import { sendRequest } from "/static/javascript/websocket.js";
import { HomePage } from "/static/javascript/homePage/main.js";
class Page
@ -25,9 +26,9 @@ class Page
availablePages = [
{suffix: false, url:'/', servUrl: '/homePage', class: HomePage, name: 'homePage', title: 'METH - Home'},
{suffix: false, url:'/lobby', servUrl: '/lobbyPage', class: LobbyPage, name: 'lobbyPage', title: 'METH - Lobby'},
{suffix: false, url:'/game', servUrl: '/multiOnlineGamePage', class: MultiOnlineGamePage, name: 'multiOnlineGamePage', title: 'METH - Game'},
{suffix: false, url:'/game', servUrl: '/multiLocalGamePage', class: multiLocalGamePage, name: 'multiLocalGamePage', title: 'METH - Game'},
{suffix: false, url:'/wait_game', servUrl: '/waitingGamePage', class: WaitingGamePage, name: 'waitingGamePage', title: 'METH - Wait for a game'},
{suffix: false, url:'/game', servUrl: '/multiOnlineGamePage', class: MultiOnlineGamePage, name: 'multiOnlineGamePage', title: 'METH - Game'},
{suffix: true, url:'/profil', servUrl: '/profilPage', class: ProfilPage, name: 'profilPage', title: 'METH - Profil'},
{suffix: false, url:'/settings', servUrl: '/settingsPage', class: settingsPage, name: 'settingsPage', title: 'METH - Settings'},
]
@ -43,6 +44,8 @@ class Page
let arg = window.location.pathname.slice(thisClass.availablePages[i].url.length + 1);
if (arg == "" || !thisClass.availablePages[i].suffix)
arg = null;
if (thisClass.actualPage == MultiOnlineGamePage)
sendRequest("game", {action: 2});
thisClass.changePage(thisClass.availablePages[i].name, true, arg, !thisClass.availablePages[i].suffix);
return ;
}

View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/13 13:59:46 by edbernar #+# #+# */
/* Updated: 2024/09/25 14:40:02 by edbernar ### ########.fr */
/* Updated: 2024/09/28 01:53:20 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -15,14 +15,7 @@ import * as THREE from '/static/javascript/three/build/three.module.js'
let actualBarSelecor = null;
let actualGoalSelecter = null;
let lastSelected = null;
class barSelecter
{
scene = null;
renderer = null;
camera = null;
spotLight = new THREE.SpotLight(0xffffff, 5);
availableSkins = [
const availableSkins = [
{id: 0, color: 0xff53aa, texture: null},
{id: 1, color: 0xaa24ea, texture: null},
{id: 2, color: 0x2c9c49, texture: null},
@ -31,8 +24,15 @@ class barSelecter
{id: 5, color: null, texture: '/static/img/skin/2.jpg'},
{id: 6, color: null, texture: '/static/img/skin/3.jpg'},
{id: 7, color: null, texture: '/static/img/skin/4.jpg'},
];
selected = lastSelected ? lastSelected : this.availableSkins[0];
];
class barSelecter
{
scene = null;
renderer = null;
camera = null;
spotLight = new THREE.SpotLight(0xffffff, 5);
selected = lastSelected ? lastSelected : availableSkins[0];
bar = this.createBarPlayer(this.selected.color ? this.selected.color : this.selected.texture);
boundChangeSkin = this.changeSkin.bind(this);
@ -45,7 +45,7 @@ class barSelecter
this.camera = new THREE.PerspectiveCamera(60, (pos.width - 10) / (pos.height - 10));
if (!lastSelected)
lastSelected = this.availableSkins[0];
lastSelected = availableSkins[0];
this.scene.background = new THREE.Color(0x020202);
this.renderer.setSize(pos.width - 10, pos.height - 10);
this.scene.add(this.spotLight);
@ -65,11 +65,11 @@ class barSelecter
popup.style.display = 'flex';
for (let i = 0; i < skins.length; i++)
{
skins[i].setAttribute('skinId', this.availableSkins[i].id);
if (this.availableSkins[i].color != null)
skins[i].style.backgroundColor = `#${this.availableSkins[i].color.toString(16)}`;
skins[i].setAttribute('skinId', availableSkins[i].id);
if (availableSkins[i].color != null)
skins[i].style.backgroundColor = `#${availableSkins[i].color.toString(16)}`;
else
skins[i].style.backgroundImage = `url("${this.availableSkins[i].texture}")`
skins[i].style.backgroundImage = `url("${availableSkins[i].texture}")`
skins[i].removeEventListener('click', this.boundChangeSkin);
skins[i].addEventListener('click', this.boundChangeSkin);
}
@ -94,12 +94,12 @@ class barSelecter
popup.style.display = 'none';
console.log(this.bar);
this.bar.material.dispose();
lastSelected = this.availableSkins[id];
if (this.availableSkins[id].color != null)
this.bar.material = new THREE.MeshPhysicalMaterial({color: this.availableSkins[id].color});
lastSelected = availableSkins[id];
if (availableSkins[id].color != null)
this.bar.material = new THREE.MeshPhysicalMaterial({color: availableSkins[id].color});
else
this.bar.material = new THREE.MeshPhysicalMaterial({map: new THREE.TextureLoader().load(this.availableSkins[id].texture)});
this.selected = this.availableSkins[id];
this.bar.material = new THREE.MeshPhysicalMaterial({map: new THREE.TextureLoader().load(availableSkins[id].texture)});
this.selected = availableSkins[id];
}
createBarPlayer(color)
@ -211,4 +211,4 @@ class goalSelecter
}
}
export { barSelecter, goalSelecter, lastSelected}
export { barSelecter, goalSelecter, lastSelected, availableSkins}

View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/22 17:08:46 by madegryc #+# #+# */
/* Updated: 2024/09/26 16:41:52 by edbernar ### ########.fr */
/* Updated: 2024/09/27 23:21:25 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -183,8 +183,6 @@ function hideGameMode()
function selectGameModeOne()
{
document.getElementById('loginPopup').style.display = 'none';
if (gameMode == 0)
return ;
document.getElementsByClassName('mode-card')[0].getElementsByTagName('p')[0].innerHTML = listSelectCard[0].innerHTML;
const menuList = document.getElementsByClassName('menuSelected');
for (let i = 0; i < menuList.length; i++)
@ -198,8 +196,6 @@ function selectGameModeOne()
function selectGameModeTwo()
{
document.getElementById('loginPopup').style.display = 'none';
if (gameMode == 1)
return ;
document.getElementsByClassName('mode-card')[0].getElementsByTagName('p')[0].innerHTML = listSelectCard[1].innerHTML;
const menuList = document.getElementsByClassName('menuSelected');
for (let i = 0; i < menuList.length; i++)
@ -221,8 +217,6 @@ function selectGameModeTwo()
function selectGameModeThree()
{
document.getElementById('loginPopup').style.display = 'none';
if (gameMode == 2)
return ;
document.getElementsByClassName('mode-card')[0].getElementsByTagName('p')[0].innerHTML = listSelectCard[2].innerHTML;
const menuList = document.getElementsByClassName('menuSelected');
for (let i = 0; i < menuList.length; i++)
@ -236,8 +230,6 @@ function selectGameModeThree()
function selectGameModeFour()
{
document.getElementById('loginPopup').style.display = 'none';
if (gameMode == 3)
return ;
document.getElementsByClassName('mode-card')[0].getElementsByTagName('p')[0].innerHTML = listSelectCard[3].innerHTML;
const menuList = document.getElementsByClassName('menuSelected');
for (let i = 0; i < menuList.length; i++)

View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/28 12:23:48 by edbernar #+# #+# */
/* Updated: 2024/09/17 15:02:11 by edbernar ### ########.fr */
/* Updated: 2024/09/27 23:56:31 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */

View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/20 14:52:55 by hubourge #+# #+# */
/* Updated: 2024/09/27 21:54:19 by edbernar ### ########.fr */
/* Updated: 2024/09/27 23:59:18 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -991,18 +991,8 @@ class Map
}
};
updateScore(name, score) // document.getElementsByTagName('canvas')[0] Si fondu noir marche pas c'est la
updateScore(name, score)
{
const canvasIndex = document.getElementsByTagName('canvas').length - 1;
document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeInGames 0.99s';
document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(0)';
setTimeout(() => {
document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeOutGames 0.99s';
document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(1)';
}, 200);
setTimeout(() => {
if (name == "player")
score.player++;

View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/18 00:30:31 by edbernar #+# #+# */
/* Updated: 2024/09/27 21:21:02 by edbernar ### ########.fr */
/* Updated: 2024/09/28 03:13:14 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -148,12 +148,12 @@ class Player
let hue = 0;
document.getElementsByTagName('canvas')[canvasIndex].style.animation = null;
document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeIn 0.199s';
document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeInGames 0.199s';
document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(0)';
setTimeout(() => {
document.getElementsByTagName('canvas')[canvasIndex].style.animation = null;
document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeOut 0.199s';
document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeOutGames 0.199s';
document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(1)';
}, 300)
@ -212,7 +212,7 @@ class Player
let hue = 0;
document.getElementsByTagName('canvas')[canvasIndex].style.animation = null;
document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeIn 0.199s';
document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeInGames 0.199s';
document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(0)';
setTimeout(() => {
@ -220,7 +220,6 @@ class Player
document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeOut 0.199s';
document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(1)';
}, 300)
setTimeout(() => {
tmpCamera.position.set(this.limits.left, this.limits.up / 2 + 0.5, map.centerPos.z);
isOnPointAnim = true;
@ -391,8 +390,9 @@ function goFullscreen()
function showGamePad()
{
const gamePad = document.getElementsByClassName('gamePad')[0];
const buttons = document.getElementsByClassName('buttonGamePad');
const canvas = document.getElementById('canvasMultiGameOnline');
const keyList = ['padLeft', 'padRight', 'padTop', 'padBottom']
const keyAction = ['a', 'd', 'w', 's']
canvas.addEventListener('touchstart', function(e) {
e.preventDefault();
@ -404,34 +404,25 @@ function showGamePad()
goFullscreen();
});
gamePad.style.display = 'flex';
for (let i = 0; i < buttons.length; i++)
document.addEventListener('touchstart', (event) => {
const key = event.target.getAttribute("id");
for (let i = 0; i < keyList.length; i++)
{
buttons[i].addEventListener('touchstart', (event) => {
const key = event.target.getAttribute("id");
if (key == 'padLeft')
addKeyInArr({key: 'a'});
else if (key == 'padRight')
addKeyInArr({key: 'd'});
else if (key == 'padTop')
addKeyInArr({key: 'w'});
else if (key == 'padBottom')
addKeyInArr({key: 's'});
});
buttons[i].addEventListener('touchend', (event) => {
const key = event.target.getAttribute("id");
if (key == 'padLeft')
remKeyInArr({key: 'a'});
else if (key == 'padRight')
remKeyInArr({key: 'd'});
else if (key == 'padTop')
remKeyInArr({key: 'w'});
else if (key == 'padBottom')
remKeyInArr({key: 's'});
});
if (keyList[i] == key)
addKeyInArr({key: keyAction[i]})
}
});
document.addEventListener('touchend', (event) => {
const key = event.target.getAttribute("id");
for (let i = 0; i < keyList.length; i++)
{
if (keyList[i] == key)
remKeyInArr({key: keyAction[i]})
}
});
}
export { Player, playerExist, goalAnimation};

View File

@ -6,11 +6,12 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/18 00:53:53 by edbernar #+# #+# */
/* Updated: 2024/09/27 21:21:29 by edbernar ### ########.fr */
/* Updated: 2024/09/28 03:15:02 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import { createNotification as CN } from "/static/javascript/notification/main.js";
import { availableSkins } from '/static/javascript/lobbyPage/3d.js';
import * as THREE from '/static/javascript/three/build/three.module.js'
import Stats from '/static/javascript/three/examples/jsm/libs/stats.module.js'
import { OrbitControls } from '/static/javascript/three/examples/jsm/Addons.js';
@ -73,12 +74,12 @@ let controls = null;
class MultiOnlineGamePage
{
static create()
static create(skin)
{
document.body.appendChild(stats.dom);
const bar1 = createBarPlayer(0xed56ea);
const bar2 = createBarPlayer(0xf3e11e);
const bar1 = createBarPlayer(availableSkins[skin.player]);
const bar2 = createBarPlayer(availableSkins[skin.opponent]);
document.body.setAttribute('style', '');
scene = new THREE.Scene()
@ -207,10 +208,16 @@ class MultiOnlineGamePage
}
}
function createBarPlayer(color)
function createBarPlayer(skin)
{
const geometry = new THREE.BoxGeometry(1, 0.1, 0.1);
const material = new THREE.MeshPhysicalMaterial({color: color});
let material = null;
console.log(skin)
if (skin.color)
material = new THREE.MeshPhysicalMaterial({color: skin.color});
else
material = new THREE.MeshPhysicalMaterial({map: new THREE.TextureLoader().load(skin.texture)});
const mesh = new THREE.Mesh(geometry, material);
mesh.castShadow = true;

View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/04 23:32:52 by edbernar #+# #+# */
/* Updated: 2024/09/21 22:25:12 by edbernar ### ########.fr */
/* Updated: 2024/09/28 00:38:44 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -154,7 +154,6 @@ function newNotification(title, message, img, action, timer, actionText)
class notification
{
timer = 5000;
defaultIcon = {
"warning": "/static/img/notification/ico/warning.png",
"error": "/static/img/notification/ico/error.png",
@ -164,9 +163,9 @@ class notification
constructor() {}
new(title, message, img=null, action=null, actionText="Confirm")
new(title, message, img=null, action=null, actionText="Confirm", timer=5000)
{
newNotification(title, message, img, action, this.timer, actionText);
newNotification(title, message, img, action, timer, actionText);
}
}

View File

@ -3,10 +3,10 @@
/* ::: :::::::: */
/* typeGame.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: hubourge <hubourge@student.42.fr> +#+ +:+ +#+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/15 12:00:01 by edbernar #+# #+# */
/* Updated: 2024/09/27 17:56:06 by hubourge ### ########.fr */
/* Updated: 2024/09/28 00:56:23 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -17,7 +17,9 @@ import { pageRenderer } from '/static/javascript/main.js'
function typeGame(content)
{
if (content.action == 1 && pageRenderer.actualPage == WaitingGamePage)
WaitingGamePage.showOpponent(content.username);
{
WaitingGamePage.showOpponent(content);
}
else if (content.action == 3 && pageRenderer.actualPage == MultiOnlineGamePage)
{
if (content.is_opponent)

View File

@ -0,0 +1,23 @@
/* ************************************************************************** */
/* */
/* ::: :::::::: */
/* typeInvitation.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/28 00:22:31 by edbernar #+# #+# */
/* Updated: 2024/09/28 00:41:16 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import { createNotification as CN } from "/static/javascript/notification/main.js";
import { pageRenderer } from '/static/javascript/main.js'
function typeInvitation(content)
{
CN.new("New invitation", content.invitor + " invit you to play !", null, () => {
pageRenderer.changePage('waitingGamePage', false, {username: "AAA", id: content.invitor});
}, 'Join', 30000);
}
export { typeInvitation }

View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/14 21:20:45 by edbernar #+# #+# */
/* Updated: 2024/09/27 11:26:38 by edbernar ### ########.fr */
/* Updated: 2024/09/28 02:08:21 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -64,7 +64,7 @@ class WaitingGamePage
returnButton.removeEventListener('click', returnToLobby);
}
static showOpponent(username)
static showOpponent(content)
{
const returnButton = document.getElementById('returnToLobbyButton');
const sentence = document.getElementById('sentence');
@ -75,13 +75,13 @@ class WaitingGamePage
sentence.style.animation = 'anim3 0.5s';
sentence.style.opacity = 0;
setTimeout(() => {
sentence.innerText = "Your opponent is " + username;
sentence.innerText = "Your opponent is " + content.username;
sentence.style.animation = 'animShowMenuDiv 0.5s';
sentence.style.opacity = 1;
setTimeout(() => {
document.body.style.animation = 'anim3 0.5s';
document.body.style.opacity = 0;
pageRenderer.changePage("multiOnlineGamePage");
pageRenderer.changePage("multiOnlineGamePage", false, {player: lastSelected.id, opponent: content.skin});
}, 1000);
}, 500);
document.body.removeChild(returnButton);

View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/07/31 22:17:24 by edbernar #+# #+# */
/* Updated: 2024/09/27 10:53:04 by edbernar ### ########.fr */
/* Updated: 2024/09/28 00:22:40 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -23,6 +23,7 @@ import { typeAllListUser }from "/static/javascript/typeResponse/typeAllListUser.
import { typePrivateInfo } from "/static/javascript/typeResponse/typePrivateInfo.js"
import { createNotification as CN } from "/static/javascript/notification/main.js";
import { typeSearchUser } from "/static/javascript/typeResponse/typeSearchUser.js";
import { typeInvitation }from "/static/javascript/typeResponse/typeInvitation.js";
import { typeChangePfp } from "/static/javascript/typeResponse/typeChangePfp.js";
import { typeUserInfo } from "/static/javascript/typeResponse/typeUserInfo.js";
import { typeLogin } from "/static/javascript/typeResponse/typeLogin.js";
@ -38,8 +39,8 @@ function launchSocket()
socket = new WebSocket('/ws');
const typeResponse = ["logged_in", "login", "private_list_user", "private_list_message", "new_private_message", "all_list_user", "create_account", "game", "search_user", "user_info", "change_pfp", "private_info", "change_private_info"];
const functionResponse = [typeLogin, typeLogin, typePrivateListUser, typePrivateListMessage, typeNewPrivateMessage, typeAllListUser, typeCreateAccount, typeGame, typeSearchUser, typeUserInfo, typeChangePfp, typePrivateInfo, typeChangePrivateInfo];
const typeResponse = ["logged_in", "login", "private_list_user", "private_list_message", "new_private_message", "all_list_user", "create_account", "game", "search_user", "user_info", "change_pfp", "private_info", "change_private_info", "invitation"];
const functionResponse = [typeLogin, typeLogin, typePrivateListUser, typePrivateListMessage, typeNewPrivateMessage, typeAllListUser, typeCreateAccount, typeGame, typeSearchUser, typeUserInfo, typeChangePfp, typePrivateInfo, typeChangePrivateInfo, typeInvitation];
const errorCode = [9007, 9010, 9011, 9013];
const errorFunction = [typeErrorInvalidPassword, typeErrorInvalidToken42, typeErrorUnknown42Account, typeErrorConnectedElsewhere];