Add player count display with periodic updates to home page

frontend/src/app/pages/home/home.component.html

@@ -14,8 +14,11 @@
   </app-header>
   <main>
     <section id="scrollingpoint" style="background: #202020; text-align: center; padding: 80px 0;">
-        <!--      TODO load player count from old api or backend?-->
+      @if (this.playerCount() === null) {
         <h2 style="color: white;"><span class="player-count">Loading...</span></h2>
+      } @else {
+        <h2 style="color: white;"><span class="player-count">{{ playerCount() }}</span></h2>
+      }
       <h2 style="color: white;">Server IP: play.alttd.com</h2>
       <div style="padding-top: 35px;">
         <app-copy-ip></app-copy-ip>

frontend/src/app/pages/home/home.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, inject, OnDestroy, OnInit, signal} from '@angular/core';
 import {Title} from '@angular/platform-browser';
 import {ALTITUDE_VERSION} from '@custom-types/constant';
 import {ScrollService} from '@services/scroll.service';
@@ -7,6 +7,16 @@ import {HeaderComponent} from '@header/header.component';
 import {CopyIpComponent} from '@shared-components/copy-ip/copy-ip.component';
 import {RouterLink} from '@angular/router';
 import {JwtHelperService} from '@auth0/angular-jwt';
+import {interval, map} from 'rxjs';
+import {HttpClient} from '@angular/common/http';
+import {startWith} from 'rxjs/operators';
+
+interface MinecraftServerStatus {
+  online?: boolean;
+  players?: {
+    online?: number;
+  };
+}
 
 @Component({
   standalone: true,
@@ -24,9 +34,16 @@ import {JwtHelperService} from '@auth0/angular-jwt';
   templateUrl: './home.component.html',
   styleUrl: './home.component.scss'
 })
-export class HomeComponent implements OnInit {
-  constructor(private titleService: Title, public scrollService: ScrollService) {
-  }
+export class HomeComponent implements OnInit, OnDestroy {
+  private httpClient = inject(HttpClient);
+  private titleService = inject(Title);
+  public scrollService = inject(ScrollService);
+  public playerCount = signal<null | number>(null);
+  private playerCountUpdateInterval = interval(60000).pipe(
+    startWith(() => 0),
+  ).subscribe(() => {
+    this.updatePlayerCount();
+  });
 
   private slides: string[] = ["/public/img/backgrounds/caruselimage2.png",
     "/public/img/backgrounds/caruselimage4.png",
@@ -44,6 +61,10 @@ export class HomeComponent implements OnInit {
     this.randomizeSlides()
   }
 
+  ngOnDestroy(): void {
+    this.playerCountUpdateInterval.unsubscribe();
+  }
+
   private randomizeSlides(): void {
     const array = [...this.slides];
 
@@ -108,5 +129,15 @@ export class HomeComponent implements OnInit {
     }
   }
 
+  private updatePlayerCount() {
+    this.httpClient.get<MinecraftServerStatus>('https://api.mcsrvstat.us/2/play.alttd.com').pipe(
+      map(response => {
+        if (response.online && response.players && response.players.online) {
+          this.playerCount.set(response.players.online);
+        }
+      })
+    ).subscribe();
+  }
+
   protected readonly ALTITUDE_VERSION = ALTITUDE_VERSION;
 }