[Feature] EffectsDisplay (#1340)

* Merged with main

* Added the display

* .

* Removed unused override function

* Fixed layout for generic effects

* feat: add basic style to effects tooltip

* Corrected distancing

* Use CSS based solution for shifting the countdowns

* Centered tooltip header

---------

Co-authored-by: moliloo <dev.murilobrito@gmail.com>
Co-authored-by: Carlos Fernandez <cfern1990@gmail.com>
This commit is contained in:
WBHarry 2025-11-30 18:30:57 +01:00 committed by GitHub
parent f41f0b20b7
commit 165068a9ee
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
25 changed files with 399 additions and 41 deletions

View file

@ -46,17 +46,21 @@
</button>
<div class="palette status-effects" data-palette="effects">
{{#each systemStatusEffects as |status|}}
<div class="effect-control-container" {{#if status.disabled}}data-tooltip="{{localize "DAGGERHEART.UI.Tooltip.immune"}}"{{/if}}>
<img class="effect-control {{status.cssClass}} {{#if status.disabled}}disabled{{/if}}" src="{{status.src}}" data-action="effect" data-status-id="{{status.id}}" {{#if status.title}}data-tooltip-text="{{status.title}}"{{/if}}>
<div class="effect-control-container" {{#if status.disabled}}data-tooltip="{{localize "DAGGERHEART.UI.Tooltip.immune"}}"{{else if status.title}}data-tooltip-text="{{status.title}}"{{/if}}>
<img class="effect-control {{status.cssClass}} {{#if (or status.disabled status.locked)}}disabled{{/if}}" src="{{status.src}}" data-action="effect" data-status-id="{{status.id}}">
{{#if status.disabled}}
<span class="effect-control-disabled-marker">/</span>
{{/if}}
{{#if status.locked}}<i class="effect-locked fa-solid fa-lock"></i>{{/if}}
</div>
{{/each}}
{{#if genericStatusEffects}}
<label class="palette-category-title">{{localize "DAGGERHEART.APPLICATIONS.HUD.tokenHUD.genericEffects"}}</label>
{{#each genericStatusEffects as |status|}}
<img class="effect-control {{status.cssClass}}" src="{{status.src}}" data-action="effect" data-status-id="{{status.id}}" {{#if status.title}}data-tooltip-text="{{status.title}}"{{/if}}>
<div class="effect-control-container" {{#if status.title}}data-tooltip-text="{{status.title}}"{{/if}}>
<img class="effect-control {{status.cssClass}} {{#if (or status.disabled status.locked)}}disabled{{/if}}" src="{{status.src}}" data-action="effect" data-status-id="{{status.id}}" >
{{#if status.locked}}<i class="effect-locked fa-solid fa-lock"></i>{{/if}}
</div>
{{/each}}
{{/if}}
</div>

View file

@ -0,0 +1,14 @@
<div>
<div class="effects-display-container">
{{#each effects as | effect |}}
<span class="effect-container {{#if effect.condition}}disabled{{/if}}" data-tooltip="#effect-display#" id="{{effect.id}}"
data-applied-by="{{effect.appliedBy}}" {{#if effect.condition}}data-condition="{{effect.condition}}"{{else}}data-uuid="{{effect.uuid}}"{{/if}}
>
<a {{#if effect.condition}}disabled{{/if}}>
<img src="{{effect.img}}" />
</a>
{{#if effect.condition}}<i class="effect-locked fa-solid fa-lock"></i>{{/if}}
</span>
{{/each}}
</div>
</div>

View file

@ -0,0 +1,24 @@
<div class="daggerheart dh-style tooltip">
<div class="tooltip-header">
<h2>{{effect.name}}</h2>
{{#if effect.appliedBy}}
<p class="subtitle">{{localize "DAGGERHEART.UI.EffectsDisplay.appliedBy" by=effect.appliedBy}}</p>
{{/if}}
</div>
{{#if effect.description}}
<div class="description">
{{{effect.description}}}
</div>
{{else if effect.parent.system.description}}
<div class="description">
{{{effect.parent.system.description}}}
</div>
{{/if}}
{{#unless effect.isLockedCondition}}
<p class="close-hint">
<i class="fa-solid fa-computer-mouse"></i> {{localize "DAGGERHEART.UI.EffectsDisplay.removeThing" thing=(localize "DAGGERHEART.GENERAL.Effect.single")}}
</p>
{{/unless}}
</div>