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

Site :

Browse Source 
- Fix but not finished lobby page
    - Add Button nav bar functionality
This commit is contained in:
Mathis Degryck
2024-09-17 20:54:15 +02:00
parent 53441d4785
commit 9491d795bf
6 changed files with 76 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
docker-compose/requirements/djangoserver/file/server/server/templates/homePage.html
View File

@ -3,9 +3,9 @@
<div id="topBar"> <div id="topBar">
<h1>PTME</h1> <h1>PTME</h1>
<div id="topButton"> <div id="topButton">
<p>HOME</p> <p id="buttonPlay">PLAY</p>
<p id="AAAAAAA">PROJECT</p> <p id="buttonProject">PROJECT</p>
<p>AUTHORS</p> <p id="buttonAuthors">AUTHORS</p>
</div> </div>
<div id="loginButton"> <div id="loginButton">
<p>LOGIN</p> <p>LOGIN</p>
@ -80,7 +80,7 @@
</div> </div>
<section class="homeSection"> <section class="homeSection">
</section> </section>
<section class="homeSection relative" id="QWERTYUIOP"> <section class="homeSection relative" id="project">
<img id="firstBall" src="/static/img/homePage/ball3D2.png"> <img id="firstBall" src="/static/img/homePage/ball3D2.png">
<img id="secondBall" src="/static/img/homePage/ball3D3.png"> <img id="secondBall" src="/static/img/homePage/ball3D3.png">
<div class="relative"> <div class="relative">
@ -88,7 +88,7 @@
<p id="secondText">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia totam cupiditate magni unde expedita molestiae eum aliquam fugit voluptatibus omnis! Dolores, ipsa inventore necessitatibus numquam aspernatur in perferendis id voluptas?</p> <p id="secondText">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia totam cupiditate magni unde expedita molestiae eum aliquam fugit voluptatibus omnis! Dolores, ipsa inventore necessitatibus numquam aspernatur in perferendis id voluptas?</p>
</div> </div>
</section> </section>
<section class="homeSection"> <section class="homeSection" id="authors">
<div class="team"> <div class="team">
<div class="team-member"> <div class="team-member">
<img src="/static/img/homePage/tomoron.png" alt="Tom" class="team-photo"> <img src="/static/img/homePage/tomoron.png" alt="Tom" class="team-photo">

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

@ -1,8 +1,10 @@
<div id="topBar"> <div id="topBarLobby">
<h1>PTME</h1>
<div class="search-container"> <div class="search-container">
<input type="text" placeholder="Search..." class="search-input"> <input type="text" placeholder="Search..." class="search-input">
<button class="search-button">Search</button> <button class="search-button">Search</button>
</div> </div>
<!-- METTRE LE BOUTTON LOGIN -->
</div> </div>
<div class="main"> <div class="main">
<div id="loginPopup" class="popup"> <div id="loginPopup" class="popup">
@ -39,15 +41,11 @@
<div id="goal"> <div id="goal">
</div> </div>
<div class="bottom">
<div class="switch"> </div>
<input id="checkbox1" class="look" type="checkbox"> </div>
<label for="checkbox1"></label> <div class="bottom">
<p>Fix the camera on the bar</p> <div class="buttonStartGame">
</div> <p>Start</p>
<div class="buttonStartGame">
<p>Start</p>
</div>
</div>
</div> </div>
</div> </div>

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

