Site
- Add responsive :
- Lobby page
- Fix bug profil/login/settings'
This commit is contained in:
Mathis Degryck
@ -80,7 +80,7 @@
|
||||
<div class="menuSelected" id="multiLocalSelected">
|
||||
<div id="whatGame">
|
||||
<p>The key to success is timing and precision, as you need to position your paddle correctly to deflect the ball at the right angle.</p>
|
||||
<span class="line"></span>
|
||||
<span class="line" id="tournament-line1"></span>
|
||||
<div class="keys">
|
||||
<div class="key">
|
||||
<p>W</p>
|
||||
@ -172,7 +172,7 @@
|
||||
<div class="menuSelected" id="tournamentSelected">
|
||||
<div id="whatGame">
|
||||
<p>Compete in the ultimate Pong Tournament with up to 8 players, only the best will claim victory!</p>
|
||||
<span class="line"></span>
|
||||
<span class="line" id="tournament-line1"></span>
|
||||
<div class="keys">
|
||||
<div class="key">
|
||||
<p>W</p>
|
||||
@ -194,8 +194,8 @@
|
||||
<span class="line"></span>
|
||||
<p style="text-align: center; margin-bottom: 20px;">Tournament code</p>
|
||||
<input id="tournamentCode" class="search-input" type="text" placeholder="Enter the tournament code (empty for create one)">
|
||||
<span class="line" id="tournament-line2"></span>
|
||||
</div>
|
||||
|
||||
<div class="skin-select">
|
||||
<div class="barSelection" id="bar2">
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div id="topBar">
|
||||
<div id="topBarSettings">
|
||||
<h1 id="homeButton">METH</h1>
|
||||
<div id="loginButton">
|
||||
<p>LOGIN</p>
|
||||
|
||||
@ -3,10 +3,10 @@
|
||||
/* ::: :::::::: */
|
||||
/* main.js :+: :+: :+: */
|
||||
/* +:+ +:+ +:+ */
|
||||
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
|
||||
/* By: madegryc <madegryc@student.42.fr> +#+ +:+ +#+ */
|
||||
/* +#+#+#+#+#+ +#+ */
|
||||
/* Created: 2024/08/25 00:02:19 by edbernar #+# #+# */
|
||||
/* Updated: 2024/10/03 02:31:12 by edbernar ### ########.fr */
|
||||
/* Updated: 2024/10/05 22:24:29 by madegryc ### ########.fr */
|
||||
/* */
|
||||
/* ************************************************************************** */
|
||||
|
||||
|
||||
@ -3,10 +3,10 @@
|
||||
/* ::: :::::::: */
|
||||
/* main.js :+: :+: :+: */
|
||||
/* +:+ +:+ +:+ */
|
||||
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
|
||||
/* By: madegryc <madegryc@student.42.fr> +#+ +:+ +#+ */
|
||||
/* +#+#+#+#+#+ +#+ */
|
||||
/* Created: 2024/08/22 17:08:46 by madegryc #+# #+# */
|
||||
/* Updated: 2024/10/04 00:07:11 by edbernar ### ########.fr */
|
||||
/* Updated: 2024/10/05 22:12:30 by madegryc ### ########.fr */
|
||||
/* */
|
||||
/* ************************************************************************** */
|
||||
|
||||
|
||||
@ -3,10 +3,10 @@
|
||||
/* ::: :::::::: */
|
||||
/* main.js :+: :+: :+: */
|
||||
/* +:+ +:+ +:+ */
|
||||
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
|
||||
/* By: madegryc <madegryc@student.42.fr> +#+ +:+ +#+ */
|
||||
/* +#+#+#+#+#+ +#+ */
|
||||
/* Created: 2024/08/07 17:40:15 by edbernar #+# #+# */
|
||||
/* Updated: 2024/09/29 23:30:25 by edbernar ### ########.fr */
|
||||
/* Updated: 2024/10/05 22:32:01 by madegryc ### ########.fr */
|
||||
/* */
|
||||
/* ************************************************************************** */
|
||||
|
||||
@ -29,6 +29,7 @@ class Login
|
||||
let usernameNode = null;
|
||||
let nodeText = null;
|
||||
|
||||
document.body.style.overflow = 'auto';
|
||||
registerButton.addEventListener('click', changeWindowLogin);
|
||||
loginBackButton.addEventListener('click', changeWindowLoginBack);
|
||||
button42.addEventListener('click', redirection);
|
||||
@ -114,6 +115,7 @@ function hideMenu()
|
||||
const popMenuLoginButton = document.getElementById('popMenuLoginButton');
|
||||
|
||||
popMenuLoginButton.style.display = 'none';
|
||||
document.body.style.overflow = 'auto';
|
||||
document.removeEventListener('click', hideMenu);
|
||||
loginButton.addEventListener('click', showMenu);
|
||||
}
|
||||
@ -183,10 +185,16 @@ function showLoginDiv()
|
||||
const popout = document.getElementById('loginPopup');
|
||||
|
||||
if (popout.style.display === 'flex')
|
||||
{
|
||||
document.body.style.overflow = 'auto';
|
||||
popout.style.display = 'none';
|
||||
}
|
||||
else
|
||||
{
|
||||
document.body.style.overflow = 'hidden';
|
||||
popout.style.display = 'flex';
|
||||
}
|
||||
}
|
||||
|
||||
function connect(e)
|
||||
{
|
||||
@ -203,7 +211,10 @@ function connect(e)
|
||||
function closeClickOutsiteGameMode(event)
|
||||
{
|
||||
if (event.target == document.getElementById('loginPopup'))
|
||||
{
|
||||
document.getElementById('loginPopup').style.display = 'none';
|
||||
document.body.style.overflow = 'auto';
|
||||
}
|
||||
}
|
||||
|
||||
export { Login, changeWindowLoginBack };
|
||||
@ -6,7 +6,7 @@
|
||||
/* By: madegryc <madegryc@student.42.fr> +#+ +:+ +#+ */
|
||||
/* +#+#+#+#+#+ +#+ */
|
||||
/* Created: 2024/08/07 12:00:55 by edbernar #+# #+# */
|
||||
/* Updated: 2024/10/04 19:40:55 by madegryc ### ########.fr */
|
||||
/* Updated: 2024/10/05 22:09:37 by madegryc ### ########.fr */
|
||||
/* */
|
||||
/* ************************************************************************** */
|
||||
|
||||
@ -146,6 +146,8 @@
|
||||
width: 70%;
|
||||
height: 80%;
|
||||
background-color: #020202;
|
||||
overflow: hidden;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.left-side {
|
||||
@ -526,6 +528,8 @@ footer {
|
||||
.team {
|
||||
padding-inline: 30px;
|
||||
padding-block: 50px;
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.team-member {
|
||||
@ -533,4 +537,8 @@ footer {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
form input {
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
@ -6,7 +6,7 @@
|
||||
/* By: madegryc <madegryc@student.42.fr> +#+ +:+ +#+ */
|
||||
/* +#+#+#+#+#+ +#+ */
|
||||
/* Created: 2024/07/30 13:53:39 by edbernar #+# #+# */
|
||||
/* Updated: 2024/10/04 18:03:56 by madegryc ### ########.fr */
|
||||
/* Updated: 2024/10/04 20:43:32 by madegryc ### ########.fr */
|
||||
/* */
|
||||
/* ************************************************************************** */
|
||||
|
||||
@ -274,4 +274,16 @@
|
||||
#chatButton {
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
#chatDiv {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
#inputMessageDiv {
|
||||
width: 87%;
|
||||
}
|
||||
|
||||
#inputMessage {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@ -67,7 +67,7 @@ body {
|
||||
padding-inline: 150px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 12rem;
|
||||
gap: 9vw;
|
||||
}
|
||||
|
||||
.skin-select{
|
||||
@ -263,6 +263,18 @@ body {
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
#tournament-line2{
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: rgb(255, 255, 255);
|
||||
margin: 20px 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.select-keys {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -342,6 +354,7 @@ body {
|
||||
justify-content: flex-start;
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mode-card {
|
||||
@ -349,7 +362,7 @@ body {
|
||||
height: 100px;
|
||||
background-color: white;
|
||||
color: #020202;
|
||||
padding: 20px;
|
||||
padding-block: 20px;
|
||||
margin-block: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -364,7 +377,7 @@ body {
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
border: 5px solid white;
|
||||
padding: 20px;
|
||||
padding-block: 20px;
|
||||
margin-block: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -501,7 +514,7 @@ body {
|
||||
.menuSelected {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 12rem;
|
||||
gap: 9vw;
|
||||
}
|
||||
|
||||
.menuSelected {
|
||||
@ -528,3 +541,72 @@ body {
|
||||
width: 94%;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
@media (max-aspect-ratio: 1/1){
|
||||
.main {
|
||||
flex-direction: column;
|
||||
display: unset;
|
||||
padding-inline: inherit;
|
||||
}
|
||||
.search-container {
|
||||
display: none;
|
||||
}
|
||||
.menuSelected {
|
||||
flex-direction: column;
|
||||
}
|
||||
#whatGame {
|
||||
/* display: none; */
|
||||
margin-inline: 20px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 90vw;
|
||||
}
|
||||
.game-mode {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.skin-select {
|
||||
display: flex;
|
||||
}
|
||||
.barSelection {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin: 5px;
|
||||
}
|
||||
.goalSelection {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin: 5px;
|
||||
}
|
||||
#chatDiv {
|
||||
width: 80%;
|
||||
}
|
||||
.keys{
|
||||
display: none;
|
||||
}
|
||||
.select-line {
|
||||
display: none;
|
||||
}
|
||||
.menuSelected {
|
||||
gap: 0;
|
||||
}
|
||||
#tournament-line1 {
|
||||
display: none;
|
||||
}
|
||||
#tournament-line2 {
|
||||
display: block;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.popup-skin {
|
||||
width: 70%;
|
||||
}
|
||||
.color-grid {
|
||||
grid-template-columns: repeat(2, 90px);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.color-box {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
}
|
||||
}
|
||||
@ -302,20 +302,22 @@
|
||||
|
||||
#profil .history-card {
|
||||
height: 150px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#profil .history-card #score-history {
|
||||
font-size: 50px;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
#profil .profile-img-history {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
#profil .profile-img-history img {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
}
|
||||
|
||||
#profil .profile-img-history-enemy {
|
||||
@ -350,4 +352,6 @@
|
||||
height: 60px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@ -10,6 +10,47 @@
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
#topBarSettings {
|
||||
margin-block: 25px;
|
||||
padding: 0;
|
||||
padding-inline: 50px;
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
inset-inline: 0;
|
||||
top: 0;
|
||||
z-index: 500;
|
||||
}
|
||||
|
||||
#topBarSettings h1 {
|
||||
padding: 0;
|
||||
padding-top: 4px;
|
||||
font-size: 35px;
|
||||
color: white;
|
||||
font-family: 'Poppins';
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#topBarSettings #loginButton {
|
||||
font-size: 20px;
|
||||
background-color: white;
|
||||
height: 40px;
|
||||
width: 130px;
|
||||
color: black;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
margin-left: auto;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
#topBarSettings #loginButton:hover {
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.popup-background-delete {
|
||||
display: none;
|
||||
position: fixed;
|
||||
@ -154,11 +195,13 @@
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#settingsBody {
|
||||
align-items: normal;
|
||||
}
|
||||
#settingsBody .container-settings {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
margin-top: 350px;
|
||||
margin-inline: 30px;
|
||||
}
|
||||
|
||||
@ -166,4 +209,12 @@
|
||||
#settingsBody .right-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
#topBar{
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user