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

Site :

Browse Source 
- Add notification chat
    - Add Home back button on lobby
This commit is contained in:
Misthaa
2024-09-18 12:22:08 +02:00
parent 5275f8f033
commit f3bbf498ca
5 changed files with 25 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -68,6 +68,7 @@
</div> </div>
<div id="chatButton"> <div id="chatButton">
<span class="notification-badge"></span>
<img src="/static/img/homePage/bulle.png"> <img src="/static/img/homePage/bulle.png">
</div> </div>
<div id="chatDiv"> <div id="chatDiv">

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

@ -1,5 +1,5 @@
<div id="topBarLobby"> <div id="topBarLobby">
<h1>PTME</h1> <h1 id="homeButton">PTME</h1>
<div class="search-container"> <div class="search-container">
<input type="text" placeholder="Search..." class="search-input" id="searchInputUser"> <input type="text" placeholder="Search..." class="search-input" id="searchInputUser">
<button class="search-button">Search</button> <button class="search-button">Search</button>

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

@ -3,10 +3,10 @@
/* ::: :::::::: */ /* ::: :::::::: */
/* main.js :+: :+: :+: */ /* main.js :+: :+: :+: */
/* +:+ +:+ +:+ */ /* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: marvin <marvin@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/22 17:08:46 by madegryc #+# #+# */ /* Created: 2024/08/22 17:08:46 by madegryc #+# #+# */
/* Updated: 2024/09/18 09:16:58 by edbernar ### ########.fr */ /* Updated: 2024/09/18 10:59:57 by marvin ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -33,6 +33,7 @@ class LobbyPage
{ {
static create() static create()
{ {
const ptmeButton = document.getElementById("homeButton");
const startButton = document.getElementsByClassName('buttonStartGame')[0]; const startButton = document.getElementsByClassName('buttonStartGame')[0];
const usernameP = document.getElementById('loginButton').getElementsByTagName('p')[0]; const usernameP = document.getElementById('loginButton').getElementsByTagName('p')[0];
const loginButton = document.getElementById('loginButton'); const loginButton = document.getElementById('loginButton');
@ -66,6 +67,7 @@ class LobbyPage
barSelector = new barSelecter(document.getElementById('bar')); barSelector = new barSelecter(document.getElementById('bar'));
goalSelector = new goalSelecter(document.getElementById('goal')); goalSelector = new goalSelecter(document.getElementById('goal'));
startButton.addEventListener('click', startMode); startButton.addEventListener('click', startMode);
ptmeButton.addEventListener('click', goBackHome);
} }
static dispose() static dispose()
@ -119,6 +121,11 @@ function ajustSearchUserList()
searchResult.style.left = pos.left + 'px'; searchResult.style.left = pos.left + 'px';
} }
function goBackHome()
{
pageRenderer.changePage('homePage');
}
function startMode() function startMode()
{ {
if (gameMode == 0) if (gameMode == 0)

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

@ -6,7 +6,7 @@
/* By: marvin <marvin@student.42.fr> +#+ +:+ +#+ */ /* By: marvin <marvin@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/07/30 13:53:39 by edbernar #+# #+# */ /* Created: 2024/07/30 13:53:39 by edbernar #+# #+# */
/* Updated: 2024/09/18 01:28:22 by marvin ### ########.fr */ /* Updated: 2024/09/18 12:20:37 by marvin ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -28,6 +28,19 @@
transition: transform 0.3s ease; transition: transform 0.3s ease;
} }
/* Pour EDDY : Put display none and change on js to display flex when we have notification */
.notification-badge {
display: flex;
position: absolute;
top: 10px;
right: 10px;
width: 10px;
height: 10px;
background-color: #E74040;
border-radius: 50%;
}
#chatButton:hover { #chatButton:hover {
transform: scale(1.2); transform: scale(1.2);
} }

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

@ -186,7 +186,6 @@ body {
margin-block: 25px; margin-block: 25px;
padding: 0; padding: 0;
padding-inline: 50px; padding-inline: 50px;
display: flex;
gap: 5rem; gap: 5rem;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -230,9 +229,7 @@ body {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
justify-content: center; justify-content: center;
width: 40%; width: 40%;
padding-top: 20px;
} }
.search-input { .search-input {