fvtt-celestopol/templates/roll-dialog.hbs

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

  {{!-- En-tête : acteur + domaine + dés 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="dval">{{skillValue}}</span>
        <span class="dlabel">{{localize "CELESTOPOL.Roll.nbDiceBase"}}</span>
        {{#if woundMalus}}
        <span class="dminus"> − {{abs woundMalus}}</span>
        <span class="dlabel">{{localize "CELESTOPOL.Roll.woundMalus"}}</span>
        {{/if}}
        <span class="deq"> = </span>
        <span class="nb-dice" id="preview-ndice">{{nbDiceBase}}</span>
        <span class="ddice">d6</span>
      </div>
      {{#if woundLabel}}
      <div class="wound-info">⚠ {{woundLabel}}</div>
      {{/if}}
    </div>
  </div>

  {{!-- Phases de lune : grille 3 × 3 --}}
  <div class="moon-section">
    <div class="moon-section-label">{{localize "CELESTOPOL.Roll.moonPhase"}}</div>
    <div class="moon-phases" id="moon-phases">
      {{#each moonPhaseChoices as |phase key|}}
      <label class="moon-option {{#if (eq key ../defaultMoonPhase)}}active{{/if}}" data-moon="{{key}}" data-moon-bonus="{{#if phase.bonus}}{{phase.bonus}}{{else}}0{{/if}}" title="{{localize phase.label}}">
        <input type="radio" name="moonPhase" value="{{key}}" {{#if (eq key ../defaultMoonPhase)}}checked{{/if}} hidden>
        <span class="moon-symbol">{{phase.symbol}}</span>
        <span class="moon-name">{{localize phase.label}}</span>
        <span class="moon-bonus">{{#if phase.bonus}}+{{phase.bonus}}{{else}}+0{{/if}}</span>
      </label>
      {{/each}}
    </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>

    {{!-- Destin --}}
    <div class="form-destin-row {{#unless destActuel}}destin-disabled{{/unless}}">
      <label class="destin-toggle" for="useDestin">
        <input type="checkbox" id="useDestin" name="useDestin" {{#unless destActuel}}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 destActuel}}
        <span class="destin-count">{{destActuel}} {{localize "CELESTOPOL.Roll.destinAvailable"}}</span>
        {{else}}
        <span class="destin-count no-destin">{{localize "CELESTOPOL.Roll.destinNone"}}</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">{{nbDiceBase}}d6</span>
  </div>

</div>

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

  const skillVal   = {{skillValue}};
  const woundMalus = {{woundMalus}};
  const base = Math.max(1, skillVal + woundMalus);

  function update() {
    const moonOpt      = wrap.querySelector('input[name="moonPhase"]:checked')?.closest('[data-moon]');
    const moonBonus    = parseInt(moonOpt?.dataset.moonBonus ?? 0) || 0;
    const modifier     = parseInt(wrap.querySelector('#modifier')?.value ?? 0) || 0;
    const aspectMod    = parseInt(wrap.querySelector('#aspectModifier')?.value ?? 0) || 0;
    const useDestin    = wrap.querySelector('#useDestin')?.checked ? 2 : 0;
    const ndice        = Math.max(1, base + useDestin);
    const totalMod     = moonBonus + modifier + aspectMod;

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

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

  wrap.querySelectorAll('.moon-option').forEach(opt => {
    const input = opt.querySelector('input[type="radio"]');
    input.addEventListener('change', () => {
      wrap.querySelectorAll('.moon-option').forEach(o => o.classList.remove('active'));
      opt.classList.add('active');
      update();
    });
  });

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

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