diff --git a/src/module/handlebars/handlebars-partials.ts b/src/module/handlebars/handlebars-partials.ts
index c1588b9..e4ad0e9 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<void> {
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 0000000..81014b0
--- /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 a0bea35..ff1d94e 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 3fbc95a..6ede047 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 0000000..30b7dac
--- /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
+--}}
+
+<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>
diff --git a/src/templates/sheets/actor/components/combat-values.hbs b/src/templates/sheets/actor/components/combat-values.hbs
index e144bbd..f8c2e8f 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"}}
-<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>