Merge branch 'simplify-core-values' into 'master'

Extract and simplify core values in actor template

See merge request dungeonslayers/ds4!21

src/ds4.scss

@@ -18,4 +18,6 @@
     @import "scss/components/items";
     @import "scss/components/description";
     @import "scss/components/character_values";
+    @import "scss/components/attributes_traits";
+    @import "scss/components/combat_values";
 }

src/module/config.ts

@@ -106,10 +106,10 @@ export const DS4 = {
      */
     traits: {
         strength: "DS4.TraitStrength",
-        constitution: "DS4.TraitConstitution",
         agility: "DS4.TraitAgility",
-        dexterity: "DS4.TraitDexterity",
         intellect: "DS4.TraitIntellect",
+        constitution: "DS4.TraitConstitution",
+        dexterity: "DS4.TraitDexterity",
         aura: "DS4.TraitAura",
     },
 

src/module/ds4.ts

@@ -37,6 +37,8 @@ async function registerHandlebarsPartials() {
         "systems/ds4/templates/item/partials/effects.hbs",
         "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);
 }
@@ -67,7 +69,7 @@ Hooks.once("setup", function () {
     ];
 
     // Exclude some from sorting where the default order matters
-    const noSort = [];
+    const noSort = ["attributes", "traits", "combatValues"];
 
     // Localize and sort CONFIG objects
     for (const o of toLocalize) {

src/scss/components/_attributes_traits.scss

@@ -0,0 +1,46 @@
+.attributes-traits {
+    margin-top: $margin-sm;
+    .attribute {
+        .attribute-label {
+            font-family: $font-heading;
+            font-size: 2em;
+            text-align: center;
+        }
+        .attribute-value {
+            border: 2px groove $c-border-groove;
+            line-height: $default-input-height;
+            font-size: 1.5em;
+            text-align: center;
+            padding-left: 2px;
+            padding-right: 2px;
+            gap: 0;
+            input,
+            .attribute-value-total {
+                grid-column: span 2;
+            }
+        }
+    }
+    .trait {
+        .trait-label {
+            color: transparent;
+            font-family: $font-heading;
+            font-size: 2em;
+            text-align: center;
+            //text-shadow: -1px 1px 0 $c-black, 1px 1px 0 $c-black, 1px -1px 0 $c-black, -1px -1px 0 $c-black;
+            -webkit-text-stroke: 1px $c-black;
+        }
+        .trait-value {
+            border: 2px groove $c-border-groove;
+            font-size: 1.5em;
+            line-height: $default-input-height;
+            text-align: center;
+            padding-left: 2px;
+            padding-right: 2px;
+            gap: 0;
+            input,
+            .trait-value-total {
+                grid-column: span 2;
+            }
+        }
+    }
+}

src/scss/components/_character_values.scss

@@ -1,99 +1,5 @@
 header.sheet-header {
     .character-values {
         flex: 0 0 100%;
-        .attributes-traits {
-            margin-top: $margin-sm;
-            .attribute {
-                .attribute-label {
-                    font-family: $font-heading;
-                    font-size: 2em;
-                    text-align: center;
-                }
-                .attribute-value {
-                    border: 2px groove $c-border-groove;
-                    line-height: 26px;
-                    font-size: 1.5em;
-                    text-align: center;
-                    padding-left: 2px;
-                    padding-right: 2px;
-                    gap: 0;
-                    input,
-                    .attribute-value-total {
-                        grid-column: span 2;
-                    }
-                }
-            }
-            .trait {
-                .trait-label {
-                    color: transparent;
-                    font-family: $font-heading;
-                    font-size: 2em;
-                    text-align: center;
-                    //text-shadow: -1px 1px 0 $c-black, 1px 1px 0 $c-black, 1px -1px 0 $c-black, -1px -1px 0 $c-black;
-                    -webkit-text-stroke: 1px $c-black;
-                }
-                .trait-value {
-                    border: 2px groove $c-border-groove;
-                    font-size: 1.5em;
-                    line-height: 26px;
-                    text-align: center;
-                    padding-left: 2px;
-                    padding-right: 2px;
-                    gap: 0;
-                    input,
-                    .trait-value-total {
-                        grid-column: span 2;
-                    }
-                }
-            }
-        }
-        .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/scss/components/_description.scss

@@ -13,7 +13,7 @@
         justify-content: left;
 
         label {
-            line-height: 26px;
+            line-height: $default-input-height;
             font-weight: bold;
         }
 

src/scss/utils/_variables.scss

@@ -5,4 +5,6 @@ $margin-sm: $padding-sm;
 $margin-md: $padding-md;
 $margin-lg: $padding-lg;
 
+$default-input-height: 26px;
+
 $official-assets-path: "assets/official";

src/templates/actor/actor-sheet.hbs

@@ -81,154 +81,10 @@
                     </div>
                 </div>
             </div>
-            <div class="attributes-traits grid grid-3col">
+
-                <div class="attribute flexrow"><label for="data.attributes.body.total"
+            {{> systems/ds4/templates/actor/partials/attributes-traits.hbs}}
-                        class="attribute-label ">{{config.attributes.body}}</label>
+            {{> systems/ds4/templates/actor/partials/combat-values.hbs}}
-                    <div class="attribute-value flex15 grid grid-8col"><input type="number"
+
-                            name="data.attributes.body.base" value='{{data.attributes.body.base}}'
-                            data-dtype="Number" /><span> +
-                        </span><input type="number" name="data.attributes.body.mod" value='{{data.attributes.body.mod}}'
-                            data-dtype="Number" /><span> =
-                        </span><span class="attribute-value-total">{{data.attributes.body.total}}</span></div>
-                </div>
-                <div class="attribute flexrow"><label for="data.attributes.mobility.total"
-                        class="attribute-label">{{config.attributes.mobility}}</label>
-                    <div class="attribute-value flex15 grid grid-8col"><input type="number"
-                            name="data.attributes.mobility.base" value='{{data.attributes.mobility.base}}'
-                            data-dtype="Number" /><span> +
-                        </span><input type="number" name="data.attributes.mobility.mod"
-                            value='{{data.attributes.mobility.mod}}' data-dtype="Number" /><span> =
-                        </span><span class="attribute-value-total">{{data.attributes.mobility.total}}</span></div>
-                </div>
-                <div class="attribute flexrow"><label for="data.attributes.mind.total"
-                        class="attribute-label">{{config.attributes.mind}}</label>
-                    <div class="attribute-value flex15 grid grid-8col"><input type="number"
-                            name="data.attributes.mind.base" value='{{data.attributes.mind.base}}'
-                            data-dtype="Number" /><span> +
-                        </span><input type="number" name="data.attributes.mind.mod" value='{{data.attributes.mind.mod}}'
-                            data-dtype="Number" /><span> =
-                        </span><span class="attribute-value-total">{{data.attributes.mind.total}}</span></div>
-                </div>
-                <div class="trait flexrow"><label for="data.traits.strength.total"
-                        class="trait-label">{{config.traits.strength}}</label>
-                    <div class="trait-value flex15 grid grid-8col"><input type="number" name="data.traits.strength.base"
-                            value='{{data.traits.strength.base}}' data-dtype="Number" /><span> +
-                        </span><input type="number" name="data.traits.strength.mod" value='{{data.traits.strength.mod}}'
-                            data-dtype="Number" /><span> =
-                        </span><span class="trait-value-total">{{data.traits.strength.total}}</span></div>
-                </div>
-                <div class="trait flexrow"><label for="data.traits.agility.total"
-                        class="trait-label">{{config.traits.agility}}</label>
-                    <div class="trait-value flex15 grid grid-8col"><input type="number" name="data.traits.agility.base"
-                            value='{{data.traits.agility.base}}' data-dtype="Number" /><span> +
-                        </span><input type="number" name="data.traits.agility.mod" value='{{data.traits.agility.mod}}'
-                            data-dtype="Number" /><span> =
-                        </span><span class="trait-value-total">{{data.traits.agility.total}}</span></div>
-                </div>
-                <div class="trait flexrow"><label for="data.traits.intellect.total"
-                        class="trait-label">{{config.traits.intellect}}</label>
-                    <div class="trait-value flex15 grid grid-8col"><input type="number"
-                            name="data.traits.intellect.base" value='{{data.traits.intellect.base}}'
-                            data-dtype="Number" /><span> +
-                        </span><input type="number" name="data.traits.intellect.mod"
-                            value='{{data.traits.intellect.mod}}' data-dtype="Number" /><span> =
-                        </span><span class="trait-value-total">{{data.traits.intellect.total}}</span></div>
-                </div>
-                <div class="trait flexrow"><label for="data.traits.constitution.total"
-                        class="trait-label">{{config.traits.constitution}}</label>
-                    <div class="trait-value flex15 grid grid-8col"><input type="number"
-                            name="data.traits.constitution.base" value='{{data.traits.constitution.base}}'
-                            data-dtype="Number" /><span> +
-                        </span><input type="number" name="data.traits.constitution.mod"
-                            value='{{data.traits.constitution.mod}}' data-dtype="Number" /><span> =
-                        </span><span class="trait-value-total">{{data.traits.constitution.total}}</span></div>
-                </div>
-                <div class="trait flexrow"><label for="data.traits.dexterity.total"
-                        class="trait-label">{{config.traits.dexterity}}</label>
-                    <div class="trait-value flex15 grid grid-8col"><input type="number"
-                            name="data.traits.dexterity.base" value='{{data.traits.dexterity.base}}'
-                            data-dtype="Number" /><span> +
-                        </span><input type="number" name="data.traits.dexterity.mod"
-                            value='{{data.traits.dexterity.mod}}' data-dtype="Number" /><span> =
-                        </span><span class="trait-value-total">{{data.traits.dexterity.total}}</span></div>
-                </div>
-                <div class="trait flexrow"><label for="data.traits.aura.total"
-                        class="trait-label">{{config.traits.aura}}</label>
-                    <div class="trait-value flex15 grid grid-8col"><input type="number" name="data.traits.aura.base"
-                            value='{{data.traits.aura.base}}' data-dtype="Number" /><span> +
-                        </span><input type="number" name="data.traits.aura.mod" value='{{data.traits.aura.mod}}'
-                            data-dtype="Number" /><span> =
-                        </span><span class="trait-value-total">{{data.traits.aura.total}}</span></div>
-                </div>
-            </div>
-            <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/attributes-traits.hbs

@@ -0,0 +1,52 @@
+{{!-- ======================================================================== --}}
+{{!-- INLINE PARTIAL DEFINITIONS --}}
+{{!-- ======================================================================== --}}
+
+{{!--
+!-- Render an attribute.
+!--
+!-- @param attribute-label: The label to display for the attribute
+!-- @param attribute-key: The key of the attribute
+!-- @param attribute-data: The data for the attribute
+--}}
+
+{{#*inline "attribute"}}
+<div class="attribute flexrow"><label for="data.attributes.body.total"
+        class="attribute-label ">{{attribute-label}}</label>
+    <div class="attribute-value flex15 grid grid-8col"><input type="number"
+            name="data.attributes.{{attribute-key}}.base" value='{{attribute-data.base}}' data-dtype="Number" /><span> +
+        </span><input type="number" name="data.attributes.{{attribute-key}}.mod" value='{{attribute-data.mod}}'
+            data-dtype="Number" /><span> =
+        </span><span class="attribute-value-total">{{attribute-data.total}}</span></div>
+</div>
+{{/inline}}
+
+{{!--
+!-- Render a trait.
+!--
+!-- @param trait-label: The label to display for the trait
+!-- @param trait-key: The key of the trait
+!-- @param trait-data: The data for the trait
+--}}
+
+{{#*inline "trait"}}
+<div class="trait flexrow"><label for="data.traits.strength.total" class="trait-label">{{trait-label}}</label>
+    <div class="trait-value flex15 grid grid-8col"><input type="number" name="data.traits.{{trait-key}}.base"
+            value='{{trait-data.base}}' data-dtype="Number" /><span> +
+        </span><input type="number" name="data.traits.{{trait-key}}.mod" value='{{trait-data.mod}}'
+            data-dtype="Number" /><span> =
+        </span><span class="trait-value-total">{{trait-data.total}}</span></div>
+</div>
+{{/inline}}
+
+{{!-- ======================================================================== --}}
+
+<div class="attributes-traits grid grid-3col">
+    {{#each config.attributes as |attribute-label attribute-key|}}
+    {{> attribute attribute-label=attribute-label attribute-key=attribute-key attribute-data=(lookup ../data.attributes
+    attribute-key)}}
+    {{/each}}
+    {{#each config.traits as |trait-label trait-key|}}
+    {{> trait trait-label=trait-label trait-key=trait-key trait-data=(lookup ../data.traits trait-key)}}
+    {{/each}}
+</div>

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>