[Feature] RollTable Improvements (#1552)

* Initial - Branch Test

* reorganized path for better usage

* something to mess with

* registration things

* .

* root-template error

* pushing in for the day

* hook?

* help?

* .

* implementation initial

* updated comment

* overcomplicated it

* .

* Added Formula select to view mode

* .

* Prettied up roll-results template

* Removed SRD table descriptions

* Improved draw result description css

* Fallback for default dark dice

* .

---------

Co-authored-by: Nikhil Nagarajan <potter.nikhil@gmail.com>

daggerheart.mjs

@@ -58,6 +58,9 @@ CONFIG.Canvas.layers.tokens.layerClass = DhTokenLayer;
 
 CONFIG.MeasuredTemplate.objectClass = placeables.DhMeasuredTemplate;
 
+CONFIG.RollTable.documentClass = documents.DhRollTable;
+CONFIG.RollTable.resultTemplate = 'systems/daggerheart/templates/ui/chat/table-result.hbs';
+
 CONFIG.Scene.documentClass = documents.DhScene;
 
 CONFIG.Token.documentClass = documents.DhToken;
@@ -105,7 +108,7 @@ Hooks.once('init', () => {
             type: game.i18n.localize(typePath)
         });
 
-    const { Items, Actors } = foundry.documents.collections;
+    const { Items, Actors, RollTables } = foundry.documents.collections;
     Items.unregisterSheet('core', foundry.applications.sheets.ItemSheetV2);
     Items.registerSheet(SYSTEM.id, applications.sheets.items.Ancestry, {
         types: ['ancestry'],
@@ -190,6 +193,12 @@ Hooks.once('init', () => {
         label: sheetLabel('TYPES.Actor.party')
     });
 
+    RollTables.unregisterSheet('core', foundry.applications.sheets.RollTableSheet);
+    RollTables.registerSheet(SYSTEM.id, applications.sheets.rollTables.RollTableSheet, {
+        types: ['base'],
+        makeDefault: true
+    });
+
     DocumentSheetConfig.unregisterSheet(
         CONFIG.ActiveEffect.documentClass,
         'core',

lang/en.json

@@ -2383,6 +2383,12 @@
                 "secondaryWeapon": "Secondary Weapon"
             }
         },
+        "ROLLTABLES": {
+            "FIELDS": {
+                "formulaName": { "label": "Formula Name" }
+            },
+            "formula": "Formula"
+        },
         "SETTINGS": {
             "Appearance": {
                 "FIELDS": {

module/applications/sheets/_module.mjs

@@ -1,3 +1,4 @@
 export * as actors from './actors/_module.mjs';
 export * as api from './api/_modules.mjs';
 export * as items from './items/_module.mjs';
+export * as rollTables from './rollTables/_module.mjs';

module/applications/sheets/rollTables/_module.mjs

@@ -0,0 +1 @@
+export { default as RollTableSheet } from './rollTable.mjs';

module/applications/sheets/rollTables/rollTable.mjs

@@ -0,0 +1,191 @@
+export default class DhRollTableSheet extends foundry.applications.sheets.RollTableSheet {
+    static DEFAULT_OPTIONS = {
+        ...super.DEFAULT_OPTIONS,
+        actions: {
+            changeMode: DhRollTableSheet.#onChangeMode,
+            drawResult: DhRollTableSheet.#onDrawResult,
+            resetResults: DhRollTableSheet.#onResetResults,
+            addFormula: DhRollTableSheet.#addFormula,
+            removeFormula: DhRollTableSheet.#removeFormula
+        }
+    };
+
+    static buildParts() {
+        const { footer, header, sheet, results, ...parts } = super.PARTS;
+        return {
+            sheet: {
+                ...sheet,
+                template: 'systems/daggerheart/templates/sheets/rollTable/sheet.hbs'
+            },
+            header: { template: 'systems/daggerheart/templates/sheets/rollTable/header.hbs' },
+            ...parts,
+            results: {
+                template: 'systems/daggerheart/templates/sheets/rollTable/results.hbs',
+                templates: ['templates/sheets/roll-table/result-details.hbs'],
+                scrollable: ['table[data-results] tbody']
+            },
+            summary: { template: 'systems/daggerheart/templates/sheets/rollTable/summary.hbs' },
+            footer
+        };
+    }
+
+    static PARTS = DhRollTableSheet.buildParts();
+
+    async _preRender(context, options) {
+        await super._preRender(context, options);
+
+        if (!options.internalRefresh)
+            this.daggerheartFlag = new game.system.api.data.DhRollTable(this.document.flags.daggerheart);
+    }
+
+    /* root PART has a blank element on _attachPartListeners, so it cannot be used to set the eventListeners for the view mode */
+    async _onRender(context, options) {
+        super._onRender(context, options);
+
+        for (const element of this.element.querySelectorAll('.system-update-field'))
+            element.addEventListener('change', this.updateSystemField.bind(this));
+    }
+
+    async _preparePartContext(partId, context, options) {
+        context = await super._preparePartContext(partId, context, options);
+
+        switch (partId) {
+            case 'sheet':
+                context.altFormula = this.daggerheartFlag.altFormula;
+                context.usesAltFormula = Object.keys(this.daggerheartFlag.altFormula).length > 0;
+                context.altFormulaOptions = {
+                    '': { name: this.daggerheartFlag.formulaName },
+                    ...this.daggerheartFlag.altFormula
+                };
+                context.activeAltFormula = this.daggerheartFlag.activeAltFormula;
+                context.selectedFormula = this.daggerheartFlag.getActiveFormula(this.document.formula);
+                context.results = this.getExtendedResults(context.results);
+                break;
+            case 'header':
+                context.altFormula = this.daggerheartFlag.altFormula;
+                context.usesAltFormula = Object.keys(this.daggerheartFlag.altFormula).length > 0;
+                context.altFormulaOptions = {
+                    '': { name: this.daggerheartFlag.formulaName },
+                    ...this.daggerheartFlag.altFormula
+                };
+                context.activeAltFormula = this.daggerheartFlag.activeAltFormula;
+                break;
+            case 'summary':
+                context.systemFields = this.daggerheartFlag.schema.fields;
+                context.altFormula = this.daggerheartFlag.altFormula;
+                context.formulaName = this.daggerheartFlag.formulaName;
+                break;
+            case 'results':
+                context.results = this.getExtendedResults(context.results);
+                break;
+        }
+
+        return context;
+    }
+
+    getExtendedResults(results) {
+        const bodyDarkMode = document.body.classList.contains('theme-dark');
+        const elementLightMode = this.element.classList.contains('theme-light');
+        const elementDarkMode = this.element.classList.contains('theme-dark');
+        const isDarkMode = elementDarkMode || (!elementLightMode && bodyDarkMode);
+
+        return results.map(x => ({
+            ...x,
+            displayImg: isDarkMode && x.img === 'icons/svg/d20-black.svg' ? 'icons/svg/d20.svg' : x.img
+        }));
+    }
+
+    /* -------------------------------------------- */
+    /*  Flag SystemData update methods              */
+    /* -------------------------------------------- */
+
+    async updateSystemField(event) {
+        const { dataset, value } = event.target;
+        await this.daggerheartFlag.updateSource({ [dataset.path]: value });
+        this.render({ internalRefresh: true });
+    }
+
+    getSystemFlagUpdate() {
+        const deleteUpdate = Object.keys(this.document._source.flags.daggerheart?.altFormula ?? {}).reduce(
+            (acc, formulaKey) => {
+                if (!this.daggerheartFlag.altFormula[formulaKey]) acc.altFormula[`-=${formulaKey}`] = null;
+
+                return acc;
+            },
+            { altFormula: {} }
+        );
+
+        return { ['flags.daggerheart']: foundry.utils.mergeObject(this.daggerheartFlag.toObject(), deleteUpdate) };
+    }
+
+    static async #addFormula() {
+        await this.daggerheartFlag.updateSource({
+            [`altFormula.${foundry.utils.randomID()}`]: game.system.api.data.DhRollTable.getDefaultFormula()
+        });
+        this.render({ internalRefresh: true });
+    }
+
+    static async #removeFormula(_event, target) {
+        await this.daggerheartFlag.updateSource({
+            [`altFormula.-=${target.dataset.key}`]: null
+        });
+        this.render({ internalRefresh: true });
+    }
+
+    /* -------------------------------------------- */
+    /*  Extended RollTable methods                  */
+    /* -------------------------------------------- */
+
+    /**
+     * Alternate between view and edit modes.
+     * @this {RollTableSheet}
+     * @type {ApplicationClickAction}
+     */
+    static async #onChangeMode() {
+        this.mode = this.isEditMode ? 'view' : 'edit';
+        await this.document.update(this.getSystemFlagUpdate());
+        await this.render({ internalRefresh: true });
+    }
+
+    /** @inheritdoc */
+    async _processSubmitData(event, form, submitData, options) {
+        /* RollTable sends an empty dummy event when swapping from view/edit first time */
+        if (Object.keys(submitData).length) {
+            if (!submitData.flags) submitData.flags = { daggerheart: {} };
+            submitData.flags.daggerheart = this.getSystemFlagUpdate();
+        }
+
+        super._processSubmitData(event, form, submitData, options);
+    }
+
+    /** @inheritdoc */
+    static async #onResetResults() {
+        await this.document.update(this.getSystemFlagUpdate());
+        await this.document.resetResults();
+    }
+
+    /**
+     * Roll and draw a TableResult.
+     * @this {RollTableSheet}
+     * @type {ApplicationClickAction}
+     */
+    static async #onDrawResult(_event, button) {
+        if (this.form) await this.submit({ operation: { render: false } });
+        button.disabled = true;
+        const table = this.document;
+
+        await this.document.update(this.getSystemFlagUpdate());
+
+        /* Sending in the currently selectd activeFormula to table.roll to use as the formula */
+        const selectedFormula = this.daggerheartFlag.getActiveFormula(this.document.formula);
+        const tableRoll = await table.roll({ selectedFormula });
+        const draws = table.getResultsForRoll(tableRoll.roll.total);
+        if (draws.length > 0) {
+            if (game.settings.get('core', 'animateRollTable')) await this._animateRoll(draws);
+            await table.draw(tableRoll);
+        }
+
+        // Reenable the button if drawing with replacement since the draw won't trigger a sheet re-render
+        if (table.replacement) button.disabled = false;
+    }
+}

