This commit is contained in:
Chris Chen
2025-11-05 17:01:51 -08:00
parent 542f24c12d
commit 3c3c880a3c
3 changed files with 415 additions and 29 deletions
@@ -1,5 +1,5 @@
<!-- Hero Selection Screen -->
<nb-card *ngIf="!hero" class="hero-selection-card">
<!-- 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>
@@ -11,6 +11,77 @@
</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">
<img src="{{imgUrl('Heros/'+className+'.jpg')}}" 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">
@@ -202,7 +273,7 @@
</div>
<div *ngIf="md2Service.info.isBossFight"></div>
<div class="d-sm-none">
<!-- <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>
@@ -219,7 +290,7 @@
<button nbButton hero fullWidth status="info" *ngIf="allowStartAction"
(click)="startActivation()">Start Activation</button>
</div>
</div> -->
<button nbButton hero status="info" class="mt-2" (click)="openDoor()" *ngIf="showMoveAction">Open