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">
<h1>PTME</h1>
<div id="topButton">
<p>HOME</p>
<p id="AAAAAAA">PROJECT</p>
<p>AUTHORS</p>
<p id="buttonPlay">PLAY</p>
<p id="buttonProject">PROJECT</p>
<p id="buttonAuthors">AUTHORS</p>
</div>
<div id="loginButton">
<p>LOGIN</p>
@ -80,7 +80,7 @@
</div>
<section class="homeSection">
</section>
<section class="homeSection relative" id="QWERTYUIOP">
<section class="homeSection relative" id="project">
<img id="firstBall" src="/static/img/homePage/ball3D2.png">
<img id="secondBall" src="/static/img/homePage/ball3D3.png">
<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>
</div>
</section>
<section class="homeSection">
<section class="homeSection" id="authors">
<div class="team">
<div class="team-member">
<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">
<input type="text" placeholder="Search..." class="search-input">
<button class="search-button">Search</button>
</div>
<!-- METTRE LE BOUTTON LOGIN -->
</div>
<div class="main">
<div id="loginPopup" class="popup">
@ -39,15 +41,11 @@
<div id="goal">
</div>
<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>
<div class="bottom">
<div class="buttonStartGame">
<p>Start</p>
</div>
</div>

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

@ -3,10 +3,10 @@
/* ::: :::::::: */
/* home3D.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* By: madegryc <madegryc@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* 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();
}
export { Home3D };
export { Home3D, redirection };

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

@ -3,13 +3,14 @@
/* ::: :::::::: */
/* main.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* By: madegryc <madegryc@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* 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 { Home3D } from "/static/javascript/home3D/home3D.js"
import { Login } from "/static/javascript/login/main.js";
@ -22,7 +23,9 @@ class HomePage
Login.create();
LiveChat.create();
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()
@ -31,19 +34,25 @@ class HomePage
Login.dispose();
LiveChat.dispose();
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({
top: pos,
behavior: 'smooth'
});
console.log("CACA");
}
}
function scrool()
{

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

@ -3,10 +3,10 @@
/* ::: :::::::: */
/* liveChat.css :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: marvin <marvin@student.42.fr> +#+ +:+ +#+ */
/* By: madegryc <madegryc@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* 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;
z-index: 10;
bottom: 40px;
left: 60px;
left: 70px;
background-color: #020202;
border-radius: 50%;
height: 70px;
width: 70px;
height: 60px;
width: 60px;
display: flex;
flex-direction: row;
align-items: center;
@ -33,8 +33,8 @@
}
#chatButton img{
width: 45px;
height: 45px;
width: 35px;
height: 35px;
}
#chatDiv {

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

@ -57,7 +57,7 @@ body {
}
.main{
padding-top: 80px;
padding-block: 25px;
padding-inline: 150px;
display: flex;
flex-direction: row;
@ -180,17 +180,29 @@ body {
border: 5px solid white;
}
#topBar {
#topBarLobby {
display: flex;
flex-direction: row;
margin-block: 25px;
padding: 0;
padding-inline: 50px;
display: flex;
background-color: transparent;
gap: 2rem;
align-items: center;
justify-content: center;
inset-inline: 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 {
@ -199,7 +211,7 @@ body {
}
.mode-card {
background-color: #d3d3d3;
background-color: white;
color: #000;
padding: 20px;
width: 300px;
@ -216,8 +228,10 @@ body {
.search-container {
display: flex;
align-items: center;
align-items: flex-start;
justify-content: center;
width: 40%;
padding-top: 20px;
}
.search-input {
@ -251,20 +265,35 @@ body {
flex-direction: row;
justify-content: space-between;
align-items: center;
justify-content: center;
width: 100%;
margin-block: 25px;
}
.buttonStartGame {
background-color: white;
padding: 10px;
cursor: pointer;
width: 150px;
text-align: center;
transition: transform 0.3s ease;
}
.buttonStartGame:hover {
background-color: rgb(186, 186, 186);
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 {
0% {
transform: translateX(-0%);