feat: Display Northstar playercount and servercount in frontend (#130)

* feat: Initial backend code to get the playercount
from the Northstar master server together with servercount

* fix: Push correct backend code

* feat: Load playercount on application load
and show on PlayView

* refactor: Store global const in separate file

Moved user agent there for now

* refactor: User user agent from global const

* refactor: Move masterserver URL into global const

* refactor: Remove temporary variable

* fix: Do proper typing for playercount return value

* feat: Change text if unable to load playercount

So instead of showing some wrong value, we just say that we were unable
to load it.

* fix: Remove leftover print statement

* refactor: Move struct to library source file

* fix: Remove break element

* refactor: serverlist endpoint var to global const

* fix: Remove unused import

* fix: add some space to stats container top

* fix: Change text to lowercase

---------

Co-authored-by: Alystrasz <contact@remyraes.com>

1 files changed, 17 insertions, 0 deletions

diff --git a/src-vue/src/views/PlayView.vue b/src-vue/src/views/PlayView.vue
index 670d8395..beca6724 100644
--- a/src-vue/src/views/PlayView.vue
+++ b/src-vue/src/views/PlayView.vue
@@ -15,6 +15,12 @@ export default defineComponent({
         northstarVersion(): string {
             return this.$store.state.installed_northstar_version;
         },
+        playerCount(): number {
+            return this.$store.state.player_count;
+        },
+        serverCount(): number {
+            return this.$store.state.server_count;
+        },
     },
     methods: {
         showChangelogPage() {
@@ -32,6 +38,13 @@ export default defineComponent({
             <div v-if="northstarVersion !== ''" class="fc_changelog__link" @click="showChangelogPage">
                 (see patch notes)
             </div>
+            <div v-if="playerCount >= 0" class="fc-stats__container">
+                {{ playerCount }} players,
+                {{ serverCount }} servers
+            </div>
+            <div v-else="playerCount >= 0" class="fc-stats__container">
+                Unable to load playercount
+            </div>
         </div>
         <div>
             <PlayButton />
@@ -69,6 +82,10 @@ export default defineComponent({
     color: rgb(168, 168, 168);
 }
 
+.fc-stats__container {
+    margin-top: 3px;
+}
+
 .fc_northstar__version, .fc_changelog__link {
     display: inline-block;
 }