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
commit 9799b3adbe
10 changed files with 282 additions and 67 deletions
Show Stats 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>

14
matchmaking/consumers.py
View File

@ -18,17 +18,27 @@ class MatchMaking(WebsocketConsumer):
def connect(self):
user: User = self.scope["user"]
if (user.is_anonymous or not user.is_authenticated):
return
self.channel_layer.group_add(self.group_name, self.channel_name)
self.mode: int = int(self.scope['url_route']['kwargs']['mode'])
self.gamemode: str = self.scope['url_route']['kwargs']['gamemode']
self.group_name = self.mode
waiting_room: WaitingRoom = normal.get(self.mode)
waiting_room: WaitingRoom = normal.get(self.gamemode, self.mode)
waiting_room.append(Waiter(user.pk, self))
if (self.mode < 2 or self.mode > 4):
data: dict = {
"detail": "The mode must be > 1 and < 4.",
}
self.send(json.dumps(data))
self.disconnect(1000)
return
if (self.mode < 2 or self.mode > 4):
data: dict = {
"detail": "The mode must be > 1 and < 4.",
@ -45,7 +55,7 @@ class MatchMaking(WebsocketConsumer):
def disconnect(self, close_code):
super().close(close_code)
waiting_room: WaitingRoom = normal.get(self.mode)
waiting_room: WaitingRoom = normal.get(self.gamemode, self.mode)
waiter: Waiter = waiting_room.get_member_by_socket(self)
if (waiter is not None):
waiting_room.remove(waiter, close_code)

10
matchmaking/models.py
View File

@ -13,9 +13,10 @@ class Waiter(AbstractRoomMember):
class WaitingRoom(AbstractRoom):
def __init__(self, room_manager,mode):
def __init__(self, room_manager, gamemode: str, mode: int):
super().__init__(room_manager)
self.mode = mode
self.gamemode = gamemode
def append(self, waiter: Waiter):
tmp: Waiter = self.get_member_by_user_id(waiter.user_id)
@ -27,12 +28,13 @@ class WaitingRoom(AbstractRoom):
class WaitingRoomManager(AbstractRoomManager):
def get(self, mode: int):
def get(self, gamemode: str, mode: int):
for waiting_room in self._room_list:
waiting_room: WaitingRoom
if (waiting_room.mode == mode):
if (waiting_room.mode == mode and waiting_room.gamemode == gamemode):
return waiting_room
tmp: WaitingRoom = WaitingRoom(self, mode)
tmp: WaitingRoom = WaitingRoom(self, gamemode, mode)
super().append(tmp)
return tmp

2
matchmaking/routing.py
View File

@ -2,5 +2,5 @@ from django.urls import re_path
from . import consumers
websocket_urlpatterns = [
re_path(r'ws/matchmaking/(?P<mode>\d+)$', consumers.MatchMaking.as_asgi())
re_path(r'ws/matchmaking/(?P<gamemode>\w+)/(?P<mode>\d+)$', consumers.MatchMaking.as_asgi())
]

4
tournament/models.py
View File

@ -32,7 +32,7 @@ class TournamentModel(models.Model):
def get_games_id(self):
return [tournament_game.game_id for tournament_game in TournamentGamesModel.objects.filter(tournament_id = self.pk)]
def get_players_id(self):
def get_participants_id(self):
return [model.participant_id for model in TournamentParticipantsModel.objects.filter(tournament_id=self.pk)]
def is_a_participant(self, participant_id: int):
@ -134,7 +134,7 @@ class TournamentRoom(AbstractRoom):
if self.tournament.started:
member.participate = self.tournament.is_a_participant(member.user_id)
member.send_participating()
member.send("nb_participants", {"nb_participants": self.get_nb_participants()})
self.broadcast("update_participants", {"participants": [self.get_participants_id()]})
class TournamentRoomManager(AbstractRoomManager):

39
tournament/serializers.py
View File

@ -1,11 +1,20 @@
from rest_framework import serializers
from .models import TournamentModel
from django.db.models.query import QuerySet
from django.contrib.auth.models import User
from .models import TournamentModel, tournament_manager
from profiles.models import ProfileModel
from profiles.serializers import ProfileSerializer
from games.serializers import GameSerializer
class TournamentSerializer(serializers.ModelSerializer):
levels = serializers.SerializerMethodField(read_only=True, required=False)
state = serializers.SerializerMethodField(read_only=True, required=False)
participants = serializers.SerializerMethodField(read_only=True, required=False)
level = serializers.ReadOnlyField()
started = serializers.ReadOnlyField()
finished = serializers.ReadOnlyField()
@ -13,7 +22,32 @@ class TournamentSerializer(serializers.ModelSerializer):
class Meta:
model = TournamentModel
fields = ["name", "nb_players", "nb_players_by_game", "level", "started", "finished", "levels", "id", "state"]
fields = ["name", "nb_players", "nb_players_by_game", "level", "started", "finished", "levels", "id", "state", "participants"]
def get_participants(self, instance: TournamentModel):
participants_id: list[ProfileModel]
if (instance.started):
participants_id = instance.get_participants_id()
else:
participants_id = tournament_manager.get(instance.pk).get_participants_id()
participants_profile: list[ProfileModel] = []
for participant_id in participants_id:
query: QuerySet = ProfileModel.objects.filter(user_id = participant_id)
profile_data: dict
if query.exists():
profile_data = ProfileSerializer(query[0]).data
else:
profile_data = {
"username": "deleted_user",
"avatar": "/static/avatars/default.avif",
"user_id": participants_id
}
participants_profile.append(profile_data)
return participants_profile
def get_state(self, instance: TournamentModel):
return ["waiting", "started", "finished"][instance.started + instance.finished]
@ -31,6 +65,7 @@ class TournamentSerializer(serializers.ModelSerializer):
if (value < 2):
raise serializers.ValidationError("The numbers of players must be greather than 2.")
return value
def validate_nb_players_by_game(self, value: int):
if (value < 2):
raise serializers.ValidationError("The numbers of players by game must be greather than 2.")