Use BEM for combat values

This commit is contained in:
Johannes Loher 2021-04-13 22:48:37 +02:00
parent 49b450daee
commit 04174398bb
6 changed files with 91 additions and 79 deletions

View file

@ -0,0 +1,22 @@
{{!--
!-- Render a combat value.
!--
!-- @param combat-value-key: The key of the combat value
!-- @param combat-value-data: The data for the attribute
!-- @param combat-value-label: The label for the attribute
--}}
<div class="ds4-combat-value">
<div class="ds4-combat-value__value ds4-combat-value__value--{{combat-value-key}}"
title="{{combat-value-label}}: {{combat-value-data.tooltip}}">
{{combat-value-data.total}}
</div>
<div class="ds4-combat-value__formula">
<span class="ds4-combat-value__formula-base"
title="{{combat-value-label}} {{localize 'DS4.TooltipBaseValue'}}">{{combat-value-data.base}}</span>
<span>+</span>
<input class="ds4-combat-value__formula-modifier" type="number" name="data.combatValues.{{combat-value-key}}.mod"
value='{{combat-value-data.mod}}' data-dtype="Number"
title="{{combat-value-label}} {{localize 'DS4.TooltipModifier'}}" />
</div>
</div>

View file

@ -1,33 +1,6 @@
{{!-- ======================================================================== --}}
{{!-- INLINE PARTIAL DEFINITIONS --}}
{{!-- ======================================================================== --}}
{{!--
!-- Render a combat value.
!--
!-- @param combat-value-key: The key of the combat value
!-- @param combat-value-data: The data for the attribute
!-- @param combat-value-label: The label for the attribute
--}}
{{#*inline "combat-value"}}
<div class="combat-value-with-formula">
<div class="combat-value {{combat-value-key}}" title="{{combat-value-label}}: {{combat-value-data.tooltip}}"><span
class="combat-value-total">{{combat-value-data.total}}</span>
</div>
<div class="combat-value-formula flexrow"><span class="combat-value-base"
title="{{combat-value-label}} {{localize 'DS4.TooltipBaseValue'}}">{{combat-value-data.base}}</span><span>+</span><input
type="number" name="data.combatValues.{{combat-value-key}}.mod" value='{{combat-value-data.mod}}'
data-dtype="Number" title="{{combat-value-label}} {{localize 'DS4.TooltipModifier'}}" />
</div>
</div>
{{/inline}}
{{!-- ======================================================================== --}}
<div class="combat-values flexrow flex-between">
<div class="ds4-combat-values">
{{#each config.i18n.combatValues as |combat-value-label combat-value-key|}}
{{> combat-value combat-value-key=combat-value-key combat-value-data=(lookup ../data.combatValues
combat-value-key) combat-value-label=combat-value-label}}
{{> systems/ds4/templates/sheets/actor/components/combat-value.hbs combat-value-key=combat-value-key
combat-value-data=(lookup ../data.combatValues combat-value-key) combat-value-label=combat-value-label}}
{{/each}}
</div>