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 15:49:51 -08:00
parent 89cb09adb6
commit b24753afe7
2 changed files with 78 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,14 @@
<nb-card *ngIf="!hero">
<nb-card-body>
<button nbButton hero status="primary" fullWidth (click)="initHero()">Choose Hero</button>
<!-- Hero Selection Screen -->
<nb-card *ngIf="!hero" 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>
<div *ngIf="hero">

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

@ -1,3 +1,70 @@
// Hero Selection Screen
.hero-selection-card {
border-radius: 16px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
overflow: hidden;
}
.hero-selection-body {
padding: 3rem 2rem;
text-align: center;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%);
@media (max-height: 450px) and (orientation: landscape) {
padding: 2rem 1.5rem;
}
}
.hero-selection-content {
max-width: 500px;
margin: 0 auto;
}
.hero-selection-title {
color: white;
font-size: 2rem;
font-weight: 700;
margin-bottom: 0.75rem;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
@media (max-height: 450px) and (orientation: landscape) {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
}
.hero-selection-subtitle {
color: rgba(255, 255, 255, 0.9);
font-size: 1rem;
margin-bottom: 1.5rem;
@media (max-height: 450px) and (orientation: landscape) {
font-size: 0.85rem;
margin-bottom: 1rem;
}
}
.hero-selection-btn {
padding: 0.75rem 2rem;
font-size: 1rem;
font-weight: 600;
border-radius: 50px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
transition: all 0.3s;
&:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}
@media (max-height: 450px) and (orientation: landscape) {
padding: 0.6rem 1.5rem;
font-size: 0.9rem;
}
}
.MD2Hp {
font-size: xx-large;
position: fixed;