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> On Friday, October 29, 2021 at 5:46:45 AM UTC+2 baj...@gmail.com wrote: > 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 > -- You received this message because you are subscribed to the Google Groups "TiddlyWiki" group. To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/191c9051-0ddc-4de3-a23f-5d731dbde37bn%40googlegroups.com.
