SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts

@@ -35,6 +35,7 @@ import { CharacterService } from '../services/character.service';
 import { AbilityCardComponent } from './components/ability-card/ability-card.component';
 import { GameMasterSpellsTableComponent } from './components/game-master-spells-table/game-master-spells-table.component';
 import { GameMasterArmorsTableComponent } from './components/game-master-armors-table/game-master-armors-table.component';
+import { AbilitiesComponent } from './components/abilities/abilities.component';
 
 @NgModule({
   declarations: [
@@ -48,6 +49,7 @@ import { GameMasterArmorsTableComponent } from './components/game-master-armors-
     AbilityCardComponent,
     GameMasterSpellsTableComponent,
     GameMasterArmorsTableComponent,
+    AbilitiesComponent,
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
@@ -79,6 +81,7 @@ import { GameMasterArmorsTableComponent } from './components/game-master-armors-
   entryComponents: [
     GameMasterSpellsTableComponent,
     GameMasterArmorsTableComponent,
+    AbilitiesComponent,
   ],
 })
 export class AppModule {}

SessionCompanion/SessionCompanion/ClientApp/src/app/components/abilities/abilities.component.html

@@ -0,0 +1,6 @@
+<div *ngFor="let ability of characterStats">
+<app-ability-card [ability]="ability"
+                  [headStyle]="{bgColor: '#e9cca7', textColor: '#102028'}"
+                  [contentStyle]="{bgColor: '#102028', textColor: 'white'}">
+</app-ability-card>
+</div>

SessionCompanion/SessionCompanion/ClientApp/src/app/components/abilities/abilities.component.ts

@@ -0,0 +1,38 @@
+import { Component, OnInit } from '@angular/core';
+import {CharacterStatsViewModel} from "../../../types/viewmodels/character-viewmodels/CharacterStatsViewModel";
+import {Store} from "@ngrx/store";
+import {AppState} from "../../store/models/app-state.model";
+import {CharacterService} from "../../../services/character.service";
+import {first} from "rxjs/operators";
+import {ErrorResponse} from "../../../types/ErrorResponse";
+import {HttpErrorResponse} from "@angular/common/http";
+
+@Component({
+  selector: 'app-abilities',
+  templateUrl: './abilities.component.html',
+  styleUrls: ['./abilities.component.css']
+})
+export class AbilitiesComponent implements OnInit {
+  characterStats: CharacterStatsViewModel[];
+
+  constructor(private store: Store<AppState>, private characterService: CharacterService) {}
+
+  ngOnInit() {
+    this.getCharacterStats();
+  }
+
+  getCharacterStats() {
+    this.store.select( s => s.playerStore.characterId).pipe(first()).subscribe((characterId) => {
+      this.characterService.getCharacterStats(2).pipe(first()).subscribe((characterStats) => {
+        console.log(characterStats)
+        this.characterStats = characterStats;
+      }, (error: ErrorResponse | HttpErrorResponse) => {
+        if (error instanceof  HttpErrorResponse) {
+          error = error.error as ErrorResponse;
+        }
+        console.error(error.message);
+      });
+    })
+  }
+
+}

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

@@ -1,14 +1,50 @@
+.cardContainerClass {
+  border: 6px solid white;
+  border-radius: 10px;
+  box-shadow: 0 0 10px gold;
+}
+
 #main{
   width: 480px;
-  height: 480px;
+  padding-bottom: 15px;
 }
+
+@media (max-width: 468px) {
+  #main {
+    width: 340px;
+  }
+}
+
+@media (min-width: 468px) and (max-width: 768px) {
+  #main {
+    width: 420px;
+  }
+}
+
+@media (min-width: 768px) {
+  #main {
+    width: 480px;
+  }
+}
+
 #main>.mat-card{
   padding: 0;
 }
 .diagonal-line{
   width:50px;
-  background:linear-gradient(45deg,rgb(16 32 40 / 0%) 49%,black,#ffffff00 51%);
+  background:linear-gradient(45deg,rgb(16 32 40 / 0%) 49%,white,#ffffff00 51%);
 }
+
+#ability-card-header {
+  font-weight: 600;
+}
+
+@media (max-width: 468px) {
+  #ability-card-header {
+    font-size: 11px;
+  }
+}
+
 #ability-card-content{
   display: flex;
   flex-wrap: wrap;
@@ -17,14 +53,14 @@
   padding-bottom: 10px;
 }
 #skill-btn{
-  border-color: black;
+  border: 2px solid #9e814d;
   flex: 1 0 auto;
   margin-bottom: 10px;
   margin-left: 10px;
   margin-right: 10px;
 }
 #skill-btn-divider{
