extract and simplify combat values to own component

src/ds4.scss

@@ -19,4 +19,5 @@
     @import "scss/components/description";
     @import "scss/components/character_values";
     @import "scss/components/attributes_traits";
+    @import "scss/components/combat_values";
 }

src/module/ds4.ts

@@ -38,6 +38,7 @@ async function registerHandlebarsPartials() {
         "systems/ds4/templates/item/partials/body.hbs",
         "systems/ds4/templates/actor/partials/items-overview.hbs",
         "systems/ds4/templates/actor/partials/attributes-traits.hbs",
+        "systems/ds4/templates/actor/partials/combat-values.hbs",
     ];
     return loadTemplates(templatePaths);
 }
@@ -68,7 +69,7 @@ Hooks.once("setup", function () {
     ];
 
     // Exclude some from sorting where the default order matters
-    const noSort = ["attributes", "traits"];
+    const noSort = ["attributes", "traits", "combatValues"];
 
     // Localize and sort CONFIG objects
     for (const o of toLocalize) {

src/scss/components/_character_values.scss

@@ -1,53 +1,5 @@
 header.sheet-header {
     .character-values {
         flex: 0 0 100%;
-        .combat-values {
-            margin-top: $margin-sm;
-            .combat-value-with-formula {
-                display: grid;
-                place-items: center;
-                $size: 60px;
-                row-gap: $margin-sm;
-                .combat-value {
-                    @include centered-content;
-                    height: $size;
-                    width: $size;
-                    flex: 0 0 auto;
-                    background-size: contain;
-                    font-size: 1.5em;
-                    &.hitPoints {
-                        background-image: url("#{$official-assets-path}/DS4-HP.png");
-                    }
-                    &.defense {
-                        background-image: url("#{$official-assets-path}/DS4-DEF.png");
-                    }
-                    &.initiative {
-                        background-image: url("#{$official-assets-path}/DS4-INI.png");
-                    }
-                    &.movement {
-                        background-image: url("#{$official-assets-path}/DS4-MR.png");
-                    }
-                    &.meleeAttack {
-                        background-image: url("#{$official-assets-path}/DS4-MAT.png");
-                    }
-                    &.rangedAttack {
-                        background-image: url("#{$official-assets-path}/DS4-RAT.png");
-                    }
-                    &.spellcasting {
-                        background-image: url("#{$official-assets-path}/DS4-SPC.png");
-                    }
-                    &.targetedSpellcasting {
-                        background-image: url("#{$official-assets-path}/DS4-TSC.png");
-                    }
-                }
-
-                .combat-value-formula {
-                    width: $size;
-                    input {
-                        text-align: center;
-                    }
-                }
-            }
-        }
     }
 }

src/scss/components/_combat_values.scss

@@ -0,0 +1,48 @@
+.combat-values {
+    margin-top: $margin-sm;
+    .combat-value-with-formula {
+        display: grid;
+        place-items: center;
+        $size: 60px;
+        row-gap: $margin-sm;
+        .combat-value {
+            @include centered-content;
+            height: $size;
+            width: $size;
+            flex: 0 0 auto;
+            background-size: contain;
+            font-size: 1.5em;
+            &.hitPoints {
+                background-image: url("#{$official-assets-path}/DS4-HP.png");
+            }
+            &.defense {
+                background-image: url("#{$official-assets-path}/DS4-DEF.png");
+            }
+            &.initiative {
+                background-image: url("#{$official-assets-path}/DS4-INI.png");
+            }
+            &.movement {
+                background-image: url("#{$official-assets-path}/DS4-MR.png");
+            }
+            &.meleeAttack {
+                background-image: url("#{$official-assets-path}/DS4-MAT.png");
+            }
+            &.rangedAttack {
+                background-image: url("#{$official-assets-path}/DS4-RAT.png");
+            }
+            &.spellcasting {
+                background-image: url("#{$official-assets-path}/DS4-SPC.png");
+            }
+            &.targetedSpellcasting {
+                background-image: url("#{$official-assets-path}/DS4-TSC.png");
+            }
+        }
+
+        .combat-value-formula {
+            width: $size;
+            input {
+                text-align: center;
+            }
+        }
+    }
+}

src/templates/actor/actor-sheet.hbs

@@ -83,75 +83,8 @@
             </div>
 
             {{> systems/ds4/templates/actor/partials/attributes-traits.hbs}}
+            {{> systems/ds4/templates/actor/partials/combat-values.hbs}}
 
-            <div class="combat-values flexrow flex-between">
-                <div class="combat-value-with-formula">
-                    <div class="combat-value hitPoints"><span
-                            class="combat-value-value-total">{{data.combatValues.hitPoints.total}}</span></div>
-                    <div class="combat-value-formula flexrow"><input type="number"
-                            name="data.combatValues.hitPoints.base" value='{{data.combatValues.hitPoints.base}}'
-                            data-dtype="Number" /><input type="number" name="data.combatValues.hitPoints.mod"
-                            value='{{data.combatValues.hitPoints.mod}}' data-dtype="Number" /></div>
-                </div>
-                <div class="combat-value-with-formula">
-                    <div class="combat-value defense"><span
-                            class="combat-value-value-total">{{data.combatValues.defense.total}}</span></div>
-                    <div class="combat-value-formula flexrow"><input type="number" name="data.combatValues.defense.base"
-                            value='{{data.combatValues.defense.base}}' data-dtype="Number" /><input type="number"
-                            name="data.combatValues.defense.mod" value='{{data.combatValues.defense.mod}}'
-                            data-dtype="Number" /></div>
-                </div>
-                <div class="combat-value-with-formula">
-                    <div class="combat-value initiative"><span
-                            class="combat-value-value-total">{{data.combatValues.initiative.total}}</span></div>
-                    <div class="combat-value-formula flexrow"><input type="number"
-                            name="data.combatValues.initiative.base" value='{{data.combatValues.initiative.base}}'
-                            data-dtype="Number" /><input type="number" name="data.combatValues.initiative.mod"
-                            value='{{data.combatValues.initiative.mod}}' data-dtype="Number" /></div>
-                </div>
-                <div class="combat-value-with-formula">
-                    <div class="combat-value movement"><span
-                            class="combat-value-value-total">{{data.combatValues.movement.total}}</span></div>
-                    <div class="combat-value-formula flexrow"><input type="number"
-                            name="data.combatValues.movement.base" value='{{data.combatValues.movement.base}}'
-                            data-dtype="Number" /><input type="number" name="data.combatValues.movement.mod"
-                            value='{{data.combatValues.movement.mod}}' data-dtype="Number" /></div>
-                </div>
-                <div class="combat-value-with-formula">
-                    <div class="combat-value meleeAttack"><span
-                            class="combat-value-value-total">{{data.combatValues.meleeAttack.total}}</span></div>
-                    <div class="combat-value-formula flexrow"><input type="number"
-                            name="data.combatValues.meleeAttack.base" value='{{data.combatValues.meleeAttack.base}}'
-                            data-dtype="Number" /><input type="number" name="data.combatValues.meleeAttack.mod"
-                            value='{{data.combatValues.meleeAttack.mod}}' data-dtype="Number" /></div>
-                </div>
-                <div class="combat-value-with-formula">
-                    <div class="combat-value rangedAttack"><span
-                            class="combat-value-value-total">{{data.combatValues.rangedAttack.total}}</span></div>
-                    <div class="combat-value-formula flexrow"><input type="number"
-                            name="data.combatValues.rangedAttack.base" value='{{data.combatValues.rangedAttack.base}}'
-                            data-dtype="Number" /><input type="number" name="data.combatValues.rangedAttack.mod"
-                            value='{{data.combatValues.rangedAttack.mod}}' data-dtype="Number" /></div>
-                </div>
-                <div class="combat-value-with-formula">
-                    <div class="combat-value spellcasting"><span
-                            class="combat-value-value-total">{{data.combatValues.spellcasting.total}}</span></div>
-                    <div class="combat-value-formula flexrow"><input type="number"
-                            name="data.combatValues.spellcasting.base" value='{{data.combatValues.spellcasting.base}}'
-                            data-dtype="Number" /><input type="number" name="data.combatValues.spellcasting.mod"
-                            value='{{data.combatValues.spellcasting.mod}}' data-dtype="Number" /></div>
-                </div>
-                <div class="combat-value-with-formula">
-                    <div class="combat-value targetedSpellcasting"><span
-                            class="combat-value-value-total">{{data.combatValues.targetedSpellcasting.total}}</span>
-                    </div>
-                    <div class="combat-value-formula flexrow"><input type="number"
-                            name="data.combatValues.targetedSpellcasting.base"
-                            value='{{data.combatValues.targetedSpellcasting.base}}' data-dtype="Number" /><input
-                            type="number" name="data.combatValues.targetedSpellcasting.mod"
-                            value='{{data.combatValues.targetedSpellcasting.mod}}' data-dtype="Number" /></div>
-                </div>
-            </div>
         </div>
     </header>
 

src/templates/actor/partials/combat-values.hbs

@@ -0,0 +1,30 @@
+{{!-- ======================================================================== --}}
+{{!-- 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
+--}}
+
+{{#*inline "combat-value"}}
+<div class="combat-value-with-formula">
+    <div class="combat-value {{combat-value-key}}"><span class="combat-value-total">{{combat-value-data.total}}</span>
+    </div>
+    <div class="combat-value-formula flexrow"><input type="number" name="data.combatValues.{{combat-value-key}}.base"
+            value='{{combat-value-data.base}}' data-dtype="Number" /><input type="number"
+            name="data.combatValues.{{combat-value-key}}.mod" value='{{combat-value-data.mod}}' data-dtype="Number" />
+    </div>
+</div>
+{{/inline}}
+
+{{!-- ======================================================================== --}}
+
+<div class="combat-values flexrow flex-between">
+    {{#each config.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)}}
+    {{/each}}
+</div>