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:20:08 -08:00
parent b24753afe7
commit b4d52283aa
2 changed files with 147 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,19 +15,26 @@
<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" [@flipState]="flip">
<div class="tp-box" [@flipState]="flip">
<div class="tp-box__side tp-box__front ">
<div class="row">
<div class="col-6">
<!-- show hero stand image -->
<img src="{{imgUrl('Heros/'+className+'.jpg')}}" (click)="toggleFlip()">
<div class="hero-card-content">
<div class="row no-gutters h-100">
<div class="col-6 hero-image-col">
<div class="hero-image-wrapper">
<img src="{{imgUrl('Heros/'+className+'.jpg')}}" class="hero-image"
(click)="toggleFlip()" alt="{{hero.name}}">
</div>
</div>
<div class="col-6 hero-skills-col">
<div class="hero-skills">
<div class="skills-title">Abilities</div>
<div class="skill-content" [innerHTML]="hero.skillHtml"></div>
<div class="skills-title shadow-skills-title">Shadow Abilities</div>
<div class="skill-content shadow-skill-content"
[innerHTML]="hero.shadowSkillHtml"></div>
</div>
</div>
<div class="col-6">
<!-- show skill html -->
<div [innerHTML]="hero.skillHtml"></div>
<!-- show shadow skill html -->
<div [innerHTML]="hero.shadowSkillHtml"></div>
</div>
</div>
<!-- <img class="MD2HeroCard " src="{{imgUrl('Heros/'+className+'.jpg')}}" (click)="toggleFlip()"> -->

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

@ -103,42 +103,161 @@
.tp-wrapper {
-webkit-perspective: 800px;
perspective: 800px;
height: 85vh;
@media (max-height: 450px) and (orientation: landscape) {
height: 85vh;
}
}
.tp-box {
position: relative;
//width: 200px;
//height: 100px;
//margin: 3rem auto;
width: 100%;
height: 100%;
-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;
display: flex;
flex-direction: column;
overflow: hidden;
}
// Hero Card Content Section
.hero-card-content {
flex: 1;
display: flex;
flex-direction: column;
height: 100%;
padding: 0.5rem;
overflow: hidden;
@media (max-height: 450px) and (orientation: landscape) {
padding: 0.25rem;
}
}
.hero-image-col {
padding: 0.25rem;
display: flex;
flex-direction: column;
height: 100%;
@media (max-height: 450px) and (orientation: landscape) {
padding: 0.15rem;
}
}
.hero-image-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 8px;
background: #f8f9fa;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.hero-image {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
cursor: pointer;
transition: transform 0.3s;
&:hover {
transform: scale(1.02);
}
}
.hero-skills-col {
padding: 0.25rem;
display: flex;
flex-direction: column;
height: 100%;
@media (max-height: 450px) and (orientation: landscape) {
padding: 0.15rem;
}
}
.hero-skills {
width: 100%;
height: 100%;
background: #f8f9fa;
border-radius: 8px;
padding: 0.75rem;
overflow-y: auto;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
@media (max-height: 450px) and (orientation: landscape) {
padding: 0.5rem;
}
}
.skills-title {
font-size: 0.95rem;
font-weight: 700;
color: #667eea;
margin-bottom: 0.5rem;
padding-bottom: 0.25rem;
border-bottom: 2px solid #667eea;
@media (max-height: 450px) and (orientation: landscape) {
font-size: 0.75rem;
margin-bottom: 0.3rem;
padding-bottom: 0.15rem;
}
}
.shadow-skills-title {
margin-top: 1rem;
color: #764ba2;
border-bottom-color: #764ba2;
@media (max-height: 450px) and (orientation: landscape) {
margin-top: 0.5rem;
}
}
.skill-content {
font-size: 0.85rem;
line-height: 1.5;
color: #495057;
@media (max-height: 450px) and (orientation: landscape) {
font-size: 0.7rem;
line-height: 1.3;
}
}
.shadow-skill-content {
color: #6c757d;
}
.tp-box__front {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
background: white;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.tp-box__back {
-webkit-transform: rotateY(-180deg);