module/data/_module.mjs

@@ -1,6 +1,7 @@
 export { default as DhCombat } from './combat.mjs';
 export { default as DhCombatant } from './combatant.mjs';
 export { default as DhTagTeamRoll } from './tagTeamRoll.mjs';
+export { default as DhRollTable } from './rollTable.mjs';
 export { default as RegisteredTriggers } from './registeredTriggers.mjs';
 
 export * as countdowns from './countdowns.mjs';

module/data/rollTable.mjs

@@ -0,0 +1,38 @@
+import FormulaField from './fields/formulaField.mjs';
+
+//Extra definitions for RollTable
+export default class DhRollTable extends foundry.abstract.TypeDataModel {
+    static defineSchema() {
+        const fields = foundry.data.fields;
+
+        return {
+            formulaName: new fields.StringField({
+                required: true,
+                nullable: false,
+                initial: 'Roll Formula',
+                label: 'DAGGERHEART.ROLLTABLES.FIELDS.formulaName.label'
+            }),
+            altFormula: new fields.TypedObjectField(
+                new fields.SchemaField({
+                    name: new fields.StringField({
+                        required: true,
+                        nullable: false,
+                        initial: 'Roll Formula',
+                        label: 'DAGGERHEART.ROLLTABLES.FIELDS.formulaName.label'
+                    }),
+                    formula: new FormulaField({ label: 'Formula Roll', initial: '1d20' })
+                })
+            ),
+            activeAltFormula: new fields.StringField({ nullable: true, initial: null })
+        };
+    }
+
+    getActiveFormula(baseFormula) {
+        return this.activeAltFormula ? (this.altFormula[this.activeAltFormula]?.formula ?? baseFormula) : baseFormula;
+    }
+
+    static getDefaultFormula = () => ({
+        name: game.i18n.localize('Roll Formula'),
+        formula: '1d20'
+    });
+}

