270 lines
8.9 KiB
TypeScript
270 lines
8.9 KiB
TypeScript
import { trigger, state, style, transition, animate } from '@angular/animations';
|
|
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
|
|
import { ActivatedRoute } from '@angular/router';
|
|
import { first } from 'rxjs/operators';
|
|
import { DropDownOption } from '../../../entity/dropDownOption';
|
|
import { GameRoomService } from '../../../services/game-room.service';
|
|
import { MD2Service } from '../../../services/MD2/md2.service';
|
|
import { MsgBoxService } from '../../../services/msg-box.service';
|
|
import { StateService } from '../../../services/state.service';
|
|
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, MD2HeroProfile, MD2Icon } from '../massive-darkness2.model';
|
|
import { MD2Base } from '../MD2Base';
|
|
import { MD2HeroProfileService } from '../service/massive-darkness2.service';
|
|
|
|
@Component({
|
|
selector: 'ngx-hero-dashboard',
|
|
templateUrl: './hero-dashboard.component.html',
|
|
styleUrls: ['./hero-dashboard.component.scss'],
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
animations: [
|
|
trigger('flipState', [
|
|
state('active', style({
|
|
transform: 'rotateY(179deg)'
|
|
})),
|
|
state('inactive', style({
|
|
transform: 'rotateY(0)'
|
|
})),
|
|
transition('active => inactive', animate('500ms ease-out')),
|
|
transition('inactive => active', animate('500ms ease-in'))
|
|
])
|
|
]
|
|
})
|
|
export class HeroDashboardComponent extends MD2Base implements OnInit {
|
|
MD2Icon = MD2Icon;
|
|
heroAction(hero: MD2HeroInfo, action: string) {
|
|
throw new Error('Method not implemented.');
|
|
}
|
|
showMoveAction: boolean = false;
|
|
HeroClass = HeroClass;
|
|
refreshUI() {
|
|
console.log('HeroDashboard RefreshUI');
|
|
|
|
}
|
|
|
|
heroUpdateDebounceTimer = new DebounceTimer(1000, () => { this.broadcastHeroInfo(); })
|
|
|
|
classOptions: DropDownOption[] = [
|
|
new DropDownOption(HeroClass.Berserker, 'Berserker'),
|
|
new DropDownOption(HeroClass.Paladin, 'Paladin'),
|
|
new DropDownOption(HeroClass.Ranger, 'Ranger'),
|
|
new DropDownOption(HeroClass.Rogue, 'Rogue'),
|
|
new DropDownOption(HeroClass.Wizard, 'Wizard'),
|
|
new DropDownOption(HeroClass.Shaman, 'Shaman'),
|
|
new DropDownOption(HeroClass.Druid, 'Druid'),
|
|
];
|
|
heros = [] as MD2HeroInfo[];
|
|
heroProfiles: MD2HeroProfile[] = [];
|
|
currentHeroIndex: number = 0;
|
|
isSelectingHero: boolean = false;
|
|
selectedHeroClass: HeroClass;
|
|
|
|
public get hero() {
|
|
return this.md2Service.playerHero;
|
|
}
|
|
|
|
public get currentSelectingHero(): MD2HeroInfo {
|
|
return this.heros[this.currentHeroIndex];
|
|
}
|
|
|
|
constructor(
|
|
private gameRoomService: GameRoomService,
|
|
public md2Service: MD2Service,
|
|
private heroProfileService: MD2HeroProfileService,
|
|
protected stateService: StateService,
|
|
protected route: ActivatedRoute,
|
|
protected cdRef: ChangeDetectorRef,
|
|
private msgBoxService: MsgBoxService,
|
|
) {
|
|
super(md2Service, stateService, route, cdRef);
|
|
this.isHeroDashboard = true;
|
|
}
|
|
|
|
public get allowAttack(): boolean {
|
|
return this.hero.uiBossFight || this.md2Service.mobs?.length > 0 || this.md2Service.roamingMonsters?.length > 0;
|
|
}
|
|
|
|
ngOnInit(): void {
|
|
super.ngOnInit();
|
|
}
|
|
|
|
override signalRInitialized() {
|
|
// this.gameRoomService.joinGameRoom(this.roomId);
|
|
// if (this.md2Service.initialized == false) {
|
|
// this.gameRoomService.createGameRoom('MD2');
|
|
// this.md2Service.initialized = true;
|
|
// }
|
|
}
|
|
initHero() {
|
|
this.gameRoomService.gameRoomId = 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 => {
|
|
if (heroClass != null) {
|
|
// switch (heroClass) {
|
|
// case HeroClass.Berserker: break;
|
|
// case HeroClass.Wizard:
|
|
// this.heros = this.wizards;
|
|
// break;
|
|
// case HeroClass.Rogue: break;
|
|
// case HeroClass.Ranger: break;
|
|
// case HeroClass.Shaman: break;
|
|
// case HeroClass.Paladin: break;
|
|
// default: break;
|
|
// }
|
|
// this.showHeroList(heroClass, 0);
|
|
this.initClassHeroList(heroClass);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
className: string;
|
|
initClassHeroList(heroClass: HeroClass) {
|
|
this.heros = [];
|
|
this.className = HeroClass[heroClass];
|
|
this.selectedHeroClass = heroClass;
|
|
this.heroProfileService.getAll().pipe(first()).subscribe(result => {
|
|
|
|
this.heroProfiles = result.filter(h => h.heroClass == heroClass);
|
|
for (let i = 0; i < this.heroProfiles.length; i++) {
|
|
const heroProfile = this.heroProfiles[i];
|
|
const heroInfo = new MD2HeroInfo({
|
|
name: heroProfile.title,
|
|
mpMaximum: heroProfile.mana,
|
|
hpMaximum: heroProfile.hp,
|
|
hp: heroProfile.hp,
|
|
mp: heroProfile.mana,
|
|
skillHtml: heroProfile.skillHtml,
|
|
shadowSkillHtml: heroProfile.shadowSkillHtml,
|
|
class: heroClass
|
|
});
|
|
heroInfo.imgUrl = this.imgUrl('Heros/' + HeroClass[heroClass] + '.jpg');
|
|
this.heros.push(heroInfo);
|
|
}
|
|
this.heros = ArrayUtils.Shuffle(this.heros);//.sort((a, b) => StringUtils.compareSemVer(a.name, b.name));
|
|
this.currentHeroIndex = 0;
|
|
this.isSelectingHero = true;
|
|
this.detectChanges();
|
|
});
|
|
|
|
}
|
|
|
|
selectCurrentHero() {
|
|
if (this.currentSelectingHero) {
|
|
this.md2Service.playerJoin(this.currentSelectingHero);
|
|
this.isSelectingHero = false;
|
|
this.detectChanges();
|
|
this.gameRoomService.joinGameRoom(this.roomId);
|
|
}
|
|
}
|
|
|
|
nextHero() {
|
|
this.currentHeroIndex++;
|
|
if (this.currentHeroIndex >= this.heros.length) {
|
|
this.currentHeroIndex = 0;
|
|
}
|
|
this.detectChanges();
|
|
}
|
|
|
|
previousHero() {
|
|
this.currentHeroIndex--;
|
|
if (this.currentHeroIndex < 0) {
|
|
this.currentHeroIndex = this.heros.length - 1;
|
|
}
|
|
this.detectChanges();
|
|
}
|
|
|
|
broadcastHeroInfo() {
|
|
this.md2Service.broadcastService.broadcastMyHeroInfo();
|
|
this.heroUpdateDebounceTimer.clearOut();
|
|
}
|
|
increaseRage() {
|
|
if (this.hero.rage < 7) {
|
|
this.hero.rage++;
|
|
}
|
|
}
|
|
openDoor() {
|
|
this.md2Service.broadcastService.broadcastHeroAction('openDoor');
|
|
this.showMoveAction = false;
|
|
this.detectChanges();
|
|
}
|
|
moveAction() {
|
|
this.showMoveAction = true;
|
|
this.detectChanges();
|
|
}
|
|
moveActionEnd() {
|
|
this.showMoveAction = false;
|
|
this.reduceAction();
|
|
this.detectChanges();
|
|
}
|
|
action(action: string) {
|
|
this.showMoveAction = false;
|
|
switch (action) {
|
|
case 'recoveryAction':
|
|
this.msgBoxService.show('Recovery', { text: 'takes the Recover action may gain up to 2 Health or Mana in any combination (either 2 Health, 2 Mana, or 1 of each).' });
|
|
break;
|
|
case 'attackAction':
|
|
this.msgBoxService.show('Attacking', { text: 'Please process attacking action in Dashboard.' });
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
this.md2Service.broadcastService.broadcastHeroAction(action);
|
|
this.reduceAction();
|
|
}
|
|
reduceAction() {
|
|
this.hero.remainActions -= 1;
|
|
this.detectChanges();
|
|
this.broadcastHeroInfo();
|
|
}
|
|
flip: string = 'inactive';
|
|
|
|
toggleFlip() {
|
|
this.flip = (this.flip == 'inactive') ? 'active' : 'inactive';
|
|
}
|
|
|
|
get allowStartAction() {
|
|
return !this.md2Service.heros.some(h => h.uiActivating) && !this.hero.uiActivating && this.hero.remainActions > 0;
|
|
}
|
|
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) {
|
|
this.msgBoxService.show('Are you sure?', { text: `End Activation will lose ${this.hero.remainActions} remaining actions.`, buttons: ADButtons.YesNo }).pipe(first()).subscribe(result => {
|
|
if (result) {
|
|
this.hero.remainActions = 0;
|
|
this.endActivation();
|
|
}
|
|
});
|
|
} else {
|
|
this.hero.uiActivating = false;
|
|
this.broadcastHeroInfo();
|
|
this.detectChanges();
|
|
}
|
|
}
|
|
}
|