Automatically Checking and Un-checking Checkboxes After Pressing Buttons to Spend or Replenish a Resource...

Pro

Sheet Author

API Scripter

There's a lot to read and comprehend there. It looks like you're asking for help with 3 buttons that each do different things.. I suggest you break it down into one prblem per thread.

1713143623

Pro

Okay, let's start with Button 1: In my game The Shades of Dominion, the players are Shade Mages that drain The Shade from the realm into their Shade Vessels, which they can then use to cast spells.   Each Shade Vessel has a "Syp Level" which determines how full it is and how difficult it would be to get Shade from it at a moment's notice. The first roll/button, is the Stain Button circled in Red.  In addition to all of the things it does with The Shade, I also need it to Uncheck the first left-most Checked box in the Syp Level bar.   I just need it to subtract one Syp Level.  That's it. Syp Level Bar: <label>Syp Level:</label><span> Full: <input type="checkbox" class="syplevel" name="attr_syplevelfull" value="6" style="pointer-events: none;"> 2+: <inpu Stain (HTML): <button type="action" name="act_staincheck">Stain</button> <rolltemplate class="sheet-rolltemplate-staincheck"> <div class="sheet-header"> {{#name}}<div class="sheet-name">{{name}}</div>{{/name}} </div> <table> <tbody> <div class="sheet-template-content"> <tr class="sheet-aether_row"> {{#Aether}} <td><div class="sheet-aether-roll-icon"><img class="sheet-aether-icon" src="<a href="https://s3.amazonaws.com/files.d20.io/images/387716976/LoT1TR39hDI8vQiFTd34Kg/thumb.png?1712432342" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/387716976/LoT1TR39hDI8vQiFTd34Kg/thumb.png?1712432342</a>" alt="Aether Icon Logo"></div></td> <td><div class="sheet-aether-roll-title">Aether</div></td> <td><div class="sheet-aether-roll-result">{{Aether}}<br></div></td> {{/Aether}} </tr> <tr class="sheet-corruption_row"> {{#Corruption}} <td><div class="sheet-corruption-roll-icon"><img class="sheet-corruption-icon" src="<a href="https://s3.amazonaws.com/files.d20.io/images/387716826/vQzXciBjpL8mmM4d6zwu7g/thumb.png?1712432290" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/387716826/vQzXciBjpL8mmM4d6zwu7g/thumb.png?1712432290</a>" alt="Corruption Icon Logo"></div></td> <td><div class="sheet-corruption-roll-title">Corruption</div></td> <td><div class="sheet-corruption-roll-result">{{Corruption}}<br></div></td> {{/Corruption}} </tr> <tr class="sheet-destruction_row"> {{#Destruction}} <td><div class="sheet-destruction-roll-icon"><img class="sheet-destruction-icon" src="<a href="https://s3.amazonaws.com/files.d20.io/images/387716891/GreHB-W2DFGcHqwUrmfqSw/thumb.png?1712432316" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/387716891/GreHB-W2DFGcHqwUrmfqSw/thumb.png?1712432316</a>" alt="Destruction Icon Logo"></div></td> <td><div class="sheet-destruction-roll-title">Destruction</div></td> <td><div class="sheet-destruction-roll-result">{{Destruction}}<br></div></td> {{/Destruction}} </tr> <tr class="sheet-purity_row"> {{#Purity}} <td><div class="sheet-purity-roll-icon"><img class="sheet-purity-icon" src="<a href="https://s3.amazonaws.com/files.d20.io/images/387716865/pJTQKWHxPghesYG2oRv7Sw/thumb.png?1712432306" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/387716865/pJTQKWHxPghesYG2oRv7Sw/thumb.png?1712432306</a>" alt="Purity Icon Logo"></div></td> <td><div class="sheet-purity-roll-title">Purity</div></td> <td><div class="sheet-purity-roll-result">{{Purity}}<br></div></td> {{/Purity}} </tr> <tr class="sheet-vitality_row"> {{#Vitality}} <td><div class="sheet-vitality-roll-icon"><img class="sheet-vitality-icon" src="<a href="https://s3.amazonaws.com/files.d20.io/images/387716923/J3FOFhYEFRuRveVN9_nWTg/thumb.png?1712432328" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/387716923/J3FOFhYEFRuRveVN9_nWTg/thumb.png?1712432328</a>" alt="Vitality Icon Logo"></div></td> <td><div class="sheet-vitality-roll-title">Vitality</div></td> <td><div class="sheet-vitality-roll-result">{{Vitality}}<br></div></td> {{/Vitality}} </tr> <tr class="sheet-unstained_row"> {{#Unstained}} <td><div class="sheet-unstained-roll-icon"><img class="sheet-unstained-icon" src="<a href="https://s3.amazonaws.com/files.d20.io/images/387718371/YUXVmE5_RKEaaOy_UEcCVA/thumb.png?1712432787" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/387718371/YUXVmE5_RKEaaOy_UEcCVA/thumb.png?1712432787</a>" alt="Unstained Icon Logo"></div></td> <td><div class="sheet-unstained-roll-title">Unstained</div></td> <td><div class="sheet-unstained-roll-result">{{computed::Unstained}}<br></div></td> {{/Unstained}} </tr> </div> </tbody> </table> </rolltemplate> Stain (Sheet Worker): on('clicked:staincheck', event => { const stain_string = "&{template:staincheck} {{name=Stain Check}} {{Aether=[[@{aetherscore}d6>@{aetherstain}]]}} {{Corruption=[[@{corruptionscore}d6>@{corruptionstain}]]}} {{Destruction=[[@{destructionscore}d6>@{destructionstain}]]}} {{Purity=[[@{purityscore}d6>@{puritystain}]]}} {{Vitality=[[@{vitalityscore}d6>@{vitalitystain}]]}} {{Unstained=[[0]]}}"; startRoll(stain_string, roll => { console.log(roll); let aether_dice = parseInt(roll.results.Aether.dice.length)||0; let aether_results = parseInt(roll.results.Aether.result)||0; let corruption_dice = parseInt(roll.results.Corruption.dice.length)||0; let corruption_results = parseInt(roll.results.Corruption.result)||0; let destruction_dice = parseInt(roll.results.Destruction.dice.length)||0; let destruction_results = parseInt(roll.results.Destruction.result)||0; let purity_dice = parseInt(roll.results.Purity.dice.length)||0; let purity_results = parseInt(roll.results.Purity.result)||0; let vitality_dice = parseInt(roll.results.Vitality.dice.length)||0; let vitality_results = parseInt(roll.results.Vitality.result)||0; let unstained_results = parseInt(roll.results.Unstained.result)||0; let dice_total = aether_dice + corruption_dice + destruction_dice + purity_dice + vitality_dice; let result_total = aether_results + corruption_results + destruction_results + purity_results + vitality_results; let new_unstained = dice_total - result_total; roll.results.Unstained.result = new_unstained; roll.results.Unstained.expression = new_unstained; finishRoll(roll.rollId, { Unstained: new_unstained }); }); });