module/documents/_module.mjs

@@ -4,6 +4,7 @@ export { default as DhpCombat } from './combat.mjs';
 export { default as DHCombatant } from './combatant.mjs';
 export { default as DhActiveEffect } from './activeEffect.mjs';
 export { default as DhChatMessage } from './chatMessage.mjs';
+export { default as DhRollTable } from './rollTable.mjs';
 export { default as DhScene } from './scene.mjs';
 export { default as DhToken } from './token.mjs';
 export { default as DhTooltipManager } from './tooltipManager.mjs';

module/documents/rollTable.mjs

@@ -0,0 +1,122 @@
+export default class DhRollTable extends foundry.documents.RollTable {
+    async roll({ selectedFormula, roll, recursive = true, _depth = 0 } = {}) {
+        // Prevent excessive recursion
+        if (_depth > 5) {
+            throw new Error(`Maximum recursion depth exceeded when attempting to draw from RollTable ${this.id}`);
+        }
+
+        const formula = selectedFormula ?? this.formula;
+
+        // If there is no formula, automatically calculate an even distribution
+        if (!this.formula) {
+            await this.normalize();
+        }
+
+        // Reference the provided roll formula
+        roll = roll instanceof Roll ? roll : Roll.create(formula);
+        let results = [];
+
+        // Ensure that at least one non-drawn result remains
+        const available = this.results.filter(r => !r.drawn);
+        if (!available.length) {
+            ui.notifications.warn(game.i18n.localize('TABLE.NoAvailableResults'));
+            return { roll, results };
+        }
+
+        // Ensure that results are available within the minimum/maximum range
+        const minRoll = (await roll.reroll({ minimize: true })).total;
+        const maxRoll = (await roll.reroll({ maximize: true })).total;
+        const availableRange = available.reduce(
+            (range, result) => {
+                const r = result.range;
+                if (!range[0] || r[0] < range[0]) range[0] = r[0];
+                if (!range[1] || r[1] > range[1]) range[1] = r[1];
+                return range;
+            },
+            [null, null]
+        );
+        if (availableRange[0] > maxRoll || availableRange[1] < minRoll) {
+            ui.notifications.warn('No results can possibly be drawn from this table and formula.');
+            return { roll, results };
+        }
+
+        // Continue rolling until one or more results are recovered
+        let iter = 0;
+        while (!results.length) {
+            if (iter >= 10000) {
+                ui.notifications.error(
+                    `Failed to draw an available entry from Table ${this.name}, maximum iteration reached`
+                );
+                break;
+            }
+            roll = await roll.reroll();
+            results = this.getResultsForRoll(roll.total);
+            iter++;
+        }
+
+        // Draw results recursively from any inner Roll Tables
+        if (recursive) {
+            const inner = [];
+            for (const result of results) {
+                const { type, documentUuid } = result;
+                const documentName = foundry.utils.parseUuid(documentUuid)?.type;
+                if (type === 'document' && documentName === 'RollTable') {
+                    const innerTable = await fromUuid(documentUuid);
+                    if (innerTable) {
+                        const innerRoll = await innerTable.roll({ _depth: _depth + 1 });
+                        inner.push(...innerRoll.results);
+                    }
+                } else inner.push(result);
+            }
+            results = inner;
+        }
+
+        // Return the Roll and the results
+        return { roll, results };
+    }
+
+    async toMessage(results, { roll, messageData = {}, messageOptions = {} } = {}) {
+        messageOptions.rollMode ??= game.settings.get('core', 'rollMode');
+
+        // Construct chat data
+        messageData = foundry.utils.mergeObject(
+            {
+                author: game.user.id,
+                speaker: foundry.documents.ChatMessage.implementation.getSpeaker(),
+                rolls: [],
+                sound: roll ? CONFIG.sounds.dice : null,
+                flags: { 'core.RollTable': this.id }
+            },
+            messageData
+        );
+        if (roll) messageData.rolls.push(roll);
+
+        // Render the chat card which combines the dice roll with the drawn results
+        const detailsPromises = await Promise.allSettled(results.map(r => r.getHTML()));
+        const flavorKey = `TABLE.DrawFlavor${results.length > 1 ? 'Plural' : ''}`;
+        const flavor = game.i18n.format(flavorKey, {
+            number: results.length,
+            name: foundry.utils.escapeHTML(this.name)
+        });
+        messageData.content = await foundry.applications.handlebars.renderTemplate(CONFIG.RollTable.resultTemplate, {
+            description: await TextEditor.implementation.enrichHTML(this.description, {
+                documents: true,
+                secrets: this.isOwner
+            }),
+            flavor: flavor,
+            results: results.map((result, i) => {
+                const r = result.toObject(false);
+                r.details = detailsPromises[i].value ?? '';
+                const useTableIcon =
+                    result.icon === CONFIG.RollTable.resultIcon && this.img !== this.constructor.DEFAULT_ICON;
+                r.icon = useTableIcon ? this.img : result.icon;
+                return r;
+            }),
+            rollHTML: this.displayRoll && roll ? await roll.render() : null,
+            table: this
+        });
+
+        // Create the chat message
+        return foundry.documents.ChatMessage.implementation.create(messageData, messageOptions);
+    }
+}

