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

Site

Browse Source 
- fix some bug on html
    - for tournament, receive action 0 1 2 3 are ready
    - update style tournament page
This commit is contained in:
Kum1ta
2024-10-02 05:03:01 +02:00
parent 4f9f7c6f93
commit eb6b2c8ada
7 changed files with 292 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
docker-compose/requirements/djangoserver/file/server/server/templates/tournamentPage.html
View File

@ -14,13 +14,13 @@
<div class="circle" id="pfp-3">
<div class="container" style="margin-top: 50px;">
<p style="position: absolute; top: -30px; " id="user-3">username3</p>
<p style="position: absolute; bottom: -340px;" id="user-9">username9</p>
<div class="vertical-line-demi">
<p style="position: absolute; bottom: -280px;" id="user-9">username9</p>
<div class="vertical-line-demi" style="height: 220px;">
<div class="horizontal-container-final">
<div class="horizontal-line"></div>
<div class="circle" id="pfp-12"></div>
<p id="user-12">username12</p>
<p style="position:absolute; right: 25px; bottom: 83px; color: white; font-size: 35px;">VS</p>
<p style="position:absolute; right: 25px; bottom: 43px; color: white; font-size: 35px;">VS</p>
</div>
</div>
</div>
@ -29,7 +29,7 @@
</div>
<div class="circle" id="pfp-2"></div>
<p id="user-2">username2</p>
<div class="container">
<div class="container" style="margin-top: 20px;">
<p id="user-4">username4</p>
<div class="circle" id="pfp-4"></div>
<div class="vertical-line">
@ -58,7 +58,7 @@
<div class="horizontal-line"></div>
<div style="display: flex; flex-direction: column; align-items: center; margin-left: -25px; justify-items: center;">
<p style="position: absolute; top: -55px" id="user-13">username13</p>
<div class="circle" id="pfp-15"></div>
<div class="circle" id="pfp-13"></div>
<div class="vertical-line"></div>
<p style="position: absolute; bottom: -55px;" id="user-14">username14</p>
<div class="circle" id="pfp-14"></div>
@ -98,15 +98,13 @@
<div class="info-tournament">
<p id="info-title">Informations</p>
<div class="infoo">
<div class="alert-info">
<p>edbernard won against madegryc !</p>
<img src="/static/img/tournamentPage/eye.svg" id="eye"></img>
</div>
</div>
</div>
<div class="chat-tournament">
<p id="chat-title">Chat</p>
<div class="chat"></div>
<div class="chat">
</div>
<div class="inputMessageDiv">
<textarea type="text" id="inputMessage" placeholder="Enter your message here"></textarea>
<p id="sendButton">></p>

6
docker-compose/requirements/djangoserver/file/server/server/typeRequests/tournamentRequest.py
View File

@ -6,7 +6,7 @@
# By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ #
# +#+#+#+#+#+ +#+ #
# Created: 2024/10/01 13:16:39 by edbernar #+# #+# #
# Updated: 2024/10/01 17:49:33 by edbernar ### ########.fr #
# Updated: 2024/10/02 04:48:02 by edbernar ### ########.fr #
# #
# **************************************************************************** #
@ -26,6 +26,10 @@
#
# 2 : someoneLeave : tell the client someone leave the tournament (if game not started, players will be replaced in the order of the join)
# - id : id of the player who leave
#
# 3 : message : send a message to the tournament chat
# - username : name of the player who send the message
# - message : message to send
#client actions (actions sent by the client) :

2
docker-compose/requirements/nginx/static/javascript/liveChat/main.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/04 19:19:10 by edbernar #+# #+# */
/* Updated: 2024/09/29 03:43:31 by edbernar ### ########.fr */
/* Updated: 2024/10/02 05:00:50 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */

79
docker-compose/requirements/nginx/static/javascript/tournamentPage/TournamentPage.js
View File

