From 23e6da28089e6f8ccc4fcbbb1db8e90e379b3216 Mon Sep 17 00:00:00 2001
From: Chris Chen <yuanson.ch@gmail.com>
Date: Wed, 5 Nov 2025 16:39:48 -0800
Subject: [PATCH] WIP

---
 .../hero-dashboard.component.html             | 50 ++++++++-----
 .../hero-dashboard.component.scss             | 70 +++++++++++++++++++
 .../mob-def-info/mob-def-info.component.html  |  4 +-
 .../mob-def-info/mob-def-info.component.ts    |  3 +
 4 files changed, 108 insertions(+), 19 deletions(-)

diff --git a/src/app/games/massive-darkness2/hero-dashboard/hero-dashboard.component.html b/src/app/games/massive-darkness2/hero-dashboard/hero-dashboard.component.html
index 75870af..95565ad 100644
--- a/src/app/games/massive-darkness2/hero-dashboard/hero-dashboard.component.html
+++ b/src/app/games/massive-darkness2/hero-dashboard/hero-dashboard.component.html
@@ -39,24 +39,40 @@
                         </div>
                         <!-- <img class="MD2HeroCard " src="{{imgUrl('Heros/'+className+'.jpg')}}" (click)="toggleFlip()"> -->
 
-                        <div class="d-none d-sm-block">
-                            <div *ngIf="hero.uiActivating&&hero.remainActions>0">
-                                <button nbButton hero class="mr-2" status="info" (click)="moveAction()"
-                                    *ngIf="!showMoveAction">Move</button>
-                                <button nbButton hero class="mr-2" status="info" (click)="moveActionEnd()"
-                                    *ngIf="showMoveAction">Move
-                                    End</button>
-                                <button nbButton hero class="mr-2" status="danger" (click)="action('attackAction')"
-                                    *ngIf="!showMoveAction&&allowAttack">Attack!</button>
-                                <button nbButton hero class="mr-2" status="info" (click)="action('tradeAction')"
-                                    *ngIf="!showMoveAction">Trade</button>
-                                <button nbButton hero status="success" (click)="action('recoveryAction')"
-                                    *ngIf="!showMoveAction">Recovery</button>
+                        <!-- Action Buttons (Desktop/Landscape) -->
+                        <div class="hero-actions d-none d-sm-block">
+                            <div class="action-buttons-group" *ngIf="hero.uiActivating && hero.remainActions > 0">
+                                <button nbButton hero class="action-btn" status="info" (click)="moveAction()"
+                                    *ngIf="!showMoveAction">
+                                    <nb-icon icon="arrow-forward-outline" class="mr-1"></nb-icon>
+                                    Move
+                                </button>
+                                <button nbButton hero class="action-btn" status="info" (click)="moveActionEnd()"
+                                    *ngIf="showMoveAction">
+                                    <nb-icon icon="checkmark-outline" class="mr-1"></nb-icon>
+                                    End Move
+                                </button>
+                                <button nbButton hero class="action-btn" status="danger"
+                                    (click)="action('attackAction')" *ngIf="!showMoveAction && allowAttack">
+                                    <nb-icon icon="flash-outline" class="mr-1"></nb-icon>
+                                    Attack!
+                                </button>
+                                <button nbButton hero class="action-btn" status="info" (click)="action('tradeAction')"
+                                    *ngIf="!showMoveAction">
+                                    <nb-icon icon="swap-outline" class="mr-1"></nb-icon>
+                                    Trade
+                                </button>
+                                <button nbButton hero class="action-btn" status="success"
+                                    (click)="action('recoveryAction')" *ngIf="!showMoveAction">
+                                    <nb-icon icon="heart-outline" class="mr-1"></nb-icon>
+                                    Recovery
+                                </button>
                             </div>
-
-
-                            <button nbButton hero fullWidth status="info" *ngIf="allowStartAction"
-                                (click)="startActivation()">Start Activation</button>
+                            <button nbButton hero fullWidth status="info" class="start-activation-btn"
+                                *ngIf="allowStartAction" (click)="startActivation()">
+                                <nb-icon icon="play-circle-outline" class="mr-2"></nb-icon>
+                                Start Activation
+                            </button>
                         </div>
                     </div>
                     <div class="tp-box__side tp-box__back">
