feat(combat): show hit percentage for each creature

client/src/app/pages/combat/combat.page.html

@@ -106,6 +106,21 @@
                   </ng-template>
                 </div>
 
+                <ng-container
+                  *ngIf="selectedAbility && col.x > 3 && fightCharacters[char].health.current > 0"
+                >
+                  <div
+                    class="hit-chance"
+                    *ngIf="hitChance(fightCharacters[char]) as chance"
+                    [class.unlikely]="chance < 0.2"
+                    [class.possibly]="chance >= 0.2 && chance < 0.5"
+                    [class.likely]="chance >= 0.5 && chance < 0.8"
+                    [class.certain]="chance >= 0.8"
+                  >
+                    {{ chance | percent }}
+                  </div>
+                </ng-container>
+
                 <div
                   class="avatar-container"
                   [class.dead]="fightCharacters[char].health.current <= 0"

client/src/app/pages/combat/combat.page.scss

@@ -153,6 +153,39 @@
   }
 }
 
+.hit-chance {
+  position: absolute;
+  top: -24px;
+  width: 100%;
+  left: 0;
+  right: 0;
+  text-align: center;
+  background-color: #000;
+  color: #fff;
+  border-radius: 8px;
+
+  &.unlikely {
+    background-color: #800000;
+    border: 1px solid #fff;
+  }
+
+  &.possibly {
+    background-color: #83831c;
+    border: 1px solid #fff;
+  }
+
+  &.likely {
+    background-color: #00b93e;
+    border: 1px solid #fff;
+  }
+
+  &.certain {
+    background-color: #6505b4;
+    border: 1px solid #fff;
+  }
+
+}
+
 .health-bar {
   position: absolute;
   top: 0;

client/src/app/pages/combat/combat.page.ts

@@ -17,13 +17,15 @@ import {
   IMonster,
   IPlayer,
   IUser,
+  Stat,
 } from '@interfaces';
 import { AlertController, IonModal } from '@ionic/angular';
 import { Select, Store } from '@ngxs/store';
 import { ContentService } from '@services/content.service';
 import { FightService } from '@services/fight.service';
 import { FightStore, PlayerStore, UserStore } from '@stores';
 import { ChangePage } from '@stores/user/user.actions';
+import { mean, sum } from 'lodash';
 import { Observable, combineLatest } from 'rxjs';
 
 @Component({
@@ -368,4 +370,51 @@ export class CombatPage implements OnInit {
 
     await confirm.present();
   }
+
+  hitChance(character: IFightCharacter): number {
+    if (!this.selectedAbility) return 0;
+
+    const elementMultiplier =
+      1 +
+      sum(
+        this.selectedAbility.elements.map(
+          (el) => this.fight.generatedElements[el] ?? 0,
+        ),
+      ) *
+        0.05;
+
+    const me = this.myCharacter;
+    return mean(
+      Object.keys(this.selectedAbility.statScaling)
+        .filter(
+          (stat) => (this.selectedAbility?.statScaling[stat as Stat] ?? 0) > 0,
+        )
+        .map((stat) => ({
+          stat,
+          value: (me.baseStats[stat as Stat] ?? 0) * elementMultiplier,
+        }))
+        .filter(({ value }) => value > 0)
+        .map(({ stat, value }) => {
+          switch (stat) {
+            case 'power': {
+              const otherTough = Math.max(
+                character.baseStats[Stat.Toughness] ?? 0,
+              );
+              return value / (value + otherTough);
+            }
+
+            case 'magic': {
+              const otherResist = Math.max(
+                character.baseStats[Stat.Resistance] ?? 0,
+              );
+              return value / (value + otherResist);
+            }
+
+            default: {
+              return 1;
+            }
+          }
+        }),
+    );
+  }
 }