1713146508

Pro

Sheet Author

API Scripter

For clarification: when that staincheck button is clicked, you want to run the CRP example above, and reduce the syplevelfull attribute by 1?

1713146665

Pro

Yes.

1713147835

Pro

Sheet Author

API Scripter

That's a fairly minor change. You ned to add a getAttrs function so you can get the current value, and a setAttrs to update it. There are multiple places you could put it. You could have them separate from statRoll so that they run independently.     on ( 'clicked:staincheck' , event => {                 const stain_string = "&{template:staincheck} {{name=Stain Check}} {{Aether=[[@{aetherscore}d6>@{aetherstain}]]}} {{Corruption=[[@{corruptionscore}d6>@{corruptionstain}]]}} {{Destruction=[[@{destructionscore}d6>@{destructionstain}]]}} {{Purity=[[@{purityscore}d6>@{puritystain}]]}} {{Vitality=[[@{vitalityscore}d6>@{vitalitystain}]]}} {{Unstained=[[0]]}}" ;         startRoll ( stain_string , roll => {             console . log ( roll );             let aether_dice = parseInt ( roll . results . Aether . dice . length ) || 0 ;             let aether_results = parseInt ( roll . results . Aether . result ) || 0 ;             let corruption_dice = parseInt ( roll . results . Corruption . dice . length ) || 0 ;             let corruption_results = parseInt ( roll . results . Corruption . result ) || 0 ;             let destruction_dice = parseInt ( roll . results . Destruction . dice . length ) || 0 ;             let destruction_results = parseInt ( roll . results . Destruction . result ) || 0 ;             let purity_dice = parseInt ( roll . results . Purity . dice . length ) || 0 ;             let purity_results = parseInt ( roll . results . Purity . result ) || 0 ;             let vitality_dice = parseInt ( roll . results . Vitality . dice . length ) || 0 ;             let vitality_results = parseInt ( roll . results . Vitality . result ) || 0 ;             let unstained_results = parseInt ( roll . results . Unstained . result ) || 0 ;             let dice_total = aether_dice + corruption_dice + destruction_dice + purity_dice + vitality_dice ;             let result_total = aether_results + corruption_results + destruction_results + purity_results + vitality_results ;                         let new_unstained = dice_total - result_total ;                         roll . results . Unstained . result = new_unstained ;                         roll . results . Unstained . expression = new_unstained ;                         finishRoll ( roll . rollId , {                 Unstained : new_unstained                             });                     });         getAttrs ([ 'syplevelfull' ], values => {             const syp = parseInt ( values . syplevelfull ) || 0 ;             const syp_final = Math . max ( 0 , syp - 1 );             setAttrs ({                 syplevelfull : syp_final             })         });     }); You might want to be more restructive, so the roll is only made if there is at least 1 point of syplevelfull to pay for it.That could look like this: on ( 'clicked:staincheck' , event => {         getAttrs ([ 'syplevelfull' ], values => {             const syp = parseInt ( values . syplevelfull ) || 0 ;             if ( svp > 0 ) {                 const syp_final = Math . max ( 0 , syp - 1 );                 setAttrs ({                     syplevelfull : syp_final                 });                 const stain_string = "&{template:staincheck} {{name=Stain Check}} {{Aether=[[@{aetherscore}d6>@{aetherstain}]]}} {{Corruption=[[@{corruptionscore}d6>@{corruptionstain}]]}} {{Destruction=[[@{destructionscore}d6>@{destructionstain}]]}} {{Purity=[[@{purityscore}d6>@{puritystain}]]}} {{Vitality=[[@{vitalityscore}d6>@{vitalitystain}]]}} {{Unstained=[[0]]}}" ;                 startRoll ( stain_string , roll => {                     console . log ( roll );                     let aether_dice = parseInt ( roll . results . Aether . dice . length ) || 0 ;                     let aether_results = parseInt ( roll . results . Aether . result ) || 0 ;                     let corruption_dice = parseInt ( roll . results . Corruption . dice . length ) || 0 ;                     let corruption_results = parseInt ( roll . results . Corruption . result ) || 0 ;                     let destruction_dice = parseInt ( roll . results . Destruction . dice . length ) || 0 ;                     let destruction_results = parseInt ( roll . results . Destruction . result ) || 0 ;                     let purity_dice = parseInt ( roll . results . Purity . dice . length ) || 0 ;                     let purity_results = parseInt ( roll . results . Purity . result ) || 0 ;                     let vitality_dice = parseInt ( roll . results . Vitality . dice . length ) || 0 ;                     let vitality_results = parseInt ( roll . results . Vitality . result ) || 0 ;                     let unstained_results = parseInt ( roll . results . Unstained . result ) || 0 ;                     let dice_total = aether_dice + corruption_dice + destruction_dice + purity_dice + vitality_dice ;                     let result_total = aether_results + corruption_results + destruction_results + purity_results + vitality_results ;                                         let new_unstained = dice_total - result_total ;                     roll . results . Unstained . result = new_unstained ;                     roll . results . Unstained . expression = new_unstained ;                                         finishRoll ( roll . rollId , {                         Unstained : new_unstained                     });                 });             } else {                 const stain_string = "No Syp Left; you cannot run this." ;                 startRoll ( stain_string , roll => {                     finishRoll ( roll . rollId , {});                 });             }         });     });

