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

Site :

Browse Source 
- Delete JS (fake html login page)
    - Add Login page html css (display none)
This commit is contained in:
Mathis Degryck
2024-08-23 18:37:03 +02:00
parent c310d0bd1d
commit 6c30864632
6 changed files with 200 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
site/interface/site/index.html
View File

@ -28,6 +28,35 @@
<p>LOGIN</p>
</div>
</div>
<div id="loginPopup" class="popup">
<div class="container">
<div class="left-side"></div>
<div class="right-side">
<h1>Acces to a new WORLD</h1>
<form>
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="Email">
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Password">
<button type="submit" class="login-btn">Login</button>
<div class="new-player">
New player? <a href="#">Create an account</a>
</div>
<div class="divider">
<span></span>
<p>Or</p>
<span></span>
</div>
<button type="button" class="login-42-btn">Log with <span>42</span></button>
</form>
</div>
</div>
</div>
<div id="chatButton">
<p>CHAT</p>
</div>

59
site/interface/site/login/createThreeDiv.js
View File

@ -1,59 +0,0 @@
/* ************************************************************************** */
/* */
/* ::: :::::::: */
/* createThreeDiv.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/07 18:09:36 by edbernar #+# #+# */
/* Updated: 2024/08/12 20:46:53 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
// import * as THREE from 'three';
function createThreeDiv()
{
const divThree = document.createElement("div");
divThree.setAttribute("id", "threeDiv");
// const scene = new THREE.Scene();
// // const camera = new THREE.PerspectiveCamera(75, divThree.innerWidth / divThree.innerHeight, 0.1, 1000);
// const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
// const renderer = new THREE.WebGLRenderer( {antialias: true} );
// // renderer.setSize(divThree.innerWidth, divThree.innerHeight);
// renderer.setSize(200, 700);
// divThree.appendChild(renderer.domElement);
// renderer.setClearColor(0x020202);
// let geometrie = new THREE.BoxGeometry(1, 1, 1);
// let materiel = new THREE.MeshBasicMaterial({color:0xffffff});
// const mesh = new THREE.Mesh( geometrie, materiel)
// camera.position.set(0, 0 ,4);
// renderer.antialias
// loop()
// function loop(){
// requestAnimationFrame(loop);
// let xsize = divThree.offsetWidth;
// let ysize = divThree.offsetHeight;
// renderer.setSize(xsize, ysize);
// camera.aspect = xsize / ysize;
// camera.updateProjectionMatrix()
// console.log(xsize, ysize);
// mesh.rotation.y += 0.001;
// mesh.rotation.x += 0.0005;
// renderer.render(scene, camera);
// }
// scene.add(mesh);
// renderer.render(scene, camera);
return (divThree);
}
export { createThreeDiv };

41
site/interface/site/login/main.js
View File

@ -3,17 +3,15 @@
/* ::: :::::::: */
/* main.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* By: madegryc <madegryc@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/07 17:40:15 by edbernar #+# #+# */
/* Updated: 2024/08/13 00:01:42 by edbernar ### ########.fr */
/* Updated: 2024/08/23 18:35:44 by madegryc ### ########.fr */
/* */
/* ************************************************************************** */
import { createNotification as CN } from "../notification/main.js";
import { userMeInfo, waitForLogin } from "../typeResponse/typeLogin.js";
import { createConnectDiv } from "./createConnectDiv.js";
import { createThreeDiv } from "./createThreeDiv.js";
function login()
{
@ -21,33 +19,26 @@ function login()
const pLoginButton = loginButton.getElementsByTagName('p')[0];
let nodeText = null;
waitForLogin().then((token) => {
nodeText = document.createTextNode(userMeInfo.username);
if (token !== undefined)
{
document.cookie = "token={" + token + "}; path=/; Secure; SameSite=Strict; max-age=3600";
}
if (userMeInfo.id !== -1)
{
loginButton.replaceChild(nodeText, pLoginButton);
loginButton.addEventListener('click', showMenu);
}
else
// waitForLogin().then((token) => {
// nodeText = document.createTextNode(userMeInfo.username);
// if (userMeInfo.id !== -1)
// {
// loginButton.replaceChild(nodeText, pLoginButton);
// loginButton.addEventListener('click', showMenu);
// }
// else
loginButton.addEventListener('click', showLoginDiv);
});
// });
}
function showLoginDiv()
{
const divLogin = document.createElement("div");
const threeDiv = createThreeDiv();
const connectDiv = createConnectDiv(divLogin);
const popout = document.getElementById('loginPopup');
divLogin.setAttribute("id", "loginDiv");
divLogin.appendChild(threeDiv);
divLogin.appendChild(connectDiv);
document.body.appendChild(divLogin);
if (popout.style.display === 'flex')
popout.style.display = 'none';
else
popout.style.display = 'flex';
}
function showMenu()

10
site/interface/site/main.js
View File

