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 74ada2bc57
commit 118a4a92d6
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/global/notification.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>
<link rel="preconnect" href="https://fonts.googleapis.com">
<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>
<div class="switch">
<input id="checkbox1" class="look" type="checkbox">
<label for="checkbox1"></label>
<p>Fix the camera on the bar</p>
<div class="bottom">
<div class="switch">
<input id="checkbox1" class="look" type="checkbox">
<label for="checkbox1"></label>
<p>Fix the camera on the bar</p>
</div>
<div class="buttonStartGame">
<p>Start</p>
</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("homePage",views.homePage, name='homePage'),
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("logout", views.logout, name='logout'),
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 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):
req_token = request.GET.get('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. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* 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 { HomePage } from "/static/javascript/homePage/main.js";
class Page
{
@ -19,6 +20,7 @@ class Page
availablePages = [
{url:'/', servUrl: '/homePage', class: HomePage, name: 'homePage', title: 'PTME - Home'},
{url:'/lobby', servUrl: '/lobbyPage', class: LobbyPage, name: 'lobbyPage', title: 'PTME - Lobby'},
{url:'/game', servUrl: '/multiLocalGamePage', class: multiLocalGamePage, name: 'multiLocalGamePage', title: 'PTME - Game'},
]
constructor()
@ -63,13 +65,13 @@ class Page
})
.then(data => {
data.text().then(text => {
console.log("Page updated !");
document.body.innerHTML = text;
this.actualPage = this.availablePages[i].class;
document.title = this.availablePages[i].title;
if (!isBack)
history.pushState({}, this.availablePages[i].title, this.availablePages[i].url);
this.actualPage.create();
console.log("Page created.");
})
})
.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. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* 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 { pageRenderer } from '/static/javascript/main.js'
const disable3D = true;
const disable3D = false;
let scene = null;
let renderer = null;

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

