address #409, fix value calc text, fix stat overflow

Lurkars · Oct 1, 2023 · 87e2112 · 87e2112
1 parent 70fc8ec
commit 87e2112
Show file tree

Hide file tree

Showing 7 changed files with 170 additions and 42 deletions.
diff --git a/data/fh/monster/tormentor.json b/data/fh/monster/tormentor.json
@@ -152,7 +152,7 @@
   "stats": [
     {
       "level": 0,
-      "health": "10xCx3/2",
+      "health": "[10xCx3/2{$math.floor}]",
       "movement": 4,
       "attack": 3,
       "immunities": [
@@ -162,7 +162,7 @@
     },
     {
       "level": 1,
-      "health": "12xCx3/2",
+      "health": "[12xCx3/2{$math.floor}]",
       "movement": 4,
       "attack": 4,
       "immunities": [
@@ -172,7 +172,7 @@
     },
     {
       "level": 2,
-      "health": "14xCx3/2",
+      "health": "[14xCx3/2{$math.floor}]",
       "movement": 4,
       "attack": 5,
       "immunities": [
@@ -182,7 +182,7 @@
     },
     {
       "level": 3,
-      "health": "18xCx3/2",
+      "health": "[18xCx3/2{$math.floor}]",
       "movement": 5,
       "attack": 5,
       "immunities": [
@@ -192,7 +192,7 @@
     },
     {
       "level": 4,
-      "health": "21xCx3/2",
+      "health": "[21xCx3/2{$math.floor}]",
       "movement": 5,
       "attack": 6,
       "immunities": [
@@ -202,7 +202,7 @@
     },
     {
       "level": 5,
-      "health": "26xCx3/2",
+      "health": "[26xCx3/2{$math.floor}]",
       "movement": 5,
       "attack": 6,
       "immunities": [
@@ -212,7 +212,7 @@
     },
     {
       "level": 6,
-      "health": "33xCx3/2",
+      "health": "[33xCx3/2{$math.floor}]",
       "movement": 5,
       "attack": 8,
       "immunities": [
@@ -223,7 +223,7 @@
     },
     {
       "level": 7,
-      "health": "39xCx3/2",
+      "health": "[39xCx3/2{$math.floor}]",
       "movement": 6,
       "attack": 9,
       "immunities": [

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gloomhavensecretariat",
-  "version": "0.77.11",
+  "version": "0.77.12",
   "license": "AGPL3",
   "description": "Gloomhaven Secretariat is a Gloomhaven Companion app.",
   "homepage": "https://gloomhaven-secretariat.de",

diff --git a/src/app/ui/figures/monster/stats/stats.html b/src/app/ui/figures/monster/stats/stats.html
@@ -1,7 +1,8 @@
 <div class="stats-container"
   [ngClass]="{'boss' : monster.boss, 'fh' : settingsManager.settings.fhStyle, 'no-click': noClick, 'denied' : gameManager.stateManager.permissions && !gameManager.stateManager.monsterPermissions[monster.name + '|' + monster.edition]}"
   #card [style.fontSize]="card.offsetWidth * 0.03 + 'px'">
-  <div #levelButton (click)="openLevelDialog()" class="level" [ghs-label]="'game.level'" [ghs-label-attribute]="'title'">{{monster.level}}
+  <div #levelButton (click)="openLevelDialog()" class="level" [ghs-label]="'game.level'"
+    [ghs-label-attribute]="'title'">{{monster.level}}
   </div>
 
   <div *ngIf="settingsManager.settings.disableStandees && hideStats(MonsterType.normal)" class="filter-stats normal">
@@ -26,25 +27,33 @@
 
   <div class="stats boss" *ngIf="monster.boss"
     [ngClass]="{'hidden' : hideStats(MonsterType.boss), 'range' : hideStats(MonsterType.boss) || statsForType(MonsterType.boss).range}">
-    <span class="stat boss bordered" [ngClass]="{'hidden' : hideStats(MonsterType.boss)}"
-      [value-calc]="statsForType(MonsterType.boss).health" [level]="monster.level" [empty]="true"></span>
+    <span class="stat boss bordered" [ngClass]="{'hidden' : hideStats(MonsterType.boss)}">
+      <span class="value" [value-calc]="statsForType(MonsterType.boss).health" [level]="monster.level"
+        [empty]="true"></span>
+    </span>
     <span class="stat-icon"><img
         [src]="'./assets/images' + (settingsManager.settings.fhStyle ? '/fh' : '') + '/stats/hp.svg'" /></span>
 
-    <span class="stat boss bordered" [ngClass]="{'hidden' : hideStats(MonsterType.boss)}"
-      [value-calc]="statsForType(MonsterType.boss).movement" [level]="monster.level" [empty]="true"></span>
+    <span class="stat boss bordered" [ngClass]="{'hidden' : hideStats(MonsterType.boss)}">
+      <span class="value" [value-calc]="statsForType(MonsterType.boss).movement" [level]="monster.level"
+        [empty]="true"></span>
+    </span>
     <span class="stat-icon"><img
         [src]="'./assets/images' + (settingsManager.settings.fhStyle ? '/fh' : '') + '/stats/' + (monster.flying ? 'fly' : 'move') + '.svg'" /></span>
 
     <span class="stat boss"
-      [ngClass]="{'hidden' : hideStats(MonsterType.boss), 'bordered' : hideStats(MonsterType.boss) || statsForType(MonsterType.boss).range }"
-      [value-calc]="statsForType(MonsterType.boss).attack" [level]="monster.level" [empty]="true"></span>
+      [ngClass]="{'hidden' : hideStats(MonsterType.boss), 'bordered' : hideStats(MonsterType.boss) || statsForType(MonsterType.boss).range }">
+      <span class="value" [value-calc]="statsForType(MonsterType.boss).attack" [level]="monster.level"
+        [empty]="true"></span>
+    </span>
     <span class="stat-icon"><img
         [src]="'./assets/images' + (settingsManager.settings.fhStyle ? '/fh' : '') + '/stats/attack.svg'" /></span>
 
     <ng-container *ngIf="hideStats(MonsterType.boss)  || statsForType(MonsterType.boss).range">
-      <span class="stat boss" [ngClass]="{'hidden' : hideStats(MonsterType.boss)}"
-        [value-calc]="statsForType(MonsterType.boss).range" [level]="monster.level" [empty]="true"></span>
+      <span class="stat boss" [ngClass]="{'hidden' : hideStats(MonsterType.boss)}">
+        <span class="value" [value-calc]="statsForType(MonsterType.boss).range" [level]="monster.level"
+          [empty]="true"></span>
+      </span>
       <span class="stat-icon"><img
           [src]="'./assets/images' + (settingsManager.settings.fhStyle ? '/fh' : '') + '/stats/range.svg'" /></span>
     </ng-container>
@@ -56,37 +65,54 @@
 
   <div class="stats" *ngIf="!monster.boss"
     [ngClass]="{'range' : hideStats(MonsterType.normal) && hideStats(MonsterType.elite) || statsForType(MonsterType.normal).range || statsForType(MonsterType.elite).range}">
-    <span class="stat normal bordered" [ngClass]="{'hidden' : hideStats(MonsterType.normal)}"
-      [value-calc]="statsForType(MonsterType.normal).health" [level]="monster.level" [empty]="true"></span>
+    <span class="stat normal bordered" [ngClass]="{'hidden' : hideStats(MonsterType.normal)}">
+      <span class="value" [value-calc]="statsForType(MonsterType.normal).health" [level]="monster.level"
+        [empty]="true"></span>
+    </span>
     <span class="stat-icon"><img
         [src]="'./assets/images' + (settingsManager.settings.fhStyle ? '/fh' : '') + '/stats/hp.svg'" /></span>
-    <span class="stat elite bordered" [ngClass]="{'hidden' : hideStats(MonsterType.elite)}"
-      [value-calc]="statsForType(MonsterType.elite).health" [level]="monster.level" [empty]="true"></span>
+    <span class="stat elite bordered" [ngClass]="{'hidden' : hideStats(MonsterType.elite)}">
+      <span class="value" [value-calc]="statsForType(MonsterType.elite).health" [level]="monster.level"
+        [empty]="true"></span>
+    </span>
 
-    <span class="stat normal bordered" [ngClass]="{'hidden' : hideStats(MonsterType.normal)}"
-      [value-calc]="statsForType(MonsterType.normal).movement" [level]="monster.level" [empty]="true"></span>
+    <span class="stat normal bordered" [ngClass]="{'hidden' : hideStats(MonsterType.normal)}">
+      <span class="value" [value-calc]="statsForType(MonsterType.normal).movement" [level]="monster.level"
+        [empty]="true"></span>
+    </span>
     <span class="stat-icon"><img
         [src]="'./assets/images' + (settingsManager.settings.fhStyle ? '/fh' : '') + '/stats/' + (monster.flying ? 'fly' : 'move') + '.svg'" /></span>
-    <span class="stat elite bordered" [ngClass]="{'hidden' : hideStats(MonsterType.elite)}"
-      [value-calc]="statsForType(MonsterType.elite).movement" [level]="monster.level" [empty]="true"></span>
+    <span class="stat elite bordered" [ngClass]="{'hidden' : hideStats(MonsterType.elite)}">
+      <span class="value" [value-calc]="statsForType(MonsterType.elite).movement" [level]="monster.level"
+        [empty]="true"></span>
+    </span>
 
     <span class="stat normal"
-      [ngClass]="{'hidden' : hideStats(MonsterType.normal), 'bordered' : hideStats(MonsterType.normal) && hideStats(MonsterType.normal) || statsForType(MonsterType.normal).range || statsForType(MonsterType.elite).range}"
-      [value-calc]="statsForType(MonsterType.normal).attack" [level]="monster.level" [empty]="true"></span>
+      [ngClass]="{'hidden' : hideStats(MonsterType.normal), 'bordered' : hideStats(MonsterType.normal) && hideStats(MonsterType.normal) || statsForType(MonsterType.normal).range || statsForType(MonsterType.elite).range}">
+      <span class="value" [value-calc]="statsForType(MonsterType.normal).attack" [level]="monster.level"
+        [empty]="true"></span>
+    </span>
     <span class="stat-icon"><img
         [src]="'./assets/images' + (settingsManager.settings.fhStyle ? '/fh' : '') + '/stats/attack.svg'" /></span>
     <span class="stat elite"
-      [ngClass]="{'hidden' : hideStats(MonsterType.elite), 'bordered' : hideStats(MonsterType.normal) && hideStats(MonsterType.normal) || statsForType(MonsterType.normal).range || statsForType(MonsterType.elite).range}"
-      [value-calc]="statsForType(MonsterType.elite).attack" [level]="monster.level" [empty]="true"></span>
+      [ngClass]="{'hidden' : hideStats(MonsterType.elite), 'bordered' : hideStats(MonsterType.normal) && hideStats(MonsterType.normal) || statsForType(MonsterType.normal).range || statsForType(MonsterType.elite).range}">
+      <span class="value" [value-calc]="statsForType(MonsterType.elite).attack" [level]="monster.level"
+        [empty]="true"></span>
+    </span>
 
     <ng-container
       *ngIf="hideStats(MonsterType.normal) && hideStats(MonsterType.elite) || statsForType(MonsterType.normal).range || statsForType(MonsterType.elite).range">
-      <span class="stat normal" [ngClass]="{'hidden' : hideStats(MonsterType.normal)}"
-        [value-calc]="statsForType(MonsterType.normal).range" [level]="monster.level" [empty]="true"></span>
+      <span class="stat normal" [ngClass]="{'hidden' : hideStats(MonsterType.normal)}">
+        <span class="value" [value-calc]="statsForType(MonsterType.normal).range" [level]="monster.level"
+          [empty]="true"></span>
+      </span>
       <span class="stat-icon"><img
-          [src]="'./assets/images' + (settingsManager.settings.fhStyle ? '/fh' : '') + '/stats/range.svg'" /></span>
-      <span class="stat elite" [ngClass]="{'hidden' : hideStats(MonsterType.elite)}"
-        [value-calc]="statsForType(MonsterType.elite).range" [level]="monster.level" [empty]="true"></span>
+          [src]="'./assets/images' + (settingsManager.settings.fhStyle ? '/fh' : '') + '/stats/range.svg'" />
+      </span>
+      <span class="stat elite" [ngClass]="{'hidden' : hideStats(MonsterType.elite)}">
+        <span class="value" [value-calc]="statsForType(MonsterType.elite).range" [level]="monster.level"
+          [empty]="true"></span>
+      </span>
     </ng-container>
   </div>
 

diff --git a/src/app/ui/figures/monster/stats/stats.scss b/src/app/ui/figures/monster/stats/stats.scss
@@ -186,19 +186,32 @@
     }
 
     .stat {
+      position: relative;
       font-size: 2.4em;
       line-height: 1.7em;
       padding-top: 0;
       width: 100%;
+      display: flex;
+
+      .value {
+        display: block;
+        width: 100%;
+        white-space: nowrap;
+        overflow-x: auto;
+        overflow-y: hidden;
+      }
 
       &.normal,
       &.boss {
-        position: relative;
         justify-self: end;
-        text-align: right;
+        justify-content: flex-end;
         filter: drop-shadow(0.01em 0.01em 0.01em var(--ghs-color-white));
         padding-right: 0.8em;
 
+        .value {
+          text-align: right;
+        }
+
         &.bordered::before {
           content: ' ';
           position: absolute;
@@ -212,7 +225,6 @@
 
       &.elite {
         justify-self: start;
-        text-align: left;
         color: var(--ghs-color-white);
         filter: drop-shadow(0.01em 0.01em 0.01em var(--ghs-color-black));
         padding-left: 0.8em;

diff --git a/src/app/ui/helper/valueCalc.ts b/src/app/ui/helper/valueCalc.ts
@@ -40,9 +40,9 @@ export function valueCalc(value: string | number, level: number | undefined = un
   const match = value.match(EntityValueRegex);
   if (match) {
     let func = match[3];
-    const funcLabel = func && func.startsWith('%');
+    const funcLabel = func && func.startsWith('$');
     if (funcLabel) {
-      func = func.replace('%', '');
+      func = func.replace('$', '');
     }
     return funcLabel ? match[1] + ' ' + settingsManager.getLabel('game.custom.' + func) : match[1];
   }

diff --git a/src/assets/images/action/damage.svg b/src/assets/images/action/damage.svg