From 04174398bbc014a02493dcb3f6991660ee2ef703 Mon Sep 17 00:00:00 2001 From: Johannes Loher Date: Tue, 13 Apr 2021 22:48:37 +0200 Subject: [PATCH] Use BEM for combat values --- src/module/handlebars/handlebars-partials.ts | 1 + src/scss/components/_combat_value.scss | 61 +++++++++++++++++++ src/scss/components/_combat_values.scss | 52 +--------------- src/scss/ds4.scss | 1 + .../sheets/actor/components/combat-value.hbs | 22 +++++++ .../sheets/actor/components/combat-values.hbs | 33 +--------- 6 files changed, 91 insertions(+), 79 deletions(-) create mode 100644 src/scss/components/_combat_value.scss create mode 100644 src/templates/sheets/actor/components/combat-value.hbs diff --git a/src/module/handlebars/handlebars-partials.ts b/src/module/handlebars/handlebars-partials.ts index c1588b92..e4ad0e9d 100644 --- a/src/module/handlebars/handlebars-partials.ts +++ b/src/module/handlebars/handlebars-partials.ts @@ -1,6 +1,7 @@ export default async function registerHandlebarsPartials(): Promise { const templatePaths = [ "systems/ds4/templates/sheets/actor/components/character-progression.hbs", + "systems/ds4/templates/sheets/actor/components/combat-value.hbs", "systems/ds4/templates/sheets/actor/components/combat-values.hbs", "systems/ds4/templates/sheets/actor/components/core-value.hbs", "systems/ds4/templates/sheets/actor/components/core-values.hbs", diff --git a/src/scss/components/_combat_value.scss b/src/scss/components/_combat_value.scss new file mode 100644 index 00000000..81014b0e --- /dev/null +++ b/src/scss/components/_combat_value.scss @@ -0,0 +1,61 @@ +@use "../utils/mixins"; +@use "../utils/variables"; + +.ds4-combat-value { + $size: 3.75rem; + + display: grid; + place-items: center; + row-gap: 0.5em; + + &__value { + $combat-values-icons-path: "#{variables.$official-icons-path}/combat-values"; + @include mixins.centered-content; + + background-position: center; + background-repeat: no-repeat; + background-size: contain; + font-size: 1.5em; + height: $size; + width: $size; + + &--hitPoints { + background-image: url("#{$combat-values-icons-path}/hit-points.png"); + } + &--defense { + background-image: url("#{$combat-values-icons-path}/defense.png"); + } + &--initiative { + background-image: url("#{$combat-values-icons-path}/initiative.png"); + } + &--movement { + background-image: url("#{$combat-values-icons-path}/movement-rate.png"); + } + &--meleeAttack { + background-image: url("#{$combat-values-icons-path}/melee-attack.png"); + } + &--rangedAttack { + background-image: url("#{$combat-values-icons-path}/ranged-attack.png"); + } + &--spellcasting { + background-image: url("#{$combat-values-icons-path}/spellcasting.png"); + } + &--targetedSpellcasting { + background-image: url("#{$combat-values-icons-path}/targeted-spellcasting.png"); + } + } + + &__formula { + align-items: center; + justify-content: space-between; + display: flex; + gap: 0.15em; + text-align: center; + width: $size; + } + + &__formula-base, + &__formula-modifier { + flex: 1 1 4em; + } +} diff --git a/src/scss/components/_combat_values.scss b/src/scss/components/_combat_values.scss index a0bea351..ff1d94e9 100644 --- a/src/scss/components/_combat_values.scss +++ b/src/scss/components/_combat_values.scss @@ -1,53 +1,7 @@ -@use "../utils/mixins"; @use "../utils/variables"; -.combat-values { +.ds4-combat-values { + display: flex; margin-top: variables.$margin-sm; - .combat-value-with-formula { - $size: 60px; - display: grid; - place-items: center; - row-gap: variables.$margin-sm; - .combat-value { - $combat-values-icons-path: "#{variables.$official-icons-path}/combat-values"; - @include mixins.centered-content; - height: $size; - width: $size; - flex: 0 0 auto; - background-size: contain; - font-size: 1.5em; - &.hitPoints { - background-image: url("#{$combat-values-icons-path}/hit-points.png"); - } - &.defense { - background-image: url("#{$combat-values-icons-path}/defense.png"); - } - &.initiative { - background-image: url("#{$combat-values-icons-path}/initiative.png"); - } - &.movement { - background-image: url("#{$combat-values-icons-path}/movement-rate.png"); - } - &.meleeAttack { - background-image: url("#{$combat-values-icons-path}/melee-attack.png"); - } - &.rangedAttack { - background-image: url("#{$combat-values-icons-path}/ranged-attack.png"); - } - &.spellcasting { - background-image: url("#{$combat-values-icons-path}/spellcasting.png"); - } - &.targetedSpellcasting { - background-image: url("#{$combat-values-icons-path}/targeted-spellcasting.png"); - } - } - - .combat-value-formula { - width: $size; - text-align: center; - span { - line-height: variables.$default-input-height; - } - } - } + justify-content: space-between; } diff --git a/src/scss/ds4.scss b/src/scss/ds4.scss index 3fbc95a9..6ede0479 100644 --- a/src/scss/ds4.scss +++ b/src/scss/ds4.scss @@ -18,6 +18,7 @@ @include meta.load-css("components/character_progression"); @include meta.load-css("components/character_values"); @include meta.load-css("components/combat_values"); + @include meta.load-css("components/combat_value"); @include meta.load-css("components/description"); @include meta.load-css("components/forms"); @include meta.load-css("components/item_list"); diff --git a/src/templates/sheets/actor/components/combat-value.hbs b/src/templates/sheets/actor/components/combat-value.hbs new file mode 100644 index 00000000..30b7dac8 --- /dev/null +++ b/src/templates/sheets/actor/components/combat-value.hbs @@ -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 +--}} + +
+
+ {{combat-value-data.total}} +
+
+ {{combat-value-data.base}} + + + +
+
diff --git a/src/templates/sheets/actor/components/combat-values.hbs b/src/templates/sheets/actor/components/combat-values.hbs index e144bbd7..f8c2e8fb 100644 --- a/src/templates/sheets/actor/components/combat-values.hbs +++ b/src/templates/sheets/actor/components/combat-values.hbs @@ -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"}} -
-
{{combat-value-data.total}} -
-
{{combat-value-data.base}}+ -
-
-{{/inline}} - -{{!-- ======================================================================== --}} - -
+
{{#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}}