From 543bc41f3f95185d3afebd32c84fe526609e2366 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20G=C3=B3reczny?= <lukgor@st.amu.edu.pl>
Date: Fri, 1 Jan 2021 22:14:01 +0100
Subject: [PATCH 1/4] Added base for ability cards

---
 .../ClientApp/src/app/app.module.ts           |  2 ++
 .../ability-card/ability-card.component.css   | 11 ++++++++
 .../ability-card/ability-card.component.html  | 19 ++++++++++++++
 .../ability-card.component.spec.ts            | 25 +++++++++++++++++++
 .../ability-card/ability-card.component.ts    | 15 +++++++++++
 .../player-dashboard.component.html           |  5 ++++
 .../player-dashboard.component.ts             | 15 +++++++++--
 .../src/assets/icons/sc-icon.model.ts         |  2 +-
 .../ability-viewmodels/AbilityViewModel.ts    | 11 ++++++++
 .../ability-viewmodels/SkillViewModel.ts      |  5 ++++
 10 files changed, 107 insertions(+), 3 deletions(-)
 create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.css
 create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.html
 create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.spec.ts
 create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.ts
 create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/types/viewmodels/ability-viewmodels/AbilityViewModel.ts
 create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/types/viewmodels/ability-viewmodels/SkillViewModel.ts

diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts
index 29d4a9b..d829109 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts
@@ -26,6 +26,7 @@ import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import {environment} from '../environments/environment';
 import {reducers} from './store/models/app-state.model';
 import {CharacterService} from '../services/character.service';
+import { AbilityCardComponent } from './components/ability-card/ability-card.component';
 
 @NgModule({
   declarations: [
@@ -36,6 +37,7 @@ import {CharacterService} from '../services/character.service';
     GameMasterDashboardComponent,
     PlayerDashboardComponent,
     SelectCharacterComponent,
+    AbilityCardComponent,
   ],
   imports: [
 BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.css b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.css
new file mode 100644
index 0000000..9f85d1b
--- /dev/null
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.css
@@ -0,0 +1,11 @@
+#main{
+  width: 480px;
+  height: 480px;
+}
+#main>.mat-card{
+  padding: 0px;
+}
+.diagonal-line{
+  width:100px;
+  background:linear-gradient(45deg,#ffffff 49%,#aaa 50%,#ffffff 51%);
+}
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.html
new file mode 100644
index 0000000..5daac83
--- /dev/null
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.html
@@ -0,0 +1,19 @@
+<div *ngIf="ability" id="main">
+  <mat-card>
+    <mat-card-header id="ability-card-header">
+      {{ability.value}}
+      <div class="diagonal-line"></div>
+      {{ability.modification}}
+      <div class="diagonal-line"></div>
+      {{ability.name}}
+      <div *ngIf="ability.canSaveThrows" class="diagonal-line"></div>
+      <div *ngIf="ability.canSaveThrows">
+        {{ability.savingthrows}}
+      </div>
+    </mat-card-header>
+    <mat-divider></mat-divider>
+    <mat-card-content>
+
+    </mat-card-content>
+  </mat-card>
+</div>
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.spec.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.spec.ts
new file mode 100644
index 0000000..f8de036
--- /dev/null
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.spec.ts
@@ -0,0 +1,25 @@
+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();
+  });
+});
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.ts
new file mode 100644
index 0000000..2f8e4f5
--- /dev/null
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.ts
@@ -0,0 +1,15 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { AbilityViewModel } from '../../../types/viewmodels/ability-viewmodels/AbilityViewModel';
+
+@Component({
+  selector: 'app-ability-card',
+  templateUrl: './ability-card.component.html',
+  styleUrls: ['./ability-card.component.css'],
+})
+export class AbilityCardComponent implements OnInit {
+  @Input() ability: AbilityViewModel;
+
+  constructor() {}
+
+  ngOnInit() {}
+}
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.html
index e69de29..a9dd20f 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.html
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.html
@@ -0,0 +1,5 @@
+<p></p>
+<p></p>
+<p></p>
+<p></p>
+<app-ability-card [ability]="test"></app-ability-card>
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.ts
index 9ed3789..2c99938 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.ts
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.ts
@@ -1,13 +1,24 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { AbilityViewModel } from '../../../types/viewmodels/ability-viewmodels/AbilityViewModel';
 
 @Component({
   selector: 'app-player-dashboard',
   templateUrl: './player-dashboard.component.html',
-  styleUrls: ['./player-dashboard.component.css']
+  styleUrls: ['./player-dashboard.component.css'],
 })
 export class PlayerDashboardComponent {
   isExpanded = false;
 
+  test: AbilityViewModel = {
+    id: 1,
+    name: 'Dexterity',
+    value: 20,
+    modification: 3,
+    savingthrows: 1,
+    canSaveThrows: false,
+    skills: [],
+  };
+
   collapse() {
     this.isExpanded = false;
   }
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/assets/icons/sc-icon.model.ts b/SessionCompanion/SessionCompanion/ClientApp/src/assets/icons/sc-icon.model.ts
index e3537d1..3faceea 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/assets/icons/sc-icon.model.ts
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/assets/icons/sc-icon.model.ts
@@ -10,5 +10,5 @@ export enum scIcon {
   rogue = 'rogue',
   Sorcerer = 'sorcerer',
   Warlock = 'warlock',
-  Wizard =  'wizard'
+  Wizard = 'wizard',
 }
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/types/viewmodels/ability-viewmodels/AbilityViewModel.ts b/SessionCompanion/SessionCompanion/ClientApp/src/types/viewmodels/ability-viewmodels/AbilityViewModel.ts
new file mode 100644
index 0000000..1ca9248
--- /dev/null
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/types/viewmodels/ability-viewmodels/AbilityViewModel.ts
@@ -0,0 +1,11 @@
+import {SkillViewModel} from './SkillViewModel';
+
+export interface AbilityViewModel {
+  id: number;
+  name: string;
+  value: number;
+  modification: number;
+  savingthrows: number;
+  canSaveThrows: boolean;
+  skills: SkillViewModel[];
+}
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/types/viewmodels/ability-viewmodels/SkillViewModel.ts b/SessionCompanion/SessionCompanion/ClientApp/src/types/viewmodels/ability-viewmodels/SkillViewModel.ts
new file mode 100644
index 0000000..94418d4
--- /dev/null
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/types/viewmodels/ability-viewmodels/SkillViewModel.ts
@@ -0,0 +1,5 @@
+export interface SkillViewModel {
+  name: string;
+  value: number;
+  can: boolean;
+}
-- 
2.20.1


From 9296e1713bb7e626a9ba7a8b5cd478b894d00462 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20G=C3=B3reczny?= <lukgor@st.amu.edu.pl>
Date: Sat, 2 Jan 2021 19:53:03 +0100
Subject: [PATCH 2/4] SES-124 Created ability cards

---
 .../ability-card/ability-card.component.css   | 26 ++++++++++++++++---
 .../ability-card/ability-card.component.html  | 21 +++++++++------
 .../ability-card.component.spec.ts            | 25 ------------------
 .../ability-card/ability-card.component.ts    |  6 ++++-
 .../player-dashboard.component.html           |  6 +----
 .../player-dashboard.component.ts             | 13 +---------
 .../SessionCompanion/ClientApp/src/styles.css |  2 +-
 7 files changed, 44 insertions(+), 55 deletions(-)
 delete mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.spec.ts

diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.css b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.css
index 9f85d1b..d728057 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.css
+++ b/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;
-  background:linear-gradient(45deg,#ffffff 49%,#aaa 50%,#ffffff 51%);
+  width:50px;
+  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;
 }
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.html
index 5daac83..c214590 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.html
+++ b/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">
-        {{ability.savingthrows}}
+      <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}}
       </div>
     </mat-card-header>
