starnakin/42_ft_transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' of codeberg.org:adrien-lsh/ft_transcendence

Browse Source
This commit is contained in:
Namonay
2024-03-25 14:56:57 +01:00
parent b250f9b015 c232f03c17
commit 9799b3adbe
10 changed files with 282 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
frontend/static/css/TournamentPage.css Normal file
View File

@ -0,0 +1,51 @@
#tournament-tree {
display:flex;
flex-direction:row;
}
.round {
display:flex;
flex-direction:column;
justify-content:center;
width:200px;
list-style:none;
padding:0;
}
.round .spacer{ flex-grow:1; }
.round .spacer:first-child,
.round .spacer:last-child{ flex-grow:.5; }
.round .game-spacer{
flex-grow:1;
}
body{
font-family:sans-serif;
font-size:small;
padding:10px;
line-height:1.4em;
}
li.game{
padding-left:20px;
}
li.game.winner{
font-weight:bold;
}
li.game span{
float:right;
margin-right:5px;
}
li.game-top{ border-bottom:1px solid #aaa; }
li.game-spacer{
border-right:1px solid #aaa;
min-height:40px;
}
li.game-bottom{
border-top:1px solid #aaa;
}

11
frontend/static/js/api/Matchmaking.js
View File

@ -21,14 +21,12 @@ class MatchMaking
* @param {Number} mode The number of players in a game
* @returns {Promise<?>}
*/
async start(receive_func, disconnect_func, mode, gamemode)
async start(receive_func, disconnect_func, gamemode, mode)
{
if (!await this.client.isAuthenticated())
return null;
this.gamemode = gamemode
let url = `${window.location.protocol[4] === 's' ? 'wss' : 'ws'}://${window.location.host}/ws/matchmaking/${mode}`;
let url = `${window.location.protocol[4] === 's' ? 'wss' : 'ws'}://${window.location.host}/ws/matchmaking/${gamemode}/${mode}`;
this._socket = new WebSocket(url);
@ -51,10 +49,7 @@ class MatchMaking
this.disconnect_func(event);
}
/**
* @returns {Promise<?>}
*/
async stop()
stop()
{
if (this._socket)
this._socket.close();

45
frontend/static/js/api/tournament/Tournament.js
View File

@ -102,7 +102,7 @@ class Tourmanent
return;
this.connected = false;
this._socket.close();
this.disconnect_func(event);
this.disconnectHandler(event);
}
toggle_participation()
@ -112,13 +112,40 @@ class Tourmanent
this._socket.send(JSON.stringify({participate: ""}));
}
async onParticipantsUpdate(data)
{
oldParticipantList = this.par
await this.participantsUpdateHandler();
}
async onError(data)
{
await this.errorHandler(data);
}
/**
*
* @param {MessageEvent} event
*/
onReceive(event)
{
const data = JSON.parse(event.data);
if (data?.detail === "error")
this.onError(data);
else if (data?.detail === "participants_update")
this.onParticipantsUpdate(data);
}
/**
* Join the tournament Websocket
* @param {CallableFunction} receive_func
* @param {CallableFunction} disconnect_func
* @param {CallableFunction} errorHandler
* @param {CallableFunction} participantsUpdateHandler
* @param {CallableFunction} disconnectHandler
* @returns {?}
*/
async join(receive_func, disconnect_func)
async join(participantsUpdateHandler, errorHandler, disconnectHandler)
{
if (!await this.client.isAuthenticated())
return null;
@ -130,13 +157,11 @@ class Tourmanent
this.connected = true;
this.isParticipating = false;
this.receive_func = receive_func;
this.disconnect_func = disconnect_func;
this.participantsUpdateHandler = participantsUpdateHandler;
this.errorHandler = errorHandler;
this.disconnectHandler = disconnectHandler;
this._socket.onmessage = function (event) {
const data = JSON.parse(event.data);
receive_func(data);
};
this._socket.onmessage = this.onReceive.bind(this);
this._socket.onclose = this.leave.bind(this);
}

88
frontend/static/js/views/MatchMakingView.js
View File

