SES-124 display component, small changes

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

@@ -8,7 +8,7 @@
       {{ability.name}}
       <div *ngIf="ability.canSaveThrows" class="diagonal-line" style="margin-left: auto"></div>
       <div *ngIf="ability.canSaveThrows" style="margin-right: 10px">
-        ST: {{ability.savingthrows > 0? '+' + ability.savingthrows : '-' + ability.savingthrows}}
+        ST: {{ability.savingThrows > 0? '+' + ability.savingThrows : '-' + ability.savingThrows}}
       </div>
     </mat-card-header>
     <mat-divider [style.border-top-color]="'black'"></mat-divider>

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

@@ -35,3 +35,10 @@
 .mat-list-item.active{
   color: #e9cca7;
 }
+
+.ability_card_container {
+  margin: 5%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

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

@@ -52,6 +52,8 @@
 
       </mat-nav-list>
     </mat-sidenav>
-    <mat-sidenav-content class="content">Main content</mat-sidenav-content>
+    <mat-sidenav-content class="content">
+      <app-ability-card class="ability_card_container" [ability]="ability" [contentStyle]="{bgColor: 'red', textColor: 'white'}" [headStyle]="{bgColor: 'red', textColor: 'white'}"></app-ability-card>
+    </mat-sidenav-content>
   </mat-sidenav-container>
 </div>

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

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import {AbilityViewModel} from "../../../types/viewmodels/ability-viewmodels/AbilityViewModel";
 
 @Component({
   selector: 'app-player-dashboard',
@@ -9,6 +10,22 @@ export class PlayerDashboardComponent {
   isExpanded = false;
   selected = false;
 
+  ability: AbilityViewModel = {
+    id: 1,
+    name: 'Strength',
+    value: 18,
+    modification: 2,
+    canSaveThrows: true,
+    savingThrows: 1,
+    skills: [
+      {
+        name: 'Throw',
+        value: 1,
+        can: false
+      }
+    ]
+  }
+
   collapse() {
     this.isExpanded = false;
   }

SessionCompanion/SessionCompanion/ClientApp/src/types/viewmodels/ability-viewmodels/AbilityViewModel.ts

@@ -5,7 +5,7 @@ export interface AbilityViewModel {
   name: string;
   value: number;
   modification: number;
-  savingthrows: number;
+  savingThrows: number;
   canSaveThrows: boolean;
   skills: SkillViewModel[];
 }