Merge branch '14-item-rolls'

module/actor-sheet.js

@@ -25,6 +25,7 @@ export class SimpleActorSheet extends ActorSheet {
     for ( let attr of Object.values(data.data.attributes) ) {
       attr.isCheckbox = attr.dtype === "Boolean";
     }
+    data.shorthand = !!game.settings.get("worldbuilding", "macroShorthand");
     return data;
   }
 
@@ -34,6 +35,19 @@ export class SimpleActorSheet extends ActorSheet {
 	activateListeners(html) {
     super.activateListeners(html);
 
+    // Handle rollable attributes.
+    html.find('.items .rollable').click(ev => {
+      let button = $(ev.currentTarget);
+      let r = new Roll(button.data('roll'), this.actor.getRollData());
+      const li = button.parents(".item");
+      const item = this.actor.getOwnedItem(li.data("itemId"));
+      r.roll().toMessage({
+        user: game.user._id,
+        speaker: ChatMessage.getSpeaker({ actor: this.actor }),
+        flavor: `<h2>${item.name}</h2><h3>${button.text()}</h3>`
+      });
+    });
+
     // 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

@@ -79,10 +79,11 @@
   overflow-y: auto;
 }
 .worldbuilding .item-list .item {
-  height: 30px;
+  min-height: 30px;
   line-height: 24px;
   padding: 3px 0;
   border-bottom: 1px solid #BBB;
+  align-items: stretch;
 }
 .worldbuilding .item-list .item img {
   flex: 0 0 24px;
@@ -94,6 +95,20 @@
 .worldbuilding .item-list .item-controls {
   flex: 0 0 36px;
 }
+.worldbuilding .item-list .item-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  align-items: center;
+  flex: 2;
+  justify-content: flex-start;
+}
+.worldbuilding .item-list .item-button {
+  line-height: 1;
+  font-size: 11px;
+  flex: none;
+  width: auto;
+}
 .worldbuilding .attributes-header {
   padding: 5px;
   margin: 5px 0;

styles/simple.less

@@ -87,10 +87,11 @@
     overflow-y: auto;
 
     .item {
-      height: 30px;
+      min-height: 30px;
       line-height: 24px;
       padding: 3px 0;
       border-bottom: 1px solid #BBB;
+      align-items: stretch;
 
       img {
         flex: 0 0 24px;
@@ -105,6 +106,22 @@
     .item-controls {
       flex: 0 0 36px;
     }
+
+    .item-buttons {
+      display: flex;
+      flex-wrap: wrap;
+      flex-direction: row;
+      align-items: center;
+      flex: 2;
+      justify-content: flex-start;
+    }
+
+    .item-button {
+      line-height: 1;
+      font-size: 11px;
+      flex: none;
+      width: auto;
+    }
   }
 
   /* Attributes */

templates/actor-sheet.html

@@ -40,6 +40,20 @@
                 <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>
+                    {{!-- Iterate through all attributes on the item and output buttons for any that are formula. --}}
+                    <div class="item-buttons">
+                      {{#each item.data.attributes as |itemAttr key|}}
+                        {{#if (eq itemAttr.dtype "Formula")}}
+                          {{!-- Use the items.name.key format for shorthand. --}}
+                          {{#if ../../shorthand}}
+                            <button class="item-button rollable" data-roll="@items.{{slugify item.name}}.{{key}}" title="{{itemAttr.value}}">{{itemAttr.label}}</button>
+                          {{!-- Use the items.name.attributes.key.value format otherwise. --}}
+                          {{else}}
+                            <button class="item-button rollable" data-roll="@items.{{slugify item.name}}.attributes.{{key}}.value" title="{{itemAttr.value}}">{{itemAttr.label}}</button>
+                          {{/if}}
+                        {{/if}}
+                      {{/each}}
+                    </div>
                     <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>