Map stats stream (#179)

* Update ghcr.yml

* Create GetMapStatsStream Function

* Try PlayerStatTable.vue

* Update PlayerStatTable.vue

* Update PlayerStatTable.vue

* Update PlayerStatTable.vue

* Update PlayerStatTable.vue

* Update PlayerStatTable.vue

* Update PlayerStatTable.vue

* test

* test

* test

* fix

* fix

* soon

* test

* debug

* oups

* order ?

* await ?

* zzz

* Debug Day 2

* try 2

* Good !!

* fix

* Update ghcr.yml

* Remove Console.log

* Update package.json

Author: Iwhite67

package.json

@@ -1,6 +1,6 @@
 {
   "name": "g5v",
-  "version": "1.7.0",
+  "version": "1.7.1",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

src/components/PlayerStatTable.vue

@@ -122,7 +122,6 @@ export default {
   },
   created() {
     this.useStreamOrStaticData();
-    this.getMapString();
   },
   computed: {
     headers() {
@@ -239,8 +238,14 @@ export default {
     async useStreamOrStaticData() {
       // Template will contain v-rows/etc like on main Team page.
       let matchData = await this.GetMatchData(this.match_id);
-      if (matchData.end_time == null) this.GetMapPlayerStatsStream(matchData);
-      else this.GetMapPlayerStats(matchData);
+      if (matchData.end_time == null) {
+           this.GetMapStatsStream(matchData);
+           this.GetMapPlayerStatsStream(matchData);
+      }
+      else {
+           this.getMapString(matchData);
+           this.GetMapPlayerStats(matchData);
+      }
     },
     async retrieveStatsHelper(serverResponse, matchData) {
       if (typeof serverResponse == "string") return;
@@ -324,34 +329,51 @@ export default {
       }
       return;
     },
-    async getMapString() {
+    async GetMapStatsStream(matchData) {
       try {
-        let mapStats = await this.GetMapStats(this.match_id);
-        if (typeof mapStats == "string") return;
-        mapStats.forEach((singleMapStat, index) => {
-          this.arrMapString[index] = {};
-          this.arrMapString[index].score =
-            "Score: " +
-            singleMapStat.team1_score +
-            " " +
-            this.GetScoreSymbol(
-              singleMapStat.team1_score,
-              singleMapStat.team2_score
-            ) +
-            " " +
-            singleMapStat.team2_score;
-          this.arrMapString[index].start =
-            "Map Start: " + new Date(singleMapStat.start_time).toLocaleString();
-          this.arrMapString[index].end =
-            singleMapStat.end_time == null
-              ? null
-              : "Map End: " + new Date(singleMapStat.end_time).toLocaleString();
-          this.arrMapString[index].map = "Map: " + singleMapStat.map_name;
-          this.arrMapString[index].demo = singleMapStat.demoFile;
+        let sseClient = await this.GetEventMapStats(this.match_id);
+        await sseClient.connect();
+        await sseClient.on("mapstats", async message => {
+          await this.retrieveMapStatsHelper(message,matchData);
         });
       } catch (error) {
-        console.log("String error " + error);
+        console.log("Our error: " + error);
+      } finally {
+        this.isLoading = false;
       }
+      return;
+    },
+    async getMapString(matchData) {
+      try {
+        let res = await this.GetMapStats(this.match_id);
+        await this.retrieveMapStatsHelper(res, matchData);
+      } catch (error) {
+        console.log("Our error: " + error);
+      } finally {
+        this.isLoading = false;
+      }
+      return;
+    },
+    async retrieveMapStatsHelper(serverResponse, matchData) {
+      if (typeof serverResponse == "string") return;
+      await serverResponse.forEach((singleMapStat, index) => {
+        this.$set(this.arrMapString[index], 'score', "Score: " +
+          singleMapStat.team1_score +
+          " " +
+          this.GetScoreSymbol(
+            singleMapStat.team1_score,
+            singleMapStat.team2_score
+          ) +
+          " " +
+          singleMapStat.team2_score);
+        this.$set(this.arrMapString[index], 'start', "Map Start: " + new Date(singleMapStat.start_time).toLocaleString());
+        this.$set(this.arrMapString[index], 'end', singleMapStat.end_time == null ?
+          null :
+          "Map End: " + new Date(singleMapStat.end_time).toLocaleString());
+        this.$set(this.arrMapString[index], 'map', "Map: " + singleMapStat.map_name);
+        this.$set(this.arrMapString[index], 'demo', singleMapStat.demoFile);
+      });
+      if (matchData.end_time != null) this.isFinished = true;
     }
   }
 };

src/utils/api.vue

@@ -894,6 +894,19 @@ export default {
       }
       return message;
     },
+    async GetEventMapStats(matchid) {
+      return this.$sse
+        .create({
+          url: `${process.env?.VUE_APP_G5V_API_URL ||
+            "/api"}/mapstats/${matchid}/stream`,
+          format: "json",
+          withCredentials: true,
+          polyfill: true
+        })
+        .on("error", err =>
+          console.error("Failed to parse or lost connection:", err)
+        );
+    },
     // END MAP STATS
     // BEGIN MATCH ADMIN CALLS
     async PauseMatch(matchid) {