ChrisChen/ChurchAngular
1
0
Fork 0
Code Issues 2 Pull Requests Packages Projects 1 Releases Wiki Activity

WIP

Browse Source
This commit is contained in:
Chris Chen 2025-11-05 16:43:27 -08:00
parent 23e6da2808
commit 542f24c12d
2 changed files with 146 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/app/games/massive-darkness2/hero-dashboard/hero-dashboard.component.html
View File

@ -24,6 +24,31 @@
<div class="hero-image-wrapper">
<img src="{{imgUrl('Heros/'+className+'.jpg')}}" 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">

121
src/app/games/massive-darkness2/hero-dashboard/hero-dashboard.component.scss
View File

@ -176,6 +176,7 @@
border-radius: 8px;
background: #f8f9fa;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
position: relative;
}
.hero-image {
@ -191,6 +192,126 @@
}
}
// HP and Mana Bars Overlay
.hero-stats-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 0.5rem;
background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 70%, transparent 100%);
border-radius: 0 0 8px 8px;
@media (max-height: 450px) and (orientation: landscape) {
padding: 0.35rem;
}
}
.stat-bar-overlay {
margin-bottom: 0.5rem;
&:last-child {
margin-bottom: 0;
}
@media (max-height: 450px) and (orientation: landscape) {
margin-bottom: 0.35rem;
}
}
.stat-bar-label-overlay {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.25rem;
gap: 0.5rem;
md2-icon {
flex-shrink: 0;
width: 18px;
height: 18px;
}
.stat-value-overlay {
color: white;
font-size: 0.75rem;
font-weight: 600;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
flex-shrink: 0;
}
@media (max-height: 450px) and (orientation: landscape) {
margin-bottom: 0.15rem;
gap: 0.3rem;
md2-icon {
width: 14px;
height: 14px;
}
.stat-value-overlay {
font-size: 0.65rem;
}
}
}
.stat-progress-bar-overlay {
width: 100%;
height: 20px;
background: rgba(255, 255, 255, 0.2);
border-radius: 10px;
overflow: hidden;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.3);
@media (max-height: 450px) and (orientation: landscape) {
height: 16px;
border-radius: 8px;
}
}
.stat-progress-fill-overlay {
height: 100%;
border-radius: 10px;
transition: width 0.5s ease-out;
position: relative;
overflow: hidden;
@media (max-height: 450px) and (orientation: landscape) {
border-radius: 8px;
}
&::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
animation: shimmer 2s infinite;
}
}
.hp-fill-overlay {
background: linear-gradient(90deg, #ff6b6b, #ee5a6f);
box-shadow: 0 0 8px rgba(238, 90, 111, 0.6);
}
.mp-fill-overlay {
background: linear-gradient(90deg, #4ecdc4, #44a08d);
box-shadow: 0 0 8px rgba(68, 160, 141, 0.6);
}
@keyframes shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
.hero-skills-col {
padding: 0.25rem;
display: flex;