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

frontend/static/css/TournamentPage.css

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

frontend/static/js/api/Matchmaking.js

@@ -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/${gamemode}/${mode}`;
-
-		let url = `${window.location.protocol[4] === 's' ? 'wss' : 'ws'}://${window.location.host}/ws/matchmaking/${mode}`;
 
 		this._socket = new WebSocket(url);
 		
@@ -51,10 +49,7 @@ class MatchMaking
 		this.disconnect_func(event);
 	}
 
-	/**
+	stop()
-	 * @returns {Promise<?>}
-	 */
-	async stop()
 	{
 		if (this._socket)
 			this._socket.close();

frontend/static/js/api/tournament/Tournament.js

@@ -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} errorHandler
-	 * @param {CallableFunction} disconnect_func 
+	 * @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.participantsUpdateHandler = participantsUpdateHandler;
-		this.disconnect_func = disconnect_func;
+		this.errorHandler = errorHandler;
+		this.disconnectHandler = disconnectHandler;
 
-		this._socket.onmessage = function (event) {
+		this._socket.onmessage = this.onReceive.bind(this);
-			const data = JSON.parse(event.data);
-			receive_func(data);
-		};
 
 		this._socket.onclose = this.leave.bind(this);
 	}

frontend/static/js/views/MatchMakingView.js

@@ -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), this.gamemode_input.value, this.nb_players_input.value);
-            await client.matchmaking.start(this.onreceive.bind(this), this.ondisconnect.bind(this), nb_players, this.gamemode);
 
             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");
+        console.log(this.nb_players_input, this.gamemode_input);
-        this.input = document.getElementById("nb-players-input");
-        this.gamemode = document.getElementById("game-choice");
 
-        let container = document.getElementById("nb-players-container");
+        [this.nb_players_input, this.gamemode_input].forEach((input) => {
-        let gameChoice = document.getElementById("game-choice");
 
-        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')
+                await this.toggle_search.bind(this);
-                return;
+            });
-
-            await this.toggle_search.bind(this);
         });
+    }
 
-        gameChoice.addEventListener("change", function()
+    addChangeNbPlayersEvent()
-        {
+    {
-            if (this.value === "tictactoe")
-            {
-                container.style.display = 'none';
-                document.getElementById("nb-players-input").value = 2;
-            }
-            else
-                container.style.display = 'block';
-        })
-
         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'>
+                    <div class='form-floating mb-2' id='gamemode-div'>
-                        <select class='form-control' id='game-choice'>
+                        <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>

frontend/static/js/views/tournament/TournamentPageView.js

@@ -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")
+		if (data.detail === "update_participants")
-			document.getElementById("nb_participants").innerText = `${data.nb_participants} / ${this.tournament.nb_players}`;
+			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>

matchmaking/consumers.py

@@ -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)

matchmaking/models.py

@@ -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
 

matchmaking/routing.py

@@ -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())
 ]

tournament/models.py

@@ -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):
 

tournament/serializers.py

@@ -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.")