@ -3,14 +3,14 @@
/* ::: :::::::: */
/* main.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* By: madegryc <madegryc@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/07/30 13:50:35 by edbernar #+# #+# */
/* Updated: 2024/08/22 18:01:38 by edbernar ### ########.fr */
/* Updated: 2024/08/23 17:47:37 by madegryc ### ########.fr */
/* */
/* ************************************************************************** */
import { liveChat } from "/liveChat/main.js";
import { liveChat } from "./liveChat/main.js";
import { login } from "./login/main.js";
import { home3D } from "./home3D/home3D.js"
@ -25,6 +25,10 @@ window.addEventListener('scroll', () => {
parallaxElement2.style.transform = `translateX(50%) translateY(${-parallaxSpeed}px) rotate(${rotationAngle}deg)`;
});
document.getElementById('closePopupBtn').addEventListener('click', function() {
document.getElementById('loginPopup').style.display = 'none';
});
document.addEventListener('DOMContentLoaded', () => {
liveChat();
login();

164
site/interface/site/style/home.css
View File

@ -3,10 +3,10 @@
/* ::: :::::::: */
/* home.css :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: marvin <marvin@student.42.fr> +#+ +:+ +#+ */
/* By: madegryc <madegryc@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/07 12:00:55 by edbernar #+# #+# */
/* Updated: 2024/08/17 23:27:37 by marvin ### ########.fr */
/* Updated: 2024/08/23 18:32:53 by madegryc ### ########.fr */
/* */
/* ************************************************************************** */
@ -48,6 +48,9 @@ body {
height: 100%;
background-color: #020202;
user-select: none;
font-family: "Poppins", sans-serif;
font-weight: 500;
font-style: normal;
}
@ -69,9 +72,6 @@ body {
color: white;
display: flex;
font-size: 25px;
font-family: "Poppins", sans-serif;
font-weight: 500;
font-style: normal;
padding-left: 60px;
gap: 6rem;
}
@ -112,9 +112,6 @@ body {
height: 40px;
width: 130px;
color: black;
font-family: "Poppins", sans-serif;
font-weight: 500;
font-style: normal;
text-align: center;
line-height: 40px;
margin-left: auto;
@ -127,6 +124,148 @@ body {
cursor: pointer;
}
.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: 1000;
}
.container {
display: flex;
width: 70%;
height: 80%;
background-color: #020202;
}
.left-side {
background-color: #D3D3D3;
flex: 1;
}
.right-side {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0;
padding-inline: 180px;
color: white;
}
.right-side h1 {
font-size: 2rem;
margin-bottom: 30px;
align-items: center;
justify-content: center;
}
form {
display: flex;
flex-direction: column;
}
label {
margin-bottom: 5px;
font-size: 1rem;
}
input {
border: none;
padding: 20px;
margin-bottom: 20px;
font-size: 1rem;
font-family: "Poppins", sans-serif;
font-weight: 500;
font-style: normal;
}
button {
padding: 15px;
font-size: 1rem;
cursor: pointer;
border: none;
font-family: "Poppins", sans-serif;
font-weight: 500;
font-style: normal;
}
.login-btn {
background-color: #fff;
margin-bottom: 20px;
transition: background-color 0.3s ease;
}
.login-btn:hover {
background-color: #f0f0f0e1;
}
.new-player {
text-align: center;
margin-bottom: 20px;
}
.new-player a {
color: white;
text-decoration: underline;
transition: color 0.3s ease;
}
.new-player a:hover {
color: #f0f0f0e1;
}
.divider {
display: flex;
align-items: center;
text-align: center;
margin-bottom: 20px;
}
.divider span {
flex: 1;
height: 1px;
background-color: #fff;
}
.divider p {
margin: 0 10px;
font-size: 1rem;
}
.login-42-btn {
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.3s ease;
}
.login-42-btn span {
font-size: 1.5rem;
font-weight: bold;
}
.login-42-btn:hover {
background-color: #f0f0f0e1;
}
.close {
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
cursor: pointer;
}
.homeSection{
min-height: 100svh;
overflow: hidden;
@ -134,9 +273,6 @@ body {
.homeSection p{
color: white;
font-family: "Poppins", sans-serif;
font-weight: 500;
font-style: normal;
}
#firstText{
@ -204,9 +340,6 @@ body {
.team h2 {
color: white;
font-family: "Poppins", sans-serif;
font-weight: 500;
font-style: normal;
font-size: 30px;
}
@ -251,9 +384,6 @@ footer {
overflow: hidden;
height: 150px;
background-color: white;
font-family: "Poppins", sans-serif;
font-weight: 500;
font-style: normal;
color: #020202;
}

3
site/lobby/main.js
View File

@ -6,7 +6,7 @@
/* By: madegryc <madegryc@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/22 17:08:46 by madegryc #+# #+# */
/* Updated: 2024/08/22 19:15:25 by madegryc ### ########.fr */
/* Updated: 2024/08/23 18:34:42 by madegryc ### ########.fr */
/* */
/* ************************************************************************** */
@ -25,7 +25,6 @@ let gameMode = 0;
document.addEventListener('DOMContentLoaded', () => {
document.getElementsByClassName('game-mode')[0].addEventListener('click', function() {
document.getElementById('loginPopup').style.display = 'flex';
console.log('Popup opened');
});
document.getElementById('closePopupBtn').addEventListener('click', function() {