src/packs/rolltables/tables_Consumables_tF04P02yVN1YDVel.json

@@ -1,7 +1,7 @@
 {
   "name": "Consumables",
   "img": "icons/consumables/potions/bottle-corked-red.webp",
-  "description": "<p>To generate a random consumable, choose a rarity, roll the designated dice, and match the total to the item in the table:</p><ul><li><p>Common: 1d12 or 2d12</p></li><li><p>Uncommon: 2d12 or 3d12</p></li><li><p>Rare: 3d12 or 4d12</p></li><li><p>Legendary: 4d12 or 5d12</p></li></ul>",
+  "description": "",
   "results": [
     {
       "type": "document",
@@ -1511,8 +1511,27 @@
     "default": 0,
     "Bgvu4A6AMkRFOTGR": 3
   },
-  "flags": {},
-  "formula": "1d60",
+  "flags": {
+    "daggerheart": {
+      "activeAltFormula": "",
+      "formulaName": "Common",
+      "altFormula": {
+        "uoUn5fRTUkyg6U2G": {
+          "name": "Uncommon",
+          "formula": "3d12"
+        },
+        "FGxM2yoxUUUd9Eov": {
+          "name": "Rare",
+          "formula": "4d12"
+        },
+        "HZ2hRBxu0k8IW0jC": {
+          "name": "Legendary",
+          "formula": "5d12"
+        }
+      }
+    }
+  },
+  "formula": "2d12",
   "_id": "tF04P02yVN1YDVel",
   "sort": 300000,
   "_key": "!tables!tF04P02yVN1YDVel"

src/packs/rolltables/tables_Loot_S61Shlt2I5CbLRjz.json

@@ -1,7 +1,7 @@
 {
   "name": "Loot",
   "img": "icons/commodities/treasure/brooch-gold-ruby.webp",
-  "description": "<p>To generate a random item, choose a rarity, roll the designated dice, and match the total to the item in the table: </p><ul><li><p> Common: 1d12 or 2d12 </p></li><li><p>Uncommon: 2d12 or 3d12 </p></li><li><p>Rare: 3d12 or 4d12 </p></li><li><p>Legendary: 4d12 or 5d12</p></li></ul>",
+  "description": "",
   "results": [
     {
       "type": "document",
@@ -1511,8 +1511,27 @@
     "default": 0,
     "Bgvu4A6AMkRFOTGR": 3
   },
-  "flags": {},
-  "formula": "1d60",
+  "flags": {
+    "daggerheart": {
+      "activeAltFormula": "",
+      "formulaName": "Common",
+      "altFormula": {
+        "hJJtajaMk14bYM4X": {
+          "name": "Uncommon",
+          "formula": "3d12"
+        },
+        "yDVeXdKpG7LzjHWa": {
+          "name": "Rare",
+          "formula": "4d12"
+        },
+        "qPHNIuUgWAHauI6V": {
+          "name": "Legendary",
+          "formula": "5d12"
+        }
+      }
+    }
+  },
+  "formula": "2d12",
   "_id": "S61Shlt2I5CbLRjz",
   "sort": 200000,
   "_key": "!tables!S61Shlt2I5CbLRjz"

src/packs/rolltables/tables_Random_Objectives_I5L1dlgxXTNrCCkL.json

@@ -1,7 +1,7 @@
 {
-  "name": "Table of Random Objectives",
+  "name": "Random Objectives",
   "img": "icons/sundries/documents/document-torn-diagram-tan.webp",
-  "description": "<p>Layering Goals Other than Attrition into Combat</p>",
+  "description": "",
   "results": [
     {
       "type": "text",
@@ -311,7 +311,20 @@
     "default": 0,
     "Bgvu4A6AMkRFOTGR": 3
   },
-  "flags": {},
+  "flags": {
+    "daggerheart": {
+      "formulaName": "Roll Formula",
+      "altFormula": {},
+      "activeAltFormula": null,
+      "flags": {
+        "daggerheart": {
+          "formulaName": "Roll Formula",
+          "altFormula": {},
+          "activeAltFormula": null
+        }
+      }
+    }
+  },
   "formula": "1d12",
   "_id": "I5L1dlgxXTNrCCkL",
   "sort": 400000,

styles/less/global/chat.less

@@ -15,6 +15,14 @@
         .message-header .message-header-main .message-sub-header-container h4 {
             color: @dark-blue;
         }
+
+        .message-content {
+            .table-draw {
+                .table-description {
+                    color: @dark;
+                }
+            }
+        }
     }
 }
 
@@ -83,6 +91,7 @@
 
             .message-content {
                 padding-bottom: 8px;
+
                 .flavor-text {
                     font-size: var(--font-size-12);
                     line-height: 20px;
@@ -90,6 +99,33 @@
                     text-align: center;
                     display: block;
                 }
+
+                .table-draw {
+                    .table-flavor {
+                        padding-top: 5px;
+                        padding-bottom: 0.5rem;
+                        font-size: var(--font-size-12);
+                    }
+
+                    .table-description {
+                        color: @beige;
+                        font-style: italic;
+
+                        &.flavor-spaced {
+                            padding-top: 0;
+                        }
+                    }
+
+                    .table-results {
+                        .description {
+                            flex-basis: min-content;
+
+                            > p:first-of-type {
+                                margin-top: 0;
+                            }
+                        }
+                    }
+                }
             }
         }
     }

styles/less/sheets/index.less

@@ -40,4 +40,5 @@
 @import './items/heritage.less';
 @import './items/item-sheet-shared.less';
 
+@import './rollTables/sheet.less';
 @import './actions/actions.less';

styles/less/sheets/rollTables/sheet.less

@@ -0,0 +1,29 @@
+.application.sheet.roll-table-sheet {
+    .formulas-section {
+        legend {
+            margin-left: auto;
+            margin-right: auto;
+        }
+
+        .formulas-container {
+            display: grid;
+            grid-template-columns: 1fr 1fr 40px;
+            gap: 10px;
+            text-align: center;
+
+            .formula-button {
+                width: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+        }
+    }
+
+    .roll-table-view-formula-container {
+        width: fit-content;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+    }
+}

templates/sheets/rollTable/header.hbs

@@ -0,0 +1,20 @@
+<header class="sheet-header img-name">
+    <img src="{{source.img}}" data-action="editImage" data-edit="img" alt="{{localize "DOCUMENT.FIELDS.img.label"}}">
+    
+    <input type="text" name="name" value="{{source.name}}" placeholder="{{localize "DOCUMENT.FIELDS.name.label"}}" aria-label="{{localize "DOCUMENT.FIELDS.name.label"}}">
+    {{#if usesAltFormula}}
+        <div class="form-group">
+            <label>{{localize "Formula"}}</label>
+            <div class="form-fields">
+                <select class="system-update-field" data-path="activeAltFormula">
+                    {{selectOptions this.altFormulaOptions selected=this.activeAltFormula labelAttr="name"}}
+                </select>
+            </div>
+        </div>
+    {{/if}}
+
+    <button data-action="changeMode">
+        <i class="fa-solid fa-eye" inert></i>
+        <span>{{localize "TABLE.ACTIONS.ChangeMode.View"}}</span>
+    </button>
+</header>

templates/sheets/rollTable/results.hbs

@@ -0,0 +1,55 @@
+<section class="tab{{#if tab.active}} active{{/if}}" data-group="{{tab.group}}" data-tab="{{tab.id}}">
+    <table class="flexcol" data-results>
+        <thead>
+            <tr class="flexrow">
+                <th class="image flexrow">
+                    <button class="inline-control icon fa-solid fa-plus" data-action="createResult"
+                            data-tooltip aria-label="{{localize "TABLE.ACTIONS.CreateResult"}}"></button>
+                </th>
+                <th class="details flexrow">{{localize "TABLE_RESULT.Details"}}</th>
+                <th class="weight flexrow">{{localize "TABLE_RESULT.FIELDS.weight.label"}}</th>
+                <th class="range flexrow">{{localize "TABLE_RESULT.FIELDS.range.label"}}</th>
+                <th class="controls flexrow">
+                    <button class="inline-control icon fa-solid fa-scale-balanced" data-action="normalizeResults"
+                        data-tooltip aria-label="{{localize "TABLE.ACTIONS.NormalizeResults"}}"></button>
+                </th>
+            </tr>
+        </thead>
+        <tbody class="scrollable">
+            {{#each results as |result i|}}
+            <tr class="flexrow{{#if result.drawn}} drawn{{/if}}" data-result-id="{{result.id}}">
+                <td class="image flexrow">
+                    <img src="{{result.displayImg}}" data-action="editImage" data-edit="results.{{i}}.img"
+                         alt="{{localize "TABLE_RESULT.FIELDS.img.label"}}" loading="lazy">
+                </td>
+
+                <td class="details">
+                    {{> "templates/sheets/roll-table/result-details.hbs" result=result}}
+                </td>
+
+                <td class="weight flexrow">
+                    <input type="number" name="results.{{i}}.weight" value="{{result.weight}}" placeholder="1">
+                </td>
+
+                <td class="range flexrow">
+                    <input type="number" name="results.{{i}}.range.0" value="{{result.range.[0]}}" placeholder="L">
+                    <span class="dash">–</span>
+                    <input type="number" name="results.{{i}}.range.1" value="{{result.range.[1]}}" placeholder="H">
+                </td>
+
+                <td class="controls flexrow">
+                    <button class="inline-control icon fa-solid fa-file-pen" data-action="openResultSheet"
+                            data-tooltip aria-label="{{localize "TABLE.ACTIONS.OpenResultConfig"}}"></button>
+                    <button class="inline-control icon fa-solid fa-lock{{#unless result.drawn}}-open{{/unless}}"
+                            data-action="lockResult"
+                            data-tooltip aria-label="{{localize "TABLE.ACTIONS.ToggleDrawn"}}"></button>
+                    <button class="inline-control icon fa-solid fa-trash" data-action="deleteResult"
+                            data-tooltip aria-label="{{localize "TABLE.ACTIONS.DeleteResult"}}"></button>
+                </td>
+
+                <input type="hidden" name="results.{{i}}._id" value="{{result.id}}">
+            </tr>
+            {{/each}}
+        </tbody>
+    </table>
+</section>

templates/sheets/rollTable/sheet.hbs

@@ -0,0 +1,49 @@
+<header class="sheet-header flexrow">
+    <img src="{{document.img}}" alt="{{localize "DOCUMENT.FIELDS.img.label"}}">
+    <h1>{{document.name}}</h1>
+    <div class="roll-table-view-formula-container">
+        {{#if usesAltFormula}}
+            <select class="system-update-field" data-path="activeAltFormula">
+                {{selectOptions this.altFormulaOptions selected=this.activeAltFormula labelAttr="name"}}
+            </select>
+        {{/if}}
+        <h4>{{selectedFormula}}</h4>
+    </div>
+    <button data-action="changeMode">
+        <i class="fa-solid fa-pen" inert></i>
+        <span>{{localize "TABLE.ACTIONS.ChangeMode.Edit"}}</span>
+    </button>
+</header>
+
+{{{descriptionHTML}}}
+
+<table class="flexcol" data-results>
+    <thead>
+        <tr class="flexrow">
+            <th class="image flexrow"></th>
+            <th class="range flexrow">{{localize "TABLE_RESULT.FIELDS.range.label"}}</th>
+            <th class="details flexrow">{{localize "TABLE_RESULT.Details"}}</th>
+            <th class="controls flexrow"></th>
+        </tr>
+    </thead>
+    <tbody class="scrollable">
+        {{#each results as |result i|}}
+        <tr class="flexrow{{#if result.drawn}} drawn{{/if}}" data-result-id="{{result.id}}">
+            <td class="image">
+                <img src="{{result.displayImg}}" alt="{{localize "TABLE_RESULT.FIELDS.img.label"}}" loading="lazy">
+            </td>
+            <td class="range">{{result.range}}</td>
+            <td class="details">
+                {{> "templates/sheets/roll-table/result-details.hbs" result=result}}
+            </td>
+            <td class="controls flexrow">
+                <button class="inline-control icon fa-solid fa-lock{{#unless result.drawn}}-open{{/unless}}"
+                        data-action="lockResult"
+                        data-tooltip aria-label="{{localize "TABLE.ACTIONS.ToggleDrawn"}}"></button>
+                <button class="inline-control icon fa-solid fa-up-from-bracket" data-action="drawSpecificResult"
+                        data-tooltip aria-label="{{localize "TABLE.ACTIONS.DrawSpecificResult"}}"></button>
+            </td>
+        </tr>
+        {{/each}}
+    </tbody>
+</table>

templates/sheets/rollTable/summary.hbs

@@ -0,0 +1,22 @@
+<section class="tab{{#if tab.active}} active{{/if}}" data-group="{{tab.group}}" data-tab="{{tab.id}}">
+    {{formGroup fields.description value=source.description rootId=rootId}}
+    <fieldset class="formulas-section">
+        <legend>{{localize "DAGGERHEART.ROLLTABLES.formula"}}</legend>
+
+        <div class="formulas-container">
+            <span>{{localize "DAGGERHEART.ROLLTABLES.FIELDS.formulaName.label"}}</span>
+            <span>{{localize "Formula Roll"}}</span>
+            <span></span>
+            <input type="text" value="{{@root.formulaName}}" class="system-update-field" data-path="formulaName" />
+            {{formInput fields.formula value=source.formula placeholder=formulaPlaceholder rootId=rootId}}
+            <button class="formula-button" data-action="addFormula"><i class="fa-solid fa-plus"></i></button>
+            {{#each @root.altFormula as | formula key |}}
+                <input type="text" value="{{formula.name}}" class="system-update-field" data-path="{{concat "altFormula." key ".name"}}" />
+                <input type="text" value="{{formula.formula}}" class="system-update-field" data-path="{{concat "altFormula." key ".formula"}}" />
+                <a class="formula-button" data-action="removeFormula" data-key="{{key}}"><i class="fa-solid fa-trash"></i></a>
+            {{/each}}
+        </div>
+    </fieldset>
+    {{formGroup fields.replacement value=source.replacement rootId=rootId}}
+    {{formGroup fields.displayRoll value=source.displayRoll rootId=rootId}}
+</section>

templates/ui/chat/table-result.hbs

@@ -0,0 +1,17 @@
+<div class="table-draw" data-table-id="{{table.id}}">
+    {{#if flavor}}<div class="table-flavor">{{flavor}}</div>{{/if}}
+
+    {{#if description}}
+        <div class="table-description {{#if flavor}}flavor-spaced{{/if}}">{{{description}}}</div>
+    {{/if}}
+    {{{rollHTML}}}
+
+    <ul class="table-results">
+        {{#each results as |result|}}
+            <li class="flexrow" data-result-id="{{result.id}}">
+                <img src="{{result.icon}}">
+                {{{result.details}}}
+            </li>
+        {{/each}}
+    </ul>
+</div>