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

Site

Browse Source 
- Add multi local game
    - Some minor changes in html/css
Django
    - add path for /game and /multiLocalGamePage
    - add template for multiLocalGame
This commit is contained in:
Kum1ta
2024-09-14 02:05:44 +02:00
parent 906a713e8d
commit 92ff0e9e8d
19 changed files with 27995 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docker-compose/requirements/djangoserver/file/server/server/templates/index.html
View File

@ -10,6 +10,7 @@
<link rel='stylesheet' type='text/css' href='/static/style/homePage/loginPage.css'> <link rel='stylesheet' type='text/css' href='/static/style/homePage/loginPage.css'>
<link rel='stylesheet' type='text/css' href='/static/style/global/notification.css'> <link rel='stylesheet' type='text/css' href='/static/style/global/notification.css'>
<link rel='stylesheet' type='text/css' href='/static/style/lobbyPage/lobbyPage.css'> <link rel='stylesheet' type='text/css' href='/static/style/lobbyPage/lobbyPage.css'>
<link rel='stylesheet' type='text/css' href='/static/style/game/games.css'>
<script type="module" src='/static/javascript/main.js'></script> <script type="module" src='/static/javascript/main.js'></script>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

13
docker-compose/requirements/djangoserver/file/server/server/templates/lobbyPage.html
View File

@ -39,10 +39,15 @@
<div id="goal"> <div id="goal">
</div> </div>
<div class="switch"> <div class="bottom">
<input id="checkbox1" class="look" type="checkbox"> <div class="switch">
<label for="checkbox1"></label> <input id="checkbox1" class="look" type="checkbox">
<p>Fix the camera on the bar</p> <label for="checkbox1"></label>
<p>Fix the camera on the bar</p>
</div>
<div class="buttonStartGame">
<p>Start</p>
</div>
</div> </div>
</div> </div>
</div> </div>

3
docker-compose/requirements/djangoserver/file/server/server/templates/multiLocalGamePage.html Normal file
View File

@ -0,0 +1,3 @@
<body>
<p id="score"></p>
</body>

2
docker-compose/requirements/djangoserver/file/server/server/urls.py
View File

