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

Site

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files

4
docker-compose/requirements/djangoserver/file/server/server/Game.py
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/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.bot = withBot
self.started = False self.started = False
self.end = False self.end = False
slef.left = None self.left = None
self.p1Pos = {"pos":0, "up": False} self.p1Pos = {"pos":0, "up": False}
self.p2Pos = {"pos":0, "up": False} self.p2Pos = {"pos":0, "up": False}

7
docker-compose/requirements/nginx/static/javascript/Page.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/25 00:00:21 by edbernar #+# #+# */ /* 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 { WaitingGamePage } from "/static/javascript/waitingGame/main.js"
import { ProfilPage } from "/static/javascript/profilPage/main.js"; import { ProfilPage } from "/static/javascript/profilPage/main.js";
import { LobbyPage } from "/static/javascript/lobbyPage/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"; import { HomePage } from "/static/javascript/homePage/main.js";
class Page class Page
@ -25,9 +26,9 @@ class Page
availablePages = [ availablePages = [
{suffix: false, url:'/', servUrl: '/homePage', class: HomePage, name: 'homePage', title: 'METH - Home'}, {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:'/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:'/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:'/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: 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'}, {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); let arg = window.location.pathname.slice(thisClass.availablePages[i].url.length + 1);
if (arg == "" || !thisClass.availablePages[i].suffix) if (arg == "" || !thisClass.availablePages[i].suffix)
arg = null; arg = null;
if (thisClass.actualPage == MultiOnlineGamePage)
sendRequest("game", {action: 2});
thisClass.changePage(thisClass.availablePages[i].name, true, arg, !thisClass.availablePages[i].suffix); thisClass.changePage(thisClass.availablePages[i].name, true, arg, !thisClass.availablePages[i].suffix);
return ; return ;
} }

42
docker-compose/requirements/nginx/static/javascript/lobbyPage/3d.js
View File

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

