feat: added live data for basic stats

Author: d4rpx1

frontend/src/app/app.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { HttpClientModule } from '@angular/common/http';
+import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -12,6 +12,7 @@ import { HomeComponent } from './home/home.component';
 import {CookieModule} from "ngx-cookie";
 import {JWT_OPTIONS, JwtHelperService} from "@auth0/angular-jwt";
 import {NgOptimizedImage} from "@angular/common";
+import {AddHeaderInterceptor} from "./interceptor/backend-interceptor";
 
 @NgModule({
   declarations: [
@@ -33,7 +34,12 @@ import {NgOptimizedImage} from "@angular/common";
   exports: [
   ],
   providers:[{ provide: JWT_OPTIONS, useValue: JWT_OPTIONS },
-    JwtHelperService],
+    JwtHelperService,
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: AddHeaderInterceptor,
+      multi: true,
+    }],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

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

@@ -15,53 +15,53 @@
       <div>
         <div class="flex justify-between items-center">
           <img ngSrc="assets/img/icons8-minecraft-schwert-48.png" width="45" height="40">
-          <p style="font-size: 35px;" class="ml-4">90</p>
+          <p style="font-size: 35px;" class="ml-4">--</p>
         </div>
         <div class="flex justify-between items-center mt-4">
           <img ngSrc="assets/img/money.png" class="mr-5" width="45" height="40">
-          <p style="font-size: 35px;" class="ml-4">2000$</p>
+          <p style="font-size: 35px;" class="ml-4">{{latestPlayerStats.money}}$</p>
         </div>
         <div class="flex justify-between items-center mt-4">
           <img ngSrc="assets/img/minecraft-food.png" width="45" height="40">
-          <p style="font-size: 35px;" class="ml-4">7</p>
+          <p style="font-size: 35px;" class="ml-4">{{latestPlayerStats.foodLevel}}</p>
         </div>
         <div class="flex justify-between items-center mt-4">
           <img ngSrc="assets/img/experience-orb.webp" width="45" height="40">
-          <p style="font-size: 35px;" class="ml-4">1300</p>
+          <p style="font-size: 35px;" class="ml-4">{{latestPlayerStats.exp}}</p>
         </div>
       </div>
       <div    class="inline-block h-[320px] min-h-[1em] w-0.5 self-stretch bg-black opacity-100"></div>
       <div>
         <div class="flex justify-between items-center">
           <img ngSrc="assets/img/Slimeball_JE2_BE2.webp" width="45" height="40">
-          <p style="font-size: 35px;" class="ml-4">25</p>
+          <p style="font-size: 35px;" class="ml-4">{{latestPlayerStats.sfLevel}}</p>
         </div>
         <div class="flex justify-between items-center mt-4">
           <img ngSrc="assets/img/minecraft-diamond.webp" width="45" height="40">
-          <p style="font-size: 35px;" class="ml-4">4</p>
+          <p style="font-size: 35px;" class="ml-4">{{latestPlayerStats.threatTier}}</p>
         </div>
         <div class="flex justify-between items-center mt-4">
           <img ngSrc="assets/img/crossed-swords.png" width="45" height="40">
-          <p style="font-size: 35px;" class="ml-4">10</p>
+          <p style="font-size: 35px;" class="ml-4">{{latestPlayerStats.guildRank}}</p>
         </div>
         <div class="flex justify-between items-center mt-4">
           <img ngSrc="assets/img/medal.png" width="50" height="50">
-          <p style="font-size: 35px;" class="ml-4">19</p>
+          <p style="font-size: 35px;" class="ml-4">{{latestPlayerStats.prestige}}</p>
         </div>
       </div>
       <div class="inline-block h-[320px] min-h-[1em] w-0.5 self-stretch bg-black opacity-100"></div>
       <div>
         <div class="flex justify-between items-center">
           <img ngSrc="assets/img/mcmmo.jpeg" width="45" height="40">
-          <p style="font-size: 35px;" class="ml-4">147</p>
+          <p style="font-size: 35px;" class="ml-4">--</p>
         </div>
         <div class="flex justify-between items-center mt-4">
           <img ngSrc="assets/img/potion.webp" width="45" height="40">
-          <p style="font-size: 35px;" class="ml-4">15</p>
+          <p style="font-size: 35px;" class="ml-4">--</p>
         </div>
         <div class="flex justify-between items-center mt-4">
           <img ngSrc="assets/img/skills.png" width="50" height="60">
-          <p style="font-size: 35px;" class="ml-4">73</p>
+          <p style="font-size: 35px;" class="ml-4">--</p>
         </div>
         <div class="flex justify-between items-center mt-4">
           <p style="font-size: 35px;" class="ml-4 text-white" >.</p>
@@ -72,8 +72,8 @@
       <h1 style="font-size: 30px">S1mple133</h1>
       <div id="skinContainer"></div>
       <div class="flex justify-between items-center mt-4">
-        <img *ngFor="let i of [1,2,3,4,5,6,7]" ngSrc="assets/img/minecraft-heart.webp" width="35" height="35">
-        <img *ngFor="let i of [1,2,3]" ngSrc="assets/img/minecraft-heart-black.png" width="35" height="35" >
+        <img *ngFor="let i of heartRows" ngSrc="assets/img/minecraft-heart.webp" width="35" height="35">
+        <!--<img *ngFor="let i of [1,2,3]" ngSrc="assets/img/minecraft-heart-black.png" width="35" height="35" >-->
       </div>
     </div>
   </div>

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

@@ -3,6 +3,7 @@ import {AuthService} from "../auth.service";
 import {StatsService} from "../stats.service";
 import {Router} from "@angular/router";
 import {DOCUMENT} from "@angular/common";
+import {PlayerStats} from "../models/player-stats";
 
 declare const genSkin: any;
 
@@ -17,13 +18,39 @@ export class HomeComponent implements OnInit {
   constructor(private _authService: AuthService,
               private _statsService: StatsService) { }
 
+  latestPlayerStats: PlayerStats = {
+    exp: 0,
+    foodLevel: 0,
+    loc_x: 0,
+    loc_y: 0,
+    loc_z: 0,
+    money: 0,
+    health: 0,
+    gamemode: "",
+    lastDamageCause: "",
+    remainingAir: 0,
+    timeStamp: "",
+    guildRank: 0,
+    threatTier: 0,
+    sfLevel: 0,
+    prestige: 0
+  }
+  heartRows: number[] = []
+
 
   ngOnInit(): void {
     this._statsService.getSkinName().subscribe((skin: any) => {
       console.log(skin.skin);
 
       genSkin(skin.skin, 300, 500);
     });
+
+    this._statsService.getLatestPlayerStats().subscribe(stats => {
+      this.latestPlayerStats = stats;
+      while(this.heartRows.length < stats.health) {
+        this.heartRows.push(0)
+      }
+    })
   }
 
 }

frontend/src/app/interceptor/backend-interceptor.ts

@@ -0,0 +1,23 @@
+import {
+  HttpEvent,
+  HttpInterceptor,
+  HttpHandler,
+  HttpRequest, HttpHeaders,
+} from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { Injectable } from '@angular/core';
+import {AuthService} from "../auth.service";
+import {environment} from "../../environments/environment";
+
+@Injectable()
+export class AddHeaderInterceptor implements HttpInterceptor {
+  constructor(private _authService: AuthService) {
+  }
+  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    if(this._authService.getToken()) {
+      return next.handle(req
+        .clone({ headers: req.headers.append('Authorization', this._authService.getToken()!) }))
+    }
+    return next.handle(req);
+  }
+}

