game: add: scoreboard

frontend/static/js/api/game/Game.js

@@ -9,15 +9,25 @@ import { Client } from "../Client.js";
 class Game
 {
 	/**
-	 * @param  {Client} client
+	 * @param {Client} client
+     * @param {CallableFunction} update_goal
 	 */
-	constructor(client, id)
+	constructor(client, id, update_goal)
 	{
 		/**
 		 * @type {Client}
 		 */
         this.client = client;
+
+        /**
+         * @type {Number}
+         */
         this.id = id;
+
+        /**
+         * @type {CallableFunction}
+         */
+        this.update_goal = update_goal;
     }
 
     /**
@@ -153,6 +163,8 @@ class Game
             this._receive_ball(data);
         else if (data.detail === "init_game")
             this._init_game(data);
+        else if (data.detail === "goal")
+            this.update_goal(data);
     }
 
     _init_game(data)

frontend/static/js/views/GameView.js

@@ -2,14 +2,14 @@ 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"
+import { lang } from "../index.js";
 
 export default class extends AbstractView
 {
     constructor(params)
 	{
         super(params, "Game");
-        this.game = new Game(client, params.id);
+        this.game = new Game(client, params.id, this.update_goal);
         this.keys_pressed = [];
         this.my_player = undefined;
     }
@@ -48,6 +48,14 @@ export default class extends AbstractView
         ctx.stroke();
     }
 
+    /**
+     * @param {Object} data 
+     */
+    update_goal(data)
+    {
+        document.getElementById(`goal-${data.player}`).innerText = data.nb_goal;
+    }
+
     render()
     {
         let loop_id = setInterval(() => {
@@ -119,11 +127,14 @@ export default class extends AbstractView
         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.id = `username-${player.id}`;
+            goal.id = `goal-${player.id}`;
+
             name.innerText = player.username;
             goal.innerText = player.nb_goal;