@ -21,6 +21,8 @@ urlpatterns = [
path("",views.index, name='index'), path("",views.index, name='index'),
path("homePage",views.homePage, name='homePage'), path("homePage",views.homePage, name='homePage'),
path("lobbyPage", views.lobbyPage, name='lobbyPage'), path("lobbyPage", views.lobbyPage, name='lobbyPage'),
path("multiLocalGamePage", views.multiLocalGamePage, name='multiLocalGamePage'),
path("game", views.game, name='game'),
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'),

12
docker-compose/requirements/djangoserver/file/server/server/views.py
View File

@ -30,6 +30,18 @@ def lobbyPage(request):
return(HttpResponse("you are not logged in",status=403)) return(HttpResponse("you are not logged in",status=403))
return render(request, "lobbyPage.html", {}) return render(request, "lobbyPage.html", {})
def multiLocalGamePage(request):
if(request.method != "POST"):
return index(request)
if(not request.session.get("logged_in", False)):
return(HttpResponse("you are not logged in",status=403))
return render(request, "multiLocalGamePage.html", {})
def game(request):
if(not request.session.get("logged_in", False)):
return(HttpResponse("you are not logged in",status=403))
return redirect("/lobby")
def verify(request): def verify(request):
req_token = request.GET.get('token', None) req_token = request.GET.get('token', None)
if(req_token == None): if(req_token == None):

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

@ -6,12 +6,13 @@
/* 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/13 11:05:33 by edbernar ### ########.fr */ /* Updated: 2024/09/14 00:57:30 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
import { HomePage } from "/static/javascript/homePage/main.js"; import { multiLocalGamePage } from "/static/javascript/multiLocalGame/multiLocalGamePage.js"
import { LobbyPage } from "/static/javascript/lobbyPage/main.js"; import { LobbyPage } from "/static/javascript/lobbyPage/main.js";
import { HomePage } from "/static/javascript/homePage/main.js";
class Page class Page
{ {
@ -19,6 +20,7 @@ class Page
availablePages = [ availablePages = [
{url:'/', servUrl: '/homePage', class: HomePage, name: 'homePage', title: 'PTME - Home'}, {url:'/', servUrl: '/homePage', class: HomePage, name: 'homePage', title: 'PTME - Home'},
{url:'/lobby', servUrl: '/lobbyPage', class: LobbyPage, name: 'lobbyPage', title: 'PTME - Lobby'}, {url:'/lobby', servUrl: '/lobbyPage', class: LobbyPage, name: 'lobbyPage', title: 'PTME - Lobby'},
{url:'/game', servUrl: '/multiLocalGamePage', class: multiLocalGamePage, name: 'multiLocalGamePage', title: 'PTME - Game'},
] ]
constructor() constructor()
@ -63,13 +65,13 @@ class Page
}) })
.then(data => { .then(data => {
data.text().then(text => { data.text().then(text => {
console.log("Page updated !");
document.body.innerHTML = text; document.body.innerHTML = text;
this.actualPage = this.availablePages[i].class; this.actualPage = this.availablePages[i].class;
document.title = this.availablePages[i].title; document.title = this.availablePages[i].title;
if (!isBack) if (!isBack)
history.pushState({}, this.availablePages[i].title, this.availablePages[i].url); history.pushState({}, this.availablePages[i].title, this.availablePages[i].url);
this.actualPage.create(); this.actualPage.create();
console.log("Page created.");
}) })
}) })
.catch(error => { .catch(error => {

13081
docker-compose/requirements/nginx/static/javascript/cannon-es/dist/cannon-es.cjs.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

1603
docker-compose/requirements/nginx/static/javascript/cannon-es/dist/cannon-es.d.ts vendored Normal file
View File

File diff suppressed because it is too large Load Diff

13023
docker-compose/requirements/nginx/static/javascript/cannon-es/dist/cannon-es.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

4
docker-compose/requirements/nginx/static/javascript/home3D/home3D.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/22 17:19:17 by edbernar #+# #+# */ /* Created: 2024/08/22 17:19:17 by edbernar #+# #+# */
/* Updated: 2024/09/13 16:42:37 by edbernar ### ########.fr */ /* Updated: 2024/09/13 22:13:07 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -18,7 +18,7 @@ import * as THREE from '/static/javascript/three/build/three.module.js'
import { Screen, light } from '/static/javascript/home3D/Screen.js' import { Screen, light } from '/static/javascript/home3D/Screen.js'
import { pageRenderer } from '/static/javascript/main.js' import { pageRenderer } from '/static/javascript/main.js'
const disable3D = true; const disable3D = false;
let scene = null; let scene = null;
let renderer = null; let renderer = null;

36
docker-compose/requirements/nginx/static/javascript/lobbyPage/main.js
View File

@ -6,12 +6,12 @@
/* 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/13 15:43:17 by edbernar ### ########.fr */ /* Updated: 2024/09/14 01:28:25 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
import { barSelecter, goalSelecter } from '/static/javascript/lobbyPage/3d.js'; import { barSelecter, goalSelecter } from '/static/javascript/lobbyPage/3d.js';
import { pageRenderer } from '/static/javascript/main.js'
/* /*
Information : Information :
- 0: Multiplayer local - 0: Multiplayer local
@ -29,9 +29,9 @@ class LobbyPage
{ {
static create() static create()
{ {
console.log("Lobby created"); const startButton = document.getElementsByClassName('buttonStartGame')[0];
listSelectCard = document.getElementsByClassName('select-card');
listSelectCard = document.getElementsByClassName('select-card');
gameMode = 0; gameMode = 0;
document.getElementsByClassName('game-mode')[0].addEventListener('click', showGameMode); document.getElementsByClassName('game-mode')[0].addEventListener('click', showGameMode);
document.getElementById('closePopupBtn').addEventListener('click', hideGameMode); document.getElementById('closePopupBtn').addEventListener('click', hideGameMode);
@ -46,11 +46,15 @@ class LobbyPage
} }
barSelector = new barSelecter(document.getElementById('bar')); barSelector = new barSelecter(document.getElementById('bar'));
goalSelector = new goalSelecter(document.getElementById('goal')); goalSelector = new goalSelecter(document.getElementById('goal'));
startButton.addEventListener('click', startMode);
} }
static dispose() static dispose()
{ {
const startButton = document.getElementsByClassName('buttonStartGame')[0];
gameMode = 0; gameMode = 0;
startButton.removeEventListener('click', startMode);
document.getElementsByClassName('game-mode')[0].removeEventListener('click', showGameMode); document.getElementsByClassName('game-mode')[0].removeEventListener('click', showGameMode);
document.getElementById('closePopupBtn').removeEventListener('click', hideGameMode); document.getElementById('closePopupBtn').removeEventListener('click', hideGameMode);
window.removeEventListener('click', closeClickOutsiteGameMode); window.removeEventListener('click', closeClickOutsiteGameMode);
@ -63,9 +67,31 @@ class LobbyPage
barSelector = null; barSelector = null;
goalSelector.dispose(); goalSelector.dispose();
goalSelector = null; goalSelector = null;
listSelectCard = null;
} }
} }
function startMode()
{
if (gameMode == 0)
startMultiLocal();
else if (gameMode == 1)
alert("Not implemented");
else if (gameMode == 2)
alert("Not implemented");
else if (gameMode == 3)
alert("Not implemented");
}
function startMultiLocal()
{
console.log(1);
document.body.style.animation = "startGameAnim 0.5s";
document.body.style.opacity = 0;
setTimeout(() => {
pageRenderer.changePage("multiLocalGamePage");
}, 500);
}
function showGameMode() function showGameMode()
{ {
@ -114,4 +140,4 @@ function selectGameModeFour()
} }
export { LobbyPage }; export { LobbyPage };

8
site/real_game/class/soloClass/Ball.js → docker-compose/requirements/nginx/static/javascript/multiLocalGame/Ball.js
View File

@ -3,15 +3,15 @@
/* ::: :::::::: */ /* ::: :::::::: */
/* Ball.js :+: :+: :+: */ /* Ball.js :+: :+: :+: */
/* +:+ +:+ +:+ */ /* +:+ +:+ +:+ */
/* By: hubourge <hubourge@student.42.fr> +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/28 15:58:03 by edbernar #+# #+# */ /* Created: 2024/08/28 15:58:03 by edbernar #+# #+# */
/* Updated: 2024/09/04 15:07:07 by hubourge ### ########.fr */ /* Updated: 2024/09/14 00:19:46 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
import * as THREE from 'three'; import * as THREE from '/static/javascript/three/build/three.module.js'
import { wallTop, wallBottom } from './Map.js'; import { wallTop, wallBottom } from '/static/javascript/multiLocalGame/Map.js'
let ball = null; let ball = null;
let speed = 0.15; let speed = 0.15;

42
site/real_game/class/soloClass/Map.js → docker-compose/requirements/nginx/static/javascript/multiLocalGame/Map.js
View File

@ -3,17 +3,18 @@
/* ::: :::::::: */ /* ::: :::::::: */
/* Map.js :+: :+: :+: */ /* Map.js :+: :+: :+: */
/* +:+ +:+ +:+ */ /* +:+ +:+ +:+ */
/* By: hubourge <hubourge@student.42.fr> +#+ +:+ +#+ */ /* 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/13 17:03:55 by hubourge ### ########.fr */ /* Updated: 2024/09/14 02:02:00 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
import * as CANNON from 'cannon-es'; import * as CANNON from '/static/javascript/cannon-es/dist/cannon-es.js'
import * as THREE from 'three'; // import * as CANNON from '/static/javascript/cannon/build/cannon.min.js'
import { ball } from './Ball.js' import * as THREE from '/static/javascript/three/build/three.module.js'
import { player1, player2 } from './Players.js'; import { ball } from '/static/javascript/multiLocalGame/Ball.js'
import { player1, player2 } from '/static/javascript/multiLocalGame/Players.js';
const width = 25; const width = 25;
const height = 12.5; const height = 12.5;
@ -34,14 +35,16 @@ let speed = 3;
let initialZ = 0; let initialZ = 0;
let score = {player1: 0, player2: 0}; let score = {player1: 0, player2: 0};
let onUpdate = false; let onUpdate = false;
const scoreElement = document.getElementById('score'); let scoreElement = null;
let initialSpeed = 3; let initialSpeed = 3;
let gameEndStatus = false; let gameEndStatus = false;
const scoreToWin = 2; //+1 for real score to win
class Map class Map
{ {
static create(scene) static create(scene)
{ {
scoreElement = document.getElementById('score');
world = new CANNON.World({ world = new CANNON.World({
gravity: new CANNON.Vec3(0, -9.81, 0), gravity: new CANNON.Vec3(0, -9.81, 0),
}); });
@ -153,6 +156,9 @@ class Map
if (spotLight) if (spotLight)
spotLight.dispose(); spotLight.dispose();
spotLight = null; spotLight = null;
score.player1 = 0;
score.player2 = 0;
gameEndStatus = false;
} }
static update() static update()
@ -295,9 +301,9 @@ class Map
static reCreate(player1Lose) static reCreate(player1Lose)
{ {
onUpdate = true; onUpdate = true;
document.getElementsByTagName('canvas')[3].style.animation = 'fadeIn 0.199s'; document.getElementsByTagName('canvas')[0].style.animation = 'fadeInGames 0.199s';
document.getElementsByTagName('canvas')[3].style.filter = 'brightness(0)'; document.getElementsByTagName('canvas')[0].style.filter = 'brightness(0)';
scoreElement.style.animation = 'fadeInText 0.199s'; scoreElement.style.animation = 'fadeInTextGames 0.199s';
scoreElement.style.color = 'rgb(255, 255, 255, 1)'; scoreElement.style.color = 'rgb(255, 255, 255, 1)';
setTimeout(() => { setTimeout(() => {
@ -308,7 +314,7 @@ class Map
scoreElement.innerHTML = score.player1 + '-' +score.player2; scoreElement.innerHTML = score.player1 + '-' +score.player2;
}, 500); }, 500);
if ((player1Lose && score.player2 >= 2) || (!player1Lose && score.player1 >= 2)) if ((player1Lose && score.player2 >= scoreToWin) || (!player1Lose && score.player1 >= scoreToWin))
return (this.#endGame()); return (this.#endGame());
setTimeout(() => { setTimeout(() => {
@ -339,9 +345,9 @@ class Map
player2Body.position.set(12, 0.4, 0); player2Body.position.set(12, 0.4, 0);
player2.position.copy(player2Body.position); player2.position.copy(player2Body.position);
scoreElement.style.animation = 'fadeOut 0.199s'; scoreElement.style.animation = 'fadeOutGames 0.199s';
document.getElementsByTagName('canvas')[3].style.filter = 'brightness(1)'; document.getElementsByTagName('canvas')[0].style.filter = 'brightness(1)';
scoreElement.style.animation = 'fadeOutText 0.399s'; scoreElement.style.animation = 'fadeOutTextGames 0.399s';
scoreElement.style.color = 'rgb(255, 255, 255, 0.1)'; scoreElement.style.color = 'rgb(255, 255, 255, 0.1)';
}, 1200); }, 1200);
} }
@ -377,9 +383,9 @@ class Map
player2Body.position.set(12, 0.4, 0); player2Body.position.set(12, 0.4, 0);
player2.position.copy(player2Body.position); player2.position.copy(player2Body.position);
scoreElement.style.animation = 'fadeOut 0.199s'; scoreElement.style.animation = 'fadeOutGames 0.199s';
document.getElementsByTagName('canvas')[3].style.filter = 'brightness(1)'; document.getElementsByTagName('canvas')[0].style.filter = 'brightness(1)';
scoreElement.style.animation = 'fadeOutText 0.399s'; scoreElement.style.animation = 'fadeOutTextGames 0.399s';
scoreElement.style.color = 'rgb(255, 255, 255, 0.1)'; scoreElement.style.color = 'rgb(255, 255, 255, 0.1)';
onUpdate = false; onUpdate = false;
gameEndStatus = true; gameEndStatus = true;
@ -419,4 +425,4 @@ function createWall(onTop)
return (mesh); return (mesh);
} }
export { Map, wallBottom, wallTop, ground, gameEndStatus }; export { Map, wallBottom, wallTop, ground, gameEndStatus, score, scoreElement };

6
site/real_game/class/soloClass/Players.js → docker-compose/requirements/nginx/static/javascript/multiLocalGame/Players.js
View File

@ -3,14 +3,14 @@
/* ::: :::::::: */ /* ::: :::::::: */
/* Players.js :+: :+: :+: */ /* Players.js :+: :+: :+: */
/* +:+ +:+ +:+ */ /* +:+ +:+ +:+ */
/* By: hubourge <hubourge@student.42.fr> +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/28 15:12:25 by edbernar #+# #+# */ /* Created: 2024/08/28 15:12:25 by edbernar #+# #+# */
/* Updated: 2024/09/10 16:37:09 by hubourge ### ########.fr */ /* Updated: 2024/09/14 00:20:51 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
import * as THREE from 'three'; import * as THREE from '/static/javascript/three/build/three.module.js'
const speed = 0.25; const speed = 0.25;
let player1 = null; let player1 = null;

56
site/real_game/class/SoloGame.js → docker-compose/requirements/nginx/static/javascript/multiLocalGame/multiLocalGamePage.js
View File

@ -1,28 +1,26 @@
/* ************************************************************************** */ /* ************************************************************************** */
/* */ /* */
/* ::: :::::::: */ /* ::: :::::::: */
/* SoloGame.js :+: :+: :+: */ /* multiLocalGamePage.js :+: :+: :+: */
/* +:+ +:+ +:+ */ /* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/28 12:07:39 by edbernar #+# #+# */ /* Created: 2024/08/28 12:07:39 by edbernar #+# #+# */
/* Updated: 2024/09/13 15:33:01 by edbernar ### ########.fr */ /* Updated: 2024/09/14 01:59:38 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
import * as THREE from 'three'; import { Map, ground, gameEndStatus, score, scoreElement } from '/static/javascript/multiLocalGame/Map.js'
import { Map, ground, gameEndStatus } from './soloClass/Map.js' import { Players, player1, player2 } from '/static/javascript/multiLocalGame/Players.js'
import { Players, player1, player2 } from './soloClass/Players.js' import * as THREE from '/static/javascript/three/build/three.module.js'
import { Ball } from './soloClass/Ball.js' import { Ball } from '/static/javascript/multiLocalGame/Ball.js'
import { pageRenderer } from '/static/javascript/main.js'
import { stats } from './MultiGame.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
let scene = null; let scene = null;
let renderer = null; let renderer = null;
let camera = null; let camera = null;
let controls = null;
let gameEnd = false;
/* /*
Controls : Controls :
@ -34,16 +32,15 @@ Controls :
- a : restart quand score debug - a : restart quand score debug
*/ */
class multiLocalGamePage
class SoloGame
{ {
static create() static create()
{ {
scene = new THREE.Scene(); scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer({antialias: true}); renderer = new THREE.WebGLRenderer({antialias: true});
renderer.domElement.style.animation = 'fadeOutStart 1s'; renderer.domElement.style.animation = 'fadeOutStartGames 1s';
renderer.domElement.style.filter = 'brightness(1)'; renderer.domElement.style.filter = 'brightness(1)';
document.getElementById('score').style.animation = 'fadeOutStart 1s'; document.getElementById('score').style.animation = 'fadeOutStartGames 1s';
renderer.shadowMap.enabled = true; renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.shadowMap.type = THREE.PCFSoftShadowMap;
@ -56,7 +53,6 @@ class SoloGame
document.body.appendChild(renderer.domElement); document.body.appendChild(renderer.domElement);
Players.create(scene); Players.create(scene);
controls = new OrbitControls(camera, renderer.domElement);
camera.position.set(0, 22, 0); camera.position.set(0, 22, 0);
document.addEventListener('keypress', (e) => { document.addEventListener('keypress', (e) => {
@ -65,6 +61,7 @@ class SoloGame
}) })
renderer.setAnimationLoop(loop); renderer.setAnimationLoop(loop);
document.body.style.opacity = 1;
} }
static dispose() static dispose()
@ -93,15 +90,30 @@ class SoloGame
function loop() function loop()
{ {
stats.begin(); if (gameEndStatus)
if (gameEndStatus) // fin du jeu faire les dispose en conséquence {
console.log('Game end'); renderer.setAnimationLoop(null);
controls.update(); gameFinish()
}
Ball.update(); Ball.update();
Map.update(); Map.update();
Players.update(); Players.update();
renderer.render(scene, camera); if (renderer)
stats.end(); renderer.render(scene, camera);
} }
export { SoloGame }; function gameFinish()
{
scoreElement.innerHTML = "Player " + (score.player1 > score.player2 ? "1" : "2") + " win !";
scoreElement.style.fontSize = '10vh';
scoreElement.style.opacity = 1;
document.body.style.animation = 'none';
setTimeout(() => {
document.body.style.animation = 'end 1s';
setTimeout(() => {
pageRenderer.changePage('lobbyPage');
}, 500);
}, 3000);
}
export { multiLocalGamePage };

28
site/real_game/style.css → docker-compose/requirements/nginx/static/style/game/games.css
View File

@ -1,16 +1,16 @@
/* ************************************************************************** */ /* ************************************************************************** */
/* */ /* */
/* ::: :::::::: */ /* ::: :::::::: */
/* style.css :+: :+: :+: */ /* games.css :+: :+: :+: */
/* +:+ +:+ +:+ */ /* +:+ +:+ +:+ */
/* 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/09/08 17:04:41 by edbernar ### ########.fr */ /* Updated: 2024/09/14 01:56:23 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@keyframes fadeIn { @keyframes fadeInGames {
from { from {
filter: brightness(1); filter: brightness(1);
} }
@ -19,7 +19,7 @@
} }
} }
@keyframes fadeOut { @keyframes fadeOutGames {
from { from {
filter: brightness(0); filter: brightness(0);
} }
@ -28,7 +28,7 @@
} }
} }
@keyframes fadeOutStart { @keyframes fadeOutStartGames {
0% { 0% {
filter: brightness(0); filter: brightness(0);
} }
@ -40,7 +40,7 @@
} }
} }
@keyframes fadeInText { @keyframes fadeInTextGames {
from { from {
color: rgb(255, 255, 255, 0.1); color: rgb(255, 255, 255, 0.1);
} }
@ -49,7 +49,7 @@
} }
} }
@keyframes fadeOutText { @keyframes fadeOutTextGames {
from { from {
color: rgb(255, 255, 255, 1); color: rgb(255, 255, 255, 1);
} }
@ -58,6 +58,20 @@
} }
} }
@keyframes end {
0% {
opacity: 1;
}
75% {
opacity: 0;
}
100% {
opacity: 1;
}
}
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;

237
docker-compose/requirements/nginx/static/style/lobbyPage/lobbyPage.css
View File

@ -33,7 +33,7 @@
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: "Poppins", sans-serif; font-family: "Poppins", sans-serif;
font-weight: 500; font-weight: 500;
font-style: normal; font-style: normal;
} }
@ -48,127 +48,127 @@ body {
} }
.main{ .main{
padding-top: 80px; padding-top: 80px;
padding-inline: 150px; padding-inline: 150px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 2.6rem; gap: 2.6rem;
} }
.skin-select{ .skin-select{
/* padding-block: 25px; */ /* padding-block: 25px; */
width: 40%; width: 40%;
} }
.popup { .popup {
display: none; /* La popup est masquée par défaut */ display: none; /* La popup est masquée par défaut */
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
justify-content: center; justify-content: center;
align-items: center; align-items: center;
z-index: 503; z-index: 503;
} }
.popup-content { .popup-content {
background-color: white; background-color: white;
padding: 20px; padding: 20px;
text-align: center; text-align: center;
width: 40%; width: 40%;
position: relative; position: relative;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
} }
.popup-content form { .popup-content form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.choose{ .choose{
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 20px; gap: 20px;
} }
.select-card{ .select-card{
margin: 30px; margin: 30px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 20px; padding: 20px;
background-color: #d3d3d3; background-color: #d3d3d3;
color: #000; color: #000;
height: 90px; height: 90px;
font-size: 1.2em; font-size: 1.2em;
transition: transform 0.3s ease; transition: transform 0.3s ease;
} }
.select-card:hover { .select-card:hover {
transform: scale(1.05); transform: scale(1.05);
} }
.switch { .switch {
position: relative; position: relative;
} }
.switch p{ .switch p{
color: white; color: white;
font-size: 1.2em; font-size: 1.2em;
} }
.switch label { .switch label {
width: 59px; width: 59px;
height: 28px; height: 28px;
background-color: #999; background-color: #999;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
border-radius: 50px; border-radius: 50px;
} }
.switch input[type="checkbox"] { .switch input[type="checkbox"] {
visibility: hidden; visibility: hidden;
} }
.switch label:after { .switch label:after {
content: ''; content: '';
margin-top: 2px; margin-top: 2px;
margin-left: 2px; margin-left: 2px;
width: 22px; width: 22px;
height: 22px; height: 22px;
border-radius: 50px; border-radius: 50px;
position: absolute; position: absolute;
top: 1px; top: 1px;
left: 1px; left: 1px;
transition: 200ms; transition: 200ms;
background-color: white; background-color: white;
} }
.switch .look:checked + label:after { .switch .look:checked + label:after {
left: 32px; left: 32px;
} }
.switch .look:checked + label { .switch .look:checked + label {
background-color: rgb(18, 223, 96); background-color: rgb(18, 223, 96);
} }
#bar{ #bar{
margin: 15px; margin: 15px;
width: 250px; width: 250px;
height: 250px; height: 250px;
border: 5px solid white; border: 5px solid white;
} }
#goal{ #goal{
margin: 15px; margin: 15px;
width: 250px; width: 250px;
height: 250px; height: 250px;
border: 5px solid white; border: 5px solid white;
} }
#topBar { #topBar {
@ -179,60 +179,91 @@ body {
background-color: #020202; background-color: #020202;
gap: 2rem; gap: 2rem;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
inset-inline: 0; inset-inline: 0;
top: 0; top: 0;
} }
.game-mode { .game-mode {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
} }
.mode-card { .mode-card {
background-color: #d3d3d3; background-color: #d3d3d3;
color: #000; color: #000;
padding: 20px; padding: 20px;
width: 300px; width: 300px;
height: 550px; height: 550px;
display: flex; display: flex;
justify-content: center; justify-content: center;
font-size: 1.2em; font-size: 1.2em;
transition: transform 0.3s ease; transition: transform 0.3s ease;
} }
.mode-card:hover { .mode-card:hover {
transform: scale(1.05); transform: scale(1.05);
} }
.search-container { .search-container {
display: flex; display: flex;
align-items: center; align-items: center;
width: 40%; width: 40%;
} }
.search-input { .search-input {
width: 100%; width: 100%;
padding: 10px; padding: 10px;
border: 2px solid #ccc; border: 2px solid #ccc;
font-size: 16px; font-size: 16px;
outline: none; outline: none;
} }
.search-input:focus { .search-input:focus {
border-color: white; border-color: white;
} }
.search-button { .search-button {
padding: 10px 20px; padding: 10px 20px;
border: 2px solid white; border: 2px solid white;
background-color: #272727; background-color: #272727;
color: white; color: white;
cursor: pointer; cursor: pointer;
font-size: 16px; font-size: 16px;
} }
.search-button:hover { .search-button:hover {
background-color: #202020; background-color: #202020;
border-color: #c4c4c4; border-color: #c4c4c4;
}
.bottom {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
}
.buttonStartGame {
background-color: white;
padding: 10px;
cursor: pointer;
}
.buttonStartGame:hover {
background-color: rgb(186, 186, 186);
transform: scale(1.1);
}
@keyframes startGameAnim {
0% {
transform: translateX(-0%);
opacity: 1;
}
100% {
transform: translateX(-20%);
opacity: 0;
}
} }

