SES-147 display dialog for ST and other skills also

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(2)
+          .getCharacterStats(characterId)
           .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 matTooltip="Click to roll the {{ability.name}}" id="ability-value" (click)="OpenPrimaryThrowDialog(ability.name, ability.value, ability.modification)">{{ability.value}}</div>
+      <div matTooltip="Click to roll the {{ability.name}}" id="ability-value" (click)="OpenThrowDialog(ability.name, ability.value, ability.modification)">{{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 matTooltip="Click to do the Saving Throw" id="ability-saving-throws">ST: {{ability.savingThrows > 0? '+' + ability.savingThrows :  ability.savingThrows}}</div>
+        <div (click)="OpenThrowDialog('Saving Throw', null, ability.savingThrows)" 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 matTooltip="Click to roll the {{skill.name}}" [style.border-color]="headStyle.bgColor" mat-stroked-button *ngFor="let skill of ability.skills" id="skill-btn">
+      <a (click)="OpenThrowDialog(skill.name, null, skill.value)" 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

@@ -46,7 +46,7 @@ export class AbilityCardComponent implements OnInit {
     }
   }
 
-  public OpenPrimaryThrowDialog(abilityName: string, abilityValue: number, abilityMod: number): void {
+  public OpenThrowDialog(abilityName: string, abilityValue: number, abilityMod: number): void {
     this.dialog.open(ThrowPrimaryAbilityComponent, {
       data: {
         abilityName: abilityName,
@@ -55,6 +55,5 @@ export class AbilityCardComponent implements OnInit {
       }
     });
   }
-
 }
 

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

@@ -55,6 +55,7 @@
   border-radius: 10px;
   margin-bottom: 5%;
   font-size: 14px;
+  text-align: center;
 }
 
 .radio-button:hover {
@@ -68,7 +69,6 @@
 }
 
 .score-result {
-  height: 50px;
   padding-bottom: 5%;
   font-weight: bold;
 }

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

@@ -6,10 +6,12 @@
   <div mat-dialog-content class="content-throw-dialog">
     <label id="radio-group-label-class">Choose which type of throw you are interested in:</label>
     <mat-divider></mat-divider>
+
     <mat-radio-group
       aria-labelledby="radio-group-label-class"
       class="radio-group"
       [(ngModel)]="choosedThrow">
+
       <mat-radio-button name="normal" type="submit" (click)="getResultOfRoll('normal')" class="radio-button">
         Normal throw on ability
       </mat-radio-button>
@@ -17,11 +19,15 @@
         Hidden throw for Game Master
       </mat-radio-button>
     </mat-radio-group>
-    <div *ngIf="showSendToGMMessage">
+    
+    <div *ngIf="showSendToGMMessage" class="score-result">
       Your score has been send to Game Master
     </div>
-    <div *ngIf="score" class="score-result">Your roll result is: {{score}}</div>
+    <div class="score-result">
-    <div *ngIf="score" class="score-result">Your roll with mode result is: {{score+abilityMod}}</div>
+      <div *ngIf="score">Your roll result is: {{score}}</div>
+      <div *ngIf="score" >Your roll with modification is: {{score+abilityMod}}</div>
+    </div>
+
   </div>
   <mat-divider class="mat-divider--custom-style"></mat-divider>
   <div mat-dialog-actions class="throw-dialog-actions">

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

@@ -12,11 +12,6 @@ export class ThrowPrimaryAbilityComponent implements OnInit {
   checked = false;
   choosedThrow: string;
   throws: string[] = [`Normal throw on ability`, 'Hidden throw for Game Master'];
-  dataCube: {
-    currentFaceIndex: 0,
-    isRolling: false,
-    faces: [],
-  };
   showSendToGMMessage: boolean;
 
   @Input() abilityName: string;