From 1a27f1b7eb2b90b80c86cb597b5b740451110a03 Mon Sep 17 00:00:00 2001
From: Jonas Karlsson <jk@xdy.se>
Date: Tue, 21 Jul 2020 13:22:01 +0200
Subject: [PATCH] fix: Skills can now be rolled, with the selected
 characteristic's modifier. Not pretty, but it works.

Still need to figure out how to select the default characteristic for a skill.
---
 src/module/sheets/TwodsixActorSheet.ts   | 41 ++++++++++++++++++++----
 src/module/utils/parseUcf.ts             |  2 +-
 static/template.json                     | 14 ++++----
 static/templates/actors/actor-sheet.html | 29 ++++++++---------
 4 files changed, 56 insertions(+), 30 deletions(-)

diff --git a/src/module/sheets/TwodsixActorSheet.ts b/src/module/sheets/TwodsixActorSheet.ts
index 8b127c261..4bd92d297 100644
--- a/src/module/sheets/TwodsixActorSheet.ts
+++ b/src/module/sheets/TwodsixActorSheet.ts
@@ -1,8 +1,3 @@
-/**
- * Extend the basic ActorSheet with some very simple modifications
- * @extends {ActorSheet}
- */
-
 export class TwodsixActorSheet extends ActorSheet {
 
     /**
@@ -142,7 +137,10 @@ export class TwodsixActorSheet extends ActorSheet {
         });
 
         // Rollable abilities.
-        html.find('.rollable').on('click', (this._onRollable).bind(this));
+        html.find('.rollable-characteristic').on('click', (this._onRollableCharacteristic).bind(this));
+
+        html.find('.rollable-skill').on('click', (this._onRollableSkill).bind(this));
+
     }
 
     /**
@@ -177,7 +175,7 @@ export class TwodsixActorSheet extends ActorSheet {
      * @param {Event} event   The originating click event
      * @private
      */
-    _onRollable(event:{ preventDefault:() => void; currentTarget:any; }):void {
+    _onRollableCharacteristic(event:{ preventDefault:() => void; currentTarget:any; }):void {
         event.preventDefault();
         const element = event.currentTarget;
         const {dataset} = element;
@@ -192,6 +190,35 @@ export class TwodsixActorSheet extends ActorSheet {
         }
     }
 
+    /**
+     * Handle clickable rolls.
+     * @param {Event} event   The originating click event
+     * @private
+     */
+    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+    _onRollableSkill(event:any):void {
+        event.preventDefault();
+        const children = event.currentTarget.children;
+
+
+        if (event.originalEvent.target.type === 'select-one') {
+            //Don't treat select as rollable
+            return;
+        }
+
+        //Ugly...
+        const skill:string = children.item(0).innerText;
+        const skillValue:number = parseInt(children.item(2).textContent);
+        const characteristicMod = parseInt(this.actor.data.data.characteristics[children.item(1).value].mod);
+        const roll = new Roll("2d6+" + skillValue + "+" + characteristicMod, this.actor.data.data);
+        const label = `Rolling ${skill}`;
+        roll.roll().toMessage({
+            speaker: ChatMessage.getSpeaker({actor: this.actor}),
+            flavor: label
+        });
+    }
+
+
     // async _onDrop(event:any):Promise<boolean> {
     //     event.preventDefault();
     //
diff --git a/src/module/utils/parseUcf.ts b/src/module/utils/parseUcf.ts
index 78ad00bd4..9042d81eb 100644
--- a/src/module/utils/parseUcf.ts
+++ b/src/module/utils/parseUcf.ts
@@ -6,7 +6,7 @@
 import {TWODSIX} from "../config";
 import {calcModFromString, fromPseudoHex} from "./sheetUtils";
 
-TWODSIX.CHARACTERISTICS = ["STR", "DEX", "END", "INT", "EDU", "SOC", "PSI"];
+TWODSIX.CHARACTERISTICS = ["str", "dex", "end", "int", "edu", "soc", "psi"];
 
 //TODO Change so that it modifies the current character's data.
 
diff --git a/static/template.json b/static/template.json
index 2ade649f0..e60a01747 100644
--- a/static/template.json
+++ b/static/template.json
@@ -13,43 +13,43 @@
           "str": {
             "value": 0,
             "damage": 0,
-            "short": "STR",
+            "short": "str",
             "label": "Strengh"
           },
           "dex": {
             "value": 0,
             "damage": 0,
-            "short": "DEX",
+            "short": "dex",
             "label": "Dexterity"
           },
           "end": {
             "value": 0,
             "damage": 0,
-            "short": "END",
+            "short": "end",
             "label": "Endurance"
           },
           "int": {
             "value": 0,
             "damage": 0,
-            "short": "INT",
+            "short": "int",
             "label": "Intelligence"
           },
           "edu": {
             "value": 0,
             "damage": 0,
-            "short": "EDU",
+            "short": "edu",
             "label": "Education"
           },
           "soc": {
             "value": 0,
             "damage": 0,
-            "short": "SOC",
+            "short": "soc",
             "label": "Social Status"
           },
           "psi": {
             "value": 0,
             "damage": 0,
-            "short": "PSI",
+            "short": "psi",
             "label": "Psionic Strength"
           }
         }
diff --git a/static/templates/actors/actor-sheet.html b/static/templates/actors/actor-sheet.html
index 4336f94f6..c6a3abc49 100644
--- a/static/templates/actors/actor-sheet.html
+++ b/static/templates/actors/actor-sheet.html
@@ -28,7 +28,7 @@ <h1 class="charname">
                 <span data-label="characteristics.{{current}}">{{numberFormat characteristic.current decimals=0}}</span>
                 <input id="characteristics.{{key}}" type="text" name="damage" value="{{characteristic.value}}"
                        data-dtype="Number"/>
-                <span class="characteristic-mod rollable draggable" data-roll="2d6+@characteristics.{{key}}.mod"
+                <span class="characteristic-mod rollable-characteristic draggable" data-roll="2d6+characteristic.mod"
                       data-label="{{key}}">{{numberFormat characteristic.mod decimals=0 sign=true}}</span>
             </div>
             {{/each}}
@@ -48,7 +48,7 @@ <h1 class="charname">
         {{log data.skills}}
         {{log data.characteristics}}
 
-<!--        TODO Skill + level + ability dropdown | + 2d6 = output chat-->
+        <!--        TODO Skill + level + ability dropdown | + 2d6 = output chat-->
 
         <div class="tab skills" data-group="primary" data-tab="skills">
             <div class="skills grid grid-2col">
@@ -58,28 +58,28 @@ <h2 class="clearfix flexbreak">Skills</h2>
 
                         <!--TODO Filter out skills from items, I can see items filled, but not data.skills.-->
                         {{#each items as |skills key|}}
-                        <div class="skills flexrow flex-group-center">
-                            <label class="resource-label">{{skills.name}}</label>
-                        </div>
-                        <!-- TODO Add characteristics dropdown here, with default choice from skill-->
-                        <label>
+                        <div class="rollable-skill">
+                            <div class="skills flexrow flex-group-center">
+                                <label class="resource-label">{{skills.name}}</label>
+                            </div>
+                            <!-- TODO Add characteristics dropdown here, with default choice from skill-->
                             <select name="data.addskillselect" style="width:200px;">
                                 <!-- TODO Something like the line below, but I get "select doesn't match each"-->
-<!--                                { { # select skills.data.defaultCharacteristic} }-->
+                                <!--                                { { # select skills.data.defaultCharacteristic} }-->
                                 {{log "skills.data.defaultCharacteristic"}}
                                 {{log skills.data.defaultCharacteristic}}
                                 {{log "../skill.defaultCharacteristic"}}
                                 {{log ../skill.defaultCharacteristic}}
                                 {{#each ../data.characteristics as |characteristic ckey|}}
-<!--                                TODO Also tried handlebar helper for option, same problem.-->
-<!--                                { { # option ../data.characteristics.{{ckey}}.mod ../data.characteristics.{{ckey}}.short ../skills.data.defaultCharacteristic } }-->
+                                <!--                                TODO Also tried handlebar helper for option, same problem.-->
+                                <!--                                { { # option ../data.characteristics.{{ckey}}.mod ../data.characteristics.{{ckey}}.short ../skills.data.defaultCharacteristic } }-->
                                 <option value="{{characteristic.short}}" data-value="{{numberFormat characteristic.mod decimals=0 sign=true}}">{{characteristic.short}}</option>
                                 {{/each}}
                             </select>
-                        </label>
-                        <!-- TODO Somehow, find what has been selected, and add that in the data-roll. Or, do a custom handler, probably better -->
-                        <span class="skill-value rollable draggable" data-roll="2d6+{{skills.data.value}}"
-                              data-label="{{key}}">{{numberFormat skills.data.value decimals=0 sign=true}}</span>
+                            <!-- TODO Somehow, find what has been selected, and add that in the data-roll. Or, do a custom handler, probably better -->
+                            <span class="skill-value draggable" data-roll="2d6+{{skills.data.value}}"
+                                  data-label="{{key}}">{{numberFormat skills.data.value decimals=0 sign=true}}</span>
+                        </div>
                         {{/each}}
 
                         <!-- TODO And here I should have all skills from the compendium available-->
@@ -109,7 +109,6 @@ <h2 class="flexbreak">Add Skill:</h2>
                                 class="fas fa-plus"></i> Add item</a>
                     </div>
                 </li>
-                Owned items should be here...
                 {{#each actor.items as |item id|}}
                 <li class="item flexrow" data-item-id="{{item._id}}">
                     <div class="item-image">