Do not look at this commit 👀

You shouldn't have looked
ValoSpectra · Feb 3, 2025 · 8d0d044 · 8d0d044
1 parent 4bde3c3
commit 8d0d044
Show file tree

Hide file tree

Showing 4 changed files with 119 additions and 10 deletions.
diff --git a/src/app/combat/playercard/playercard.component.html b/src/app/combat/playercard/playercard.component.html
@@ -25,7 +25,34 @@
       </div>
       <div class="info-container">
         <div class="shields-currency">
-          <app-shield-icon [type]="player.armorName" [side]="color"></app-shield-icon>
+          <app-shield-icon
+            [type]="player.armorName"
+            [side]="color"
+            [@healthChange]="player.armorName"
+            *ngIf="player.isAlive && !player.auxiliaryAvailable"
+          ></app-shield-icon>
+          <div
+            class="health-container"
+            [class]="side"
+            *ngIf="player.isAlive && player.auxiliaryAvailable"
+            [@deathAnimation]="player.isAlive"
+          >
+            <app-shield-icon
+              [type]="player.armorName"
+              [side]="color"
+              [@healthChange]="player.armorName"
+              *ngIf="side === 'left'"
+            ></app-shield-icon>
+            <div class="health-amount" [class]="color" [@healthChange]="player.health">
+              {{ player.health }}
+            </div>
+            <app-shield-icon
+              [type]="player.armorName"
+              [side]="color"
+              [@healthChange]="player.armorName"
+              *ngIf="side === 'right'"
+            ></app-shield-icon>
+          </div>
           <div class="currency-container" [class]="side">
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -41,7 +68,13 @@
                 [attr.fill]="colorHex"
               />
             </svg>
-            <div class="currency-title" [class]="color">{{ player.money }}</div>
+            <div
+              class="currency-title"
+              [class]="color"
+              [style.font-size.px]="player.auxiliaryAvailable ? 11 : 14"
+            >
+              {{ player.money }}
+            </div>
           </div>
         </div>
         <div class="username-container">
@@ -53,6 +86,13 @@
           />
         </div>
       </div>
+      <div
+        class="health-bar"
+        [class]="color"
+        [style.width.%]="player.health * 0.88 + 12"
+        [@deathAnimation]="player.isAlive"
+        *ngIf="player.isAlive"
+      ></div>
     </div>
     <div
       class="utility-container"

diff --git a/src/app/combat/playercard/playercard.component.scss b/src/app/combat/playercard/playercard.component.scss
@@ -170,19 +170,15 @@
   display: flex;
   flex-direction: column;
   width: 160px;
-  height: 74px;
+  height: 76px;
   align-items: flex-start;
   justify-content: flex-end;
   gap: 4px;
   padding: 0px 0px 2px 32px;
   position: relative;
-  border-bottom-width: 2px;
-  border-bottom-style: solid;
-  overflow: hidden;
 
   &.defender {
     @extend .player-info;
-    border-color: var(--defender-color-shield-currency);
     background: linear-gradient(
         90deg,
         rgba(var(--defender-color-rgb), 0.3) 0%,
@@ -193,7 +189,6 @@
 
   &.attacker {
     @extend .player-info;
-    border-color: var(--attacker-color-shield-currency);
     background: linear-gradient(
         90deg,
         rgba(var(--attacker-color-rgb), 0.5) 0%,
@@ -247,7 +242,7 @@
 .shields-currency {
   display: inline-flex;
   height: 20px;
-  align-items: center;
+  align-items: flex-end;
   gap: 6px;
   position: relative;
 }
@@ -290,7 +285,7 @@
   opacity: 0.8;
   font-family: "Montserrat", Helvetica;
   font-weight: 700;
-  font-size: 14px;
+  font-size: 11px;
   text-align: center;
   letter-spacing: 0;
   line-height: normal;
@@ -326,3 +321,66 @@
   line-height: normal;
   white-space: nowrap;
 }
+
+app-shield-icon {
+  position: relative;
+  width: 20px;
+  height: 20px;
+  flex: 0 0 auto;
+}
+
+.health-container {
+  display: inline-flex;
+  height: 20px;
+  width: 62px;
+  align-items: center;
+  gap: 4px;
+  position: relative;
+  overflow: hidden;
+
+  &.right {
+    @extend .health-container;
+    justify-content: flex-end;
+  }
+}
+
+.health-amount {
+  position: relative;
+  width: fit-content;
+  opacity: 0.8;
+  font-family: "Montserrat", Helvetica;
+  font-weight: 800;
+  font-size: 20px;
+  text-align: center;
+  letter-spacing: 0;
+  line-height: normal;
+  white-space: nowrap;
+
+  &.attacker {
+    @extend .health-amount;
+    color: var(--attacker-color-shield-currency);
+  }
+
+  &.defender {
+    @extend .health-amount;
+    color: var(--defender-color-shield-currency);
+  }
+}
+
+.health-bar {
+  position: absolute;
+  height: 3px;
+  left: 0;
+  bottom: 0;
+  transition: width 0.2s ease-out;
+
+  &.attacker {
+    @extend .health-bar;
+    background-color: var(--attacker-color-shield-currency);
+  }
+
+  &.defender {
+    @extend .health-bar;
+    background-color: var(--defender-color-shield-currency);
+  }
+}
diff --git a/src/app/combat/playercard/playercard.component.ts b/src/app/combat/playercard/playercard.component.ts
@@ -37,6 +37,12 @@ import { Config } from "../../shared/config";
         animate("150ms", style({ opacity: 0 })),
       ]),
     ]),
+    trigger("healthChange", [
+      transition("* <=> *", [
+        style({ opacity: "0", filter: "brightness(80%)" }),
+        animate("200ms", style({ opacity: "1" })),
+      ]),
+    ]),
   ],
 })
 export class InhouseTrackerPlayercardComponent {

diff --git a/src/app/testing/player-controller/player-controller.component.ts b/src/app/testing/player-controller/player-controller.component.ts
@@ -68,9 +68,11 @@ export class PlayerControllerComponent implements OnDestroy {
     ultReady: false,
     hasSpike: false,
     scoreboardAvailable: true,
+    auxiliaryAvailable: true,
     kills: 0,
     deaths: 0,
     assists: 0,
+    health: 100,
   };
 
   constructor() {
@@ -99,11 +101,13 @@ export class PlayerControllerComponent implements OnDestroy {
     this.playerObject.isAlive = false;
     this.stopSpectate();
     this.playerObject.armorName = this.armorOrder[3];
+    this.playerObject.health = 0;
   }
 
   revive(): void {
     this.playerObject.isAlive = true;
     this.playerObject.armorName = this.armorOrder[0];
+    this.playerObject.health = 100;
   }
 
   giveUltPoint(): void {
@@ -165,6 +169,7 @@ export class PlayerControllerComponent implements OnDestroy {
     i++;
     i %= this.armorOrder.length;
     this.playerObject.armorName = this.armorOrder[i];
+    this.playerObject.health = Math.floor(Math.random() * 100) + 1;
   }
 
   changeStats(): void {