SES-124 Created ability cards

SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.css

@@ -3,9 +3,29 @@
   height: 480px;
 }
 #main>.mat-card{
-  padding: 0px;
+  padding: 0;
 }
 .diagonal-line{
-  width:100px;
+  width:50px;
-  background:linear-gradient(45deg,#ffffff 49%,#aaa 50%,#ffffff 51%);
+  background:linear-gradient(45deg,rgb(16 32 40 / 0%) 49%,black,#ffffff00 51%);
+}
+#ability-card-content{
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+#skill-btn{
+  border-color: black;
+  flex: 1 0 auto;
+  margin-bottom: 10px;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+#skill-btn-divider{
+  border-left: black 1px solid;
+  padding-right: 10px;
+  padding-top: 10px;
+  padding-bottom: 10px;
 }

SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.html

@@ -1,19 +1,24 @@
 <div *ngIf="ability" id="main">
   <mat-card>
-    <mat-card-header id="ability-card-header">
+    <mat-card-header id="ability-card-header" [style.background]="headStyle.bgColor" [style.color]="headStyle.textColor">
       {{ability.value}}
       <div class="diagonal-line"></div>
-      {{ability.modification}}
+      Mod: {{ability.modification > 0? '+' + ability.modification : '-' + ability.modification}}
       <div class="diagonal-line"></div>
       {{ability.name}}
-      <div *ngIf="ability.canSaveThrows" class="diagonal-line"></div>
+      <div *ngIf="ability.canSaveThrows" class="diagonal-line" style="margin-left: auto"></div>
-      <div *ngIf="ability.canSaveThrows">
+      <div *ngIf="ability.canSaveThrows" style="margin-right: 10px">
-        {{ability.savingthrows}}
+        ST: {{ability.savingthrows > 0? '+' + ability.savingthrows : '-' + ability.savingthrows}}
       </div>
     </mat-card-header>
-    <mat-divider></mat-divider>
+    <mat-divider [style.border-top-color]="'black'"></mat-divider>
-    <mat-card-content>
+    <mat-card-content id="ability-card-content" [style.background]="contentStyle.bgColor" [style.color]="contentStyle.textColor">
-
+      <a mat-stroked-button *ngFor="let skill of ability.skills" id="skill-btn">
+        {{skill.name}}
+        &nbsp;	&nbsp;
+        <span id="skill-btn-divider"></span>
+        {{skill.value > 0? '+' + skill.value : '-' + skill.value}}
+      </a>
     </mat-card-content>
   </mat-card>
 </div>

SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.spec.ts

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

SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.ts

@@ -8,8 +8,12 @@ import { AbilityViewModel } from '../../../types/viewmodels/ability-viewmodels/A
 })
 export class AbilityCardComponent implements OnInit {
   @Input() ability: AbilityViewModel;
+  @Input() headStyle: { bgColor: string; textColor: string };
+  @Input() contentStyle: { bgColor: string; textColor: string };
 
   constructor() {}
 
-  ngOnInit() {}
+  ngOnInit() {
+    this.ability.skills.sort((a, b) => (a.name > b.name ? 1 : -1));
+  }
 }

SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.html

@@ -1,5 +1 @@
-<p></p>
+
-<p></p>
-<p></p>
-<p></p>
-<app-ability-card [ability]="test"></app-ability-card>

SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.ts

@@ -1,5 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
-import { AbilityViewModel } from '../../../types/viewmodels/ability-viewmodels/AbilityViewModel';
 
 @Component({
   selector: 'app-player-dashboard',
@@ -9,16 +8,6 @@ import { AbilityViewModel } from '../../../types/viewmodels/ability-viewmodels/A
 export class PlayerDashboardComponent {
   isExpanded = false;
 
-  test: AbilityViewModel = {
-    id: 1,
-    name: 'Dexterity',
-    value: 20,
-    modification: 3,
-    savingthrows: 1,
-    canSaveThrows: false,
-    skills: [],
-  };
-
   collapse() {
     this.isExpanded = false;
   }

SessionCompanion/SessionCompanion/ClientApp/src/styles.css

@@ -70,7 +70,7 @@
 }
 
 mat-divider {
-  border-top-color: #e9cca7 !important;
+  border-top-color: #e9cca7;
 }
 
 .arrow-select {