add dice hud

reonZ · Nov 30, 2024 · 8c04d88 · 8c04d88
1 parent 8023884
commit 8c04d88
Show file tree

Hide file tree

Showing 7 changed files with 254 additions and 2 deletions.
diff --git a/lang/en.json b/lang/en.json
@@ -285,6 +285,9 @@
                     "name": "Short Date & Time",
                     "hint": "When enabled, a single line with a shortened version of the date & time will be displayed. You can click on the time to toggle between both modes."
                 }
+            },
+            "dice": {
+                "title": "Roll Panel"
             }
         },
         "hud": {

diff --git a/src/hud/dice.ts b/src/hud/dice.ts
diff --git a/src/main.ts b/src/main.ts
@@ -12,6 +12,7 @@ import { onRenderSettingsConfig, registerModuleSettings } from "./settings";
 import { editAvatar } from "./utils/avatar";
 import { getNpcStrikeImage } from "./utils/npc-attacks";
 import { PF2eHudTime } from "./hud/time";
+import { PF2eHudDice } from "./hud/dice";
 
 MODULE.register("pf2e-hud", "PF2e HUD");
 
@@ -22,6 +23,7 @@ const HUDS = {
     tracker: new PF2eHudTracker(),
     resources: new PF2eHudResources(),
     time: new PF2eHudTime(),
+    dice: new PF2eHudDice(),
 };
 
 Hooks.once("canvasReady", () => {

diff --git a/src/settings.ts b/src/settings.ts
@@ -215,15 +215,23 @@ function onRenderSettingsConfig(app: SettingsConfig, $html: JQuery) {
         const reloadLabel = localize("reload");
 
         for (const setting of hud.getSettings()) {
+            const key = `${MODULE.id}.${hud.key}.${setting.key}`;
+            const groupEl = htmlQuery(tab, `[data-setting-id="${key}"]`);
+            if (!groupEl) continue;
+
+            if (setting.hide) {
+                groupEl.remove();
+                continue;
+            }
+
             const nameExtras: string[] = [];
 
             if (setting.gmOnly) nameExtras.push(gmOnlyLabel);
             if (setting.requiresReload) nameExtras.push(reloadLabel);
 
             if (!nameExtras.length) continue;
 
-            const key = `${MODULE.id}.${hud.key}.${setting.key}`;
-            const labelElement = htmlQuery(tab, `[data-setting-id="${key}"] > label`);
+            const labelElement = htmlQuery(groupEl, ":scope > label");
             const extraElement = createHTMLElement("span", {
                 innerHTML: ` (${nameExtras.join(", ")})`,
             });

diff --git a/styles/_dice.scss b/styles/_dice.scss
@@ -0,0 +1,62 @@
+#pf2e-hud-dice {
+    --die-fill: white;
+    --die-behind-fill: grey;
+    --die-highlight-fill: #dd6767;
+    --die-behind-highlight-fill: #774949;
+
+    flex: 0;
+    margin-block: 0.2rem;
+    border-top: 2px groove #000000;
+    border-bottom: 2px groove #000000;
+
+    .dice {
+        display: grid;
+        grid-template-columns: repeat(7, 2rem);
+
+        .die {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            fill: var(--die-fill);
+
+            &[data-face="4"] {
+                svg {
+                    height: 1.8rem;
+                }
+            }
+
+            &[data-face="6"] {
+                svg {
+                    height: 1.6rem;
+                }
+            }
+
+            &[data-face="100"] {
+                position: relative;
+
+                svg {
+                    height: 1.6rem;
+                    position: absolute;
+
+                    &:first-child {
+                        left: 0;
+                        top: calc(50% - 0.1rem);
+                        transform: translateY(-50%);
+                        fill: var(--die-behind-fill);
+                    }
+
+                    &:last-child {
+                        right: 0;
+                        bottom: calc(50% - 0.1rem);
+                        transform: translateY(50%);
+                    }
+                }
+            }
+
+            &:hover {
+                --die-fill: var(--die-highlight-fill);
+                --die-behind-fill: var(--die-behind-highlight-fill);
+            }
+        }
+    }
+}
diff --git a/styles/pf2e-hud.scss b/styles/pf2e-hud.scss
@@ -2,6 +2,7 @@
 
 @import "avatar";
 @import "chat";
+@import "dice";
 @import "persistent";
 @import "popup";
 @import "resources";

diff --git a/templates/dice/hud.hbs b/templates/dice/hud.hbs
@@ -0,0 +1,20 @@
+<div class="dice">
+    {{#each dice as |die|}}
+    <a class="die" data-action="roll-die" data-face="{{die.face}}" data-tooltip="{{die.label}}">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+            <g transform="translate(0,0)">
+                <path d="{{die.path}}" fill-opacity="1"></path>
+            </g>
+        </svg>
+    </a>
+    {{/each}}
+    <a class="die" data-action="roll-die" data-face="100" data-tooltip="d100">
+        {{#times 2}}
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+            <g transform="translate(0,0)">
+                <path d="{{@root.dten}}" fill-opacity="1"></path>
+            </g>
+        </svg>
+        {{/times}}
+    </a>
+</div>