ENH: Treasure tables !

src/module/treasure.js

@@ -0,0 +1,83 @@
+export const augmentTable = (table, html, data) => {
+  // Treasure Toggle
+  let head = html.find(".sheet-header");
+  const flag = table.object.getFlag("ose", "treasure");
+  const treasure = flag
+    ? "<div class='toggle-treasure'><a><i class='fas fa-gem'></i></a></div>"
+    : "<div class='toggle-treasure'><a><i class='far fa-gem'></i></a></div>";
+  head.append(treasure);
+
+  html.find(".toggle-treasure").click((ev) => {
+    let isTreasure = table.object.getFlag("ose", "treasure");
+    table.object.setFlag("ose", "treasure", !isTreasure);
+  });
+
+  // Treasure table formatting
+  if (flag) {
+    // Remove Interval
+    html.find(".result-range").remove();
+    html.find(".normalize-results").remove();
+
+    html.find(".result-weight").first().text("Chance");
+
+    // Replace Roll button
+    const roll = `<button class="roll-treasure" type="button"><i class="fas fa-gem"></i> Roll Treasure</button>`;
+    html.find(".sheet-footer .roll").replaceWith(roll);
+  }
+
+  html.find(".roll-treasure").click((ev) => {
+    rollTreasure(table.object, { event: ev });
+  });
+};
+
+async function rollTreasure(table, options = {}) {
+  let percent = (chance) => {
+    let roll = new Roll("1d100").roll();
+    return roll.total <= chance;
+  };
+  let templateData = {
+    treasure: [],
+    table: table,
+  };
+  let ids = [];
+  table.results.forEach((r) => {
+    if (percent(r.weight)) {
+      let text = "";
+      switch (r.type) {
+        case 0:
+          text = r.text;
+          break;
+        case 1:
+          text = `@${r.collection}[${r.resultId}]{${r.text}}`;
+          break;
+        case 2:
+          text = `@Compendium[${r.collection}.${r.resultId}]{${r.text}}`;
+      }
+      templateData.treasure.push({
+        id: r._id,
+        img: r.img,
+        text: TextEditor.enrichHTML(text),
+      });
+      ids.push(r._id);
+    }
+  });
+
+  // Animation
+  if (options.event) {
+    let results = $(event.currentTarget.parentElement)
+      .prev()
+      .find(".table-result");
+    results.each((_, item) => {
+      item.classList.remove("active");
+      if (ids.includes(item.dataset.resultId)) {
+        item.classList.add("active");
+      }
+    });
+  }
+
+  let html = await renderTemplate(
+    "systems/ose/templates/chat/roll-treasure.html",
+    templateData
+  );
+  ChatMessage.create({ content: html });
+}

src/ose.js

@@ -9,6 +9,7 @@ import { OSE } from "./module/config.js";
 import { registerSettings } from "./module/settings.js";
 import { registerHelpers } from "./module/helpers.js";
 import * as chat from "./module/chat.js";
+import * as treasure from "./module/treasure.js";
 import * as macros from "./module/macros.js";
 import { OseCombat } from "./module/combat.js";
 
@@ -119,3 +120,5 @@ Hooks.on("preUpdateCombat", async (combat, data, diff, id) => {
 Hooks.on("renderChatLog", (app, html, data) => OseItem.chatListeners(html));
 Hooks.on("getChatLogEntryContext", chat.addChatMessageContextOptions);
 Hooks.on("renderChatMessage", chat.addChatMessageButtons);
+
+Hooks.on("renderRollTableConfig", treasure.augmentTable);

src/scss/apps.scss

@@ -16,6 +16,30 @@
   }
 }
 
+.sheet.roll-table-config {
+  .sheet-header {
+    .toggle-treasure {
+      flex: 0 0 30px;
+      font-size: 30px;
+      line-height: 30px;
+      margin: 0 8px;
+    }
+  }
+  @keyframes notify {
+    from {
+      background: none;
+    }
+    to {
+      background: rgba(0, 0, 0, 0.12);
+    }
+  }
+  .results {
+    .table-result.active {
+      animation: 0.7s infinite alternate notify;
+    }
+  }
+}
+
 #settings .ose.game-license {
   font-size: 12px;
   .button {
@@ -107,6 +131,7 @@
     img {
       flex: 0 0 36px;
       margin-right: 5px;
+      border: none;
     }
 
     h3 {
@@ -122,7 +147,22 @@
 
   .card-content {
     margin: 5px 0;
-
+    .treasure-list {
+      padding: 0;
+      list-style: none;
+      .treasure {
+        img {
+          flex: 0 0 36px;
+          border: none;
+        }
+        div {
+          text-indent: 10px;
+          font-size: 14px;
+          font-weight: bold;
+        }
+        line-height: 36px;
+      }
+    }
     h3 {
       font-size: 12px;
       margin: 0;

src/templates/chat/roll-treasure.html

@@ -0,0 +1,16 @@
+<div class="ose chat-card treasure-card">
+    <header class="card-header flexrow">
+        <img src="/systems/ose/assets/chest.png" title="{{table.name}}" width="36" height="36" />
+        <h3>{{table.name}}</h3>
+    </header>
+    <div class="card-content">
+        <ol class="treasure-list">
+            {{#each treasure as |t|}}
+            <li class="treasure flexrow">
+                <img src="{{t.img}}" width="36" height="36" />
+                <div>{{{t.text}}}</div>
+            </li>
+            {{/each}}
+        </ol>
+    </div>
+</div>