@ -19,8 +19,7 @@ export default class extends AbstractAuthenticatedView {
}
else
{
let nb_players = this.input.value;
await client.matchmaking.start(this.onreceive.bind(this), this.ondisconnect.bind(this), nb_players, this.gamemode);
await client.matchmaking.start(this.onreceive.bind(this), this.ondisconnect.bind(this), this.gamemode_input.value, this.nb_players_input.value);
this.button.innerHTML = lang.get("matchmakingStopSearch");
}
@ -29,6 +28,7 @@ export default class extends AbstractAuthenticatedView {
ondisconnect(event)
{
this.button.innerHTML = lang.get("matchmakingStartSearch");
clearIds("innerText", ["detail"]);
}
onreceive(data)
@ -36,9 +36,9 @@ export default class extends AbstractAuthenticatedView {
if (data.detail === "game_found")
{
if (this.gamemode.value == "pong")
navigateTo(`/games/${data.game_id}`);
navigateTo(`/games/${data.gamemode}/${data.game_id}`);
else
navigateTo(`/games/${this.gamemode.value}/${data.game_id}`);
navigateTo(`/games/${data.gamemode}/${data.game_id}`);
return;
}
this.display_data(data);
@ -50,59 +50,83 @@ export default class extends AbstractAuthenticatedView {
fill_errors(data, "innerText");
}
async postInit()
addEnterEvent()
{
this.button = document.getElementById("toggle-search");
this.input = document.getElementById("nb-players-input");
this.gamemode = document.getElementById("game-choice");
console.log(this.nb_players_input, this.gamemode_input);
let container = document.getElementById("nb-players-container");
let gameChoice = document.getElementById("game-choice");
[this.nb_players_input, this.gamemode_input].forEach((input) => {
this.button.onclick = this.toggle_search.bind(this);
input.addEventListener('keydown', async ev => {
this.input.addEventListener('keydown', async ev => {
if (ev.key !== 'Enter')
return;
if (ev.key !== 'Enter')
return;
await this.toggle_search.bind(this);
await this.toggle_search.bind(this);
});
});
}
gameChoice.addEventListener("change", function()
{
if (this.value === "tictactoe")
{
container.style.display = 'none';
document.getElementById("nb-players-input").value = 2;
}
else
container.style.display = 'block';
})
addChangeNbPlayersEvent()
{
let update = () => {
this.button.disabled = (this.input.value < 2 || this.input.value > 4);
};
["change", "oninput"].forEach((event_name) => {
this.input.addEventListener(event_name, update);
this.nb_players_input.addEventListener(event_name, update);
});
}
addChangeGameModeEvent()
{
let nb_players_div = document.getElementById("nb-players-div");
this.gamemode_input.addEventListener("change", () => {
if (this.gamemode_input.value === "tictactoe")
{
nb_players_div.style.display = 'none';
this.nb_players_input.value = 2;
}
else
nb_players_div.style.display = 'block';
client.matchmaking.stop();
});
}
addEvents()
{
this.addEnterEvent();
this.addChangeGameModeEvent();
this.addChangeNbPlayersEvent();
}
async postInit()
{
this.button = document.getElementById("toggle-search");
this.nb_players_input = document.getElementById("nb-players-input");
this.gamemode_input = document.getElementById("gamemode-input");
this.button.onclick = this.toggle_search.bind(this);
this.addEvents()
}
async getHtml() {
return /* HTML */ `
<div class='container-fluid'>
<div class='border border-2 rounded bg-light-subtle mx-auto p-2 col-md-7 col-lg-4'>
<h4 class='text-center fw-semibold mb-4' id="title">${lang.get("matchmakingTitle")}</h4>
<div>
<div class='form-floating mb-2'>
<select class='form-control' id='game-choice'>
<div class='form-floating mb-2' id='gamemode-div'>
<select class='form-control' id='gamemode-input'>
<option value='pong'>Pong</option>
<option value='tictactoe'>ticTacToe</option>
</select>
<label for='game-choice'>${lang.get("gamemodeChoice")}</label>
<label for='gamemode-input'>${lang.get("gamemodeChoice")}</label>
</div>
<div class='form-floating mb-2' id='nb-players-container'>
<div class='form-floating mb-2' id='nb-players-div'>
<input type='number' min='2' value='2' max='4' class='form-control' id='nb-players-input' placeholder='${lang.get("matchmakingNbPlayers")}'>
<label for='nb-players-input' id='username-label'>${lang.get("matchmakingNbPlayers")}</label>
<span class='text-danger' id='username'></span>

83
frontend/static/js/views/tournament/TournamentPageView.js
View File

@ -1,3 +1,5 @@
import { Profile } from "../../api/Profile.js";
import { Tourmanent } from "../../api/tournament/Tournament.js";
import {client, navigateTo} from "../../index.js";
import AbstractAuthenticatedView from "../abstracts/AbstractAuthenticatedView.js";
@ -14,10 +16,61 @@ export default class extends AbstractAuthenticatedView
this.tournament.toggle_participation();
}
createGraph()
{
console.log(this.tournament);
let tournament_tree = document.createElement("div");
tournament_tree.id = "tournament-tree";
document.getElementById("app").appendChild(tournament_tree);
for (let round_id = 0; round_id < this.tournament.levels.length; round_id++)
{
let current_round = document.createElement("ul");
tournament_tree.appendChild(current_round);
current_round.className = `round round-${round_id}`;
for (let participant_i = 0; participant_i < this.tournament.levels[round_id].length; participant_i += 2)
{
let spacer = document.createElement("li");
spacer.className = "spacer";
spacer.innerText = "&nbsp;";
current_round.appendChild(spacer);
let game_top = document.createElement("li");
game_top.className = "game game-top";
game_top.innerText = `${this.tournament.levels[round_id][participant_i]}`;
current_round.appendChild(game_top);
let game_spacer = document.createElement("li");
spacer.className = "game game-spacer";
spacer.innerText = "&nbsp;";
current_round.appendChild(game_spacer);
let game_bottom = document.createElement("li");
game_bottom.className = "game game-bottom";
game_bottom.innerText = `${this.tournament.levels[round_id][participant_i + 1]}`;
current_round.appendChild(game_bottom);
}
}
}
async receive(data)
{
if (data.detail === "nb_participants" || data.detail === "update_participants")
document.getElementById("nb_participants").innerText = `${data.nb_participants} / ${this.tournament.nb_players}`;
if (data.detail === "update_participants")
document.getElementById("nb_participants").innerText = `${data.participants} / ${this.tournament.nb_players}`;
if (data.detail === "go_to")
navigateTo(data.url);
if (data.detail === "is_participant")
@ -32,36 +85,56 @@ export default class extends AbstractAuthenticatedView
document.getElementById("display").innerText = state ? "You are a particpant" : "You are not a participant";
}
async ondisconnect(event)
/**
*
* @param {[Profile]} oldParticipantsList
* @param {[Profile]} currentParticipantsList
*/
async onParticipantsUpdate(oldParticipantsList, currentParticipantsList)
{
}
async onDisconnect(event)
{
}
async onError(data)
{
}
async postInit()
{
/**
* @type {Tourmanent}
*/
this.tournament = await client.tournaments.getTournament(this.id);
if (this.tournament === null)
return 404;
this.tournament.join(this.receive.bind(this), this.ondisconnect.bind(this));
this.tournament.join(this.onParticipantsUpdate.bind(this), this.onError.bind(this), this.onDisconnect.bind(this));
let button = document.getElementById("button");
button.onclick = this.pressButton.bind(this);
document.getElementById("name").innerText = this.tournament.name;
document.getElementById("nb_players").innerText = this.tournament.nb_players;
document.getElementById("nb_participants").innerText = this.tournament.nb_players;
document.getElementById("nb_players_by_game").innerText = this.tournament.nb_players_by_game;
document.getElementById("level").innerText = this.tournament.level;
document.getElementById("state").innerText = this.tournament.state;
if (this.tournament.started === false)
button.disabled = false;
this.createGraph();
}
async getHtml()
{
return `
<link rel="stylesheet" href="/static/css/TournamentPage.css">
<table>
<thead>
<tr>