fvtt-celestopol/templates/roll-dialog.hbs

<div class="roll-dialog-content">

  {{!-- En-tête : acteur + domaine + formule de base --}}
  <div class="roll-info-block">
    <div class="roll-actor">{{actorName}}</div>
    <div class="roll-skill-line">
      {{#if statLabel}}<span class="stat-label">{{localize statLabel}}</span><span class="sep"> › </span>{{/if}}
      <span class="skill-label">{{localize skillLabel}}</span>
    </div>
    <div class="roll-dice-summary">
      <div class="dice-breakdown">
        <span class="base-dice">2d8</span>
        <span class="plus-sign"> + </span>
        <span class="dval">{{skillValue}}</span>
        {{#if woundMalus}}
        <span class="dminus"> − {{abs woundMalus}}</span>
        {{/if}}
      </div>
      {{#if woundLabel}}
      <div class="wound-info">⚠ {{woundLabel}}</div>
      {{/if}}
    </div>
  </div>

  <div class="roll-form-rows">

    {{!-- Difficulté --}}
    <div class="form-row-line">
      <label for="difficulty">{{localize "CELESTOPOL.Roll.difficulty"}}</label>
      <select id="difficulty" name="difficulty">
        {{#each difficultyChoices as |diff key|}}
        <option value="{{key}}" {{#if (eq key ../defaultDifficulty)}}selected{{/if}}>
          {{localize diff.label}}{{#if diff.value}} ({{diff.value}}){{/if}}
        </option>
        {{/each}}
      </select>
    </div>

    {{!-- Modificateur & Aspect côte à côte --}}
    <div class="form-two-col">
      <div class="form-row-line">
        <label for="modifier">{{localize "CELESTOPOL.Roll.modifier"}}</label>
        <input type="number" id="modifier" name="modifier" value="0" min="-10" max="10">
      </div>
      <div class="form-row-line">
        <label for="aspectModifier">{{localize "CELESTOPOL.Roll.aspect"}}</label>
        <input type="number" id="aspectModifier" name="aspectModifier" value="0" min="-4" max="4">
      </div>
    </div>

    {{!-- Dé de la Lune --}}
    <div class="form-moon-row">
      <label class="moon-toggle" for="rollMoonDie">
        <input type="checkbox" id="rollMoonDie" name="rollMoonDie" {{#if defaultRollMoonDie}}checked{{/if}}>
        <span class="moon-icon">🌑</span>
        <span class="moon-text">{{localize "CELESTOPOL.Roll.rollMoonDie"}}</span>
      </label>
    </div>

    {{!-- Destin (3d8) — seulement si jauge pleine --}}
    <div class="form-destin-row {{#unless destGaugeFull}}destin-disabled{{/unless}}">
      <label class="destin-toggle" for="useDestin">
        <input type="checkbox" id="useDestin" name="useDestin" {{#unless destGaugeFull}}disabled{{/unless}}>
        <span class="destin-icon">✦</span>
        <span class="destin-text">
          <span class="destin-main">{{localize "CELESTOPOL.Roll.destin"}}</span>
          <span class="destin-bonus">{{localize "CELESTOPOL.Roll.destinBonus"}}</span>
        </span>
        {{#if destGaugeFull}}
        <span class="destin-badge full">{{localize "CELESTOPOL.Roll.destGaugeFull"}}</span>
        {{else}}
        <span class="destin-badge empty">{{localize "CELESTOPOL.Roll.destGaugeEmpty"}}</span>
        {{/if}}
      </label>
    </div>

    {{!-- Visibilité --}}
    <div class="form-row-line form-visibility">
      <label for="visibility">{{localize "CELESTOPOL.Roll.visibility"}}</label>
      <select id="visibility" name="visibility">
        <option value="publicroll">{{localize "CELESTOPOL.Roll.visibilityPublic"}}</option>
        <option value="gmroll">{{localize "CELESTOPOL.Roll.visibilityGM"}}</option>
        <option value="selfroll">{{localize "CELESTOPOL.Roll.visibilitySelf"}}</option>
      </select>
    </div>

  </div>

  {{!-- Prévisualisation formule --}}
  <div class="dice-preview">
    <span class="preview-label">{{localize "CELESTOPOL.Roll.formula"}}</span>
    <span class="preview-formula" id="preview-formula">2d8</span>
  </div>

</div>

<script>
(function() {
  const wrap      = document.querySelector('.roll-dialog-content');
  if (!wrap) return;

  const skillVal   = {{skillValue}};
  const woundMalus = {{woundMalus}};

  function update() {
    const modifier  = parseInt(wrap.querySelector('#modifier')?.value ?? 0) || 0;
    const aspectMod = parseInt(wrap.querySelector('#aspectModifier')?.value ?? 0) || 0;
    const useDestin = wrap.querySelector('#useDestin')?.checked;
    const ndice     = useDestin ? 3 : 2;
    const totalMod  = skillVal + woundMalus + modifier + aspectMod;

    let formula = `${ndice}d8`;
    if (totalMod > 0) formula += ` + ${totalMod}`;
    if (totalMod < 0) formula += ` − ${Math.abs(totalMod)}`;

    const previewEl = wrap.querySelector('#preview-formula');
    if (previewEl) previewEl.textContent = formula;
  }

  wrap.querySelectorAll('#modifier, #aspectModifier, #useDestin').forEach(el => {
    el.addEventListener('change', update);
    el.addEventListener('input',  update);
  });

  update();
})();
</script>