diff --git a/src/app/games/massive-darkness2/hero-dashboard/hero-dashboard.component.scss b/src/app/games/massive-darkness2/hero-dashboard/hero-dashboard.component.scss
index 17e2364..914a117 100644
--- a/src/app/games/massive-darkness2/hero-dashboard/hero-dashboard.component.scss
+++ b/src/app/games/massive-darkness2/hero-dashboard/hero-dashboard.component.scss
@@ -255,6 +255,76 @@
 .shadow-skill-content {
     color: #6c757d;
 }
+
+// Action Buttons Section
+.hero-actions {
+    padding: 0.75rem;
+    border-top: 2px solid #e9ecef;
+    margin-top: auto;
+
+    @media (max-height: 450px) and (orientation: landscape) {
+        padding: 0.5rem;
+        border-top-width: 1px;
+    }
+}
+
+.action-buttons-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-bottom: 0.75rem;
+
+    @media (max-height: 450px) and (orientation: landscape) {
+        gap: 0.25rem;
+        margin-bottom: 0.5rem;
+        flex-wrap: nowrap;
+    }
+}
+
+.action-btn {
+    flex: 1;
+    min-width: 100px;
+    min-height: 40px;
+    border-radius: 8px;
+    font-weight: 600;
+    font-size: 0.875rem;
+    transition: all 0.3s;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+    &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+    }
+
+    @media (max-height: 450px) and (orientation: landscape) {
+        min-width: 70px;
+        min-height: 36px;
+        font-size: 0.75rem;
+        padding: 0.35rem 0.5rem;
+    }
+}
+
+.start-activation-btn {
+    border-radius: 8px;
+    font-weight: 600;
+    padding: 0.75rem;
+    min-height: 44px;
+    font-size: 0.95rem;
+    transition: all 0.3s;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+
+    &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    }
+
+    @media (max-height: 450px) and (orientation: landscape) {
+        padding: 0.5rem;
+        min-height: 36px;
+        font-size: 0.8rem;
+    }
+}
+
 .tp-box__front {
     -webkit-transform: rotateY(0deg);
     -ms-transform: rotateY(0deg);
diff --git a/src/app/games/massive-darkness2/mobs/mob-detail-info/mob-def-info/mob-def-info.component.html b/src/app/games/massive-darkness2/mobs/mob-detail-info/mob-def-info/mob-def-info.component.html
index a7999f9..13bb2a3 100644
--- a/src/app/games/massive-darkness2/mobs/mob-detail-info/mob-def-info/mob-def-info.component.html
+++ b/src/app/games/massive-darkness2/mobs/mob-detail-info/mob-def-info/mob-def-info.component.html
@@ -5,12 +5,12 @@
             <md2-icon icon="defense" size="lg"></md2-icon>
         </div>
         <div class="col-md-8">
-            <div *ngIf="mob.defenseInfo.blue" class="g-height-45">
+            <div *ngIf="mob.defenseInfo?.blue" class="g-height-45">
                 <span class="MD2Icon Blue dice g-font-size-50">
                     <span class="MD2text diceAmount">x{{mob.defenseInfo.blue}}</span>
                 </span>
             </div>
-            <div *ngIf="mob.defenseInfo.black" class="g-height-45 mt-1">
+            <div *ngIf="mob.defenseInfo?.black" class="g-height-45 mt-1">
                 <span class="MD2Icon Black dice g-font-size-50">
                     <span class="MD2text diceAmount">x{{mob.defenseInfo.black}}</span>
                 </span>
diff --git a/src/app/games/massive-darkness2/mobs/mob-detail-info/mob-def-info/mob-def-info.component.ts b/src/app/games/massive-darkness2/mobs/mob-detail-info/mob-def-info/mob-def-info.component.ts
index ec84b00..7a4f488 100644
--- a/src/app/games/massive-darkness2/mobs/mob-detail-info/mob-def-info/mob-def-info.component.ts
+++ b/src/app/games/massive-darkness2/mobs/mob-detail-info/mob-def-info/mob-def-info.component.ts
@@ -38,6 +38,9 @@ export class MobDefInfoComponent implements OnInit {
         this.display = false;
         break;
     }
+    if (!this.mob.defenseInfo || this.mob.defenseInfo.blue == 0 && this.mob.defenseInfo.black == 0) {
+      this.display = false;
+    }
   }
 
 }