SES-147 displaying score whith other information

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/throws/throw-primary-ability/throw-primary-ability.component.css

@@ -42,37 +42,6 @@
   color: orange;
 }
 
-@media (max-width: 365px) {
-  .content-throw-dialog {
-    height: 350px;
-  }
-  .radio-button {
-    padding: 5%;
-    font-size: 12px;
-  }
-  #main {
-    width: 320px;
-  }
-}
-
-@media (min-width: 365px) and (max-width: 468px) {
-  #main {
-    width: 340px;
-  }
-}
-
-@media (min-width: 468px) and (max-width: 768px) {
-  #main {
-    width: 410px;
-  }
-}
-
-@media (min-width: 768px) {
-  #main {
-    width: 480px;
-  }
-}
-
 .button-dialog:hover {
   opacity: 0.5;
 }
@@ -88,6 +57,111 @@
 }
 
 .score-result {
-  padding-bottom: 5%;
+  font-size: 16px;
   font-weight: bold;
+  height: 180px;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  text-align: center;
+  align-items: center
 }
+
+.score-result>* {
+  flex: 1 1 80px;
+}
+
+.box {
+  padding: 2px;
+  width: 165px;
+  height: 85px;
+  world-wrap: break-word;
+  border: 1px #e9cca7 solid;
+  border-radius: 10px;
+}
+
+.box--ability {
+  paddin-top: 25px;
+  padding-left: 2px;
+  padding-right: 2px;
+  padding-bottom: 2px;
+  height: 170px;
+  width: 165px;
+  world-wrap: break-word;
+  border: 1px #e9cca7 solid;
+  border-radius: 10px;
+}
+
+.box--ability > div {
+  padding-top: 40%;
+}
+
+@media (max-width: 365px) {
+  .content-throw-dialog {
+    height: 350px;
+  }
+  .radio-button {
+    padding: 5%;
+    font-size: 12px;
+  }
+  #main {
+    width: 320px;
+  }
+  .score-result {
+    font-size: 14px;
+  }
+  .box {
+    width: 100px;
+    height: 85px;
+  }
+
+  .box--ability {
+    height: 170px;
+    width: 100px;
+  }
+}
+
+@media (min-width: 365px) and (max-width: 468px) {
+  #main {
+    width: 340px;
+  }
+  .score-result {
+    font-size: 15px;
+  }
+  .box {
+    width: 110px;
+    height: 85px;
+  }
+
+  .box--ability {
+    height: 170px;
+    width: 110px;
+  }
+}
+
+@media (min-width: 468px) and (max-width: 768px) {
+  #main {
+    width: 410px;
+  }
+  .score-result {
+    font-size: 15px;
+  }
+  .box {
+    width: 120px;
+    height: 85px;
+  }
+
+  .box--ability {
+    height: 170px;
+    width: 120px;
+  }
+}
+
+@media (min-width: 768px) {
+  #main {
+    width: 480px;
+  }
+}
+
+

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

@@ -19,13 +19,18 @@
         Hidden throw for Game Master
       </mat-radio-button>
     </mat-radio-group>
-    
+
     <div *ngIf="showSendToGMMessage" class="score-result">
       Your score has been send to Game Master
     </div>
     <div class="score-result">
-      <div *ngIf="score">Your roll result is: {{score}}</div>
-      <div *ngIf="score" >Your roll with modification is: {{score+abilityMod}}</div>
+      <div class="box" *ngIf="score">Your roll result is: <p>{{score}}</p></div>
+      <div class="box" *ngIf="score" >Your roll with modification is: <p>{{score+abilityMod}}</p></div>
+      <div class="box--ability" *ngIf="score && abilityValue">
+        <div>
+          Ability value: <p>{{abilityValue}}</p>
+        </div>
+      </div>
     </div>
 
   </div>