games: add: goal table

frontend/static/js/api/game/MyPlayer.js

@@ -14,7 +14,7 @@ class MyPlayer extends Player
      */
     constructor(client, game, rail, nb_goal, position)
     {
-        super(game, client.me.id, rail, nb_goal, position, true);
+        super(game, client.me.id, client.me.username, rail, nb_goal, position, true);
         /**
          * @type {Client}
          */

frontend/static/js/api/game/Player.js

@@ -11,8 +11,9 @@ class Player
      * @param {Number} nb_goal 
      * @param {Number} position 
      * @param {Boolean} is_connected 
+     * @param {String} username
      */
-    constructor(game, id, rail, nb_goal, position, is_connected)
+    constructor(game, id, username, rail, nb_goal, position, is_connected)
     {
         /**
          * @type {Game}
@@ -43,6 +44,11 @@ class Player
          * @type {Segment}
          */
         this.rail = rail === undefined ? new Segment() : rail;
+
+        /**
+         * @type {String}
+         */
+        this.username = username;
     }
 
     /**
@@ -90,30 +96,12 @@ class Player
 
     from_json(data)
     {
-        /**
-        * @type {Boolean}
-        */
-        
         this.is_connected = data.is_connected;
-        /**
-         * @type {Number}
-         */
         this.id = data.user_id;
-        
-        /**
-         * @type {Number}
-         */
         this.position = data.position.position ;
-
-        /**
-         * @type {Number}
-         */
         this.nb_goal = data.nb_goal;
-
-        /**
-         * @type {Segment}
-         */
         this.rail = this.rail.from_json(data.rail);
+        this.username = data.username;
 
         return this;
     }

frontend/static/js/lang/cr.json

@@ -35,5 +35,7 @@
 	"profileDenyRequest": "Refuser le cramptéman",
 	"profileAcceptRequest": "Accepter le cramptéman",
 	"profileUnblock": "Quoicoudebloquer",
-	"profileBlock": "Quoicoubloquer"
+	"profileBlock": "Quoicoubloquer",
+	"gameGoalTaken": "Tu es quoicoucringe",
+	"gamePlayersListName": "Crampteurs"
 }

frontend/static/js/lang/en.json

@@ -35,5 +35,7 @@
 	"profileDenyRequest": "Decline Friend",
 	"profileAcceptRequest": "Accept Friend",
 	"profileUnblock": "Unblock",
-	"profileBlock": "Block"
+	"profileBlock": "Block",
+	"gameGoalTaken": "Goal Taken",
+	"gamePlayersListName": "Players"
 }

frontend/static/js/lang/fr.json

@@ -35,5 +35,7 @@
 	"profileDenyRequest": "Refuser l'ami",
 	"profileAcceptRequest": "Accepter l'ami",
 	"profileUnblock": "Débloquer",
-	"profileBlock": "Bloquer"
+	"profileBlock": "Bloquer",
+	"gameGoalTaken": "But pris",
+	"gamePlayersListName": "Joueurs"
 }

frontend/static/js/views/GameView.js

@@ -2,6 +2,7 @@ import { client } from "../index.js";
 import { Game } from "../api/game/Game.js";
 import AbstractView from "./abstracts/AbstractView.js";
 import { MyPlayer } from "../api/game/MyPlayer.js";
+import { lang } from "../index.js"
 
 export default class extends AbstractView
 {
@@ -94,7 +95,7 @@ export default class extends AbstractView
             this.my_player = new MyPlayer(client,
                                           this.game,
                                           my_player.rail,
-                                          my_player.nb_gool,
+                                          my_player.nb_goal,
                                           my_player.position,
                                         );
             this.game.players[index] = this.my_player;
@@ -113,6 +114,26 @@ export default class extends AbstractView
             await this.join_game();
     }
 
+    display_players_list()
+    {
+        let players_list = document.getElementById("players_list");
+
+        this.game.players.forEach(player => {
+            console.log(player);
+            let tr = document.createElement("tr");
+            let name = document.createElement("td");
+            let goal = document.createElement("td");
+            
+            name.innerText = player.username;
+            goal.innerText = player.nb_goal;
+
+            tr.appendChild(name);
+            tr.appendChild(goal);
+
+            players_list.appendChild(tr);
+        });
+    }
+
 	async postInit()
 	{
 		let error_code = await this.game.init();
@@ -121,6 +142,7 @@ export default class extends AbstractView
             return error_code;
 
         await this.update_game_state();
+        this.display_players_list();
 	}
 
     async leavePage()
@@ -138,7 +160,17 @@ export default class extends AbstractView
         return /* HTML */ `
             <link rel="stylesheet" href="/static/css/game.css">
             <h2 id="game-state"></h2>
-            <div id="player_list"></div>
+
+            <table>
+                <thead>
+                    <tr>
+                        <th scope="col">${lang.get("gamePlayersListName")}</th>
+                        <th scope="col">${lang.get("gameGoalTaken")}</th>
+                    </tr>
+                </thead>
+                <tbody id="players_list">
+                </tbody>
+            </table>
         `;
     }
 }

games/objects/Player.py

@@ -4,6 +4,8 @@ from .. import config
 
 from channels.generic.websocket import WebsocketConsumer
 
+from django.contrib.auth.models import User
+
 from .Position import Position
 from .Spectator import Spectator
 from .Point import Point
@@ -27,6 +29,8 @@ class Player(Spectator):
         
         self.rail: Segment = rail
         
+        self.username: str = User.objects.get(pk = self.user_id).username
+        
     def receive(self, data: dict):
         
         detail: str = data.get("detail")
@@ -111,6 +115,7 @@ class Player(Spectator):
     def to_dict(self) -> dict:
         
         data = {
+            "username": self.username,
             "user_id": self.user_id,
             "position": self.position.to_dict(),
             "nb_goal": self.nb_goal,