-  border-left: black 1px solid;
+  border-left: #9e814d 2px solid;
   padding-right: 10px;
   padding-top: 10px;
   padding-bottom: 10px;

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

@@ -1,5 +1,5 @@
 <div *ngIf="ability" id="main">
-  <mat-card>
+  <mat-card class="cardContainerClass">
     <mat-card-header id="ability-card-header" [style.background]="headStyle.bgColor" [style.color]="headStyle.textColor">
       {{ability.value}}
       <div class="diagonal-line"></div>

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

@@ -1,5 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { AbilityViewModel } from '../../../types/viewmodels/ability-viewmodels/AbilityViewModel';
+import {CharacterStatsViewModel} from "../../../types/viewmodels/character-viewmodels/CharacterStatsViewModel";
 
 @Component({
   selector: 'app-ability-card',
@@ -7,7 +8,7 @@ import { AbilityViewModel } from '../../../types/viewmodels/ability-viewmodels/A
   styleUrls: ['./ability-card.component.css'],
 })
 export class AbilityCardComponent implements OnInit {
-  @Input() ability: AbilityViewModel;
+  @Input() ability: CharacterStatsViewModel;
   @Input() headStyle: { bgColor: string; textColor: string };
   @Input() contentStyle: { bgColor: string; textColor: string };
 

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

@@ -53,7 +53,9 @@
       </mat-nav-list>
     </mat-sidenav>
     <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>
+      <div class="ability_card_container">
+        <ng-container *ngComponentOutlet="middleComponent"></ng-container>
+      </div>
     </mat-sidenav-content>
   </mat-sidenav-container>
 </div>

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

@@ -1,12 +1,6 @@
 import {Component, OnInit} from '@angular/core';
-import { AbilityViewModel } from "../../../types/viewmodels/ability-viewmodels/AbilityViewModel";
+import {AbilitiesComponent} from "../abilities/abilities.component";
-import {AppState} from "../../store/models/app-state.model";
+
-import {Store} from "@ngrx/store";
-import {first} from "rxjs/operators";
-import {CharacterService} from "../../../services/character.service";
-import {CharacterStatsViewModel} from "../../../types/viewmodels/character-viewmodels/CharacterStatsViewModel";
-import {ErrorResponse} from "../../../types/ErrorResponse";
-import {HttpErrorResponse} from "@angular/common/http";
 
 @Component({
   selector: 'app-player-dashboard',
@@ -14,47 +8,23 @@ import {HttpErrorResponse} from "@angular/common/http";
   styleUrls: ['./player-dashboard.component.css'],
 })
 export class PlayerDashboardComponent implements OnInit {
+  middleComponent;
   isExpanded = false;
   selected = false;
-  characterStats: CharacterStatsViewModel[];
-
-  constructor(private store: Store<AppState>, private characterService: CharacterService) {}
 
   ngOnInit() {
-    this.getCharacterStats();
+    this.SwitchMiddleComponent('AbilitiesComponent');
-  }
-
-  ability: AbilityViewModel = {
-    id: 1,
-    name: 'Strength',
-    value: 18,
-    modification: 2,
-    canSaveThrows: true,
-    savingThrows: 1,
-    skills: [
-      {
-        name: 'Throw',
-        value: 1,
-        can: false
-      }
-    ]
-  }
-
-  getCharacterStats() {
-    this.store.select( s => s.playerStore.characterId).pipe(first()).subscribe((characterId) => {
-      this.characterService.getCharacterStats(characterId).pipe(first()).subscribe((characterStats) => {
-        this.characterStats = characterStats;
-      }, (error: ErrorResponse | HttpErrorResponse) => {
-        if (error instanceof  HttpErrorResponse) {
-          error = error.error as ErrorResponse;
-        }
-        console.error(error.message);
-      });
-    })
   }
 
   toggle() {
       this.isExpanded = !this.isExpanded;
   }
 
+  SwitchMiddleComponent(componentName: string) {
+    switch(componentName){
+      case 'AbilitiesComponent':
+        this.middleComponent = AbilitiesComponent;
+    }
+  }
+
 }

SessionCompanion/SessionCompanion/ClientApp/src/types/viewmodels/character-viewmodels/CharacterStatsViewModel.ts

@@ -5,9 +5,9 @@ export interface CharacterStatsViewModel {
   modification: number;
   savingThrows: number;
   canSaveThrows: boolean;
-  skills: {
+  skills: [{
     name: string;
     value: number;
     can: boolean;
-  };
+  }];
 }