mirror of
https://github.com/Foundryborne/daggerheart.git
synced 2026-04-21 23:13:39 +02:00
Improved the EffectDisplay tooltip of the beastform effect to show the info about the active beastform
This commit is contained in:
parent
a4fff56461
commit
42b344dc8c
12 changed files with 222 additions and 163 deletions
|
|
@ -24,7 +24,7 @@ export default class BeastformEffect extends BaseEffect {
|
|||
width: new fields.NumberField({ integer: false, nullable: true })
|
||||
})
|
||||
}),
|
||||
advantageOn: new fields.ArrayField(new fields.StringField()),
|
||||
advantageOn: new fields.TypedObjectField(new fields.SchemaField({ value: new fields.StringField() })),
|
||||
featureIds: new fields.ArrayField(new fields.StringField()),
|
||||
effectIds: new fields.ArrayField(new fields.StringField())
|
||||
};
|
||||
|
|
|
|||
|
|
@ -97,11 +97,11 @@ export default class DHBeastform extends BaseDataItem {
|
|||
|
||||
/* -------------------------------------------- */
|
||||
|
||||
get beastformAttackData() {
|
||||
const effect = this.parent.effects.find(x => x.type === 'beastform');
|
||||
static getBeastformAttackData(effect) {
|
||||
if (!effect) return null;
|
||||
|
||||
const traitBonus = effect.changes.find(x => x.key === `system.traits.${this.mainTrait}.value`)?.value ?? 0;
|
||||
const mainTrait = effect.changes.find(x => x.key === 'system.rules.attack.roll.trait')?.value;
|
||||
const traitBonus = effect.changes.find(x => x.key === `system.traits.${mainTrait}.value`)?.value ?? 0;
|
||||
const evasionBonus = effect.changes.find(x => x.key === 'system.evasion')?.value ?? 0;
|
||||
|
||||
const damageDiceIndex = effect.changes.find(x => x.key === 'system.rules.attack.damage.diceIndex');
|
||||
|
|
@ -109,7 +109,7 @@ export default class DHBeastform extends BaseDataItem {
|
|||
const damageBonus = effect.changes.find(x => x.key === 'system.rules.attack.damage.bonus')?.value ?? 0;
|
||||
|
||||
return {
|
||||
trait: game.i18n.localize(CONFIG.DH.ACTOR.abilities[this.mainTrait].label),
|
||||
trait: game.i18n.localize(CONFIG.DH.ACTOR.abilities[mainTrait]?.label),
|
||||
traitBonus: traitBonus ? Number(traitBonus).signedString() : '',
|
||||
evasionBonus: evasionBonus ? Number(evasionBonus).signedString() : '',
|
||||
damageDice: damageDice,
|
||||
|
|
|
|||
|
|
@ -31,12 +31,34 @@ export default class DhTooltipManager extends foundry.helpers.interaction.Toolti
|
|||
this.#bordered = true;
|
||||
let effect = {};
|
||||
if (element.dataset.uuid) {
|
||||
const effectData = (await foundry.utils.fromUuid(element.dataset.uuid)).toObject();
|
||||
const effectItem = await foundry.utils.fromUuid(element.dataset.uuid);
|
||||
const effectData = effectItem.toObject();
|
||||
|
||||
effect = {
|
||||
...effectData,
|
||||
name: game.i18n.localize(effectData.name),
|
||||
description: game.i18n.localize(effectData.description ?? effectData.parent.system.description)
|
||||
name: game.i18n.localize(effectData.name)
|
||||
};
|
||||
|
||||
if (effectData.type === 'beastform') {
|
||||
const beastformData = {
|
||||
features: effectItem.parent.items.filter(x => effectItem.system.featureIds.includes(x.id)),
|
||||
advantageOn: effectData.system.advantageOn,
|
||||
beastformAttackData: game.system.api.data.items.DHBeastform.getBeastformAttackData(effectItem)
|
||||
};
|
||||
for (const feature of beastformData.features) {
|
||||
feature.enrichedDescription = await feature.system.getEnrichedDescription();
|
||||
}
|
||||
effect.description = await foundry.applications.handlebars.renderTemplate(
|
||||
'systems/daggerheart/templates/ui/tooltip/parts/beastformData.hbs',
|
||||
{
|
||||
item: { system: beastformData }
|
||||
}
|
||||
);
|
||||
} else {
|
||||
effect.description = game.i18n.localize(
|
||||
effectData.description ?? effectData.parent.system.description
|
||||
);
|
||||
}
|
||||
} else {
|
||||
const conditions = CONFIG.DH.GENERAL.conditions();
|
||||
const condition = conditions[element.dataset.condition];
|
||||
|
|
|
|||
|
|
@ -47,6 +47,7 @@ export const preloadHandlebarsTemplates = async function () {
|
|||
'systems/daggerheart/templates/ui/chat/parts/button-part.hbs',
|
||||
'systems/daggerheart/templates/ui/itemBrowser/itemContainer.hbs',
|
||||
'systems/daggerheart/templates/scene/dh-config.hbs',
|
||||
'systems/daggerheart/templates/settings/appearance-settings/diceSoNiceTab.hbs'
|
||||
'systems/daggerheart/templates/settings/appearance-settings/diceSoNiceTab.hbs',
|
||||
'systems/daggerheart/templates/ui/tooltip/parts/beastformData.hbs'
|
||||
]);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
@import './tooltip/sheet.less';
|
||||
@import './tooltip/tooltip.less';
|
||||
@import './tooltip/battlepoints.less';
|
||||
@import './tooltip/bordered-tooltip.less';
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: start;
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
gap: 0px;
|
||||
|
||||
|
|
@ -35,12 +35,20 @@
|
|||
}
|
||||
}
|
||||
|
||||
.close-hints {
|
||||
margin-top: 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
|
||||
.close-hint {
|
||||
border-radius: 3px;
|
||||
padding: 3px;
|
||||
background: @rustic-brown-80;
|
||||
color: @golden;
|
||||
font-size: 12px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
129
styles/less/ux/tooltip/sheet.less
Normal file
129
styles/less/ux/tooltip/sheet.less
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
#tooltip:has(div.daggerheart.dh-style.tooltip.card-style),
|
||||
aside[role='tooltip']:has(div.daggerheart.dh-style.tooltip),
|
||||
#tooltip.bordered-tooltip {
|
||||
.tooltip-title {
|
||||
font-size: var(--font-size-20);
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.tooltip-description {
|
||||
font-style: inherit;
|
||||
text-align: inherit;
|
||||
width: 100%;
|
||||
padding: 5px 10px;
|
||||
position: relative;
|
||||
margin-top: 5px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
background: @golden;
|
||||
mask-image: linear-gradient(270deg, transparent 0%, black 50%, transparent 100%);
|
||||
height: 2px;
|
||||
width: calc(100% - 10px);
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip-separator {
|
||||
background: @golden;
|
||||
mask-image: linear-gradient(270deg, transparent 0%, black 50%, transparent 100%);
|
||||
height: 2px;
|
||||
width: calc(100% - 10px);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.tooltip-tags {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
padding: 5px 10px;
|
||||
position: relative;
|
||||
max-height: 150px;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
|
||||
|
||||
.tooltip-tag {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-direction: column;
|
||||
|
||||
.tooltip-tag-label-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
|
||||
img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
gap: 5px 10px;
|
||||
padding-bottom: 16px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
&.advantages {
|
||||
width: 100%;
|
||||
padding: 5px 10px;
|
||||
padding-bottom: 16px;
|
||||
position: relative;
|
||||
margin-top: 5px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
background: @golden;
|
||||
mask-image: linear-gradient(270deg, transparent 0%, black 50%, transparent 100%);
|
||||
height: 2px;
|
||||
width: calc(100% - 10px);
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
background: @green-10;
|
||||
color: @green;
|
||||
border-color: @green;
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 3px 5px;
|
||||
font-size: var(--font-size-12);
|
||||
font: @font-body;
|
||||
|
||||
background: light-dark(@dark-15, @beige-15);
|
||||
border: 1px solid light-dark(@dark, @beige);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: var(--font-size-12);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -13,13 +13,6 @@ aside[role='tooltip']:has(div.daggerheart.dh-style.tooltip.card-style) {
|
|||
outline: 1px solid light-dark(@dark-80, @beige-80);
|
||||
box-shadow: 0 0 25px rgba(0, 0, 0, 0.8);
|
||||
|
||||
.tooltip-title {
|
||||
font-size: var(--font-size-20);
|
||||
color: light-dark(@dark-blue, @golden);
|
||||
font-weight: 700;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.tooltip-subtitle {
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -53,110 +46,6 @@ aside[role='tooltip']:has(div.daggerheart.dh-style.tooltip.card-style) {
|
|||
}
|
||||
}
|
||||
|
||||
.tooltip-tags {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
padding: 5px 10px;
|
||||
position: relative;
|
||||
padding-top: 10px;
|
||||
max-height: 150px;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: light-dark(@dark-blue, @golden) transparent;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
background: @golden;
|
||||
mask-image: linear-gradient(270deg, transparent 0%, black 50%, transparent 100%);
|
||||
height: 2px;
|
||||
width: calc(100% - 10px);
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.tooltip-tag {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-direction: column;
|
||||
|
||||
.tooltip-tag-label-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
|
||||
img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
gap: 5px 10px;
|
||||
padding-bottom: 16px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
&.advantages {
|
||||
width: 100%;
|
||||
padding: 5px 10px;
|
||||
padding-bottom: 16px;
|
||||
position: relative;
|
||||
margin-top: 5px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
background: @golden;
|
||||
mask-image: linear-gradient(270deg, transparent 0%, black 50%, transparent 100%);
|
||||
height: 2px;
|
||||
width: calc(100% - 10px);
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
background: @green-10;
|
||||
color: @green;
|
||||
border-color: @green;
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 3px 5px;
|
||||
font-size: var(--font-size-12);
|
||||
font: @font-body;
|
||||
|
||||
background: light-dark(@dark-15, @beige-15);
|
||||
border: 1px solid light-dark(@dark, @beige);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: var(--font-size-12);
|
||||
}
|
||||
}
|
||||
|
||||
.item-icons-list {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -3,37 +3,7 @@
|
|||
<h2 class="tooltip-title">{{item.name}}</h2>
|
||||
<p class="tooltip-subtitle"><i>{{item.system.examples}}</i></p>
|
||||
|
||||
{{#if description}}
|
||||
<div class="tooltip-description">{{{description}}}</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="tags">
|
||||
{{#with item.system.beastformAttackData}}
|
||||
<div class="tag">
|
||||
<span>{{localize "DAGGERHEART.ITEMS.Beastform.mainTrait"}} {{this.trait}}</span>
|
||||
</div>
|
||||
<div class="tag">
|
||||
<span>{{localize "DAGGERHEART.ITEMS.Beastform.traitBonus"}} {{this.traitBonus}}</span>
|
||||
</div>
|
||||
<div class="tag">
|
||||
<span>{{localize "DAGGERHEART.GENERAL.evasion"}} {{this.evasionBonus}}</span>
|
||||
</div>
|
||||
<div class="tag">
|
||||
<span>{{localize "DAGGERHEART.GENERAL.damage"}} {{concat this.damageDice ' ' this.damageBonus}} <i class="fa-solid fa-hand-fist"></i></span>
|
||||
</div>
|
||||
{{/with}}
|
||||
</div>
|
||||
|
||||
<h2 class="tooltip-title">{{localize "DAGGERHEART.ITEMS.Beastform.FIELDS.advantageOn.label"}}</h2>
|
||||
<div class="tags advantages">
|
||||
{{#each item.system.advantageOn as | chip |}}
|
||||
<div class="tag">
|
||||
<span>{{ifThen chip.value chip.value chip}}</span>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
|
||||
{{> "systems/daggerheart/templates/ui/tooltip/parts/tooltipTags.hbs" features=item.system.features label=(localize "DAGGERHEART.GENERAL.features")}}
|
||||
{{> "systems/daggerheart/templates/ui/tooltip/parts/beastformData.hbs" }}
|
||||
|
||||
<p class="tooltip-hint">
|
||||
<i class="fa-solid fa-computer-mouse"></i> {{localize "DAGGERHEART.UI.Tooltip.middleClick"}}
|
||||
|
|
|
|||
|
|
@ -16,9 +16,16 @@
|
|||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="close-hints">
|
||||
{{#if (eq effect.type 'beastform')}}
|
||||
<p class="close-hint">
|
||||
<i class="fa-solid fa-computer-mouse"></i> {{localize "DAGGERHEART.UI.Tooltip.middleClick"}}
|
||||
</p>
|
||||
{{/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>
|
||||
</div>
|
||||
31
templates/ui/tooltip/parts/beastformData.hbs
Normal file
31
templates/ui/tooltip/parts/beastformData.hbs
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
{{#if description}}
|
||||
<div class="tooltip-description">{{{description}}}</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="tags">
|
||||
{{#with item.system.beastformAttackData}}
|
||||
<div class="tag">
|
||||
<span>{{localize "DAGGERHEART.ITEMS.Beastform.mainTrait"}} {{this.trait}}</span>
|
||||
</div>
|
||||
<div class="tag">
|
||||
<span>{{localize "DAGGERHEART.ITEMS.Beastform.traitBonus"}} {{this.traitBonus}}</span>
|
||||
</div>
|
||||
<div class="tag">
|
||||
<span>{{localize "DAGGERHEART.GENERAL.evasion"}} {{this.evasionBonus}}</span>
|
||||
</div>
|
||||
<div class="tag">
|
||||
<span>{{localize "DAGGERHEART.GENERAL.damage"}} {{concat this.damageDice ' ' this.damageBonus}} <i class="fa-solid fa-hand-fist"></i></span>
|
||||
</div>
|
||||
{{/with}}
|
||||
</div>
|
||||
|
||||
<h2 class="tooltip-title">{{localize "DAGGERHEART.ITEMS.Beastform.FIELDS.advantageOn.label"}}</h2>
|
||||
<div class="tags advantages">
|
||||
{{#each item.system.advantageOn as | chip |}}
|
||||
<div class="tag">
|
||||
<span>{{ifThen chip.value chip.value chip}}</span>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
|
||||
{{> "systems/daggerheart/templates/ui/tooltip/parts/tooltipTags.hbs" features=item.system.features label=(localize "DAGGERHEART.GENERAL.features")}}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
{{#if (gt features.length 0)}}<h2 class="tooltip-title">{{label}}</h2>{{/if}}
|
||||
<div class="tooltip-separator"></div>
|
||||
<div class="tooltip-tags">
|
||||
{{#each features as | feature |}}
|
||||
{{#with (ifThen ../isAction feature (ifThen feature.item feature.item feature))}}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue