316 lines
18 KiB
HTML
316 lines
18 KiB
HTML
<!-- Hero Selection Screen - Initial -->
|
|
<nb-card *ngIf="!hero && !isSelectingHero" class="hero-selection-card">
|
|
<nb-card-body class="hero-selection-body">
|
|
<div class="hero-selection-content">
|
|
<h2 class="hero-selection-title">Choose Your Hero</h2>
|
|
<p class="hero-selection-subtitle">Begin your epic adventure</p>
|
|
<button nbButton hero status="primary" size="large" class="hero-selection-btn" (click)="initHero()">
|
|
<nb-icon icon="star-outline" class="mr-2"></nb-icon>
|
|
Select Hero
|
|
</button>
|
|
</div>
|
|
</nb-card-body>
|
|
</nb-card>
|
|
|
|
<!-- Hero Selection Panel -->
|
|
<div *ngIf="!hero && isSelectingHero && currentSelectingHero" class="hero-selection-panel">
|
|
<div class="row no-gutters hero-selection-row">
|
|
<div class="col-12 hero-selection-left">
|
|
<div class="hero-selection-card-wrapper">
|
|
<div class="hero-selection-header">
|
|
<div class="hero-selection-title-bar">
|
|
<h3 class="hero-selection-hero-name">{{currentSelectingHero.name}}</h3>
|
|
<span class="hero-selection-class">{{HeroClass[selectedHeroClass]}}</span>
|
|
<span class="hero-selection-counter">({{currentHeroIndex + 1}} / {{heros.length}})</span>
|
|
</div>
|
|
</div>
|
|
<div class="hero-selection-content-area">
|
|
<div class="row no-gutters h-100">
|
|
<div class="col-6 hero-select-image-col">
|
|
<div class="hero-select-image-wrapper"
|
|
[style.background-image]="'url(' + imgUrl('/Mobs/BG.png') + ')'">
|
|
<img src="{{imgUrl('Heros/'+className+'.png')}}" class="hero-select-image"
|
|
alt="{{currentSelectingHero.name}}">
|
|
<!-- HP and Mana Bars -->
|
|
<div class="hero-select-stats-overlay">
|
|
<div class="stat-bar-overlay hp-bar-overlay">
|
|
<div class="stat-bar-label-overlay">
|
|
<md2-icon [icon]="MD2Icon.HP_Color" size="sm"></md2-icon>
|
|
<span class="stat-value-overlay">{{currentSelectingHero.hpMaximum}}</span>
|
|
</div>
|
|
<div class="stat-progress-bar-overlay">
|
|
<div class="stat-progress-fill-overlay hp-fill-overlay full-stat"></div>
|
|
</div>
|
|
</div>
|
|
<div class="stat-bar-overlay mp-bar-overlay">
|
|
<div class="stat-bar-label-overlay">
|
|
<md2-icon [icon]="MD2Icon.Mana_Color" size="sm"></md2-icon>
|
|
<span class="stat-value-overlay">{{currentSelectingHero.mpMaximum}}</span>
|
|
</div>
|
|
<div class="stat-progress-bar-overlay">
|
|
<div class="stat-progress-fill-overlay mp-fill-overlay full-stat"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 hero-select-skills-col">
|
|
<div class="hero-select-skills">
|
|
<div class="skills-title">Abilities</div>
|
|
<div class="skill-content" [innerHTML]="currentSelectingHero.skillHtml"></div>
|
|
<div class="skills-title shadow-skills-title">Shadow Abilities</div>
|
|
<div class="skill-content shadow-skill-content"
|
|
[innerHTML]="currentSelectingHero.shadowSkillHtml"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="hero-selection-actions">
|
|
<button nbButton hero status="basic" class="nav-hero-btn" (click)="previousHero()">
|
|
<nb-icon icon="chevron-back-outline" class="mr-1"></nb-icon>
|
|
Previous
|
|
</button>
|
|
<button nbButton hero status="primary" class="select-hero-btn" (click)="selectCurrentHero()">
|
|
<nb-icon icon="checkmark-circle-outline" class="mr-2"></nb-icon>
|
|
It's Me!
|
|
</button>
|
|
<button nbButton hero status="basic" class="nav-hero-btn" (click)="nextHero()">
|
|
Next
|
|
<nb-icon icon="chevron-forward-outline" class="ml-1"></nb-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div *ngIf="hero">
|
|
<div class="row no-gutters">
|
|
<div class="col-12 col-sm-7">
|
|
<div class="tp-wrapper mb-2">
|
|
<div class="tp-box" [@flipState]="flip">
|
|
<div class="tp-box__side tp-box__front ">
|
|
|
|
<div class="hero-card-content">
|
|
<div class="row no-gutters h-100">
|
|
<div class="col-6 hero-image-col">
|
|
<div class="hero-image-wrapper"
|
|
[style.background-image]="'url(' + imgUrl('/Mobs/BG.png') + ')'">
|
|
<img src="{{imgUrl('Heros/'+className+'.png')}}" class="hero-image"
|
|
(click)="toggleFlip()" alt="{{hero.name}}">
|
|
<!-- HP and Mana Bars -->
|
|
<div class="hero-stats-overlay">
|
|
<div class="stat-bar-overlay hp-bar-overlay">
|
|
<div class="stat-bar-label-overlay">
|
|
<md2-icon [icon]="MD2Icon.HP_Color" size="sm"></md2-icon>
|
|
<span
|
|
class="stat-value-overlay">{{hero.hp}}/{{hero.hpMaximum}}</span>
|
|
</div>
|
|
<div class="stat-progress-bar-overlay">
|
|
<div class="stat-progress-fill-overlay hp-fill-overlay"
|
|
[style.width.%]="(hero.hp / hero.hpMaximum) * 100"></div>
|
|
</div>
|
|
</div>
|
|
<div class="stat-bar-overlay mp-bar-overlay">
|
|
<div class="stat-bar-label-overlay">
|
|
<md2-icon [icon]="MD2Icon.Mana_Color" size="sm"></md2-icon>
|
|
<span
|
|
class="stat-value-overlay">{{hero.mp}}/{{hero.mpMaximum}}</span>
|
|
</div>
|
|
<div class="stat-progress-bar-overlay">
|
|
<div class="stat-progress-fill-overlay mp-fill-overlay"
|
|
[style.width.%]="(hero.mp / hero.mpMaximum) * 100"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 hero-skills-col">
|
|
<div class="hero-skills">
|
|
<div class="skills-title" (click)="showSkills('abilities')">Abilities</div>
|
|
<div class="skill-content" [innerHTML]="hero.skillHtml"></div>
|
|
<div class="skills-title shadow-skills-title" (click)="showSkills('shadow')">
|
|
Shadow Abilities</div>
|
|
<div class="skill-content shadow-skill-content"
|
|
[innerHTML]="hero.shadowSkillHtml"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <img class="MD2HeroCard " src="{{imgUrl('Heros/'+className+'.jpg')}}" (click)="toggleFlip()"> -->
|
|
|
|
<!-- Action Buttons (Desktop/Landscape) -->
|
|
<div class="hero-actions d-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 class="action-btn special-action-btn" status="info" fullWidth
|
|
(click)="openDoor()" *ngIf="showMoveAction">
|
|
<nb-icon icon="grid-outline" class="mr-1"></nb-icon>
|
|
Open Door
|
|
</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>
|
|
<button nbButton hero fullWidth status="warning" class="end-activation-btn"
|
|
*ngIf="hero.uiActivating" (click)="endActivation()">
|
|
<nb-icon icon="stop-circle-outline" class="mr-2"></nb-icon>
|
|
End 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>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="g-max-height-80vh mb-2">
|
|
<img class="MD2HeroCard" src="{{hero.imgUrl}}">
|
|
<div class="MD2HeroCard">
|
|
<span class="MD2text MD2Name">{{hero.name}}</span>
|
|
<span class="MD2text MD2Hp">{{hero.hpMaximum}}</span>
|
|
<span class="MD2text MD2Mp">{{hero.mpMaximum}}</span>
|
|
</div>
|
|
<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">
|
|
<nb-card>
|
|
<nb-card-body>
|
|
<div class="row no-gutters">
|
|
<div class="col-6">
|
|
|
|
<adj-number-input name="heroHP" [(ngModel)]="hero.hp" [maximum]="hero.hpMaximum" minimum="0"
|
|
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')}}" 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>
|
|
</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>
|
|
</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>
|
|
|
|
</nb-card-body>
|
|
</nb-card>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<!-- <nb-flip-card *ngIf="hero">
|
|
<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> --> |