@ -3,10 +3,10 @@
/* ::: :::::::: */ /* ::: :::::::: */
/* home3D.js :+: :+: :+: */ /* home3D.js :+: :+: :+: */
/* +:+ +:+ +:+ */ /* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: madegryc <madegryc@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/22 17:19:17 by edbernar #+# #+# */ /* Created: 2024/08/22 17:19:17 by edbernar #+# #+# */
/* Updated: 2024/09/13 22:13:07 by edbernar ### ########.fr */ /* Updated: 2024/09/17 17:20:23 by madegryc ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -382,4 +382,4 @@ function moveCamera()
updateCameraPosition(); updateCameraPosition();
} }
export { Home3D }; export { Home3D, redirection };

25
docker-compose/requirements/nginx/static/javascript/homePage/main.js
View File

@ -3,13 +3,14 @@
/* ::: :::::::: */ /* ::: :::::::: */
/* main.js :+: :+: :+: */ /* main.js :+: :+: :+: */
/* +:+ +:+ +:+ */ /* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: madegryc <madegryc@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/25 00:02:19 by edbernar #+# #+# */ /* Created: 2024/08/25 00:02:19 by edbernar #+# #+# */
/* Updated: 2024/09/17 16:43:50 by edbernar ### ########.fr */ /* Updated: 2024/09/17 17:21:27 by madegryc ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
import { redirection } from "/static/javascript/home3D/home3D.js";
import { LiveChat } from "/static/javascript/liveChat/main.js"; import { LiveChat } from "/static/javascript/liveChat/main.js";
import { Home3D } from "/static/javascript/home3D/home3D.js" import { Home3D } from "/static/javascript/home3D/home3D.js"
import { Login } from "/static/javascript/login/main.js"; import { Login } from "/static/javascript/login/main.js";
@ -22,7 +23,9 @@ class HomePage
Login.create(); Login.create();
LiveChat.create(); LiveChat.create();
window.addEventListener('scroll', scrool); window.addEventListener('scroll', scrool);
document.getElementById('AAAAAAA').addEventListener('click', scrollToSection) document.getElementById('buttonPlay').addEventListener('click', redirection);
document.getElementById('buttonProject').addEventListener('click', () => scrollToSection(0));
document.getElementById('buttonAuthors').addEventListener('click', () => scrollToSection(1));
} }
static dispose() static dispose()
@ -31,19 +34,25 @@ class HomePage
Login.dispose(); Login.dispose();
LiveChat.dispose(); LiveChat.dispose();
window.removeEventListener('scroll', scrool); window.removeEventListener('scroll', scrool);
document.getElementById('AAAAAAA').removeEventListener('click', scrollToSection)
} }
}; };
function scrollToSection() function scrollToSection(i)
{ {
const pos = document.getElementById('QWERTYUIOP').getBoundingClientRect().top + window.scrollY; let pos;
if (i == 0)
{
pos = document.getElementById('project').getBoundingClientRect().top + window.scrollY;
}
else if (i == 1)
{
pos = document.getElementById('authors').getBoundingClientRect().top + window.scrollY;
}
window.scroll({ window.scroll({
top: pos, top: pos,
behavior: 'smooth' behavior: 'smooth'
}); });
console.log("CACA"); }
}
function scrool() function scrool()
{ {

14
docker-compose/requirements/nginx/static/style/homePage/liveChat.css
View File

@ -3,10 +3,10 @@
/* ::: :::::::: */ /* ::: :::::::: */
/* liveChat.css :+: :+: :+: */ /* liveChat.css :+: :+: :+: */
/* +:+ +:+ +:+ */ /* +:+ +:+ +:+ */
/* By: marvin <marvin@student.42.fr> +#+ +:+ +#+ */ /* By: madegryc <madegryc@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/07/30 13:53:39 by edbernar #+# #+# */ /* Created: 2024/07/30 13:53:39 by edbernar #+# #+# */
/* Updated: 2024/09/17 14:13:56 by marvin ### ########.fr */ /* Updated: 2024/09/17 18:04:08 by madegryc ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -16,11 +16,11 @@
cursor : pointer; cursor : pointer;
z-index: 10; z-index: 10;
bottom: 40px; bottom: 40px;
left: 60px; left: 70px;
background-color: #020202; background-color: #020202;
border-radius: 50%; border-radius: 50%;
height: 70px; height: 60px;
width: 70px; width: 60px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@ -33,8 +33,8 @@
} }
#chatButton img{ #chatButton img{
width: 45px; width: 35px;
height: 45px; height: 35px;
} }
#chatDiv { #chatDiv {

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

@ -57,7 +57,7 @@ body {
} }
.main{ .main{
padding-top: 80px; padding-block: 25px;
padding-inline: 150px; padding-inline: 150px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -180,17 +180,29 @@ body {
border: 5px solid white; border: 5px solid white;
} }
#topBar { #topBarLobby {
display: flex;
flex-direction: row;
margin-block: 25px; margin-block: 25px;
padding: 0; padding: 0;
padding-inline: 50px; padding-inline: 50px;
display: flex; display: flex;
background-color: transparent;
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;
z-index: 500;
}
#topBarLobby h1 {
padding: 0;
padding-top: 4px;
font-size: 35px;
color: white;
font-family: 'Poppins';
font-style: italic;
font-weight: bold;
} }
.game-mode { .game-mode {
@ -199,7 +211,7 @@ body {
} }
.mode-card { .mode-card {
background-color: #d3d3d3; background-color: white;
color: #000; color: #000;
padding: 20px; padding: 20px;
width: 300px; width: 300px;
@ -216,8 +228,10 @@ body {
.search-container { .search-container {
display: flex; display: flex;
align-items: center; align-items: flex-start;
justify-content: center;
width: 40%; width: 40%;
padding-top: 20px;
} }
.search-input { .search-input {
@ -251,20 +265,35 @@ body {
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
justify-content: center;
width: 100%; width: 100%;
margin-block: 25px;
} }
.buttonStartGame { .buttonStartGame {
background-color: white; background-color: white;
padding: 10px; padding: 10px;
cursor: pointer; cursor: pointer;
width: 150px;
text-align: center;
transition: transform 0.3s ease;
} }
.buttonStartGame:hover { .buttonStartGame:hover {
background-color: rgb(186, 186, 186);
transform: scale(1.1); transform: scale(1.1);
} }
#popMenuLoginButtonLobby {
background-color: white;
position: absolute;
z-index: 500;
width: 130px;
text-align: center;
display: none;
flex-direction: column;
justify-content: center;
}
@keyframes startGameAnim { @keyframes startGameAnim {
0% { 0% {
transform: translateX(-0%); transform: translateX(-0%);