8: Add rolls to items on actor sheets

- Utilized the revisions made to roll syntax to allow for rollable
  buttons on item lists on actor sheets. Rolls are evaluated using
  `@items.ITEM.KEY`, where ITEM is the item name (slugified), and KEY is
  an attribute key for a formula attribute.

module/actor-sheet.js

@@ -34,6 +34,12 @@ export class SimpleActorSheet extends ActorSheet {
 	activateListeners(html) {
     super.activateListeners(html);
 
+    // Handle rollable attributes.
+    html.find('.items .rollable').click(ev => {
+      let r = new Roll($(ev.currentTarget).data('roll'), this.actor.getRollData());
+      r.roll().toMessage();
+    });
+
     // Everything below here is only needed if the sheet is editable
     if (!this.options.editable) return;
 

module/simple.js

@@ -82,4 +82,11 @@ Hooks.once("init", async function() {
     }
   }
 
+  /**
+   * Slugify a string.
+   */
+  Handlebars.registerHelper('slugify', function(value) {
+    return value.slugify({strict: true});
+  });
+
 });

styles/simple.css

@@ -94,6 +94,11 @@
 .worldbuilding .item-list .item-controls {
   flex: 0 0 36px;
 }
+.worldbuilding .item-list .item-button {
+  height: 100%;
+  line-height: 1;
+  font-size: 11px;
+}
 .worldbuilding .attributes-header {
   padding: 5px;
   margin: 5px 0;

styles/simple.less

@@ -105,6 +105,12 @@
     .item-controls {
       flex: 0 0 36px;
     }
+
+    .item-button {
+      height: 100%;
+      line-height: 1;
+      font-size: 11px;
+    }
   }
 
   /* Attributes */

templates/actor-sheet.html

@@ -40,6 +40,11 @@
                 <li class="item flexrow" data-item-id="{{item._id}}">
                     <img src="{{item.img}}" title="{{item.name}}" width="24" height="24"/>
                     <h4 class="item-name">{{item.name}}</h4>
+                    {{#each item.data.attributes as |itemAttr key|}}
+                      {{#if (eq itemAttr.dtype "Formula")}}
+                        <button class="item-button rollable" data-roll="@items.{{slugify item.name}}.{{key}}" title="{{itemAttr.value}}">{{itemAttr.label}}</button>
+                      {{/if}}
+                    {{/each}}
                     <div class="item-controls">
                         <a class="item-control item-edit" title="Edit Item"><i class="fas fa-edit"></i></a>
                         <a class="item-control item-delete" title="Delete Item"><i class="fas fa-trash"></i></a>