-    <mat-divider></mat-divider>
-    <mat-card-content>
-
+    <mat-divider [style.border-top-color]="'black'"></mat-divider>
+    <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>
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.spec.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.spec.ts
deleted file mode 100644
index f8de036..0000000
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.spec.ts
+++ /dev/null
@@ -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();
-  });
-});
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.ts
index 2f8e4f5..f525ccd 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.ts
+++ b/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));
+  }
 }
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.html
index a9dd20f..8b13789 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.html
+++ b/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>
+
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.ts
index 2c99938..7f89e9f 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.ts
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.ts
@@ -1,5 +1,4 @@
-import { Component, OnInit } from '@angular/core';
-import { AbilityViewModel } from '../../../types/viewmodels/ability-viewmodels/AbilityViewModel';
+import { Component } from '@angular/core';
 
 @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;
   }
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/styles.css b/SessionCompanion/SessionCompanion/ClientApp/src/styles.css
index 311e04a..cbfb6da 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/styles.css
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/styles.css
@@ -70,7 +70,7 @@
 }
 
 mat-divider {
-  border-top-color: #e9cca7 !important;
+  border-top-color: #e9cca7;
 }
 
 .arrow-select {
-- 
2.20.1


From fadeaf1c439d2be74c25de5d3219057f60bf1672 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20G=C3=B3reczny?= <lukgor@st.amu.edu.pl>
Date: Sat, 2 Jan 2021 20:00:15 +0100
Subject: [PATCH 3/4] fix

---
 .../components/player-dashboard/player-dashboard.component.ts   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.ts
index 7f89e9f..cffbdec 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.ts
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-player-dashboard',
-- 
2.20.1


From 9781b5da1f378266cc9f286a21dfc9b4efad9333 Mon Sep 17 00:00:00 2001
From: Natalia Gawron <natgaw1@st.amu.edu.pl>
Date: Sat, 2 Jan 2021 20:36:55 +0100
Subject: [PATCH 4/4] SES-124 display component, small changes

---
 .../ability-card/ability-card.component.html    |  2 +-
 .../player-dashboard.component.css              |  7 +++++++
 .../player-dashboard.component.html             |  4 +++-
 .../player-dashboard.component.ts               | 17 +++++++++++++++++
 .../ability-viewmodels/AbilityViewModel.ts      |  2 +-
 5 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.html
index c214590..376fea9 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.html
+++ b/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>
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.css b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.css
index cc4b1d7..544e80b 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.css
+++ b/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;
+}
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.html
index 5777963..994aab5 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.html
+++ b/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>
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.ts
index d2cfe87..91157af 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.ts
+++ b/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;
   }
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/types/viewmodels/ability-viewmodels/AbilityViewModel.ts b/SessionCompanion/SessionCompanion/ClientApp/src/types/viewmodels/ability-viewmodels/AbilityViewModel.ts
index 1ca9248..8c4fb29 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/types/viewmodels/ability-viewmodels/AbilityViewModel.ts
+++ b/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[];
 }
-- 
2.20.1