Add Hp bar for mob and Boss

src/app/games/massive-darkness2/boss-fight/boss-fight.component.html

@@ -3,15 +3,31 @@
         {{boss.name}}
         <button nbButton hero status="primary" (click)="activate()">Action</button>
     </nb-card-header>
-    <nb-card-body>
+    <nb-card-body class="g-overflow-hidden">
         <div class="row">
             <div class="col-md-5">
-                <img src="{{boss.standUrl}}" class="w-100 g-max-height-80vh">
+                <!-- <img src="{{boss.standUrl}}" class="w-100 bossStandImg"> -->
+
+                <md2-mob-stand-info [mob]="boss.info" [mode]="MobDlgType.PreView"></md2-mob-stand-info>
+                <!-- HP and Mana Bars -->
+                <div class="hero-stats-overlay">
+                    <div class="stat-bar-overlay hp-bar-overlay">
+                        <div class="stat-bar-label-overlay">
+                            <md2-icon [icon]="MD2Icon.HP_Color" size="sm"></md2-icon>
+                            <span class="stat-value-overlay">{{boss.info.unitRemainHp}}/{{boss.info.hp}}</span>
+                        </div>
+                        <div class="stat-progress-bar-overlay">
+                            <div class="stat-progress-fill-overlay hp-fill-overlay"
+                                [style.width.%]="(boss.info.unitRemainHp / boss.info.hp) * 100">
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
             <div class="col-md-7">
                 <div class="row">
                     <div class="col-md">
-                        <adj-number-input name="mob{{boss.info.name}}" [(ngModel)]="boss.info.hp" minimum="0"
+                        <adj-number-input name="mob{{boss.info.name}}" [(ngModel)]="boss.info.unitRemainHp" minimum="0"
                             class="mb-3" title="Boss HP" (hitMinimum)="WIN()">
                         </adj-number-input>
                         <md2-mob-attack-info [mob]="boss.info">

src/app/games/massive-darkness2/boss-fight/boss-fight.component.scss

@@ -2,3 +2,131 @@ nb-card {
     height: 80vh;
     //width: 80vw;
 }
