foundryvtt-reve-de-dragon/templates/dialog-competence.html

<form class="skill-roll-dialog">
<h2 class="compdialog" id="compdialogTitle"></h2>
<div class="form-group">
  <label for="categorie">Caractéristique </label>
  <select name="carac" id="carac" data-dtype="String">
      {{#select carac}}
      {{#each carac as |caracitem key|}}
      <option value={{key}}>{{caracitem.label}}</option>
      {{/each}}
      {{/select}}
  </select>
</div>
<div class="form-group">
  <label for="categorie">Bonus/Malus</label>
  <select name="bonusmalus" id="bonusmalus" data-dtype="number">
      {{#select bonusmalus}}
      {{#each bonusmalusTable as |bmvalue key|}}
      <option value={{bmvalue}}>{{bmvalue}}</option>
      {{/each}}
      {{/select}}
  </select>
</div>
<div class="form-group">
  <label>Résultat : </label><label id="roll-param">10 / 0</label>
</div>
<div id="resolutionTable">
  
</div>
</form>

<script>
  // Get the rollData stuff
  var rollData = CONFIG.currentRollData;
  
  function updateRollResult( rollData ) {
    rollData.finalLevel = parseInt(rollData.competence.data.niveau) + parseInt(rollData.bmValue);
    rollData.finalLevelStr = (rollData.finalLevel > 0 ) ? "+" + rollData.finalLevel : rollData.finalLevel;
    $("#roll-param").text( rollData.selectedCarac.value + " / " +  rollData.finalLevelStr );
    rollData.rollTarget = game.data.RdDUtility.getResolutionField( rollData.selectedCarac.value, rollData.finalLevel);    
    $("#compdialogTitle").text( rollData.competence.name + " - " + rollData.competence.data.niveau + " - " + rollData.selectedCarac.label ); 
    $(".table-resolution").remove();
    game.data.RdDUtility.makeHTMLResolutionTable( $("#resolutionTable"), rollData.selectedCarac.value-2, parseInt(rollData.selectedCarac.value) + 2, -10, 11, 
        rollData.selectedCarac.value, rollData.finalLevel );
  }
  
  // Setup everything onload
  $(function() {
    // Set the default carac from the competence item
    rollData.selectedCarac = rollData.carac[rollData.competence.data.carac_defaut];
    // Update html, according to data
    $("#carac").val( rollData.competence.data.carac_defaut ); 
    $("#bonusmalus").val( rollData.bmValue ); 
    updateRollResult(rollData);
  });
  
  // Update !
  $('#bonusmalus').click((event) => {    
    rollData.bmValue = event.currentTarget.value; // Update the selected bonus/malus
    console.log("BM CLICKED !!!", rollData.bmValue, rollData.competence.data.niveau, parseInt(rollData.competence.data.niveau) + parseInt(rollData.bmValue) );
    updateRollResult(rollData);
  });
  $('#carac').click((event) => {    
    let caracKey = event.currentTarget.value;        
    rollData.selectedCarac = rollData.carac[caracKey]; // Update the selectedCarac
    console.log("CARAC CLICKED !!!", rollData.selectedCarac, rollData.competence.data.niveau, rollData.bmValue);
    updateRollResult(rollData);
  });
</script>