fvtt-celestopol/templates/roll-dialog.hbs

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

  {{!-- Info bloc : acteur + domaine --}}
  <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>

  {{!-- Sélecteur Phase de Lune --}}
  <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}}" title="{{localize phase.label}}{{#if phase.bonus}} (+{{phase.bonus}}){{else}} (+0){{/if}}">
        <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>

  {{!-- Seuil de difficulté --}}
  <div class="form-group form-row">
    <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 en ligne --}}
  <div class="form-two-col">
    <div class="form-group">
      <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-group">
      <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-group form-destin">
    <label class="destin-label" for="useDestin">
      <input type="checkbox" id="useDestin" name="useDestin">
      <span class="destin-icon">⭐</span>
      {{localize "CELESTOPOL.Roll.destin"}}
    </label>
  </div>

  {{!-- Prévisualisation dynamique --}}
  <div class="dice-preview" id="dice-preview">
    <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 moonBonus    = parseInt(wrap.querySelector('input[name="moonPhase"]:checked')?.closest('[data-moon]')
                          ?.dataset.moonBonus ?? 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;
    const formula      = totalMod !== 0 ? `${ndice}d6 + ${totalMod}` : `${ndice}d6`;

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

  // Mettre à jour les classes actives des lunes + moon-bonus
  wrap.querySelectorAll('.moon-option').forEach(opt => {
    const input = opt.querySelector('input[type="radio"]');
    const key   = opt.dataset.moon;
    const bonusMap = { {{#each moonPhaseChoices}}"{{@key}}": {{#if bonus}}{{bonus}}{{else}}0{{/if}}, {{/each}} };
    opt.dataset.moonBonus = bonusMap[key] ?? 0;
    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>