First commit with existing project files

src/app/components/playing-card/playing-card.component.css

@@ -0,0 +1,97 @@
+#card {
+  display: block;
+  width: 250px;
+  height: 350px;
+  padding: 10px;
+  border-radius: 10px;
+  box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.1);
+  background-color: rgb(221, 221, 221);
+}
+
+#inside {
+  padding: 5px;
+  background-color: rgb(255, 247, 97);
+}
+
+header {
+  display: flex;
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 5px;
+
+  .left,
+  .right {
+    display: flex;
+    width: 50%;
+    align-items: center;
+  }
+
+  .right {
+    flex-direction: row;
+    justify-content: flex-end;
+    gap: 10px;
+  }
+
+  .right #hp,
+  .right img {
+    vertical-align: middle;
+  }
+}
+
+.icon.energy {
+  width: 15px;
+  height: 15px;
+}
+
+figure#art {
+  margin: 0;
+  padding: 5px 5px 0 5px;
+  width: calc(100% - 10px);
+  background-color: lightgray;
+
+  img {
+    width: 100%;
+    height: 175px;
+    border-radius: 5px;
+  }
+
+  figcaption {
+    text-align: center;
+    font-size: smaller;
+    padding-bottom: 5px;
+  }
+}
+
+#capacities {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 100px;
+}
+
+.capacity {
+    display: flex;
+    flex-direction: column;
+    margin: 10px 0;
+
+    .main {
+        display: flex;
+        flex-direction: row;
+        gap: 10px;
+        font-weight: bold;
+    }
+
+    .name {
+        flex-grow: 1;
+    }
+
+    .cost {
+        display: flex;
+        gap: 5px;
+        align-items: center;
+    }
+}
+
+.description {
+    font-size: smaller
+}

src/app/components/playing-card/playing-card.component.html

@@ -0,0 +1,32 @@
+<div id="card">
+    <div id="inside" [style.background-color]="backgroundColor()">
+        <header>
+            <div class="left">
+                <div id="name">{{ monster().name }}</div>
+            </div>
+            <div class="right">
+                <div id="hp">{{ monster().hp }}</div>
+                <img class="energy icon" [src]="MonsterTypeIcon()" alt="Monster Type Icon">
+            </div>
+        </header>
+        <figure id="art">
+            <img [src]="monster().image" alt="{{ monster().name }}" />
+            <figcaption>{{ monster().figureCaption }}</figcaption>
+        </figure>
+        <div id="capacities">
+            <div class="capacity">
+                <div class="main">
+                    <div class="cost">
+                        <img class="energy icon" src="assets/img/electric.png" alt="Energy Icon">
+                        <img class="energy icon" src="assets/img/electric.png" alt="Energy Icon">
+                    </div>
+                    <div class="name">{{ monster().attackName }}</div>
+                    <div class="damage">{{ monster().attackStrength }}</div>
+                </div>
+            </div>
+            <div class="description">
+                {{ monster().attackDescription }}
+            </div>
+        </div>
+    </div>
+</div>

src/app/components/playing-card/playing-card.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PlayingCardComponent } from './playing-card.component';
+
+describe('PlayingCardComponent', () => {
+  let component: PlayingCardComponent;
+  let fixture: ComponentFixture<PlayingCardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PlayingCardComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PlayingCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/playing-card/playing-card.component.ts

@@ -0,0 +1,23 @@
+import {Component, computed, input, Input, OnChanges, SimpleChanges} from '@angular/core';
+import { Monster } from '../../models/monster.model';
+import {MonsterTypeProperties} from '../../utils/monster.utils';
+
+@Component({
+  selector: 'app-playing-card',
+  standalone: true,
+  imports: [],
+  templateUrl: './playing-card.component.html',
+  styleUrl: './playing-card.component.css'
+})
+export class PlayingCardComponent {
+
+  monster = input(new Monster());
+
+  MonsterTypeIcon = computed(() => {
+    return MonsterTypeProperties[this.monster().type].imageUrl;
+  });
+
+  backgroundColor = computed(() => {
+    return MonsterTypeProperties[this.monster().type].color;
+  });
+}