WIP
This commit is contained in:
Chris Chen
@@ -0,0 +1,141 @@
|
||||
<nb-card *ngIf="!md2Service.playerHero">
|
||||
<nb-card-body>
|
||||
<button nbButton hero status="primary" fullWidth (click)="initHero()">Choose Hero</button>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
<div *ngIf="md2Service.playerHero">
|
||||
<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__side tp-box__front ">
|
||||
|
||||
<img class="MD2HeroCard " src="{{md2Service.playerHero.imgUrl}}">
|
||||
</div>
|
||||
<div class="tp-box__side tp-box__back">
|
||||
|
||||
|
||||
<img class="MD2HeroCard " src="{{imgUrl('Heros/Guide/'+className+'.jpg')}}">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="g-max-height-80vh mb-2">
|
||||
<img class="MD2HeroCard" src="{{md2Service.playerHero.imgUrl}}">
|
||||
<div class="MD2HeroCard">
|
||||
<span class="MD2text MD2Name">{{md2Service.playerHero.name}}</span>
|
||||
<span class="MD2text MD2Hp">{{md2Service.playerHero.hpMaximum}}</span>
|
||||
<span class="MD2text MD2Mp">{{md2Service.playerHero.mpMaximum}}</span>
|
||||
</div>
|
||||
<img class="MD2HeroCard" src="{{md2Service.playerHero.imgUrl}}">
|
||||
<img class="MD2HeroCard HpMpBar" src="{{imgUrl('/Heros/Template/Border.png')}}">
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-5">
|
||||
<nb-card>
|
||||
<nb-card-body>
|
||||
<div class="row no-gutters">
|
||||
<div class="col-6">
|
||||
|
||||
<!-- <adj-number-input name="heroHP" [(ngModel)]="md2Service.playerHero.hp"
|
||||
[maximum]="md2Service.playerHero.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)]="md2Service.playerHero.hp"
|
||||
[maximum]="md2Service.playerHero.hpMaximum" minimum="0"
|
||||
title="{{imgHtml('HpIcon.png','g-height-25 mr-1')}}HP" showMaximum
|
||||
(blur)="heroUpdateDebounceTimer.resetTimer()" (hitDecreasing)="increaseRage()">
|
||||
</adj-number-input>
|
||||
<adj-number-input name="heroMana" [(ngModel)]="md2Service.playerHero.mp"
|
||||
[maximum]="md2Service.playerHero.mpMaximum" minimum="0"
|
||||
title="{{imgHtml('HeroIcon.png','g-height-25 mr-1')}}Mana" showMaximum
|
||||
(blur)="heroUpdateDebounceTimer.resetTimer()">
|
||||
</adj-number-input>
|
||||
|
||||
<adj-number-input name="heroFire" [(ngModel)]="md2Service.playerHero.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)]="md2Service.playerHero.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)]="md2Service.playerHero.remainActions"
|
||||
minimum="0" title="Remain Actions" (blur)="heroUpdateDebounceTimer.resetTimer()"
|
||||
hideIncreaseBtn>
|
||||
</adj-number-input>
|
||||
<adj-number-input name="heroLevel" [(ngModel)]="md2Service.playerHero.level" minimum="1"
|
||||
maximum="5" title="Level" (blur)="heroUpdateDebounceTimer.resetTimer()">
|
||||
</adj-number-input>
|
||||
<adj-number-input name="heroExp" [(ngModel)]="md2Service.playerHero.exp" minimum="0"
|
||||
title="Exp" (blur)="heroUpdateDebounceTimer.resetTimer()">
|
||||
</adj-number-input>
|
||||
<adj-number-input name="heroRage" [(ngModel)]="md2Service.playerHero.rage" minimum="0"
|
||||
maximum="7"
|
||||
title="{{iconHtml(MD2Icon.Rage,'g-color-google-plus mr-1 g-font-size-18')}}Rage"
|
||||
(blur)="heroUpdateDebounceTimer.resetTimer()"
|
||||
*ngIf="md2Service.playerHero.class==HeroClass.Berserker">
|
||||
</adj-number-input>
|
||||
<adj-number-input name="heroCorruption" [(ngModel)]="md2Service.playerHero.corruptionToken"
|
||||
minimum="0" title="{{imgHtml('Tokens/CorruptToken.png','g-height-18')}} Corruption"
|
||||
(blur)="heroUpdateDebounceTimer.resetTimer()"
|
||||
*ngIf="md2Service.playerHero.corruptionToken>0">
|
||||
</adj-number-input>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div *ngIf="md2Service.info.isBossFight"></div>
|
||||
<div *ngIf="md2Service.playerHero.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 status="info" class="mt-2" (click)="openDoor()" *ngIf="showMoveAction">Open
|
||||
Door</button>
|
||||
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- <nb-flip-card *ngIf="md2Service.playerHero">
|
||||
<nb-card-front>
|
||||
<nb-card>
|
||||
|
||||
<nb-card-body>
|
||||
|
||||
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</nb-card-front>
|
||||
<nb-card-back>
|
||||
<nb-card>
|
||||
<nb-card-body>
|
||||
Back card text
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</nb-card-back>
|
||||
</nb-flip-card> -->
|
||||
@@ -0,0 +1,80 @@
|
||||
.MD2Hp {
|
||||
font-size: xx-large;
|
||||
position: fixed;
|
||||
z-index: 92;
|
||||
color: white;
|
||||
bottom: 23%;
|
||||
left: 46%;
|
||||
}
|
||||
.MD2Mp {
|
||||
font-size: xx-large;
|
||||
position: fixed;
|
||||
z-index: 92;
|
||||
color: white;
|
||||
bottom: 22%;
|
||||
left: 7%;
|
||||
}
|
||||
|
||||
.MD2Name {
|
||||
font-size: xx-large;
|
||||
position: fixed;
|
||||
z-index: 92;
|
||||
color: #2e2e30;
|
||||
bottom: 20%;
|
||||
left: 23%;
|
||||
}
|
||||
.MD2HeroCard {
|
||||
//position: absolute;
|
||||
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
&.HpMpBar {
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
.tp-wrapper {
|
||||
-webkit-perspective: 800px;
|
||||
perspective: 800px;
|
||||
}
|
||||
|
||||
.tp-box {
|
||||
position: relative;
|
||||
//width: 200px;
|
||||
//height: 100px;
|
||||
//margin: 3rem auto;
|
||||
-webkit-transform-style: preserve-3d;
|
||||
transform-style: preserve-3d;
|
||||
-webkit-transform: transform 1s;
|
||||
-ms-transform: transform 1s;
|
||||
transform: transform 1s;
|
||||
}
|
||||
.tp-box__side {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.tp-box__front {
|
||||
-webkit-transform: rotateY(0deg);
|
||||
-ms-transform: rotateY(0deg);
|
||||
transform: rotateY(0deg);
|
||||
}
|
||||
.tp-box__back {
|
||||
-webkit-transform: rotateY(-180deg);
|
||||
-ms-transform: rotateY(-180deg);
|
||||
transform: rotateY(-180deg);
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { HeroDashboardComponent } from './hero-dashboard.component';
|
||||
|
||||
describe('HeroDashboardComponent', () => {
|
||||
let component: HeroDashboardComponent;
|
||||
let fixture: ComponentFixture<HeroDashboardComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ HeroDashboardComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(HeroDashboardComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,205 @@
|
||||
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.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 { StringUtils } from '../../../utilities/string-utils';
|
||||
import { DebounceTimer } from '../../../utilities/timer-utils';
|
||||
import { HeroClass, MD2HeroInfo } from '../massive-darkness2.model';
|
||||
import { MD2Base } from '../MD2Base';
|
||||
|
||||
@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 {
|
||||
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'),
|
||||
];
|
||||
heros = [] as MD2HeroInfo[];
|
||||
wizards: MD2HeroInfo[] = [
|
||||
new MD2HeroInfo({ name: 'Ajax', mpMaximum: 6, hpMaximum: 4, skillHtml: '', shadowSkillHtml: '' }),
|
||||
new MD2HeroInfo({ name: 'Baldric', mpMaximum: 5, hpMaximum: 4, skillHtml: '', shadowSkillHtml: '' }),
|
||||
new MD2HeroInfo({ name: 'Ego', mpMaximum: 5, hpMaximum: 6, skillHtml: '', shadowSkillHtml: '' }),
|
||||
new MD2HeroInfo({ name: 'Elias', mpMaximum: 6, hpMaximum: 5, skillHtml: '', shadowSkillHtml: '' }),
|
||||
new MD2HeroInfo({ name: 'Megan', mpMaximum: 5, hpMaximum: 5, skillHtml: '', shadowSkillHtml: '' }),
|
||||
new MD2HeroInfo({ name: 'Moira', mpMaximum: 6, hpMaximum: 5, skillHtml: '', shadowSkillHtml: '' }),
|
||||
new MD2HeroInfo({ name: 'Myriam', mpMaximum: 7, hpMaximum: 4, skillHtml: '', shadowSkillHtml: '' }),
|
||||
new MD2HeroInfo({ name: 'Valdis', mpMaximum: 6, hpMaximum: 4, skillHtml: '', shadowSkillHtml: '' })
|
||||
]
|
||||
constructor(
|
||||
private gameRoomService: GameRoomService,
|
||||
public md2Service: MD2Service,
|
||||
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.md2Service.mobs && this.md2Service.mobs.length > 0) || (!!this.md2Service.roamingMonsters && 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;
|
||||
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 => {
|
||||
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.fileList(`Heros/${this.className}`).pipe(first()).subscribe(fileNames => {
|
||||
for (let i = 0; i < fileNames.length; i++) {
|
||||
const heroNames = fileNames[i].split('.')[0].split('-');
|
||||
|
||||
this.heros.push(new MD2HeroInfo({
|
||||
name: heroNames[0].replace('/', ''),
|
||||
mpMaximum: Number.parseInt(heroNames[1]),
|
||||
hpMaximum: Number.parseInt(heroNames[2]),
|
||||
imgUrl: this.imgUrl(`Heros/${this.className}/${fileNames[i]}`),
|
||||
class: heroClass
|
||||
}))
|
||||
}
|
||||
this.heros = this.heros.sort((a, b) => StringUtils.compareSemVer(a.name, b.name));
|
||||
this.showHeroList(heroClass, 0);
|
||||
});
|
||||
}
|
||||
showHeroList(heroClass: HeroClass, index: number) {
|
||||
let className = HeroClass[heroClass];
|
||||
let heroInfo = this.heros[index];
|
||||
this.msgBoxService.show(`${className}(${index + 1}/${this.heros.length})`, {
|
||||
text: `<img src='${heroInfo.imgUrl}' class="g-width-50vw-md g-width-80vw">`,
|
||||
buttons: ADButtons.YesNo,
|
||||
cardWidthClass: '',
|
||||
confirmButtonText: 'It\'s Me!',
|
||||
cancelButtonText: 'Next',
|
||||
cancelButtonColor: ADButtonColor.INFO
|
||||
}).pipe(first()).subscribe(result => {
|
||||
if (result) {
|
||||
this.md2Service.playerJoin(heroInfo);
|
||||
this.detectChanges();
|
||||
} else {
|
||||
index++;
|
||||
if (index == this.heros.length) index = 0;
|
||||
this.showHeroList(heroClass, index);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
broadcastHeroInfo() {
|
||||
this.md2Service.broadcastMyHeroInfo();
|
||||
this.heroUpdateDebounceTimer.clearOut();
|
||||
}
|
||||
increaseRage() {
|
||||
if (this.md2Service.playerHero.rage < 7) {
|
||||
this.md2Service.playerHero.rage++;
|
||||
}
|
||||
}
|
||||
openDoor() {
|
||||
this.md2Service.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;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
this.md2Service.broadcastHeroAction(action);
|
||||
this.reduceAction();
|
||||
}
|
||||
reduceAction() {
|
||||
this.md2Service.playerHero.remainActions -= 1;
|
||||
this.detectChanges();
|
||||
this.broadcastHeroInfo();
|
||||
}
|
||||
flip: string = 'inactive';
|
||||
|
||||
toggleFlip() {
|
||||
this.flip = (this.flip == 'inactive') ? 'active' : 'inactive';
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user