Merge pull request #11 from TheMatrixNetwork/fix/frontend

fix: fix heart columns and skin size

Author: d4rpx1

frontend/src/app/auth.service.ts

@@ -45,6 +45,17 @@ export class AuthService {
     return this._cookieService.get("token");
   }
 
+  public getUsername() {
+    let token = this._cookieService.get("token");
+
+    if(token) {
+      let decodedJWT = JSON.parse(window.atob(token.split('.')[1]));
+      return decodedJWT.username;
+    }
+
+    return ''
+  }
+
   public isLoggedIn(): boolean {
     let token = this._cookieService.get("token");
     return token != null && !this.jwtHelper.isTokenExpired(token);

frontend/src/app/components/player-status/player-status.component.html

@@ -58,11 +58,16 @@
     </div>
   </div>
   <div class="flex items-center flex-col mt-8">
-    <h1 style="font-size: 30px">S1mple133</h1>
+    <h1 style="font-size: 30px">{{username}}</h1>
     <div id="skinContainer"></div>
-    <div class="flex justify-between items-center mt-4">
-      <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 class="flex items-start flex-col">
+      <div *ngFor="let i of heartRows" class="flex justify-between items-center mt-4">
+        <img *ngFor="let i of heartHeartsPerRowArr" ngSrc="assets/img/minecraft-heart.webp" width="20" height="20">
+        <!--<img *ngFor="let i of [1,2,3]" ngSrc="assets/img/minecraft-heart-black.png" width="35" height="35" >-->
+      </div>
+      <div class="flex justify-between items-start mt-4">
+        <img *ngFor="let i of heartsInLastRow" ngSrc="assets/img/minecraft-heart.webp" width="20" height="20">
+      </div>
     </div>
   </div>
 </div>

frontend/src/app/components/player-status/player-status.component.ts

@@ -33,8 +33,13 @@ export class PlayerStatusComponent implements OnInit, OnChanges {
     element: "",
     matrik: 0
   }
-  heartRows: number[] = []
+  heartHeartsPerRowArr: number[] = []
+  heartRows: number[] = [];
   @Input() playerName: string = '';
+  username: string = '';
+  heartsInLastRow: number[] = [];
+
+  HEALTH_HEARTS_PER_ROW = 10;
 
   constructor(private _authService: AuthService,
               private _statsService: StatsService) {
@@ -52,25 +57,42 @@ export class PlayerStatusComponent implements OnInit, OnChanges {
   updateData(playerName: string) {
     if(playerName == '') {
       this._statsService.getSkinName().subscribe((skin: any) => {
-        genSkin(skin.skin, 300, 500);
+        genSkin(skin.skin, 300, 350);
       });
 
       this._statsService.getLatestPlayerStats().subscribe(stats => {
         this.latestPlayerStats = stats;
-        while(this.heartRows.length < stats.health) {
-          this.heartRows.push(0)
-        }
+        this.calculateHealthRows(this.latestPlayerStats.health);
       })
+
+      this.username = this._authService.getUsername()
     }
     else {
-      genSkin(playerName, 300, 500);
+      genSkin(playerName, 300, 350);
 
       this._statsService.getMatrixDexPlayerStats(playerName).subscribe(stats => {
         this.latestPlayerStats = stats;
-        while(this.heartRows.length < stats.health) {
-          this.heartRows.push(0)
-        }
+        this.calculateHealthRows(this.latestPlayerStats.health);
       })
+
+      this.username = playerName
+    }
+  }
+
+  private calculateHealthRows(health: number) {
+    health = 25
+    const amountFullRows = Math.floor(health / this.HEALTH_HEARTS_PER_ROW);
+    const amountHearthsInLastRow = health-(amountFullRows*this.HEALTH_HEARTS_PER_ROW)
+    while (this.heartHeartsPerRowArr.length < this.HEALTH_HEARTS_PER_ROW ) {
+      this.heartHeartsPerRowArr.push(0)
+    }
+    this.heartRows = [];
+    while (this.heartRows.length < amountFullRows ) {
+      this.heartRows.push(0)
+    }
+    this.heartsInLastRow = [];
+    while (this.heartsInLastRow.length < amountHearthsInLastRow ) {
+      this.heartsInLastRow.push(0)
     }
   }
 

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

@@ -6,9 +6,6 @@ import {DOCUMENT, NgFor} from "@angular/common";
 import {PlayerStats} from "../models/player-stats";
 import { NgForm } from '@angular/forms';
 import {PlayerKill} from "../models/player-kill";
-
-declare const genSkin: any;
-
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',