Help: Inline dice rolling

[baj...@gmail.com]

Hi all,

I'm looking for a little help and feedback on a project. I feel like I'm pretty close to getting my current approach to work, but I'm also wondering if there is a better way.

Background:

I have a TW I made as a reference for running Pathfinder/D&D games. Across a wide variety of fields and tiddlers I have text matching the `(^|\s)\d+(d(2|4|6|8|10|12|20))?(\+\d+)?($|\s)` regex ie.  1d4+2, 5d6, 6. Respectively,  the sum of a 4 sided die result and 2, the sum of the results of five, 6 sided dice, and the value 6.

Ultimately, I would like to make it so that for any such string matching the regex in my wiki, clicking on the text returns a new die/dice roll matching that string. As an example, given the text "1d4+2". Clicking on that text transforms it into something like "1d4+2 (5)". Clicking again might give you "1d4+2 (3)".

Current Status:

I have a javascript macro that accepts a string `<<dice_roll roll_str:"1d4+2">>` and returns the appropriate random result, such as "2".

I am using the button widget in a macro like this:

`\define roller(input) <$button class="tc-btn-invisible" set=!!DieResult setTo=<<dice_roll roll_str:$input$>> >''$input$'' ({{!!DieResult}})</$button> \end`

The resulting invocation looks like this: <<roller 1d8>>

The pros:

• The invocation is short
• Once the invocation is substituted for the initial text, it works, kinda.

The con:

• As I've currently implemented, "DieResult" is a field, and therefore global with respect to the tiddler. All of the rollers return the exact same result at the same time (see image).

What I'm looking for:

• How can I make the rollers independent from each other?
  
  • It seems like having the button set a variable instead of a field would solve the issue but I can't figure out how to do that.
  • I did try to use a set widget inside the button hoping that each set would only be evaluated on the click of that actual button, but apparently things don't work that way.
  • If all else fails I can add a single "Die Result" box at the top of most of the pages, but that isn't my preferred result.
    
• Is there an established way to do something like the built in camelCase linking globally with strings matching this regex?
  
  • The vast majority of my tiddlers are bulk imported in JSON format from external sources. I could do a find replace on those files before importing, but that will have it's own issues (potential corruption and not all the fields are evaluated again before rendering). I use a small number of 'templates' and transclusion to render the information.
    
• Just in general, was there a smarter way to go about this? Professionally I do CLI scientific coding (C/C++/FORTRAN/Python/R), so while I can do some robust software engineering, but the Wikitext/HTML5/CSS/javascript interplay is pretty foreign.
  

All the best,

Baj

[Mat]

This reminded me of some experimenting I did some time back. I found the below notes on it (paste it in a tiddler). It it probably NOT a good solution.

<:-)

------------------------------------------------------------------------------------------------------------------------------

https://css-tricks.com/are-there-random-numbers-in-css/

<div class="labels">

<label for="d1">Click here to roll the dice</label>

<label for="d2">Click here to roll the dice</label>

<label for="d3">Click here to roll the dice</label>

<label for="d4">Click here to roll the dice</label>

<label for="d5">Click here to roll the dice</label>

<label for="d6">Click here to roll the dice</label>

</div>

<br><br><br>

<div class="randomradio">

  <input type="radio" id="d1" name="dice">

  <input type="radio" id="d2" name="dice">

  <input type="radio" id="d3" name="dice">

  <input type="radio" id="d4" name="dice">

  <input type="radio" id="d5" name="dice">

  <input type="radio" id="d6" name="dice">

  <p>You got a: <span id="random-value"></span></p>

</div>

<br><br>

<style>

@keyframes changeOrder {

  from { z-index: 6;}

  to { z-index: 1; }

}

label {

  animation: changeOrder 3s infinite linear;

  background: #ddd;

  cursor: pointer;

  display: block;

  padding: 1rem;

  position: absolute;

x  top: 1rem;

  user-select: none;

}

label:nth-of-type(1) { animation-delay: 0s; }

label:nth-of-type(2) { animation-delay: -0.5s; }

label:nth-of-type(3) { animation-delay: -1.0s; }

label:nth-of-type(4) { animation-delay: -1.5s; }

label:nth-of-type(5) { animation-delay: -2.0s; }

label:nth-of-type(6) { animation-delay: -2.5s; }

.randomradio {

  position: absolute;

 xwidth: 100%;

outline:1px solid red;

}

#d1:checked ~ p span::before { content: "1"; }

#d2:checked ~ p span::before { content: "2"; }

#d3:checked ~ p span::before { content: "3"; }

#d4:checked ~ p span::before { content: "4"; }

#d5:checked ~ p span::before { content: "5"; }

#d6:checked ~ p span::before { content: "6"; }

</style>

[Télumire]

This should help (I think) : https://mklauber.github.io/tw5-plugins/#%24%3A%2Fplugins%2FD%26DTools%2FCreatureManager%2FLog

[Mat]

Baj, I just realized this should even be very simple with TW 5.2.

The following gives a random number between 0-9

{{{ [<now "XXX">split[]last[]] }}}

i.e it is the Now macro and uses the last fraction of a second which, for all practical purposes, is a random digit. Needs to be remade into 1 out of 6 for your case which I'm afraid I can't help you with but I'd think there is some simple way.

The only issue might be that you may find such a die very sensitive as it would update as soon as anything refreshes in the wiki. 

<:-)

[baj...@gmail.com]

Thanks Télumire,

I agree, it looks like there is a few parts there I can adapt, and their approach will likely work better than what I was originally thinking.

Rather than clicking on the die specification text and having it add a result inline, I can have the results added to a common sidebar. This nicely sidesteps the issue I was having of how to independently direct the result of a die roll to one (and only one) of an arbitrary number of display fields.

Creating auto incrementing temporary tiddlers as a storage mechanism definitely would never have occurred to me.

Baj

[baj...@gmail.com]

Hmm,

I'll have to look into this a little more.

Divide by 9, multiply by 6, round to integer gets it close on the random number side. Parsing xdy+z formatted rolls without a javascript macro still seems pretty difficult though.

[Charlie Veniot]

Hey Baj,

If you're into scientific programming / software engineering, you may (for the giggles) interested in the attached code in my Coding Fun: Dice Rolling post.

Yeah, my code is a little bit out there, but just to show how TiddlyWiki can be pushed to do some pretty wild things.

Sometimes, though, there is no choice but to use some javascript (in this case, pretty much the least bit of javascript needed for access to a random function.)