WIP
This commit is contained in:
Chris Chen
parent
61604355c1
commit
23e6da2808
@ -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">
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user