Stable
This commit is contained in:
Chris Chen
@@ -7,18 +7,45 @@
|
||||
<div class="row no-gutters">
|
||||
<div class="col-12 col-sm-7">
|
||||
<div class="tp-wrapper mb-2">
|
||||
<div class="tp-box g-height-300 g-height-350--sm g-height-500--md" (click)="toggleFlip()"
|
||||
[@flipState]="flip">
|
||||
<div class="tp-box g-height-300 g-height-350--sm g-height-500--md" [@flipState]="flip">
|
||||
<div class="tp-box__side tp-box__front ">
|
||||
|
||||
<img class="MD2HeroCard " src="{{hero.imgUrl}}">
|
||||
<img class="MD2HeroCard " src="{{hero.imgUrl}}" (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>
|
||||
</div>
|
||||
|
||||
|
||||
<button nbButton hero fullWidth status="info" *ngIf="allowStartAction"
|
||||
(click)="startActivation()">Start Activation</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tp-box__side tp-box__back">
|
||||
<div class="row no-gutters">
|
||||
<div class="col-6">
|
||||
<img class="MD2HeroCard " src="{{imgUrl('Heros/Guide/'+className+'.jpg')}}"
|
||||
(click)="toggleFlip()">
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<img class="MD2HeroCard " src="{{imgUrl('Sets/Shadowbane/'+className+'.png')}}"
|
||||
(click)="toggleFlip()">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<img class="MD2HeroCard " src="{{imgUrl('Heros/Guide/'+className+'.jpg')}}">
|
||||
|
||||
<img class="MD2HeroCard " src="{{imgUrl('Sets/Shadowbane/'+className+'.png')}}">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -33,6 +60,7 @@
|
||||
<img class="MD2HeroCard" src="{{hero.imgUrl}}">
|
||||
<img class="MD2HeroCard HpMpBar" src="{{imgUrl('/Heros/Template/Border.png')}}">
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-5">
|
||||
@@ -41,72 +69,90 @@
|
||||
<div class="row no-gutters">
|
||||
<div class="col-6">
|
||||
|
||||
<!-- <adj-number-input name="heroHP" [(ngModel)]="hero.hp"
|
||||
[maximum]="hero.hpMaximum" minimum="0"
|
||||
title="{{iconHtml(MD2Icon.HP,'g-color-google-plus mr-1 g-font-size-18')}}HP" showMaximum
|
||||
(blur)="heroUpdateDebounceTimer.resetTimer()" (hitDecreasing)="increaseRage()">
|
||||
</adj-number-input> -->
|
||||
|
||||
|
||||
<adj-number-input name="heroHP" [(ngModel)]="hero.hp" [maximum]="hero.hpMaximum" minimum="0"
|
||||
title="{{imgHtml('HpIcon.png','g-height-25 mr-1')}}HP" showMaximum
|
||||
title="{{imgHtml('HpIcon.png','g-height-25')}}" showMaximum
|
||||
(blur)="heroUpdateDebounceTimer.resetTimer()" (hitDecreasing)="increaseRage()">
|
||||
</adj-number-input>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
|
||||
|
||||
<adj-number-input name="heroLevel" [(ngModel)]="hero.level" minimum="1" maximum="5"
|
||||
title="Level" (blur)="heroUpdateDebounceTimer.resetTimer()">
|
||||
</adj-number-input>
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
|
||||
<adj-number-input name="heroMana" [(ngModel)]="hero.mp" [maximum]="hero.mpMaximum"
|
||||
minimum="0" title="{{imgHtml('HeroIcon.png','g-height-25 mr-1')}}Mana" showMaximum
|
||||
minimum="0" title="{{imgHtml('HeroIcon.png','g-height-25')}}" showMaximum
|
||||
(blur)="heroUpdateDebounceTimer.resetTimer()">
|
||||
</adj-number-input>
|
||||
|
||||
</div>
|
||||
<div class="col-6">
|
||||
|
||||
<adj-number-input name="heroExp" [(ngModel)]="hero.exp" minimum="0" title="Exp"
|
||||
(blur)="heroUpdateDebounceTimer.resetTimer()">
|
||||
</adj-number-input>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
|
||||
<adj-number-input name="heroFire" [(ngModel)]="hero.fireToken" minimum="0"
|
||||
title="{{iconHtml(MD2Icon.Fire,'g-color-google-plus mr-1 g-font-size-18')}}Fire Token"
|
||||
(blur)="heroUpdateDebounceTimer.resetTimer()">
|
||||
</adj-number-input>
|
||||
<adj-number-input name="heroFire" [(ngModel)]="hero.frozenToken" minimum="0"
|
||||
</div>
|
||||
<div class="col-6">
|
||||
|
||||
<adj-number-input name="heroFrozen" [(ngModel)]="hero.frozenToken" minimum="0"
|
||||
title="{{iconHtml(MD2Icon.Frost,'g-color-aqua mr-1 g-font-size-18')}}Frozen Token"
|
||||
(blur)="heroUpdateDebounceTimer.resetTimer()">
|
||||
</adj-number-input>
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
|
||||
<adj-number-input name="remainActions" [(ngModel)]="hero.remainActions" minimum="0"
|
||||
title="Remain Actions" (blur)="heroUpdateDebounceTimer.resetTimer()" hideIncreaseBtn
|
||||
*ngIf="hero.uiActivating">
|
||||
</adj-number-input>
|
||||
<adj-number-input name="heroLevel" [(ngModel)]="hero.level" minimum="1" maximum="5"
|
||||
title="Level" (blur)="heroUpdateDebounceTimer.resetTimer()">
|
||||
</adj-number-input>
|
||||
<adj-number-input name="heroExp" [(ngModel)]="hero.exp" minimum="0" title="Exp"
|
||||
(blur)="heroUpdateDebounceTimer.resetTimer()">
|
||||
</adj-number-input>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<adj-number-input name="heroRage" [(ngModel)]="hero.rage" minimum="0" maximum="7"
|
||||
title="{{iconHtml(MD2Icon.Rage,'g-color-google-plus mr-1 g-font-size-18')}}Rage"
|
||||
(blur)="heroUpdateDebounceTimer.resetTimer()" *ngIf="hero.class==HeroClass.Berserker">
|
||||
</adj-number-input>
|
||||
|
||||
|
||||
<adj-number-input name="heroCorruption" [(ngModel)]="hero.corruptionToken" minimum="0"
|
||||
title="{{imgHtml('Tokens/CorruptToken.png','g-height-18')}} Corruption"
|
||||
(blur)="heroUpdateDebounceTimer.resetTimer()" *ngIf="hero.uiShowCorruptionToken">
|
||||
</adj-number-input>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div *ngIf="md2Service.info.isBossFight"></div>
|
||||
<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>
|
||||
<div class="d-sm-none">
|
||||
<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')">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>
|
||||
</div>
|
||||
|
||||
|
||||
<button nbButton hero fullWidth status="info" *ngIf="allowStartAction"
|
||||
(click)="startActivation()">Start Activation</button>
|
||||
</div>
|
||||
|
||||
<button nbButton hero fullWidth status="info" *ngIf="allowStartAction"
|
||||
(click)="startActivation()">Start Activation</button>
|
||||
|
||||
<button nbButton hero status="info" class="mt-2" (click)="openDoor()" *ngIf="showMoveAction">Open
|
||||
Door</button>
|
||||
|
||||
@@ -11,7 +11,7 @@ import { ADButtonColor, ADButtons } from '../../../ui/alert-dlg/alert-dlg.model'
|
||||
import { ArrayUtils } from '../../../utilities/array-utils';
|
||||
import { StringUtils } from '../../../utilities/string-utils';
|
||||
import { DebounceTimer } from '../../../utilities/timer-utils';
|
||||
import { HeroClass, MD2HeroInfo } from '../massive-darkness2.model';
|
||||
import { HeroClass, MD2HeroInfo, MD2Icon } from '../massive-darkness2.model';
|
||||
import { MD2Base } from '../MD2Base';
|
||||
|
||||
@Component({
|
||||
@@ -65,6 +65,11 @@ export class HeroDashboardComponent extends MD2Base implements OnInit {
|
||||
new MD2HeroInfo({ name: 'Myriam', mpMaximum: 7, hpMaximum: 4, skillHtml: '', shadowSkillHtml: '' }),
|
||||
new MD2HeroInfo({ name: 'Valdis', mpMaximum: 6, hpMaximum: 4, skillHtml: '', shadowSkillHtml: '' })
|
||||
]
|
||||
|
||||
public get hero() {
|
||||
return this.md2Service.playerHero;
|
||||
}
|
||||
|
||||
constructor(
|
||||
private gameRoomService: GameRoomService,
|
||||
public md2Service: MD2Service,
|
||||
@@ -78,7 +83,7 @@ export class HeroDashboardComponent extends MD2Base implements OnInit {
|
||||
}
|
||||
|
||||
public get allowAttack(): boolean {
|
||||
return this.md2Service.playerHero.uiBossFight || (!!this.md2Service.mobs && this.md2Service.mobs.length > 0) || (!!this.md2Service.roamingMonsters && this.md2Service.roamingMonsters.length > 0);
|
||||
return this.hero.uiBossFight || (!!this.md2Service.mobs && this.md2Service.mobs.length > 0) || (!!this.md2Service.roamingMonsters && this.md2Service.roamingMonsters.length > 0);
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
@@ -94,7 +99,6 @@ export class HeroDashboardComponent extends MD2Base implements OnInit {
|
||||
}
|
||||
initHero() {
|
||||
this.gameRoomService.gameRoomId = this.roomId;
|
||||
this.gameRoomService.joinGameRoom(this.roomId);
|
||||
if (!this.md2Service.heros.some(h => h.playerInfo.signalRClientId == this.stateService.loginUserService.userAccess.signalRSessionId)) {
|
||||
this.msgBoxService.showInputbox('Select Hero Class', '', { dropDownOptions: this.classOptions, inputType: 'dropdown' })
|
||||
.pipe(first()).subscribe(heroClass => {
|
||||
@@ -150,6 +154,7 @@ export class HeroDashboardComponent extends MD2Base implements OnInit {
|
||||
if (result) {
|
||||
this.md2Service.playerJoin(heroInfo);
|
||||
this.detectChanges();
|
||||
this.gameRoomService.joinGameRoom(this.roomId);
|
||||
} else {
|
||||
index++;
|
||||
if (index == this.heros.length) index = 0;
|
||||
@@ -210,13 +215,27 @@ export class HeroDashboardComponent extends MD2Base implements OnInit {
|
||||
get allowStartAction() {
|
||||
return !this.md2Service.heros.some(h => h.uiActivating) && !this.hero.uiActivating && this.hero.remainActions > 0;
|
||||
}
|
||||
|
||||
public get hero() {
|
||||
return this.md2Service.playerHero;
|
||||
}
|
||||
startActivation() {
|
||||
this.hero.uiActivating = true;
|
||||
//this.hero.remainActions = 3;
|
||||
if (this.hero.fireToken > 0) {
|
||||
this.msgBoxService.show(`You Are On ${this.iconHtml(MD2Icon.Fire)}!`, {
|
||||
text: `Roll ${this.iconHtml(MD2Icon.YellowDice)} ${this.hero.fireToken} times.`
|
||||
});
|
||||
}
|
||||
if (this.hero.frozenToken > 0) {
|
||||
let loseActions = Math.min(this.hero.frozenToken, this.hero.remainActions);
|
||||
this.hero.remainActions -= loseActions;
|
||||
this.hero.frozenToken -= loseActions;
|
||||
this.msgBoxService.show(`It's So Cold ${this.iconHtml(MD2Icon.Frost)}!`, {
|
||||
text: `Lose ${loseActions} actions.`
|
||||
});
|
||||
}
|
||||
if (this.hero.remainActions == 0) {
|
||||
this.hero.uiActivating = false;
|
||||
}
|
||||
this.broadcastHeroInfo();
|
||||
|
||||
}
|
||||
endActivation() {
|
||||
if (this.hero.remainActions > 0) {
|
||||
|
||||
Reference in New Issue
Block a user