game: add: max score win

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

@@ -12,8 +12,9 @@ class Game
 	 * @param {Client} client
      * @param {CallableFunction} goal_handler
      * @param {CallableFunction} finish_handler 
+     * @param {CallableFunction} disconnect_handler
 	 */
-	constructor(client, id, goal_handler, finish_handler)
+	constructor(client, id, disconnect_handler, goal_handler, finish_handler)
 	{
 		/**
 		 * @type {Client}
@@ -34,6 +35,11 @@ class Game
          * @type {CallableFunction}
          */
         this.finish_handler = finish_handler;
+
+        /**
+         * @type {CallableFunction}
+         */
+        this.disconnect_handler = disconnect_handler;
     }
 
     /**
@@ -274,6 +280,11 @@ class Game
 			await this._receive(data);
 		};
 
+        this._socket.onclose = async () => {
+            this._socket = undefined;
+            await this.disconnect_handler();            
+        }; 
+
         return this.wait_init();
     }
 

frontend/static/js/utils/graph.js

@@ -1,7 +1,7 @@
 
 export function generateRandomColor()
 {
-	return `#${Math.floor(Math.random()*16777215).toString(16)}`
+	return `#${Math.floor(Math.random()*16777215).toString(16)}`;
 }
 
 /**
@@ -14,7 +14,7 @@ export function transformData(data)
 
 	for (let index = 0; index < data.length; index++) {
 		newData.push({x: Math.round(data[index] / 1000),
-			 		  y: index});
+			 		  y: index + 1});
 	}
 
 	return newData;
@@ -27,8 +27,8 @@ export function range(start, stop, step = 1)
 {
 	if (stop === undefined)
 	{
-		stop = start
-		start = 0
+		stop = start;
+		start = 0;
 	}
 	let newArr = [];
     for (let i = start; i <= stop; i += step)
@@ -53,9 +53,9 @@ export function get_labels(dataset)
 
 	let labels = Array.from(labelsSet);
 
-	labels.sort(function(a, b){return b - a});
+	labels.sort(function(a, b){return b - a;});
 	
-	labels.reverse()
+	labels.reverse();
 
 	return labels;
 }

frontend/static/js/views/GameView.js

@@ -6,6 +6,7 @@ import { Player } from "../api/game/Player.js";
 import { lang } from "../index.js";
 import "https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js";
 import { get_labels, transformData } from "../utils/graph.js";
+import { sleep } from "../utils/sleep.js";
 
 export default class extends AbstractView
 {
@@ -149,6 +150,11 @@ export default class extends AbstractView
 
     createGraph()
     {
+        let players = this.game.players;
+        
+        if (players === undefined)
+            return;
+        
         let graph = document.createElement("canvas");
 
         graph.height = 450;
@@ -162,7 +168,7 @@ export default class extends AbstractView
  
         let datasets = [];
 
-        this.game.players.forEach(player => {
+        players.forEach(player => {
 
             let data = transformData(player.score);
 
@@ -228,9 +234,15 @@ export default class extends AbstractView
         });
     }
 
+    async on_disconnect()
+    {
+        sleep(500);
+        await reloadView();
+    }
+
 	async postInit()
 	{
-        this.game = new Game(client, this.game_id, this.on_goal, this.on_finish);
+        this.game = new Game(client, this.game_id, this.on_disconnect, this.on_goal, this.on_finish);
         this.keys_pressed = [];
         this.my_player = undefined;