Roll Ability Scores/Table Content

[AlexKu95]

Hello,

I want the ability scores of the D&D monster stat blocks to be roll able.

Essentially, these values should be able to be rolled by clicking on them. It then should roll 1d20 + the ability score. Is there a way to do that?

[ThaddaeusWiedemer]

Here's a solution I use. It renders the stats like this:

And you can click on any of the modifiers to roll:

To achieve this, I first changed the dice rollers to not display dice, always display the formula in parentheses, and add custom styling (no bold text, dotted underline, highlight max/min rolls as bold/underlined) with a custom CSS:

The settings and CSS will apply to all dice rollers, not just in statblocks, so you might want to modify this to suit your needs.

/* normal-weight text */
.dice-roller span {
    font-weight: 400;
}

/* underlined formula */
.dice-roller > .dice-roller-formula {
    text-decoration: underline;
    text-decoration-style: dotted;
}

/* bold for max roll */
.dice-roller.is-max > .dice-roller-result {
    font-weight: bold;
}

/* underline for min roll */
.dice-roller.is-min > .dice-roller-result {
    text-decoration-line: underline;
}

In Fantasy statblocks, I replaced the table for stats with a JavaScript block. It basically adds a few nested divs with styling to replicate the table, then adds dice rollers.

For the dice rollers, I override the text in the parentheses to only show the modifier, e.g., (+6), instead of the entire formula (1d20+6). If you usually want to have dice rollers with the dice and without the formula and just want it changed here, you can change the line

await _addDice(`d20${modText}`, cell, `(${modText})`)

to

await _addDice(`d20${modText}|nodice|paren`, cell, `(${modText})`)

Here's the full code to copy-paste:

_addDiv = function (parent=undefined) {
    const el = createEl('div');
    if (parent) parent.appendChild(el);
    return el;
}

_addSpan = function (text, parent=undefined) {
    const el = createEl('span');
    if (parent) parent.appendChild(el);
    el.textContent = text;
    return el;
}

_addDice = async function (diceString, parent=undefined, parens=undefined) {
  const diceRoller = await window.DiceRoller.getRoller(diceString);
  const el = await diceRoller.containerEl;
  if (parent) parent.appendChild(el);
  // override content of parentheses, e.g., (1d20+6) -> (+6)
  if (parens) el.lastElementChild.textContent = parens;
  return el;
}

_setStyle = function (el, styleDict) {
    for (const [key, val] of Object.entries(styleDict)) {
        el.style[key] = val;
    }
}

const statTable = _addDiv();
_setStyle(statTable, {
  'display': 'flex',
  'justifyContent': 'space-around',
  'margin-bottom': '0.25em'
});

const names = ['Str', 'Dex', 'Con', 'Int', 'Wis', 'Cha']

addStats = async function () {
  for (let i = 0; i < 6; i++) {
    const col = _addDiv(statTable);
    _setStyle(col, {
      'display': 'flex',
      'alignItems': 'center',
      'flexFlow': 'column nowrap'
    });
  
    const name = _addSpan(names[i], col);
    name.style['font-weight'] = 'bold';
  
    const cell = _addDiv(col);
    
    const mod = Math.floor(monster.stats[i] / 2) - 5;
    const modText = (mod >= 0 ? '+' : '') + mod.toString();
            await _addDice(`d20${modText}`, cell, `(${modText})`)
        _addSpan(` ${monster.stats[i]}`, cell);
  }
}

addStats();

return statTable;