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

@@ -44,6 +44,7 @@ import { SpellService } from '../services/spell.service';
 import { WeaponService } from '../services/weapon.service';
 import { ArmorService } from '../services/armor.service';
 import { OtherEquipmentService } from '../services/other-equipment.service';
+import { ThrowPrimaryAbilityComponent } from './components/throws/throw-primary-ability/throw-primary-ability.component';
 
 @NgModule({
   declarations: [
@@ -60,6 +61,7 @@ import { OtherEquipmentService } from '../services/other-equipment.service';
     GameMasterArmorsTableComponent,
     GameMasterWeaponsTableComponent,
     GameMasterCharacterActionsDialogComponent,
+    ThrowPrimaryAbilityComponent,
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
@@ -103,6 +105,7 @@ import { OtherEquipmentService } from '../services/other-equipment.service';
     GameMasterWeaponsTableComponent,
     AbilitiesComponent,
     GameMasterCharacterActionsDialogComponent,
+    ThrowPrimaryAbilityComponent
   ],
 })
 export class AppModule {}

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

@@ -30,7 +30,7 @@ export class AbilitiesComponent implements OnInit {
       .pipe(first())
       .subscribe((characterId) => {
         this.characterService
-          .getCharacterStats(characterId)
+          .getCharacterStats(2)
           .pipe(first())
           .subscribe(
             (characterStats) => {

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

@@ -1,19 +1,19 @@
 <div *ngIf="ability" id="main">
   <mat-card [style.border-color]="headStyle.bgColor" [style.color]="headStyle.bgColor" class="cardContainerClass">
     <mat-card-header id="ability-card-header" [style.background]="headStyle.bgColor" [style.color]="headStyle.textColor">
-      <div id="ability-value">{{ability.value}}</div>
+      <div matTooltip="Click to roll the {{ability.name}}" id="ability-value" (click)="OpenPrimaryThrowDialog()">{{ability.value}}</div>
       <div class="diagonal-line"></div>
       Mod: {{ability.modification > 0? '+' + ability.modification :  + ability.modification}}
       <div class="diagonal-line"></div>
       {{ability.name}}
       <div *ngIf="ability.canSaveThrows" class="diagonal-line" style="margin-left: auto"></div>
       <div *ngIf="ability.canSaveThrows" style="margin-right: 10px">
-        <div id="ability-saving-throws">ST: {{ability.savingThrows > 0? '+' + ability.savingThrows :  ability.savingThrows}}</div>
+        <div matTooltip="Click to do the Saving Throw" id="ability-saving-throws">ST: {{ability.savingThrows > 0? '+' + ability.savingThrows :  ability.savingThrows}}</div>
       </div>
     </mat-card-header>
     <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 [style.border-color]="headStyle.bgColor" mat-stroked-button *ngFor="let skill of ability.skills" id="skill-btn">
+      <a matTooltip="Click to roll the {{skill.name}}" [style.border-color]="headStyle.bgColor" mat-stroked-button *ngFor="let skill of ability.skills" id="skill-btn">
         {{skill.name}}
         &nbsp;	&nbsp;
         <span [style.border-left-color]="headStyle.bgColor" id="skill-btn-divider"></span>

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

@@ -1,5 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { CharacterStatsViewModel } from '../../../types/viewmodels/character-viewmodels/CharacterStatsViewModel';
+import { ThrowPrimaryAbilityComponent } from '../throws/throw-primary-ability/throw-primary-ability.component';
+import { MatDialog } from '@angular/material';
 
 @Component({
   selector: 'app-ability-card',
@@ -11,7 +13,8 @@ export class AbilityCardComponent implements OnInit {
   @Input() headStyle: { bgColor: string; textColor: string };
   @Input() contentStyle: { bgColor: string; textColor: string };
 
-  constructor() {}
+  constructor(public dialog: MatDialog) {
+  }
 
   ngOnInit() {
     if (this.ability.skills != null) {
@@ -42,4 +45,11 @@ export class AbilityCardComponent implements OnInit {
         break;
     }
   }
+
+  public OpenPrimaryThrowDialog(): void {
+    this.dialog.open(ThrowPrimaryAbilityComponent, {
+    });
   }
+
+}
+

SessionCompanion/SessionCompanion/ClientApp/src/app/components/throws/throw-primary-ability/throw-primary-ability.component.css

@@ -0,0 +1,41 @@
+.throw-container {
+  top: 50%;
+}
+
+::ng-deep.mat-dialog-container {
+  background-color: #102028;
+  color: whitesmoke;
+}
+.header-throw-dialog {
+  color: orange;
+  background-color: #102028;
+}
+
+.content-throw-dialog {
+  background-color: #102028;
+  color: orange;
+  height: 400px;
+}
+
+.throw-dialog-actions {
+  background-color: #102028;
+  color: orange;
+}
+
+@media (max-width: 468px) {
+  .throw-container {
+    width: 250px;
+  }
+}
+
+@media (min-width: 468px) and (max-width: 768px) {
+  .throw-container {
+    width: 420px;
+  }
+}
+
+@media (min-width: 768px) {
+  .throw-container {
+    width: 480px;
+  }
+}

SessionCompanion/SessionCompanion/ClientApp/src/app/components/throws/throw-primary-ability/throw-primary-ability.component.html

@@ -0,0 +1,13 @@
+<div class="throw-container">
+  <div mat-dialog-title class="header-throw-dialog">
+    Header
+  </div>
+  <div mat-dialog-content class="content-throw-dialog">
+    Content
+  </div>
+  <div mat-dialog-actions class="throw-dialog-actions">
+    <button mat-button [mat-dialog-close] >Cancel</button>
+    <button mat-button [mat-dialog-close] cdkFocusInitial>Ok</button>
+  </div>
+</div>
+

SessionCompanion/SessionCompanion/ClientApp/src/app/components/throws/throw-primary-ability/throw-primary-ability.component.spec.ts

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

SessionCompanion/SessionCompanion/ClientApp/src/app/components/throws/throw-primary-ability/throw-primary-ability.component.ts

@@ -0,0 +1,20 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { AbilitiesComponent } from '../../abilities/abilities.component';
+
+@Component({
+  selector: 'app-throw-primary-ability',
+  templateUrl: './throw-primary-ability.component.html',
+  styleUrls: ['./throw-primary-ability.component.css']
+})
+export class ThrowPrimaryAbilityComponent implements OnInit {
+
+  constructor(
+    public dialogRef: MatDialogRef<AbilitiesComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any
+  ) {}
+
+  ngOnInit() {
+  }
+
+}