SES-147 modified UI dialog throw

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

@@ -45,6 +45,7 @@ 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';
+import { MatRadioModule } from '@angular/material/radio';
 
 @NgModule({
   declarations: [
@@ -89,6 +90,7 @@ import { ThrowPrimaryAbilityComponent } from './components/throws/throw-primary-
     MatTableModule,
     MatSortModule,
     MatTooltipModule,
+    MatRadioModule,
   ],
   providers: [
     UserService,

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

@@ -1,7 +1,7 @@
 <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.value}}</div>
+      <div matTooltip="Click to roll the {{ability.name}}" id="ability-value" (click)="OpenPrimaryThrowDialog(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>

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

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

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

@@ -1,5 +1,9 @@
 @import "../../../styles.css";
 
+.toggle-class{
+  margin: 5px;
+}
+
 .menu-spacer {
   flex: 1 1 auto;
 }

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

@@ -5,6 +5,7 @@
 ::ng-deep.mat-dialog-container {
   background-color: #102028;
   color: whitesmoke;
+  box-shadow: -1px 3px 48px 23px rgba(0,0,0,0.82);
 }
 .header-throw-dialog {
   color: orange;
@@ -15,6 +16,7 @@
   background-color: #102028;
   color: orange;
   height: 400px;
+  display: block;
 }
 
 .throw-dialog-actions {
@@ -28,14 +30,45 @@
   }
 }
 
-@media (min-width: 468px) and (max-width: 768px) {
-  .throw-container {
-    width: 420px;
-  }
-}
-
 @media (min-width: 768px) {
   .throw-container {
     width: 480px;
   }
 }
+
+.button-dialog:hover {
+  opacity: 0.5;
+}
+
+#radio-group-label-class {
+  margin-bottom: 5%;
+}
+
+.radio-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.radio-button {
+  padding: 5%;
+  border: 1px #e9cca7 solid;
+  border-radius: 10px;
+  margin-bottom: 5%;
+  font-size: 14px;
+}
+
+.radio-button:hover {
+  opacity: 0.5;
+}
+
+.mat-divider--custom-style{
+  background-color: #9e8b6e;
+  margin-bottom: 20px;
+  box-shadow: 0 1px 0 0 #d8d8d8;
+}
+
+.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

@@ -1,13 +1,31 @@
 <div class="throw-container">
   <div mat-dialog-title class="header-throw-dialog">
-    Header
+    Click to roll the {{abilityName}}
   </div>
+  <mat-divider class="mat-divider--custom-style"></mat-divider>
   <div mat-dialog-content class="content-throw-dialog">
-    Content
+    <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>
+      <mat-radio-button name="hidden" type="submit" (click)="getResultOfRoll('hidden')" class="radio-button">
+        Hidden throw for Game Master
+      </mat-radio-button>
+    </mat-radio-group>
+    <div *ngIf="showSendToGMMessage">
+      Your score has been send to Game Master
+    </div>
+    <div *ngIf="score" class="score-result">Your roll result is: {{score}}</div>
+    <div *ngIf="score" class="score-result">Your roll with mode result is: {{score+abilityMod}}</div>
   </div>
+  <mat-divider class="mat-divider--custom-style"></mat-divider>
   <div mat-dialog-actions class="throw-dialog-actions">
-    <button mat-button [mat-dialog-close] >Cancel</button>
+    <button mat-button [mat-dialog-close] class="button-dialog">Close dialog</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.ts

@@ -1,4 +1,4 @@
-import { Component, Inject, OnInit } from '@angular/core';
+import {Component, Inject, Input, OnInit} from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
 import { AbilitiesComponent } from '../../abilities/abilities.component';
 
@@ -8,6 +8,21 @@ import { AbilitiesComponent } from '../../abilities/abilities.component';
   styleUrls: ['./throw-primary-ability.component.css']
 })
 export class ThrowPrimaryAbilityComponent implements OnInit {
+  score: number;
+  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;
+  @Input() abilityValue: number;
+  @Input() abilityMod: number;
+  @Input() message: string;
 
   constructor(
     public dialogRef: MatDialogRef<AbilitiesComponent>,
@@ -15,6 +30,28 @@ export class ThrowPrimaryAbilityComponent implements OnInit {
   ) {}
 
   ngOnInit() {
+    this.abilityName = this.data.abilityName;
+    this.abilityValue = this.data.abilityValue;
+    this.abilityMod = this.data.abilityMod;
   }
 
+  getRandomNumberBetween(min, max) {
+    min = Math.ceil(min);
+    max = Math.floor(max);
+    return Math.floor(Math.random() * (max - min)) + min;
+}
+
+  getResultOfRoll(choice: string) {
+    switch (choice) {
+      case 'normal':
+        this.score = this.getRandomNumberBetween(1, 20);
+        this.showSendToGMMessage = false;
+        break;
+      case 'hidden':
+        this.score = null;
+        this.showSendToGMMessage = true;
+        //TODO tutaj bedzie wyslanie rzutu do GM
+        break;
+    }
+  }
 }