Refonte complète : dialogues de jet + messages de chat

- Nouveau layout roll-dialog.hbs : header, grille lune 3×3,
  sélecteur visibility, ligne Destin avec compteur disponible,
  preview formule améliorée
- Fix JS : data-moon-bonus sur chaque option, formule − si négatif
- Fix roll.mjs : passe destActuel au dialog, déduit automatiquement
  1 point de Destin (system.destin.lvl++) après chaque jet avec Destin
- character.mjs : passe destActuel = 8 - destin.lvl au prompt()
- chat-message.hbs : icônes résultat (✦✦/✖✖ pour critiques), label
  Formule, margin-badge right-aligned vs difficulté left-aligned
- roll.less : refonte complète couleurs (#0c4c0c/#e07b00), grille lune,
  destin row, visibility subtil, bandeau critiques améliorés
- lang/fr.json : clés Roll.visibility*, destinAvailable, destinNone,
  destinBonus, formula

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
2026-03-29 00:34:27 +01:00
parent c540b17e70
commit ad85ecf4bf
6 changed files with 389 additions and 234 deletions

View File

@@ -1,13 +1,12 @@
<div class="roll-dialog-content">
{{!-- Info bloc : acteur + domaine --}}
{{!-- 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>
@@ -26,12 +25,12 @@
</div>
</div>
{{!-- Sélecteur Phase de Lune --}}
{{!-- 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}}" title="{{localize phase.label}}{{#if phase.bonus}} (+{{phase.bonus}}){{else}} (+0){{/if}}">
<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>
@@ -41,41 +40,64 @@
</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>
<div class="roll-form-rows">
{{!-- 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">
{{!-- 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>
<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">
{{!-- 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>
{{!-- 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">
{{!-- 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>
@@ -91,27 +113,26 @@
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 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;
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;
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;
}
// 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');
@@ -121,7 +142,7 @@
wrap.querySelectorAll('#modifier, #aspectModifier, #useDestin').forEach(el => {
el.addEventListener('change', update);
el.addEventListener('input', update);
el.addEventListener('input', update);
});
update();