fix: added coloring of crit success/fail

Previously no coloring was shown for critical successes/fails. This change calculates if a roll was a crit and displays it accordingly in the chat message using a red/green color. Fix #120, part of #168
xdy · Jan 3, 2021 · cdbba61 · cdbba61
1 parent 8d7bb90
commit cdbba61
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 8 deletions.
diff --git a/src/module/config.ts b/src/module/config.ts
@@ -5,7 +5,8 @@ export const TWODSIX = {
   VARIANTS: undefined,
   ROLLTYPES: undefined,
   DIFFICULTIES: undefined,
-  RULESETS: undefined
+  RULESETS: undefined,
+  CRIT: undefined
 };
 
 TWODSIX.CHARACTERISTICS = {
@@ -107,3 +108,5 @@ TWODSIX.DIFFICULTIES = {
     Formidable: {mod: -6, target: 12},
   }
 };
+
+TWODSIX.CRIT = Object.freeze({"SUCCESS": 1, "FAIL": 2});
diff --git a/src/module/hooks/renderChatMessage.ts b/src/module/hooks/renderChatMessage.ts
@@ -1,3 +1,5 @@
+import { TWODSIX } from "../config";
+
 Hooks.on('renderChatMessage', (app, html) => {
   const damageMessage = html.find(".damage-message")[0];
   if (damageMessage) {
@@ -7,4 +9,15 @@ Hooks.on('renderChatMessage', (app, html) => {
       return ev.dataTransfer.setData("text/plain", app.data.flags.transfer);
     });
   }
+
+  const diceTotal = html.find(".dice-total");
+
+  if (diceTotal.length > 0) {
+    const crit = app.getFlag("twodsix", "crit");
+    if (crit && crit == TWODSIX.CRIT.SUCCESS) {
+      diceTotal.addClass("crit-success-roll");
+    } else if (crit && crit == TWODSIX.CRIT.FAIL) {
+      diceTotal.addClass("crit-fail-roll");
+    }
+  }
 });
diff --git a/src/module/utils/TwodsixRolls.ts b/src/module/utils/TwodsixRolls.ts
@@ -279,7 +279,7 @@ export class TwodsixRolls {
         //Do the throw
         roll.roll();
 
-        let effect;
+        let effect:number, crit:number;
         if (showEffect) {
           effect = roll.total;
         } else {
@@ -294,15 +294,20 @@ export class TwodsixRolls {
         * */
 
         //Handle special results
-        const diceValues:number[] = <number[]><unknown>roll.dice[0].results;
+
+        const diceResult = roll.dice[0].results.reduce((total:number, dice) => {
+          return dice["active"] ? total+dice["result"] : total;
+        }, 0);
 
         //TODO #168 Uncomment natural 2/12 handling below, once there is a setting to enable it
-        if (diceValues[0] + diceValues[1] === 2) {
+        if (diceResult === 2) {
+          crit = TWODSIX.CRIT.FAIL;
           console.log("Got a natural 2!");
           if (0 <= effect) {
             //effect = -1;
           }
-        } else if (diceValues[0] + diceValues[1] === 12) {
+        } else if (diceResult === 12) {
+          crit = TWODSIX.CRIT.SUCCESS;
           console.log("Got a natural 12!");
           if (effect < 0) {
             //effect = 0;
@@ -312,8 +317,14 @@ export class TwodsixRolls {
         //TODO #120 Handle critical success/failure once there is a system setting (or two) for it, maybe just show in chat card?
         const TODO_UNHARDCODEME_ISSUE_120 = 6;
         if (effect >= TODO_UNHARDCODEME_ISSUE_120) {
+          if (!crit) {
+            crit = TWODSIX.CRIT.SUCCESS;
+          }
           console.log("Got a critical success");
         } else if (effect <= -TODO_UNHARDCODEME_ISSUE_120) {
+          if (!crit) {
+            crit = TWODSIX.CRIT.FAIL;
+          }
           console.log("Got a critical failure");
         }
 
@@ -323,7 +334,7 @@ export class TwodsixRolls {
             speaker: speaker,
             flavor: flavor,
             rollType: settings.rollType,
-            flags: {"core.canPopout": true}
+            flags: {"core.canPopout": true, "twodsix.crit": crit}
           },
           {rollMode: rollMode}
         );

diff --git a/static/styles/twodsix.css b/static/styles/twodsix.css
@@ -1658,6 +1658,14 @@ a:hover {
   word-break: break-all;
 }
 
+.dice-roll .dice-total.crit-fail-roll {
+  color: #aa0200;
+}
+
+.dice-roll .dice-total.crit-success-roll {
+  color: #2f7822;
+}
+
 .dice-tooltip .dice-rolls .roll.d6 {
   background-image: url(../assets/chatlog/d6.svg) !important;
 }
@@ -2072,5 +2080,3 @@ div.app.window-app.twodsix.sheet.actor header a.close, div.app.window-app.twodsi
   background: none !important;
   border: none !important;
 }
-
-