10
docker-compose/requirements/nginx/static/javascript/lobbyPage/main.js
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/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() function selectGameModeOne()
{ {
document.getElementById('loginPopup').style.display = 'none'; document.getElementById('loginPopup').style.display = 'none';
if (gameMode == 0)
return ;
document.getElementsByClassName('mode-card')[0].getElementsByTagName('p')[0].innerHTML = listSelectCard[0].innerHTML; document.getElementsByClassName('mode-card')[0].getElementsByTagName('p')[0].innerHTML = listSelectCard[0].innerHTML;
const menuList = document.getElementsByClassName('menuSelected'); const menuList = document.getElementsByClassName('menuSelected');
for (let i = 0; i < menuList.length; i++) for (let i = 0; i < menuList.length; i++)
@ -198,8 +196,6 @@ function selectGameModeOne()
function selectGameModeTwo() function selectGameModeTwo()
{ {
document.getElementById('loginPopup').style.display = 'none'; document.getElementById('loginPopup').style.display = 'none';
if (gameMode == 1)
return ;
document.getElementsByClassName('mode-card')[0].getElementsByTagName('p')[0].innerHTML = listSelectCard[1].innerHTML; document.getElementsByClassName('mode-card')[0].getElementsByTagName('p')[0].innerHTML = listSelectCard[1].innerHTML;
const menuList = document.getElementsByClassName('menuSelected'); const menuList = document.getElementsByClassName('menuSelected');
for (let i = 0; i < menuList.length; i++) for (let i = 0; i < menuList.length; i++)
@ -221,8 +217,6 @@ function selectGameModeTwo()
function selectGameModeThree() function selectGameModeThree()
{ {
document.getElementById('loginPopup').style.display = 'none'; document.getElementById('loginPopup').style.display = 'none';
if (gameMode == 2)
return ;
document.getElementsByClassName('mode-card')[0].getElementsByTagName('p')[0].innerHTML = listSelectCard[2].innerHTML; document.getElementsByClassName('mode-card')[0].getElementsByTagName('p')[0].innerHTML = listSelectCard[2].innerHTML;
const menuList = document.getElementsByClassName('menuSelected'); const menuList = document.getElementsByClassName('menuSelected');
for (let i = 0; i < menuList.length; i++) for (let i = 0; i < menuList.length; i++)
@ -236,8 +230,6 @@ function selectGameModeThree()
function selectGameModeFour() function selectGameModeFour()
{ {
document.getElementById('loginPopup').style.display = 'none'; document.getElementById('loginPopup').style.display = 'none';
if (gameMode == 3)
return ;
document.getElementsByClassName('mode-card')[0].getElementsByTagName('p')[0].innerHTML = listSelectCard[3].innerHTML; document.getElementsByClassName('mode-card')[0].getElementsByTagName('p')[0].innerHTML = listSelectCard[3].innerHTML;
const menuList = document.getElementsByClassName('menuSelected'); const menuList = document.getElementsByClassName('menuSelected');
for (let i = 0; i < menuList.length; i++) for (let i = 0; i < menuList.length; i++)

2
docker-compose/requirements/nginx/static/javascript/multiLocalGame/Map.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/28 12:23:48 by edbernar #+# #+# */ /* 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 */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */

14
docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Map.js
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/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(() => { setTimeout(() => {
if (name == "player") if (name == "player")
score.player++; score.player++;

55
docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Player.js
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/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; let hue = 0;
document.getElementsByTagName('canvas')[canvasIndex].style.animation = null; 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)'; document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(0)';
setTimeout(() => { setTimeout(() => {
document.getElementsByTagName('canvas')[canvasIndex].style.animation = null; 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)'; document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(1)';
}, 300) }, 300)
@ -212,7 +212,7 @@ class Player
let hue = 0; let hue = 0;
document.getElementsByTagName('canvas')[canvasIndex].style.animation = null; 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)'; document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(0)';
setTimeout(() => { setTimeout(() => {
@ -220,7 +220,6 @@ class Player
document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeOut 0.199s'; document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeOut 0.199s';
document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(1)'; document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(1)';
}, 300) }, 300)
setTimeout(() => { setTimeout(() => {
tmpCamera.position.set(this.limits.left, this.limits.up / 2 + 0.5, map.centerPos.z); tmpCamera.position.set(this.limits.left, this.limits.up / 2 + 0.5, map.centerPos.z);
isOnPointAnim = true; isOnPointAnim = true;
@ -391,8 +390,9 @@ function goFullscreen()
function showGamePad() function showGamePad()
{ {
const gamePad = document.getElementsByClassName('gamePad')[0]; const gamePad = document.getElementsByClassName('gamePad')[0];
const buttons = document.getElementsByClassName('buttonGamePad');
const canvas = document.getElementById('canvasMultiGameOnline'); const canvas = document.getElementById('canvasMultiGameOnline');
const keyList = ['padLeft', 'padRight', 'padTop', 'padBottom']
const keyAction = ['a', 'd', 'w', 's']
canvas.addEventListener('touchstart', function(e) { canvas.addEventListener('touchstart', function(e) {
e.preventDefault(); e.preventDefault();
@ -404,34 +404,25 @@ function showGamePad()
goFullscreen(); goFullscreen();
}); });
gamePad.style.display = 'flex'; 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) => { if (keyList[i] == key)
const key = event.target.getAttribute("id"); addKeyInArr({key: keyAction[i]})
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'});
});
} }
});
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}; export { Player, playerExist, goalAnimation};

19
docker-compose/requirements/nginx/static/javascript/multiOnlineGame/multiOnlineGamePage.js
View File

@ -6,11 +6,12 @@
/* 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/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 { 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 * as THREE from '/static/javascript/three/build/three.module.js'
import Stats from '/static/javascript/three/examples/jsm/libs/stats.module.js' import Stats from '/static/javascript/three/examples/jsm/libs/stats.module.js'
import { OrbitControls } from '/static/javascript/three/examples/jsm/Addons.js'; import { OrbitControls } from '/static/javascript/three/examples/jsm/Addons.js';
@ -73,12 +74,12 @@ let controls = null;
class MultiOnlineGamePage class MultiOnlineGamePage
{ {
static create() static create(skin)
{ {
document.body.appendChild(stats.dom); document.body.appendChild(stats.dom);
const bar1 = createBarPlayer(0xed56ea); const bar1 = createBarPlayer(availableSkins[skin.player]);
const bar2 = createBarPlayer(0xf3e11e); const bar2 = createBarPlayer(availableSkins[skin.opponent]);
document.body.setAttribute('style', ''); document.body.setAttribute('style', '');
scene = new THREE.Scene() 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 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); const mesh = new THREE.Mesh(geometry, material);
mesh.castShadow = true; mesh.castShadow = true;

7
docker-compose/requirements/nginx/static/javascript/notification/main.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/04 23:32:52 by edbernar #+# #+# */ /* 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 class notification
{ {
timer = 5000;
defaultIcon = { defaultIcon = {
"warning": "/static/img/notification/ico/warning.png", "warning": "/static/img/notification/ico/warning.png",
"error": "/static/img/notification/ico/error.png", "error": "/static/img/notification/ico/error.png",
@ -164,9 +163,9 @@ class notification
constructor() {} 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);
} }
} }

8
docker-compose/requirements/nginx/static/javascript/typeResponse/typeGame.js
View File

@ -3,10 +3,10 @@
/* ::: :::::::: */ /* ::: :::::::: */
/* typeGame.js :+: :+: :+: */ /* typeGame.js :+: :+: :+: */
/* +:+ +:+ +:+ */ /* +:+ +:+ +:+ */
/* By: hubourge <hubourge@student.42.fr> +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/15 12:00:01 by edbernar #+# #+# */ /* 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) function typeGame(content)
{ {
if (content.action == 1 && pageRenderer.actualPage == WaitingGamePage) if (content.action == 1 && pageRenderer.actualPage == WaitingGamePage)
WaitingGamePage.showOpponent(content.username); {
WaitingGamePage.showOpponent(content);
}
else if (content.action == 3 && pageRenderer.actualPage == MultiOnlineGamePage) else if (content.action == 3 && pageRenderer.actualPage == MultiOnlineGamePage)
{ {
if (content.is_opponent) if (content.is_opponent)

23
docker-compose/requirements/nginx/static/javascript/typeResponse/typeInvitation.js Normal file
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 }

8
docker-compose/requirements/nginx/static/javascript/waitingGame/main.js
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/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); returnButton.removeEventListener('click', returnToLobby);
} }
static showOpponent(username) static showOpponent(content)
{ {
const returnButton = document.getElementById('returnToLobbyButton'); const returnButton = document.getElementById('returnToLobbyButton');
const sentence = document.getElementById('sentence'); const sentence = document.getElementById('sentence');
@ -75,13 +75,13 @@ class WaitingGamePage
sentence.style.animation = 'anim3 0.5s'; sentence.style.animation = 'anim3 0.5s';
sentence.style.opacity = 0; sentence.style.opacity = 0;
setTimeout(() => { setTimeout(() => {
sentence.innerText = "Your opponent is " + username; sentence.innerText = "Your opponent is " + content.username;
sentence.style.animation = 'animShowMenuDiv 0.5s'; sentence.style.animation = 'animShowMenuDiv 0.5s';
sentence.style.opacity = 1; sentence.style.opacity = 1;
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"); pageRenderer.changePage("multiOnlineGamePage", false, {player: lastSelected.id, opponent: content.skin});
}, 1000); }, 1000);
}, 500); }, 500);
document.body.removeChild(returnButton); document.body.removeChild(returnButton);

7
docker-compose/requirements/nginx/static/javascript/websocket.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/07/31 22:17:24 by edbernar #+# #+# */ /* 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 { typePrivateInfo } from "/static/javascript/typeResponse/typePrivateInfo.js"
import { createNotification as CN } from "/static/javascript/notification/main.js"; import { createNotification as CN } from "/static/javascript/notification/main.js";
import { typeSearchUser } from "/static/javascript/typeResponse/typeSearchUser.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 { typeChangePfp } from "/static/javascript/typeResponse/typeChangePfp.js";
import { typeUserInfo } from "/static/javascript/typeResponse/typeUserInfo.js"; import { typeUserInfo } from "/static/javascript/typeResponse/typeUserInfo.js";
import { typeLogin } from "/static/javascript/typeResponse/typeLogin.js"; import { typeLogin } from "/static/javascript/typeResponse/typeLogin.js";
@ -38,8 +39,8 @@ function launchSocket()
socket = new WebSocket('/ws'); 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 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]; const functionResponse = [typeLogin, typeLogin, typePrivateListUser, typePrivateListMessage, typeNewPrivateMessage, typeAllListUser, typeCreateAccount, typeGame, typeSearchUser, typeUserInfo, typeChangePfp, typePrivateInfo, typeChangePrivateInfo, typeInvitation];
const errorCode = [9007, 9010, 9011, 9013]; const errorCode = [9007, 9010, 9011, 9013];
const errorFunction = [typeErrorInvalidPassword, typeErrorInvalidToken42, typeErrorUnknown42Account, typeErrorConnectedElsewhere]; const errorFunction = [typeErrorInvalidPassword, typeErrorInvalidToken42, typeErrorUnknown42Account, typeErrorConnectedElsewhere];