Redesign adversité section: 3 colored cards layout

Replace vertical list with horizontal card layout matching header style:
- BLEUE (blue), ROUGE (red), NOIRE (dark) cards with top-colored borders
- Gem image 52px with drop-shadow + hover scale
- Large numeric counter (Signika font)
- Colored -/+ buttons (red minus, green plus)
- Modifier fields compact row below cards
- Section title with amber letterhead style

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
2026-04-03 08:04:45 +02:00
parent 28cab15b37
commit 0ce42d0fe3
3 changed files with 363 additions and 23 deletions

View File

@@ -156,34 +156,35 @@
</ul>
</div>
<div class="sheet-box color-bg-archetype">
<div class="sheet-box color-bg-archetype adversite-section">
<h4 class="item-name-label competence-name">Adversités</h4>
<ul class="item-list alternate-list">
<h4 class="adversite-section-title">Adversités</h4>
<div class="adversite-cards">
{{#each system.adversite as |adv key|}}
<li class="item flexrow" data-adversite="{{key}}">
<a data-action="modifyAdversite" class="plus-minus-button" data-adversite-value="-1">-</a>
<div class="icon-adversite-container">
<img class="icon-adversite" src="systems/fvtt-mournblade-cyd-2-0/assets/icons/gemme_{{key}}.webp">
<div class="adversite-text">{{adv}}</div>
<div class="adversite-card adversite-{{key}}" data-adversite="{{key}}">
<div class="adversite-card-title">{{upperFirst key}}</div>
<img class="adversite-gem" src="systems/fvtt-mournblade-cyd-2-0/assets/icons/gemme_{{key}}.webp">
<div class="adversite-value">{{adv}}</div>
<div class="adversite-controls">
<a data-action="modifyAdversite" class="adv-btn adv-minus" data-adversite-value="-1"></a>
<a data-action="modifyAdversite" class="adv-btn adv-plus" data-adversite-value="1">+</a>
</div>
<a data-action="modifyAdversite" class="plus-minus-button" data-adversite-value="1">+</a>
<div class="">&nbsp;</div>
<div class="">&nbsp;</div>
<div class="">&nbsp;</div>
</li>
</div>
{{/each}}
</ul>
{{#if isGM}}
<div class="flexrow">
<span class="item-name-label competence-name item-field-label-long" data-tooltip="Modificateur de Vigueur">Mod. de Vigueur</span>
<input type="text" class="item-field-label-short" name="system.sante.vigueurmodifier"
value="{{system.sante.vigueurmodifier}}" data-dtype="Number" />
</div>
<div class="flexrow">
<span class="item-name-label competence-name item-field-label-long" data-tooltip="Modificateur de Seuil de Pouvoir">Mod. de Seuil de Pouvoir</span>
<input type="text" class="item-field-label-short" name="system.ame.seuilpouvoirmodifier"
value="{{system.ame.seuilpouvoirmodifier}}" data-dtype="Number" />
{{#if isGM}}
<div class="adversite-modifiers">
<div class="adversite-modifier-row">
<label data-tooltip="Modificateur de Vigueur">Mod. Vigueur</label>
<input type="text" name="system.sante.vigueurmodifier"
value="{{system.sante.vigueurmodifier}}" data-dtype="Number" />
</div>
<div class="adversite-modifier-row">
<label data-tooltip="Modificateur de Seuil de Pouvoir">Mod. Seuil Pouvoir</label>
<input type="text" name="system.ame.seuilpouvoirmodifier"
value="{{system.ame.seuilpouvoirmodifier}}" data-dtype="Number" />
</div>
</div>
{{/if}}
</div>