Yep, Andreas has the right of it. This will be a combination of CRP, roll template helper functions, and CSS. It'd be something like this: HTML/JS <button type="action" name="act_roll">Roll check</button>
<rolltemplate class="sheet-rolltemplate-my-template">
<div class="template-container">
{{#rollGreater() computed::intervention 0}}
<span class="divine" data-i18n="divine intervention"></span>
{{/rollGreater() computed::intervention 0}}
{{#rollLess() computed::intervention 0}}
<span class="demonic" data-i18n="demonic intervention"></span>
{{/rollLess() computed::intervention 0}}
<div class="template-row">
<span class="row-head" data-i18n="target"></span>
<span class="result">{{target}}</span>
</div>
<div class="template-row">
<span class="row-head" data-i18n="roll"></span>
{{#rollGreater() computed::vs 0}}
<span hidden class="success"></span>
{{/rollGreater() computed::vs 0}}
<span class="result">{{roll}}</span>
</div>
<div class="template-row">
<span class="row-head" data-i18n="check digit"></span>
<span class="result">{{check}}</span>
</div>
</div>
</rolltemplate>
<script type="text/worker">
const initiateRoll = async function(event){
//I'm not going to use the event object here, but you can use it to have this function dynamically foll whatever is needed (within reason) based on the triggerName property.
let rollText = `&{template:my-template} {{intervention=[[0[computed value]]]}} {{target=[[?{What's your target number|12}]]}} {{roll=[[2d6]]}} {{check=[[1d6]]}} {{vs=[[0[computed value]]]}}`;
const rollResult = await startRoll(rollText);
const computeObj = {};//An object to store the computation changes to the roll displays.
const rollDice = rollResult.results.roll.dice;
const checkDice = rollResult.results.check.dice;
const allDice = [...rollDice,...checkDice];
//The below ternary will set intervention to 1 if all dice are 1's, or -1 if all dice are 6's. If neither of these is true, then it sets it to 0.
computeObj.intervention = allDice.every((die)=>die===1) ?
1 :
allDice.every((die)=>die===6) ?
-1 :
0;
computeObj.vs = rollResult.results.roll.result <= rollResult.results.target.result ?
1 :
0;
finishRoll(rollResult.rollId,computeObj);//Release the roll to chat and apply our computation changes.
}
on('clicked:roll',initiateRoll);
</script> CSS .sheet-rolltemplate-my-template .inlinerollresult,
.sheet-rolltemplate-my-template .inlinerollresult.fullcrit,
.sheet-rolltemplate-my-template .inlinerollresult.fullfail,
.sheet-rolltemplate-my-template .inlinerollresult.importantroll {
border-color: transparent;
background-color:transparent;
}
.sheet-rolltemplate-my-template .sheet-success + .sheet-result .inlinerollresult{
border-color:green;
}
.sheet-rolltemplate-my-template .sheet-demonic ~ .sheet-template-row .inlinerollresult{
border-color:black;
}
.sheet-rolltemplate-my-template .sheet-divine ~ .sheet-template-row .sheet-result .inlinerollresult{
border-color:yellow;
} I've made the intervention coloring pretty broad here for demo purposes, but you can limit it if that's what you need by adding a class to the template-rows that you do want it to be colored in and then adding that class to the color css declarations for the two intervention states. You might also be interested in the Sheet Creation tutorial series that I'm currently doing, A Sheet Author's Journey . Hope that helps. -Scott