@ -6,46 +6,56 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/10/01 13:42:29 by edbernar #+# #+# */
/* Updated: 2024/10/01 23:04:34 by edbernar ### ########.fr */
/* Updated: 2024/10/02 04:55:51 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
const playerNb = [1, 2, 4, 5, 13, 14, 15, 16];
const playerList = {
player1: {id: 0, name: null, pfp: null},
player2: {id: 0, name: null, pfp: null},
player3: {id: 0, name: null, pfp: null},
player4: {id: 0, name: null, pfp: null},
player13: {id: 0, name: null, pfp: null},
player14: {id: 0, name: null, pfp: null},
player15: {id: 0, name: null, pfp: null},
player16: {id: 0, name: null, pfp: null},
player1: {id: 0, username: null, pfp: null},
player2: {id: 0, username: null, pfp: null},
player4: {id: 0, username: null, pfp: null},
player5: {id: 0, username: null, pfp: null},
player13: {id: 0, username: null, pfp: null},
player14: {id: 0, username: null, pfp: null},
player15: {id: 0, username: null, pfp: null},
player16: {id: 0, username: null, pfp: null},
};
let divInfo = null;
let divTopInfo = null;
let divInfo = null;
let divChat = null;
class TournamentPage
{
static create(code)
{
divInfo = document.getElementById('code-tournament');
divTopInfo = document.getElementById('actuality-tournament');
divInfo = document.getElementsByClassName('infoo')[0];
divChat = document.getElementsByClassName('chat')[0];
document.getElementById('code-tournament').innerText = code;
divInfo.innerText = 'Tournament';
document.getElementById('code-tournament').innerText = "Code : " + code;
divTopInfo.innerText = 'Tournament';
}
static dispose()
{
divTopInfo = null;
divInfo = null;
divChat = null;
}
static newOpponent(content)
{
let found = false;
let i = 0;
let found = false;
let alreadyConnected = false;
let i = 0;
Object.values(playerList).forEach((info) => {
if (info.id == 0)
if (!found && info.id == 0 || info.id == content.id)
{
found = true;
alreadyConnected = info.id == content.id;
}
if (!found)
i++;
});
@ -54,6 +64,12 @@ class TournamentPage
console.warn("Tournament is full.");
return ;
}
if (alreadyConnected)
{
console.warn("Player is already in game.");
return ;
}
newInfo(`${content.username} joined the tournament.`);
document.getElementById('user-' + playerNb[i]).innerText = content.username;
document.getElementById('pfp-' + playerNb[i]).style.backgroundImage = `url(${content.pfp})`;
playerList['player' + playerNb[i]].id = content.id;
@ -63,11 +79,11 @@ class TournamentPage
static leaveOpponent(content)
{
let found = false;
let i = 0;
let found = false;
let i = 0;
Object.values(playerList).forEach((info) => {
if (info.id == content.id)
if (!found && info.id == content.id)
found = true;
if (!found)
i++;
@ -77,15 +93,38 @@ class TournamentPage
console.warn(`Opponent can't be remove cause he is not in this tournament`);
return ;
}
newInfo(`${playerList['player' + playerNb[i]].username} left the tournament.`);
document.getElementById('user-' + playerNb[i]).innerText = "Nobody";
document.getElementById('pfp-' + playerNb[i]).style.backgroundImage = null;
while (i < playerNb.length - 1)
{
playerList['player' + playerNb[i]] = playerList['player' + playerNb[i + 1]];
console.log(playerList['player' + playerNb[i]]);
document.getElementById('user-' + playerNb[i]).innerText = playerList['player' + playerNb[i]].username;
document.getElementById('pfp-' + playerNb[i]).style.backgroundImage = `url(${playerList['player' + playerNb[i]].pfp})`;
i++;
}
playerList['player' + playerNb[i]] = {id: 0, name: null, pfp: null};
playerList['player' + playerNb[i]] = {id: 0, username: null, pfp: null};
document.getElementById('user-' + playerNb[i]).innerText = playerList['player' + playerNb[i]].username;
document.getElementById('pfp-' + playerNb[i]).style.backgroundImage = `url(${playerList['player' + playerNb[i]].pfp})`;
}
static newMessage(content)
{
const newText = document.createElement('p');
newText.innerText = `${content.username} : ${content.message}`;
divChat.appendChild(newText);
}
}
function newInfo(message)
{
const newDiv = document.createElement('div');
newDiv.setAttribute('class', 'alert-info');
newDiv.innerHTML = `<p>${message}</p>`
divInfo.appendChild(newDiv);
}
export { TournamentPage }

18
docker-compose/requirements/nginx/static/javascript/tournamentPage/Untitled-1.js Normal file
View File

@ -0,0 +1,18 @@
import("/static/javascript/typeResponse/typeTournament.js")
.then(module => {
window.typeTournament = module.typeTournament;
console.log("Module importé : ", typeTournament);
})
.catch(error => console.error("Erreur d'import :", error));
typeTournament({action: 0, exist: true, isFull: false, started: false, code: "45FD53"});
typeTournament({action: 1, id: 3, username: "NeoWander", pfp: "https://www.japanfm.fr/wp-content/uploads/2023/12/gojo-satoru-jjk-scaled.jpg"});
typeTournament({action: 1, id: 4, username: "SkyVolt", pfp: "https://i.seadn.io/gae/jCQAQBNKmnS_AZ_2jTqBgBLIVYaRFxLX6COWo-HCHrYJ1cg04oBgDfHvOmpqsWbmUaSfBDHIdrwKtGnte3Ph_VwQPJYJ6VFtAf5B?auto=format&dpr=1&w=1000"});
typeTournament({action: 1, id: 5, username: "QuantumFlare", pfp: "https://wallpapers-clan.com/wp-content/uploads/2022/09/one-piece-pfp-1.jpg"});
typeTournament({action: 1, id: 6, username: "PixelWhale", pfp: "https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5e5ff9cd-a751-4cd4-b9c5-00aa21620b7b/deu3q3u-6f1ca041-b5b7-46d7-ab06-f8547a7114cc.jpg/v1/fill/w_748,h_734,q_75,strp/cool_pfp_for_anyone__by_snowierev_deu3q3u-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9NzM0IiwicGF0aCI6IlwvZlwvNWU1ZmY5Y2QtYTc1MS00Y2Q0LWI5YzUtMDBhYTIxNjIwYjdiXC9kZXUzcTN1LTZmMWNhMDQxLWI1YjctNDZkNy1hYjA2LWY4NTQ3YTcxMTRjYy5qcGciLCJ3aWR0aCI6Ijw9NzQ4In1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.bIIhpuZAj8GkKnWaCQ-QqVf-q58InCQZthNWr5mno7w"});
typeTournament({action: 1, id: 7, username: "NovaBlaze", pfp: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRdyTh5ljvubR6s3LeERqK8DHldWwD3DcwBLw&s"});
typeTournament({action: 1, id: 8, username: "GlitchPhantom", pfp: "https://images.wondershare.com/filmora/article-images/2022/cool-tiktok-pfp.jpg"});
typeTournament({action: 1, id: 9, username: "FrostBiteX", pfp: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQJWyvMlk1053PLnD3PRrz2g_LdQtW2H-M-GQ&s"});
typeTournament({action: 1, id: 10, username: "LunarEcho", pfp: "https://hypixel.net/attachments/1928357/"});
typeTournament({action: 2,id: 3});

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

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/10/01 13:29:50 by edbernar #+# #+# */
/* Updated: 2024/10/01 15:13:08 by edbernar ### ########.fr */
/* Updated: 2024/10/02 04:51:32 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -26,8 +26,10 @@ function typeTournament(content)
{
if (content.action == 1)
TournamentPage.newOpponent(content);
if (content.action == 2)
else if (content.action == 2)
TournamentPage.leaveOpponent(content);
else if (content.action == 3)
TournamentPage.newMessage(content);
}
else
console.warn("Request tournament not for this page...");
@ -42,7 +44,10 @@ function joinTournament(content)
else if (content.started)
CN.new("Information", "This tournament has already started");
else
pageRenderer('tournamentPage', false, content.code);
pageRenderer.changePage('tournamentPage', false, content.code);
}
console.warn("Remove this : window.typeTournament = typeTournament;");
window.typeTournament = typeTournament;
export { typeTournament };

380
docker-compose/requirements/nginx/static/style/tournamentPage/tournamentPage.css
View File

@ -1,285 +1,291 @@
#tournamentPage {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #020202;
font-family: "Poppins", sans-serif;
font-weight: 500;
font-style: normal;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #020202;
font-family: "Poppins", sans-serif;
font-weight: 500;
font-style: normal;
}
#tournamentPage .bracket {
display: flex;
justify-content: flex-start;
align-items: center;
width: 100%;
height: 70%;
transform: scale(0.8);
display: flex;
align-items: center;
width: 80%;
height: 70%;
scale: 1;
}
#tournamentPage .top-bracket {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
width: 100%;
height: 100px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
width: 100%;
height: 100px;
margin-bottom: 20px;
}
#tournamentPage #actuality-tournament {
color: white;
font-size: 30px;
margin: 0;
color: white;
font-size: 30px;
margin: 0;
}
#tournamentPage #code-tournament {
color: #BFBFBF;
font-size: 20px;
margin: 0;
color: #BFBFBF;
font-size: 20px;
margin: 0;
}
#tournamentPage p {
color: #BFBFBF;
margin: 0;
color: #BFBFBF;
margin: 0;
}
#tournamentPage .left{
padding: 82px;
/* width: 50%; */
height: 100%;
padding: 82px;
/* width: 50%; */
height: 100%;
}
#tournamentPage .right{
padding: 82px;
padding-top: 120px;
/* width: 50%; */
height: 100%;
padding: 82px;
padding-top: 250px;
/* width: 50%; */
height: 100%;
}
#tournamentPage .container {
display: flex;
flex-direction: column;
align-items: center;
display: flex;
flex-direction: column;
align-items: center;
}
#tournamentPage .mid-container {
display: flex;
/* flex-direction: column; */
align-items: center;
margin-top: 50px;
display: flex;
/* flex-direction: column; */
align-items: center;
margin-top: 50px;
}
#tournamentPage .circle {
width: 50px;
height: 50px;
background-color: #D9D9D9;
border-radius: 50%;
width: 50px;
height: 50px;
background-color: #D9D9D9;
border-radius: 50%;
background-repeat: no-repeat;
background-size: cover;
object-fit: cover;
object-position: 50% 50%;
background-position: center;
}
#tournamentPage .vertical-line {
width: 6px;
height: 100px;
background-color: #BFBFBF;
display: flex;
justify-content: center;
position: relative;
width: 6px;
height: 100px;
background-color: #BFBFBF;
display: flex;
justify-content: center;
position: relative;
}
#tournamentPage .vertical-line-demi {
width: 6px;
height: 300px;
background-color: #BFBFBF;
display: flex;
justify-content: center;
position: relative;
width: 6px;
height: 300px;
background-color: #BFBFBF;
display: flex;
justify-content: center;
position: relative;
}
#tournamentPage .horizontal-container {
display: flex;
position: relative;
align-items: center;
margin-left: auto;
left: 75px;
display: flex;
position: relative;
align-items: center;
margin-left: auto;
left: 75px;
}
#tournamentPage .horizontal-container-right {
display: flex;
position: relative;
align-items: center;
margin-left: auto;
left: 50px;
display: flex;
position: relative;
align-items: center;
margin-left: auto;
left: 50px;
}
#tournamentPage .horizontal-container-final {
display: flex;
position: relative;
align-items: center;
margin-left: auto;
left: 130px;
padding-bottom: 50px;
display: flex;
position: relative;
align-items: center;
margin-left: auto;
left: 130px;
}
#tournamentPage .horizontal-container-final p {
margin-left: 10px;
margin-left: 10px;
}
#tournamentPage .horizontal-line {
width: 100px;
height: 6px;
background-color: #BFBFBF;
width: 100px;
height: 6px;
background-color: #BFBFBF;
}
#tournamentPage .all-tournament {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 36%;
height: 700px;
margin-left: 400px;
margin-bottom: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 36%;
height: 100%;
margin-left: auto;
}
#tournamentPage .info-tournament {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-color: #131313;
padding: 20px;
margin-bottom: 25px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 40%;
background-color: #131313;
padding: 20px;
margin-bottom: 25px;
}
#tournamentPage .infoo {
display: flex;
flex-direction: column;
align-items: center;
width: 95%;
height: 100%;
background-color: #090909;
padding: 20px;
display: flex;
width: 95%;
height: 100%;
background-color: #090909;
padding: 20px;
overflow-y: auto;
}
#tournamentPage .infoo .alert-info {
margin-bottom: 10px;
}
#tournamentPage #info-title {
color: white;
font-size: 20px;
margin-bottom: 15px;
color: white;
font-size: 20px;
margin-bottom: 15px;
}
#tournamentPage .alert-info {
display: flex;
/* flex-direction: row; */
justify-content: space-between;
width: 90%;
height: 10%;
background-color: #BFBFBF;
padding: 20px;
display: flex;
/* flex-direction: row; */
justify-content: space-between;
width: 90%;
height: 10%;
background-color: #BFBFBF;
padding: 20px;
}
#tournamentPage .alert-info p{
color: #020202;
font-size: 15px;
color: #020202;
font-size: 15px;
}
#tournamentPage .alert-info img{
width: 20px;
height: 20px;
cursor: pointer;
width: 20px;
height: 20px;
cursor: pointer;
}
#tournamentPage .chat-tournament {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-color: #131313;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 50%;
background-color: #131313;
padding: 20px;
}
#tournamentPage .chat {
display: flex;
flex-direction: column;
align-items: center;
width: calc(100% - 40px);
height: 100%;
background-color: #090909;
padding: 20px;
display: flex;
flex-direction: column;
width: calc(100% - 40px);
height: 100%;
background-color: #090909;
padding: 20px;
overflow-y: auto;
overflow-x: none;
}
#tournamentPage #chat-title {
color: white;
font-size: 20px;
margin-bottom: 15px;
color: white;
font-size: 20px;
margin-bottom: 15px;
}
#tournamentPage .message {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100%;
background-color: purple;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100%;
background-color: purple;
padding: 20px;
}
#tournamentPage .message-user {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100%;
background-color: orange;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100%;
background-color: orange;
padding: 20px;
}
#tournamentPage #chat-input-tournament {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-color: red;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-color: red;
padding: 20px;
}
#tournamentPage .inputMessageDiv {
margin: 0;
width: 100%;
height: 50px;
background-color: #0B0B0B;
bottom: 10px;
color: white;
display: flex;
flex-direction: row;
margin: 0;
width: 100%;
height: 50px;
background-color: #0B0B0B;
bottom: 10px;
color: white;
display: flex;
flex-direction: row;
}
#tournamentPage #inputMessage {
user-select: text;
background-color: #0f0f0f;
width: 100%;
overflow: hidden;
resize: none;
border: 0;
color: white;
padding: 15px 5% 15px 5%;
user-select: text;
background-color: #0f0f0f;
width: 100%;
overflow: hidden;
resize: none;
border: 0;
color: white;
padding: 15px 5% 15px 5%;
}
#tournamentPage .inputMessageDiv p {
margin: 0;
margin-left: 10px;
margin-right: 10px;
font-family: "Poppins";
font-weight: bolder;
font-size: 35px;
margin-top: -2px;
margin: 0;
margin-left: 10px;
margin-right: 10px;
font-family: "Poppins";
font-weight: bolder;
font-size: 35px;
margin-top: -2px;
}
#tournamentPage .bottom {
@ -297,16 +303,16 @@
padding: 10px;
cursor: pointer;
width: 150px;
height: 30px;
height: 30px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
display: flex;
justify-content: center;
align-items: center;
transition: transform 0.3s ease;
}
#tournamentPage .buttonStartGame p {
color: #020202;
color: #020202;
}
#tournamentPage .buttonStartGame:hover {