- 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

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 */
/* */
/* ************************************************************************** */

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 }

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});

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 };