+.bossStandImg {
+    max-height: 67vh;
+    object-fit: contain;
+}
+// HP and Mana Bars Overlay
+.hero-stats-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    padding: 0.5rem;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 70%, transparent 100%);
+    border-radius: 0 0 8px 8px;
+    z-index: 2;
+    width: 95%;
+    @media (max-height: 450px) and (orientation: landscape) {
+        padding: 0.35rem;
+    }
+}
+
+.stat-bar-overlay {
+    margin-bottom: 0.5rem;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+
+    @media (max-height: 450px) and (orientation: landscape) {
+        margin-bottom: 0.35rem;
+    }
+}
+
+.stat-bar-label-overlay {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0.25rem;
+    gap: 0.5rem;
+
+    md2-icon {
+        flex-shrink: 0;
+        width: 18px;
+        height: 18px;
+    }
+
+    .stat-value-overlay {
+        color: white;
+        font-size: 0.75rem;
+        font-weight: 600;
+        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
+        flex-shrink: 0;
+    }
+
+    @media (max-height: 450px) and (orientation: landscape) {
+        margin-bottom: 0.15rem;
+        gap: 0.3rem;
+
+        md2-icon {
+            width: 14px;
+            height: 14px;
+        }
+
+        .stat-value-overlay {
+            font-size: 0.65rem;
+        }
+    }
+}
+
+.stat-progress-bar-overlay {
+    width: 100%;
+    height: 20px;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+
+    @media (max-height: 450px) and (orientation: landscape) {
+        height: 16px;
+        border-radius: 8px;
+    }
+}
+
+.stat-progress-fill-overlay {
+    height: 100%;
+    border-radius: 10px;
+    transition: width 0.5s ease-out;
+    position: relative;
+    overflow: hidden;
+
+    @media (max-height: 450px) and (orientation: landscape) {
+        border-radius: 8px;
+    }
+
+    &::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+        animation: shimmer 2s infinite;
+    }
+
+    &.full-stat {
+        width: 100%;
+    }
+}
+
+.hp-fill-overlay {
+    background: linear-gradient(90deg, #ff6b6b, #ee5a6f);
+    box-shadow: 0 0 8px rgba(238, 90, 111, 0.6);
+}
+
+.mp-fill-overlay {
+    background: linear-gradient(90deg, #4ecdc4, #44a08d);
+    box-shadow: 0 0 8px rgba(68, 160, 141, 0.6);
+}
+
+@keyframes shimmer {
+    0% {
+        transform: translateX(-100%);
+    }
+    100% {
+        transform: translateX(100%);
+    }
+}

src/app/games/massive-darkness2/boss-fight/boss-fight.component.ts

@@ -17,8 +17,8 @@ import { SpawnMobDlgComponent } from '../mobs/spawn-mob-dlg/spawn-mob-dlg.compon
   styleUrls: ['./boss-fight.component.scss']
 })
 export class BossFightComponent extends MD2ComponentBase {
-
+  MobDlgType = MobDlgType;
-
+  MD2Icon = MD2Icon;
   public get boss() {
     return this.md2Service.info.boss;
   }
@@ -65,8 +65,8 @@ export class BossFightComponent extends MD2ComponentBase {
         if (mobResult) {
           let attackDamage = mobResult.uiWounds;
           if (attackDamage) {
-            this.boss.info.hp -= attackDamage;
+            this.boss.info.unitRemainHp -= attackDamage;
-            if (this.boss.info.hp <= 0) {
+            if (this.boss.info.unitRemainHp <= 0) {
               this.WIN();
             }
             this.cdRef.detectChanges();

src/app/games/massive-darkness2/mobs/mob-stand-info/mob-stand-info.component.html

@@ -6,3 +6,17 @@
     <img class="mobImg mobMinion" src="{{mob.minionImgUrl}}" (click)="showMobImage(mob)" *ngIf="mob.mobAmount>1" />
 
 </div>
+
+<!-- HP and Mana Bars -->
+<div class="hero-stats-overlay">
+    <div class="stat-bar-overlay hp-bar-overlay">
+        <div class="stat-bar-label-overlay">
+            <md2-icon [icon]="MD2Icon.HP_Color" size="sm"></md2-icon>
+            <span class="stat-value-overlay">{{mob.unitRemainHp}}/{{mob.hp}}</span>
+        </div>
+        <div class="stat-progress-bar-overlay">
+            <div class="stat-progress-fill-overlay hp-fill-overlay" [style.width.%]="(mob.unitRemainHp / mob.hp) * 100">
+            </div>
+        </div>
+    </div>
+</div>

src/app/games/massive-darkness2/mobs/mob-stand-info/mob-stand-info.component.scss

@@ -29,3 +29,128 @@
     position: relative;
     z-index: 1;
 }
+
+// HP and Mana Bars Overlay
+.hero-stats-overlay {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 0.5rem;
+    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 70%, transparent 100%);
+    border-radius: 0 0 8px 8px;
+    z-index: 1;
+    width: 95%;
+    @media (max-height: 450px) and (orientation: landscape) {
+        padding: 0.35rem;
+    }
+}
+
+.stat-bar-overlay {
+    margin-bottom: 0.5rem;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+
+    @media (max-height: 450px) and (orientation: landscape) {
+        margin-bottom: 0.35rem;
+    }
+}
+
+.stat-bar-label-overlay {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0.25rem;
+    gap: 0.5rem;
+
+    md2-icon {
+        flex-shrink: 0;
+        width: 18px;
+        height: 18px;
+    }
+
+    .stat-value-overlay {
+        color: white;
+        font-size: 0.75rem;
+        font-weight: 600;
+        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
+        flex-shrink: 0;
+    }
+
+    @media (max-height: 450px) and (orientation: landscape) {
+        margin-bottom: 0.15rem;
+        gap: 0.3rem;
+
+        md2-icon {
+            width: 14px;
+            height: 14px;
+        }
+
+        .stat-value-overlay {
+            font-size: 0.65rem;
+        }
+    }
+}
+
+.stat-progress-bar-overlay {
+    width: 100%;
+    height: 20px;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+
+    @media (max-height: 450px) and (orientation: landscape) {
+        height: 16px;
+        border-radius: 8px;
+    }
+}
+
+.stat-progress-fill-overlay {
+    height: 100%;
+    border-radius: 10px;
+    transition: width 0.5s ease-out;
+    position: relative;
+    overflow: hidden;
+
+    @media (max-height: 450px) and (orientation: landscape) {
+        border-radius: 8px;
+    }
+
+    &::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+        animation: shimmer 2s infinite;
+    }
+
+    &.full-stat {
+        width: 100%;
+    }
+}
+
+.hp-fill-overlay {
+    background: linear-gradient(90deg, #ff6b6b, #ee5a6f);
+    box-shadow: 0 0 8px rgba(238, 90, 111, 0.6);
+}
+
+.mp-fill-overlay {
+    background: linear-gradient(90deg, #4ecdc4, #44a08d);
+    box-shadow: 0 0 8px rgba(68, 160, 141, 0.6);
+}
+
+@keyframes shimmer {
+    0% {
+        transform: translateX(-100%);
+    }
+    100% {
+        transform: translateX(100%);
+    }
+}