roll20-character-sheets/Ta-gueule-c-est-quantique/tgcq.html

<!--            +actButton('screwed', '2d8').roll-->
<main>
  <div class="col postit" id="identity">
    <label class="textLabelled" for="nom"><span>Nom:</span>
      <input name="attr_character_name" type="text" value=""/>
    </label>
    <label class="textLabelled" for="occupation"><span>Occupation:</span>
      <input name="attr_occupation" type="text" value=""/>
    </label>
    <label class="textareaLabelled" for="famille"><span>Liens & famille:</span>
      <textarea id="famille" name="attr_famille"></textarea>
    </label>
    <label class="textareaLabelled" for="ambition"><span>Ambition personnelle:</span>
      <textarea id="ambition" name="attr_ambition"></textarea>
    </label>
  </div>
  <div class="col postit" id="power">
    <label class="textLabelled" for="powa"><span>Pouvoir ou zone d’influence:</span>
      <input name="attr_powa" type="text" value=""/>
    </label>
    <label class="textareaLabelled" for="excentricite"><span>Excentricités:</span>
      <textarea id="excentricite" name="attr_excentricite"></textarea>
    </label>
    <label class="textareaLabelled" for="crise"><span>Crise:</span>
      <textarea id="crise" name="attr_crise"></textarea>
    </label>
  </div>
  <div class="panel" id="skills">
    <div class="stamp">
      <div class="screwed"><span class="blue">Déconnexion</span>
        <div class="screwBox"><span>~</span>
          <label>
            <input name="attr_screwed" value="-1" type="radio"/><span title="-1"></span>
          </label><span>~</span>
          <label>
            <input name="attr_screwed" value="1" type="radio"/><span title="1"></span>
          </label>
          <label>
            <input name="attr_screwed" value="2" type="radio"/><span title="2"></span>
          </label>
          <label>
            <input name="attr_screwed" value="3" type="radio"/><span title="3"></span>
          </label><span>~</span>
          <label>
            <input name="attr_screwed" value="4" type="radio"/><span title="4"></span>
          </label><span>~</span>
        </div>
      </div>
    </div>
    <div class="carac" id="pouvoir">
      <label class="textLabelled" for="pouvoir"><span>Pouvoir</span>
        <input name="attr_pouvoir" type="number" value="0"/>
      </label>
      <button class="roll" name="act_pouvoir" type="action" value="Pouvoir"></button>
    </div>
    <div class="carac" id="muscle">
      <label class="textLabelled" for="muscle"><span>Muscles</span>
        <input name="attr_muscle" type="number" value="0"/>
      </label>
      <button class="roll" name="act_muscle" type="action" value="Muscles"></button>
    </div>
    <div class="carac" id="debrouille">
      <label class="textLabelled" for="debrouille"><span>Débrouille</span>
        <input name="attr_debrouille" type="number" value="0"/>
      </label>
      <button class="roll" name="act_debrouille" type="action" value="Débrouille"></button>
    </div>
    <div class="carac" id="neurone">
      <label class="textLabelled" for="neurone"><span>Neurones</span>
        <input name="attr_neurone" type="number" value="0"/>
      </label>
      <button class="roll" name="act_neurone" type="action" value="Neurones"></button>
    </div>
    <div class="carac" id="aplomb">
      <label class="textLabelled" for="aplomb"><span>Aplomb</span>
        <input name="attr_aplomb" type="number" value="0"/>
      </label>
      <button class="roll" name="act_aplomb" type="action" value="Aplomb"></button>
    </div>
    <label>
      <input name="attr_d12" value="1" type="checkbox"/><span title=" Utiliser 1d12"> Utiliser 1d12</span>
    </label>
  </div>
  <div class="panel" id="monitor">
    <h3 class="red">SANté</h3>
    <label class="textLabelled" for="san_max" max="10"><span>Max</span>
      <input name="attr_san_max" type="number" value="0" max="10"/>
    </label>
    <div class="fillLeft sante">
      <input name="attr_san" type="hidden" value="0"/>
      <input name="attr_san_max" type="hidden" value="0"/>
      <label data-value="0">
        <input name="attr_san" type="radio" value="0"/><span></span>
      </label>
      <label data-value="1">
        <input name="attr_san" type="radio" value="1"/><span></span>
      </label>
      <label data-value="2">
        <input name="attr_san" type="radio" value="2"/><span></span>
      </label>
      <label data-value="3">
        <input name="attr_san" type="radio" value="3"/><span></span>
      </label>
      <label data-value="4">
        <input name="attr_san" type="radio" value="4"/><span></span>
      </label>
      <label data-value="5">
        <input name="attr_san" type="radio" value="5"/><span></span>
      </label>
      <label data-value="6">
        <input name="attr_san" type="radio" value="6"/><span></span>
      </label>
      <label data-value="7">
        <input name="attr_san" type="radio" value="7"/><span></span>
      </label>
      <label data-value="8">
        <input name="attr_san" type="radio" value="8"/><span></span>
      </label>
      <label data-value="9">
        <input name="attr_san" type="radio" value="9"/><span></span>
      </label>
      <label data-value="10">
        <input name="attr_san" type="radio" value="10"/><span></span>
      </label>
    </div>
    <label>
      <input name="attr_aie" value="-1" type="checkbox"/><span title="AÏE (-1)">AÏE (-1)</span>
    </label>
    <h3 class="blue">EQUilibre</h3>
    <label class="textLabelled" for="equ_max" max="10"><span>Max</span>
      <input name="attr_equ_max" type="number" value="0" max="10"/>
    </label>
    <div class="fillLeft equilibre">
      <input name="attr_equ" type="hidden" value="0"/>
      <input name="attr_equ_max" type="hidden" value="0"/>
      <label data-value="0">
        <input name="attr_equ" type="radio" value="0"/><span></span>
      </label>
      <label data-value="1">
        <input name="attr_equ" type="radio" value="1"/><span></span>
      </label>
      <label data-value="2">
        <input name="attr_equ" type="radio" value="2"/><span></span>
      </label>
      <label data-value="3">
        <input name="attr_equ" type="radio" value="3"/><span></span>
      </label>
      <label data-value="4">
        <input name="attr_equ" type="radio" value="4"/><span></span>
      </label>
      <label data-value="5">
        <input name="attr_equ" type="radio" value="5"/><span></span>
      </label>
      <label data-value="6">
        <input name="attr_equ" type="radio" value="6"/><span></span>
      </label>
      <label data-value="7">
        <input name="attr_equ" type="radio" value="7"/><span></span>
      </label>
      <label data-value="8">
        <input name="attr_equ" type="radio" value="8"/><span></span>
      </label>
      <label data-value="9">
        <input name="attr_equ" type="radio" value="9"/><span></span>
      </label>
      <label data-value="10">
        <input name="attr_equ" type="radio" value="10"/><span></span>
      </label>
    </div>
    <label>
      <input name="attr_deboussole" value="-2" type="checkbox"/><span title="Déboussolé (-2)">Déboussolé (-2)</span>
    </label>
  </div>
  <div class="col panel" id="misc">
    <label class="textareaLabelled" for="equipement"><span>Équipement:</span>
      <textarea id="equipement" name="attr_equipement"></textarea>
    </label>
    <label class="textareaLabelled" for="avantage"><span>Avantages & séquelles:</span>
      <textarea id="avantage" name="attr_avantage"></textarea>
    </label>
  </div>
