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

Site

Browse Source 
- add new page "profil"
    - new response server user_info
Django
    - add new request type "get_user_info"
    - edit function for /game /profil /wait_game
This commit is contained in:
Kum1ta
2024-09-20 01:12:57 +02:00
parent dbcb65b174
commit e85d7fb165
16 changed files with 347 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,13 +6,14 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/25 00:00:21 by edbernar #+# #+# */
/* Updated: 2024/09/18 20:13:45 by edbernar ### ########.fr */
/* Updated: 2024/09/20 01:02:39 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import { MultiOnlineGamePage } from "/static/javascript/multiOnlineGame/multiOnlineGamePage.js"
import { multiLocalGamePage } from "/static/javascript/multiLocalGame/multiLocalGamePage.js"
import { WaitingGamePage } from "/static/javascript/waitingGame/main.js"
import { ProfilPage } from "/static/javascript/profilPage/main.js";
import { LobbyPage } from "/static/javascript/lobbyPage/main.js";
import { HomePage } from "/static/javascript/homePage/main.js";
@ -25,6 +26,7 @@ class Page
{url:'/game', servUrl: '/multiLocalGamePage', class: multiLocalGamePage, name: 'multiLocalGamePage', title: 'PTME - Game'},
{url:'/wait_game', servUrl: '/waitingGamePage', class: WaitingGamePage, name: 'waitingGamePage', title: 'PTME - Wait for a game'},
{url:'/game', servUrl: '/multiOnlineGamePage', class: MultiOnlineGamePage, name: 'multiOnlineGamePage', title: 'PTME - Game'},
{url:'/profil', servUrl: '/profilPage', class: ProfilPage, name: 'profilPage', title: 'PTME - Profil'},
]
constructor()
@ -51,7 +53,7 @@ class Page
this.#showUnknownPage();
}
changePage(name, isBack = false)
changePage(name, isBack = false, arg = null)
{
if (this.actualPage != null)
this.actualPage.dispose();
@ -74,7 +76,10 @@ class Page
document.title = this.availablePages[i].title;
if (!isBack)
history.pushState({}, this.availablePages[i].title, this.availablePages[i].url);
this.actualPage.create();
if (arg)
this.actualPage.create(arg);
else
this.actualPage.create();
console.log("Page created.");
})
})

42
docker-compose/requirements/nginx/static/javascript/profilPage/main.js Normal file
View File

@ -0,0 +1,42 @@
/* ************************************************************************** */
/* */
/* ::: :::::::: */
/* main.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/19 23:08:31 by edbernar #+# #+# */
/* Updated: 2024/09/20 01:09:20 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import { createNotification as CN } from "/static/javascript/notification/main.js";
import { waitForUserInfo } from "/static/javascript/typeResponse/typeUserInfo.js";
import { sendRequest } from "/static/javascript/websocket.js";
class ProfilPage
{
static create(userId)
{
const profilInfos = document.getElementsByClassName('profile-info')[0];
const username = document.getElementsByTagName('h2')[0];
const pfp = document.getElementsByClassName('profile-image')[0];
const banner = document.getElementsByClassName('background-card')[0];
sendRequest("get_user_info", {id: userId});
waitForUserInfo().then((userInfo) => {
username.innerText = userInfo.username + ' (status not implemented)';
pfp.innerHTML = `<img src='${userInfo.pfp}'>`
banner.innerHTML = `<img src='${userInfo.banner}'>`
});
}
static dispose()
{
}
}
export { ProfilPage };

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

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/18 08:12:24 by edbernar #+# #+# */
/* Updated: 2024/09/18 22:05:40 by edbernar ### ########.fr */
/* Updated: 2024/09/20 00:23:27 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -34,7 +34,7 @@ function typeSearchUser(userList)
div.innerHTML = '<img src="' + user[2] + '">' + '<p>' + user[0] + '</p>';
searchResult.appendChild(div);
div.addEventListener('click', () => {
console.log("Show profil " + user[0]);
pageRenderer.changePage('profilPage', false, user[1]);
})
});
}

37
docker-compose/requirements/nginx/static/javascript/typeResponse/typeUserInfo.js Normal file
View File

@ -0,0 +1,37 @@
/* ************************************************************************** */
/* */
/* ::: :::::::: */
/* typeUserInfo.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/20 00:42:04 by edbernar #+# #+# */
/* Updated: 2024/09/20 00:48:17 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
let userInfo = [];
let userInfoAvailable = false;
let userInfoResolve = null;
function waitForUserInfo() {
return new Promise((resolve) => {
if (userInfoAvailable)
resolve(userInfo);
else
userInfoResolve = resolve;
});
}
function typeUserInfo(list)
{
userInfo = list;
userInfoAvailable = true;
if (userInfoResolve)
{
userInfoResolve(userInfo);
userInfoResolve = null;
}
}
export { typeUserInfo, waitForUserInfo };

7
docker-compose/requirements/nginx/static/javascript/websocket.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/07/31 22:17:24 by edbernar #+# #+# */
/* Updated: 2024/09/18 08:31:09 by edbernar ### ########.fr */
/* Updated: 2024/09/20 00:50:56 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -20,6 +20,7 @@ import { typeCreateAccount } from "/static/javascript/typeResponse/typeCreateAcc
import { typeAllListUser }from "/static/javascript/typeResponse/typeAllListUser.js";
import { createNotification as CN } from "/static/javascript/notification/main.js";
import { typeSearchUser } from "/static/javascript/typeResponse/typeSearchUser.js";
import { typeUserInfo } from "/static/javascript/typeResponse/typeUserInfo.js";
import { typeLogin } from "/static/javascript/typeResponse/typeLogin.js";
import { typeGame } from "/static/javascript/typeResponse/typeGame.js"
@ -31,8 +32,8 @@ function launchSocket()
{
socket = new WebSocket('/ws');
const typeResponse = ["logged_in", "login", "private_list_user", "private_list_message", "new_private_message", "all_list_user", "create_account", "game", "search_user"];
const functionResponse = [typeLogin, typeLogin, typePrivateListUser, typePrivateListMessage, typeNewPrivateMessage, typeAllListUser, typeCreateAccount, typeGame, typeSearchUser];
const typeResponse = ["logged_in", "login", "private_list_user", "private_list_message", "new_private_message", "all_list_user", "create_account", "game", "search_user", "user_info"];
const functionResponse = [typeLogin, typeLogin, typePrivateListUser, typePrivateListMessage, typeNewPrivateMessage, typeAllListUser, typeCreateAccount, typeGame, typeSearchUser, typeUserInfo];
const errorCode = [9007, 9010, 9011];
const errorFunction = [typeErrorInvalidPassword, typeErrorInvalidToken42, typeErrorUnknown42Account];

29
docker-compose/requirements/nginx/static/style/global/global.css Normal file
View File

@ -0,0 +1,29 @@
/* ************************************************************************** */
/* */
/* ::: :::::::: */
/* global.css :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/19 23:57:22 by edbernar #+# #+# */
/* Updated: 2024/09/19 23:59:46 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
* {
margin: 0;
padding: 0;
}
body {
border: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: #020202;
user-select: none;
font-family: "Poppins", sans-serif;
font-weight: 500;
font-style: normal;
}

21
docker-compose/requirements/nginx/static/style/homePage/home.css
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/07 12:00:55 by edbernar #+# #+# */
/* Updated: 2024/09/18 13:47:10 by edbernar ### ########.fr */
/* Updated: 2024/09/20 00:07:01 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -36,23 +36,6 @@
background: white;
}
* {
margin: 0;
padding: 0;
}
body {
border: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: #020202;
user-select: none;
font-family: "Poppins", sans-serif;
font-weight: 500;
font-style: normal;
}
#topBar {
margin-block: 25px;
@ -138,7 +121,7 @@ body {
z-index: 500;
}
.container {
.containerHomePage {
display: flex;
width: 70%;
height: 80%;

102
docker-compose/requirements/nginx/static/style/profilPage/profil.css Normal file
View File

@ -0,0 +1,102 @@
#profil * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#profil {
font-family: "Poppins", sans-serif;
font-weight: 500;
font-style: normal;
background-color: #020202;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
height: 30vh;
}
#profil .container {
width: 70%;
height: 200px;
background-color: #020202;
padding: 20px;
}
#profil .background-card {
width: 100%;
height: 250px;
background-color: #D3D3D3;
margin-bottom: 20px;
}
#profil .background-card img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
}
#profil .profile-section {
position: relative;
display: flex;
align-items: center;
}
#profil .profile-image {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #D3D3D3;
border: 10px solid #020202;
position: absolute;
top: -100px;
left: 40px;
}
#profil .profile-image img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
object-position: 50% 50%;
}
#profil .profile-info {
margin-left: 280px;
}
#profil .profile-info h2 {
color: white;
font-size: 1.5rem;
display: flex;
align-items: center;
}
#profil .online-status {
width: 15px;
height: 15px;
background-color: rgb(17, 173, 17);
border-radius: 50%;
margin-left: 15px;
}
#profil .profile-info p {
color: white;
margin-top: 10px;
font-size: 1.2rem;
}
#profil .content {
display: flex;
justify-content: space-between;
margin-top: 100px;
}
#profil .dashboard, .history {
background-color: #D3D3D3;
width: 48%;
height: 42vh;
padding: 20px;
text-align: center;
}