@ -6,12 +6,12 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* 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 { pageRenderer } from '/static/javascript/main.js'
/*
Information :
- 0: Multiplayer local
@ -29,9 +29,9 @@ class LobbyPage
{
static create()
{
console.log("Lobby created");
listSelectCard = document.getElementsByClassName('select-card');
const startButton = document.getElementsByClassName('buttonStartGame')[0];
listSelectCard = document.getElementsByClassName('select-card');
gameMode = 0;
document.getElementsByClassName('game-mode')[0].addEventListener('click', showGameMode);
document.getElementById('closePopupBtn').addEventListener('click', hideGameMode);
@ -46,11 +46,15 @@ class LobbyPage
}
barSelector = new barSelecter(document.getElementById('bar'));
goalSelector = new goalSelecter(document.getElementById('goal'));
startButton.addEventListener('click', startMode);
}
static dispose()
{
const startButton = document.getElementsByClassName('buttonStartGame')[0];
gameMode = 0;
startButton.removeEventListener('click', startMode);
document.getElementsByClassName('game-mode')[0].removeEventListener('click', showGameMode);
document.getElementById('closePopupBtn').removeEventListener('click', hideGameMode);
window.removeEventListener('click', closeClickOutsiteGameMode);
@ -63,9 +67,31 @@ class LobbyPage
barSelector = null;
goalSelector.dispose();
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()
{

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 :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: hubourge <hubourge@student.42.fr> +#+ +:+ +#+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* 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 { wallTop, wallBottom } from './Map.js';
import * as THREE from '/static/javascript/three/build/three.module.js'
import { wallTop, wallBottom } from '/static/javascript/multiLocalGame/Map.js'
let ball = null;
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 :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: hubourge <hubourge@student.42.fr> +#+ +:+ +#+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* 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 THREE from 'three';
import { ball } from './Ball.js'
import { player1, player2 } from './Players.js';
import * as CANNON from '/static/javascript/cannon-es/dist/cannon-es.js'
// import * as CANNON from '/static/javascript/cannon/build/cannon.min.js'
import * as THREE from '/static/javascript/three/build/three.module.js'
import { ball } from '/static/javascript/multiLocalGame/Ball.js'
import { player1, player2 } from '/static/javascript/multiLocalGame/Players.js';
const width = 25;
const height = 12.5;
@ -34,14 +35,16 @@ let speed = 3;
let initialZ = 0;
let score = {player1: 0, player2: 0};
let onUpdate = false;
const scoreElement = document.getElementById('score');
let scoreElement = null;
let initialSpeed = 3;
let gameEndStatus = false;
const scoreToWin = 2; //+1 for real score to win
class Map
{
static create(scene)
{
scoreElement = document.getElementById('score');
world = new CANNON.World({
gravity: new CANNON.Vec3(0, -9.81, 0),
});
@ -153,6 +156,9 @@ class Map
if (spotLight)
spotLight.dispose();
spotLight = null;
score.player1 = 0;
score.player2 = 0;
gameEndStatus = false;
}
static update()
@ -295,9 +301,9 @@ class Map
static reCreate(player1Lose)
{
onUpdate = true;
document.getElementsByTagName('canvas')[3].style.animation = 'fadeIn 0.199s';
document.getElementsByTagName('canvas')[3].style.filter = 'brightness(0)';
scoreElement.style.animation = 'fadeInText 0.199s';
document.getElementsByTagName('canvas')[0].style.animation = 'fadeInGames 0.199s';
document.getElementsByTagName('canvas')[0].style.filter = 'brightness(0)';
scoreElement.style.animation = 'fadeInTextGames 0.199s';
scoreElement.style.color = 'rgb(255, 255, 255, 1)';
setTimeout(() => {
@ -308,7 +314,7 @@ class Map
scoreElement.innerHTML = score.player1 + '-' +score.player2;
}, 500);
if ((player1Lose && score.player2 >= 2) || (!player1Lose && score.player1 >= 2))
if ((player1Lose && score.player2 >= scoreToWin) || (!player1Lose && score.player1 >= scoreToWin))
return (this.#endGame());
setTimeout(() => {
@ -339,9 +345,9 @@ class Map
player2Body.position.set(12, 0.4, 0);
player2.position.copy(player2Body.position);
scoreElement.style.animation = 'fadeOut 0.199s';
document.getElementsByTagName('canvas')[3].style.filter = 'brightness(1)';
scoreElement.style.animation = 'fadeOutText 0.399s';
scoreElement.style.animation = 'fadeOutGames 0.199s';
document.getElementsByTagName('canvas')[0].style.filter = 'brightness(1)';
scoreElement.style.animation = 'fadeOutTextGames 0.399s';
scoreElement.style.color = 'rgb(255, 255, 255, 0.1)';
}, 1200);
}
@ -377,9 +383,9 @@ class Map
player2Body.position.set(12, 0.4, 0);
player2.position.copy(player2Body.position);
scoreElement.style.animation = 'fadeOut 0.199s';
document.getElementsByTagName('canvas')[3].style.filter = 'brightness(1)';
scoreElement.style.animation = 'fadeOutText 0.399s';
scoreElement.style.animation = 'fadeOutGames 0.199s';
document.getElementsByTagName('canvas')[0].style.filter = 'brightness(1)';
scoreElement.style.animation = 'fadeOutTextGames 0.399s';
scoreElement.style.color = 'rgb(255, 255, 255, 0.1)';
onUpdate = false;
gameEndStatus = true;
@ -419,4 +425,4 @@ function createWall(onTop)
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 :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: hubourge <hubourge@student.42.fr> +#+ +:+ +#+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* 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;
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. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* 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 } from './soloClass/Map.js'
import { Players, player1, player2 } from './soloClass/Players.js'
import { Ball } from './soloClass/Ball.js'
import { Map, ground, gameEndStatus, score, scoreElement } from '/static/javascript/multiLocalGame/Map.js'
import { Players, player1, player2 } from '/static/javascript/multiLocalGame/Players.js'
import * as THREE from '/static/javascript/three/build/three.module.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 renderer = null;
let camera = null;
let controls = null;
let gameEnd = false;
/*
Controls :
@ -34,16 +32,15 @@ Controls :
- a : restart quand score debug
*/
class SoloGame
class multiLocalGamePage
{
static create()
{
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.domElement.style.animation = 'fadeOutStart 1s';
renderer.domElement.style.animation = 'fadeOutStartGames 1s';
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.type = THREE.PCFSoftShadowMap;
@ -56,7 +53,6 @@ class SoloGame
document.body.appendChild(renderer.domElement);
Players.create(scene);
controls = new OrbitControls(camera, renderer.domElement);
camera.position.set(0, 22, 0);
document.addEventListener('keypress', (e) => {
@ -65,6 +61,7 @@ class SoloGame
})
renderer.setAnimationLoop(loop);
document.body.style.opacity = 1;
}
static dispose()
@ -93,15 +90,30 @@ class SoloGame
function loop()
{
stats.begin();
if (gameEndStatus) // fin du jeu faire les dispose en conséquence
console.log('Game end');
controls.update();
if (gameEndStatus)
{
renderer.setAnimationLoop(null);
gameFinish()
}
Ball.update();
Map.update();
Players.update();
renderer.render(scene, camera);
stats.end();
if (renderer)
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. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* 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 {
filter: brightness(1);
}
@ -19,7 +19,7 @@
}
}
@keyframes fadeOut {
@keyframes fadeOutGames {
from {
filter: brightness(0);
}
@ -28,7 +28,7 @@
}
}
@keyframes fadeOutStart {
@keyframes fadeOutStartGames {
0% {
filter: brightness(0);
}
@ -40,7 +40,7 @@
}
}
@keyframes fadeInText {
@keyframes fadeInTextGames {
from {
color: rgb(255, 255, 255, 0.1);
}
@ -49,7 +49,7 @@
}
}
@keyframes fadeOutText {
@keyframes fadeOutTextGames {
from {
color: rgb(255, 255, 255, 1);
}
@ -58,6 +58,20 @@
}
}
@keyframes end {
0% {
opacity: 1;
}
75% {
opacity: 0;
}
100% {
opacity: 1;
}
}
body {
margin: 0;
padding: 0;

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

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