Dice Roller in Javascript Block

[ThaddaeusWiedemer]

I'm making heavy use of the javascript blocks to create a custom layout. However, I'm unable to figure out how to integrate a dice roller in there.

Consider this super simple example:

const myDiv = document.createElement('div');
myDiv.textContent = 'Bite Attack: +5 to hit, 1d4+3 damage`;
return myDiv;

These dice rolls do not get parsed automatically. How can I enable dice parsing in a javascript block, and ideally create custom dice callbacks?

[valentine195]

In the JavaScript block, you should be using the API from the Dice Roller plugin.

[ThaddaeusWiedemer]

More specifically, here's what I've tried so far:

const diceRollerPlugin = app.plugins.getPlugin("obsidian-dice-roller");

async function getDiceEl() {
  const diceRoller = await diceRollerPlugin.getRoller('1d20+5');
  const el = await diceRoller.containerEl;
  return el;
}

getDiceEl().then(span => {
  return span;
});

But the dice roller <span> never shows up on the statblock (I can see in the inspector that it is never even appended to the javascript <div>). Is this an issue with async functions in a JavaScript block, or am I accessing the dice roller plugin incorrectly?

[ThaddaeusWiedemer]

Hi @valentine195, I'd appreciate any help with that 😊

[valentine195]

I will try to remember to get something to you later today / tomorrow, but the reason your code above didn’t do anything is because you never actually returned an element to the outer function.

You will want to create an element, then inside your promise attach the dice roller span to the element you created.

[ThaddaeusWiedemer]

Thanks! With that hint, I've figured it out. Here's a minimal working example for use in a JavaScript Block if anyone else was wondering:

const diceRollerPlugin = app.plugins.getPlugin("obsidian-dice-roller");

addDice = async function (diceString, parent) {
  const diceRoller = await diceRollerPlugin.getRoller(diceString);
  const el = await diceRoller.containerEl;
  parent.appendChild(el);
}

const div = createEl('div');

addDice('1d20+7', div);

return div;

[valentine195]

Great!

you should also probably switch to the dice roller API (window.DiceRoller) as that method will throw a notice about deprecation up