1713157253

Pro

I had to add a new line to the rolltemplate, but it works ! Sheet Worker: on('clicked:staincheck', event => { getAttrs(['syplevel'], values => { const syp = parseInt(values.syplevel) || 0; if (syp > 0) { const syp_final = Math.max(0, syp -1); setAttrs({ syplevel: syp_final }); const stain_string = "&{template:staincheck} {{name=Stain Check}} {{Aether=[[@{aetherscore}d6>@{aetherstain}]]}} {{Corruption=[[@{corruptionscore}d6>@{corruptionstain}]]}} {{Destruction=[[@{destructionscore}d6>@{destructionstain}]]}} {{Purity=[[@{purityscore}d6>@{puritystain}]]}} {{Vitality=[[@{vitalityscore}d6>@{vitalitystain}]]}} {{Unstained=[[0]]}}"; startRoll(stain_string, roll => { console.log(roll); let aether_dice = parseInt(roll.results.Aether.dice.length)||0; let aether_results = parseInt(roll.results.Aether.result)||0; let corruption_dice = parseInt(roll.results.Corruption.dice.length)||0; let corruption_results = parseInt(roll.results.Corruption.result)||0; let destruction_dice = parseInt(roll.results.Destruction.dice.length)||0; let destruction_results = parseInt(roll.results.Destruction.result)||0; let purity_dice = parseInt(roll.results.Purity.dice.length)||0; let purity_results = parseInt(roll.results.Purity.result)||0; let vitality_dice = parseInt(roll.results.Vitality.dice.length)||0; let vitality_results = parseInt(roll.results.Vitality.result)||0; let unstained_results = parseInt(roll.results.Unstained.result)||0; let dice_total = aether_dice + corruption_dice + destruction_dice + purity_dice + vitality_dice; let result_total = aether_results + corruption_results + destruction_results + purity_results + vitality_results; let new_unstained = dice_total - result_total; roll.results.Unstained.result = new_unstained; roll.results.Unstained.expression = new_unstained; finishRoll(roll.rollId, { Unstained: new_unstained }); }); } else { const stain_string = "&{template:staincheck} {{nosyp=Your Shade Vessel is Empty. The Shade Denies You.}}"; startRoll(stain_string, roll => { finishRoll(roll.rollId, {}); }); }; }); }); Roll Template: {{#nosyp}}<div class="sheet-nosyp">{{nosyp}}</div>{{/nosyp}}

1713164304

Pro

For the Syphon Roll Button, I am trying this: on('clicked:syphonroll', () => { getAttrs(['syplevel'], values => { const syplevel = values.syplevel; const roll_string = `"&{template:syphonroll} {{title=Syphon the Realm!}} {{subtitle= @{magename} Drinks Deeply and drains the Realm for [[@{syphonroll}d6>4]] Syp Levels!}}"` startRoll(roll_string, roll => { console.log(roll); let syphonroll = parseInt(roll.results.syphonroll.result)||0; finishRoll(roll.rollId, { if (syplevel < 6) { for (i = 0; i < syphonroll; i++) { syplevel ++; } } }); }); }); }); But every time I try to run it, I keep getting this: And it turns out its being caused by this: How? Why????

1713191919

Pro

Sheet Author

API Scripter

The first thing I notice is that you aren't coercing syplevel to a numerical value. You are using const syplevel = values.syplevel; but probably should be using const syplevel = parseInt(values.syplevel) || 0; or const syplevel = +values.syplevel || 0; The second thing is the extra quotes in this: const roll_string = `"&{template:syphonroll} {{title=Syphon the Realm!}} {{subtitle= @{magename} Drinks Deeply and drains the Realm for [[@{syphonroll}d6>4]] Syp Levels!}}"` which should be either const roll_string = "&{template:syphonroll} {{title=Syphon the Realm!}} {{subtitle= @{magename} Drinks Deeply and drains the Realm for [[@{syphonroll}d6>4]] Syp Levels!}}"; or const roll_string = `&{template:syphonroll} {{title=Syphon the Realm!}} {{subtitle= @{magename} Drinks Deeply and drains the Realm for [[@{syphonroll}d6>4]] Syp Levels!}}`; I notice there you are using `` syntax (template lteral_, but are doing nothing that actually needs it. The syplevel value isn't used in there, so is this right? Finally I notice what is most likely the real problem. You have this line: let syphonroll = parseInt(roll.results.syphonroll.result)||0; for this to be meaningful, there must be in your troll, a section like this: {{syphonroll = [[ something the resolves to a number here ]] )) In the current version, syphonroll is undefined, making the later use in the for loop fail. If you want to use syphenroll you could grab it from the character sheet: add it to getAttrs, like: getAttrs(['syplevel', 'syphonroll'], values => { const syplevel = +values.syplevel || 0; const syphonroll = +values.syphonroll || 0;

1714149988

Pro

So, Im trying this now...the code doesn't break/disable the whole sheet...but when I click the action button, it doesn't even call the roll... Sheetworker: on('clicked:syphonroll', () => { const roll_string = `&{template:syphonroll} {{title=Syphon the Realm!}} {{subtitle= @{magename} Drinks Deeply and drains the Realm for [[@{syphonroll}d6>4]] Syp Levels!}} {{syplevel=[[0]]}}` startRoll(roll_string, roll => { console.log(roll); let syphonlvl = parseInt(roll.results.syphonroll.result) || 0; getAttrs([syplevel]) ;{values => { let syplevel = parseInt(values.syplevel) || 0; if (syplevel < 6) { for (let i = 0; i <= syphonlvl; i++) { syplevel++; } } else syplevel = 6; }; setAttrs({ new_syp: syplevel }); } finishRoll(roll.rollId, { syphonlvl: new_syp }); }); }); CSS: .sheet-rolltemplate-syphonroll { color: white; font-family: Cinzel; height: 200px; background-position: center center; background: url(<a href="https://files.d20.io/images/387718371/YUXVmE5_RKEaaOy_UEcCVA/thumb.png?1712432787" rel="nofollow">https://files.d20.io/images/387718371/YUXVmE5_RKEaaOy_UEcCVA/thumb.png?1712432787</a>) no-repeat; background-size: 100% 100%; background-color: #333333; } .sheet-rolltemplate-syphonroll.sheet-header { background-color: var(header-bg-color); color: var(header-text-color); vertical-align: center; text-transform: capitalize; padding: 5px; border-bottom: 2px solid black; } .sheet-rolltemplate-syphonroll .sheet-title { vertical-align: middle center; font-size: 18pt; font-weight: italic; } .sheet-rolltemplate-syphonroll .sheet-subtitle { vertical-align: middle center; font-size: 10pt; } RollTemplate: <button type="action" name="attr_syphonroll">Syphon</button> <rolltemplate class="sheet-rolltemplate-syphonroll"> <div class="sheet-container" > <div class="sheet-header"> {{#title}}<div class="sheet-title">{{title}}<br></div>{{/title}} {{#syplevel}}<div class="syplevel">{{syplevel}}</div>{{/syplevel}} {{#subtitle}}<div class="sheet-subtitle"><br><br>{{subtitle}}</div>{{/subtitle}} </div> </div> </rolltemplate> The issue really is that I can't even get an object to be generated...

1714167448

Edited 1714244908

Pro

Sheet Author

API Scripter

I'll have a look at this in a bit. But in the meantime, you can use the console.log command to check if something is being triggered, like on('clicked:syphonroll', () => { console.log('clicked syphonroll'); then look in the console (press f12 and select console tab) to see if that message pops up when you press the button.

1714245334

Edited 1714245451

Pro

Sheet Author

API Scripter

The first problem I see is this, right need the start: let syphonlvl = parseInt(roll.results.syphonroll.result) || 0; That requires there to be a {{syphonlvl= in your roll, but there isnt one, so this will be undefined . This might work: let syphonlvl = parseInt(roll.results.subtitle.result) || 0; since i think the value of {{subtitle}} will grab the first inline roll in that section. It's worth a try. The second problem is this line: getAttrs([syplevel]) ;{values => { there is no syplevel variable defined in the javascript . There is a {{syplevel=[[0]]}} in the roll string, but getAttrs can't see that, and even if it could, the value would always equal 0. Actually, the syntax of that line is completely wrong, too. It should be: getAttrs([syplevel], values => { but that assumes there is a variable syplevel already defined, and that variable contains a valid attribute name.

1714245706

Pro

Sheet Author

API Scripter