WIP

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

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

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

@@ -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;
+    width: 100%;
-    //height: 100px;
+    height: 100%;
-    //margin: 3rem auto;
     -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);