frontend/src/app/models/player-stats.ts

@@ -0,0 +1,17 @@
+export interface PlayerStats {
+  exp: number,
+  foodLevel: number,
+  loc_x: number,
+  loc_y: number,
+  loc_z: number,
+  money: number,
+  health: number,
+  gamemode: string,
+  lastDamageCause: string,
+  remainingAir: number,
+  timeStamp: string,
+  guildRank: number,
+  threatTier: number,
+  sfLevel: number,
+  prestige: number
+}

frontend/src/app/stats.service.ts

@@ -3,6 +3,7 @@ import {Observable} from "rxjs";
 import {HttpClient, HttpHeaders, HttpResponse} from "@angular/common/http";
 import {AuthService} from "./auth.service";
 import { environment } from 'src/environments/environment';
+import {PlayerStats} from "./models/player-stats";
 
 export interface Location {
   x: number;
@@ -26,42 +27,18 @@ export interface Account {
   password: string;
 }
 
-export interface PlayerStats {
-  username: string;
-  location: Location;
-  exp: number;
-  food_level: number;
-  money: number;
-  health: number;
-  gamemode: number;
-  last_damage_cause: string;
-  remaining_air: number;
-  timestamp: string;
-}
-
 @Injectable({
   providedIn: 'root'
 })
 export class StatsService {
   constructor(private http: HttpClient, private _authService: AuthService) { }
 
-  public getPlayerStats(playerName: string): Observable<MatrixPlayer> {
+  public getLatestPlayerStats(): Observable<PlayerStats> {
     //return this.http.get<PlayerStats>(`http://localhost:8080/api/stats/${playerName}`);
-    return this.http.get<MatrixPlayer>(environment.url + `/api/stats/${playerName}`);
+    return this.http.get<PlayerStats>(environment.url + `/api/stats/latest`);
   }
 
   public getSkinName(): any {
-    if(this._authService.getToken()) {
-      const httpOptions = {
-        headers: new HttpHeaders({
-          'Authorization':  this._authService.getToken()!,
-        })
-      };
-
-      return this.http.get<any>(environment.url + `/api/skin/`, httpOptions);
-    }
-    else {
       return this.http.get<any>(environment.url + `/api/skin/`);
-    }
   }
 }

frontend/src/environments/environment.ts

@@ -5,7 +5,7 @@
 
 export const environment = {
   production: false,
-  url: 'https://api.matrixnetwork.org',
+  url: 'http://localhost:8081',
 };
 
 /*

src/main/java/org/matrixnetwork/stats2/rest/StatsResource.java

@@ -17,7 +17,7 @@
 import javax.ws.rs.core.Response;
 import java.util.stream.Collectors;
 
-@Path("/org/matrixnetwork/stats2")
+@Path("stats")
 public class StatsResource {
     private JSONParser parser = new JSONParser();