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

Site

Browse Source 
- add real stats and history game in profil page
    - search will send now request in lower case in profile page
    - add key enter in search bar in profile page
This commit is contained in:
Kum1ta
2024-09-28 20:31:43 +02:00
parent 10d14d8e60
commit 05b7c5b0b9
8 changed files with 82 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
docker-compose/requirements/djangoserver/file/server/server/templates/profilPage.html
View File

@ -27,19 +27,8 @@
</canvas>
</div>
</div>
<div class="history">
<div class="history" id="history">
<h3>History</h3>
<div class="history-card">
<div id="user-1">
<div class="profile-img-history"></div>
<p>User1</p>
</div>
<p id="score-history">0 - 0</p>
<div id="user-2">
<div class="profile-img-history"></div>
<p>User2</p>
</div>
</div>
</div>
</div>
</div>

4
docker-compose/requirements/nginx/static/javascript/Page.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/25 00:00:21 by edbernar #+# #+# */
/* Updated: 2024/09/28 02:43:26 by edbernar ### ########.fr */
/* Updated: 2024/09/28 19:48:30 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -126,7 +126,7 @@ class Page
document.body.innerHTML = text;
this.actualPage = null;
document.title = 'METH - Page not found';
history.pushState({}, this.availablePages[i].title, this.availablePages[i].url);
history.pushState({}, document.title, window.location.pathname);
})
})
.catch(error => {

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

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/22 17:08:46 by madegryc #+# #+# */
/* Updated: 2024/09/27 23:21:25 by edbernar ### ########.fr */
/* Updated: 2024/09/28 16:58:08 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -109,7 +109,7 @@ function searchUser(event)
else
{
timeout = setTimeout(() => {
sendRequest("search_user", {username: event.target.value});
sendRequest("search_user", {username: event.target.value.toLowerCase()});
}, 10);
}
}

38
docker-compose/requirements/nginx/static/javascript/profilPage/main.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/19 23:08:31 by edbernar #+# #+# */
/* Updated: 2024/09/27 00:54:02 by edbernar ### ########.fr */
/* Updated: 2024/09/28 19:47:17 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -57,6 +57,7 @@ class ProfilPage
pageRenderer.changePage('lobbyPage');
});
waitForUserInfo().then((userInfo) => {
console.log(userInfo);
if (userInfo == null)
{
pageRenderer.changePage('homePage');
@ -74,8 +75,8 @@ class ProfilPage
banner.style.backgroundSize = "cover";
banner.style.backgroundRepeat = "no-repeat";
externButtons(userInfo);
createGraph(ctx, {win: 10, lose: 1});
console.warn("Graph values are settled in code, please change it with data request")
createGraph(ctx, {win: userInfo.nbWin, lose: userInfo.nbLoss});
showHistory(userInfo);
if (userInfo.id == userMeInfo.id)
{
inviteButton.remove();
@ -203,5 +204,36 @@ function createGraph(ctx, data)
});
}
function showHistory(userInfo)
{
const divHistory = document.getElementById('history');
const history = userInfo.history;
history.forEach(element => {
const div = document.createElement('div');
div.setAttribute('class', 'history-card');
if (element.won)
div.style.backgroundColor = '#11ad11';
div.innerHTML = `
<div id="user-1">
<div class="profile-img-history">
<img src="${userInfo.pfp}">
</div>
<p>${userInfo.username}</p>
</div>
<p id="score-history">${element.p1.score} - ${element.p2.score}</p>
<div id="user-2">
<div class="profile-img-history">
<img src="${element.p2.pfp}">
</div>
<p>${element.p2.username}</p>
</div>`
divHistory.appendChild(div);
});
}
export { ProfilPage };

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

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/28 00:22:31 by edbernar #+# #+# */
/* Updated: 2024/09/28 00:41:16 by edbernar ### ########.fr */
/* Updated: 2024/09/28 16:50:17 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -15,8 +15,8 @@ import { pageRenderer } from '/static/javascript/main.js'
function typeInvitation(content)
{
CN.new("New invitation", content.invitor + " invit you to play !", null, () => {
pageRenderer.changePage('waitingGamePage', false, {username: "AAA", id: content.invitor});
CN.new("New invitation", content.username + " invit you to play !", null, () => {
pageRenderer.changePage('waitingGamePage', false, {username: content.username, id: content.invitor});
}, 'Join', 30000);
}

30
docker-compose/requirements/nginx/static/javascript/typeResponse/typeSearchUser.js
View File

@ -6,13 +6,15 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/18 08:12:24 by edbernar #+# #+# */
/* Updated: 2024/09/20 00:23:27 by edbernar ### ########.fr */
/* Updated: 2024/09/28 17:49:07 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import { LobbyPage } from "/static/javascript/lobbyPage/main.js";
import { pageRenderer } from '/static/javascript/main.js'
let enterActivated = false;
function typeSearchUser(userList)
{
const searchInputUser = document.getElementById('searchInputUser');
@ -21,7 +23,8 @@ function typeSearchUser(userList)
if (pageRenderer.actualPage !== LobbyPage)
return ;
document.body.addEventListener('click', removeAlluser)
document.body.removeEventListener('click', removeAlluser);
document.body.addEventListener('click', removeAlluser);
pos = searchInputUser.getBoundingClientRect();
searchResult.style.width = pos.width + 'px';
searchResult.style.top = pos.top + pos.height + 'px';
@ -35,8 +38,26 @@ function typeSearchUser(userList)
searchResult.appendChild(div);
div.addEventListener('click', () => {
pageRenderer.changePage('profilPage', false, user[1]);
if (enterActivated)
{
document.body.removeEventListener('keypress', enterPressed);
enterActivated = false;
}
})
});
if (!enterActivated)
{
document.body.addEventListener('keypress', enterPressed);
enterActivated = true;
}
}
function enterPressed(e)
{
const searchResult = document.getElementById('searchResult');
if (e.key == 'Enter' && searchResult.children && searchResult.children[0])
searchResult.children[0].click();
}
function removeAlluser()
@ -45,6 +66,11 @@ function removeAlluser()
const searchResult = document.getElementById('searchResult');
document.body.removeEventListener('click', removeAlluser);
if (enterActivated)
{
document.body.removeEventListener('keypress', enterPressed);
enterActivated = false;
}
searchResult.innerHTML = '';
searchInputUser.value = '';
}

4
docker-compose/requirements/nginx/static/javascript/waitingGame/main.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/14 21:20:45 by edbernar #+# #+# */
/* Updated: 2024/09/28 02:08:21 by edbernar ### ########.fr */
/* Updated: 2024/09/28 16:54:02 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -81,7 +81,7 @@ class WaitingGamePage
setTimeout(() => {
document.body.style.animation = 'anim3 0.5s';
document.body.style.opacity = 0;
pageRenderer.changePage("multiOnlineGamePage", false, {player: lastSelected.id, opponent: content.skin});
pageRenderer.changePage("multiOnlineGamePage", false, {player: lastSelected ? lastSelected.id : 0, opponent: content.skin});
}, 1000);
}, 500);
document.body.removeChild(returnButton);

9
docker-compose/requirements/nginx/static/style/profilPage/profil.css
View File

@ -153,6 +153,15 @@
margin-bottom: 5px;
}
#profil .profile-img-history img {
width: 55px;
height: 55px;
border-radius: 50%;
object-fit: cover;
object-position: 50% 50%;
margin-top: 2.5px;
}
#profil .profile-img-history-enemy {
width: 50px;
height: 50px;