</main><rolltemplate class="sheet-rolltemplate-tgcq">
    <h1>{{name}} - {{carac}}</h1>
    <div class="sheet-rollBody">
        Total: {{roll}}
    </div>
    <div class="sheet-chaos">
        Sources de chaos: {{computed::chaos}}+
    </div>
</rolltemplate>
<script type="text/worker">const THE_ROLL = "&{template:tgcq} {{name=_NAME_}} {{carac=_CARAC_}} {{roll=[[_ROLL_]]}} {{chaos=[[0]]}}"

let doRoll = async (caracName, params={}) => {
    params = {
        ...{
            caracValue: 0,
            isBonusChecked: 0,
            aie: 0,
            deboussole: 0
        },
        ...params
    }

    let rollDice = (params.isBonusChecked ? '1d12+1d8' : '2d8') + `+${params.caracValue}`;
    rollDice += `+${params.aie}+${params.deboussole}`

    let rollString = THE_ROLL
        .replace('_NAME_', params.charName)
        .replace('_CARAC_', caracName)
        .replace('_ROLL_', rollDice)

    console.log(rollString)

    let roll = await startRoll(rollString)

    // Computes sources of chaos
    let chaosSources = 0
    roll.results.roll.dice.forEach(die => {
        if (die == 1 || (die == 8 && caracName == 'Pouvoir')) {
            chaosSources++
        }
    })

    finishRoll(roll.rollId, {chaos: chaosSources})

    let toSet = {d12: 0}
    if (caracName == 'Pouvoir') toSet.deboussole = 0
    setAttrs(toSet)
}

on('clicked:muscle clicked:neurone clicked:aplomb clicked:debrouille clicked:pouvoir', ev => {
    let carac = ev.htmlAttributes.value
    let attrName = ev.htmlAttributes.name.substr(4)
    let attributes = ['character_name', attrName, 'd12', 'aie']

    if (carac === 'Pouvoir') {
        attributes.push('deboussole')
    }

    getAttrs(attributes, vals => {
        console.log(vals)
    let caracValue = vals[attrName]

        let params = {
            charName: vals.character_name,
            caracValue: parseInt(caracValue)||0,
            isBonusChecked: parseInt(vals.d12)||0,
            aie: parseInt(vals.aie)||0,
            deboussole: parseInt(vals.deboussole)||0
        }

        doRoll(carac, params)
    })
})
</script>