108
send_mail.py
View File

@ -1,108 +0,0 @@
import smtplib
from email.mime.multipart import MIMEMultipart
from email.mime.text import MIMEText
def envoyer_email_icloud(destinataire, sujet, html_message, expediteur, mot_de_passe):
msg = MIMEMultipart()
nom_expediteur = 'PTME'
msg['From'] = f'{nom_expediteur} <ptme@tmoron.fr>'
msg['To'] = destinataire
msg['Subject'] = sujet
msg.attach(MIMEText(html_message, 'html'))
try:
serveur = smtplib.SMTP('smtp.mail.me.com', 587)
serveur.ehlo()
serveur.starttls()
serveur.ehlo()
serveur.login(expediteur, mot_de_passe)
serveur.sendmail(expediteur, destinataire, msg.as_string())
serveur.quit()
print("E-mail envoyé avec succès !")
except Exception as e:
print(f"Erreur lors de l'envoi de l'e-mail : {e}")
expediteur = 'tom.moron@icloud.com'
mot_de_passe = 'mot_de_passe'
destinataire = 'eddydhj@gmail.com'
sujet = 'Création de compte'
message = '''
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #1e1e1e;
color: #ffffff;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #2c2c2c;
border-radius: 8px;
}
h1 {
text-align: center;
font-size: 24px;
margin-bottom: 50px;
background-color: #1e1e1e;
padding: 20px;
border-radius: 8px;
color: #ffffff;
}
p {
color: #cccccc;
font-size: 16px;
}
.button {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
color: #ffffff;
background-color: #0f0f0f;
border-radius: 5px;
text-decoration: none;
margin: 20px;
margin-left: 25%;
margin-right: 25%;
width: 50%;
text-align: center;
}
.footer {
font-size: 12px;
background-color: #1e1e1e;
padding: 10px;
text-align: center;
border-radius: 8px;
margin-top: 20px;
}
</style>
</head>
<body>
<table class="container" role="presentation">
<tr>
<td>
<h1>Bienvenue chez PTME !</h1>
<p>Bonjour [Nom],</p>
<p>Merci d'avoir créé un compte avec PTME ! Nous sommes ravis de vous accueillir parmi nous.</p>
<p>Pour compléter votre inscription, veuillez vérifier votre adresse e-mail en cliquant sur le bouton ci-dessous :</p>
<p><a href="[Lien de vérification]" class="button">Confirmer mon adresse e-mail</a></p>
<p>Si vous n'avez pas demandé cette inscription, vous pouvez ignorer cet e-mail.</p>
<p>Merci,</p>
<p>L'équipe PTME</p>
<div class="footer">
<p>42, 49 Bd Besson Bey, 16000 Angoulême, France</p>
</div>
</td>
</tr>
</table>
</body>
</html>
'''
envoyer_email_icloud(destinataire, sujet, message, expediteur, mot_de_passe)

8
site/real_game/main.js
View File

@ -3,15 +3,13 @@
/* ::: :::::::: */ /* ::: :::::::: */
/* main.js :+: :+: :+: */ /* main.js :+: :+: :+: */
/* +:+ +:+ +:+ */ /* +:+ +:+ +:+ */
/* By: hubourge <hubourge@student.42.fr> +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/28 12:05:53 by edbernar #+# #+# */ /* Created: 2024/08/28 12:05:53 by edbernar #+# #+# */
/* Updated: 2024/09/11 15:18:08 by hubourge ### ########.fr */ /* Updated: 2024/09/14 01:59:59 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
import { MultiGame } from "./class/MultiGame"; import { MultiGame } from "./class/MultiGame";
import { SoloGame } from "./class/SoloGame";
// MultiGame.create(); MultiGame.create();
SoloGame.create();