Move core values and combat values to values tab and BEMify core values

src/lang/de.json

@@ -9,6 +9,7 @@
     "DS4.RollableImageRollableTitle": "Für {name} würfeln",
     "DS4.DiceOverlayImageAltText": "Bild eines W20",
     "DS4.NotOwned": "Nicht besessen",
+    "DS4.HeadingValues": "Werte",
     "DS4.HeadingBiography": "Biografie",
     "DS4.HeadingDetails": "Details",
     "DS4.HeadingEffects": "Effekte",

src/lang/en.json

@@ -9,6 +9,7 @@
     "DS4.RollableImageRollableTitle": "Roll for {name}",
     "DS4.DiceOverlayImageAltText": "Image of a d20",
     "DS4.NotOwned": "No owner",
+    "DS4.HeadingValues": "Values",
     "DS4.HeadingBiography": "Biography",
     "DS4.HeadingDetails": "Details",
     "DS4.HeadingEffects": "Effects",

src/module/actor/sheets/actor-sheet.ts

@@ -14,10 +14,11 @@ export class DS4ActorSheet extends ActorSheet<ActorSheet.Data<DS4Actor>> {
     static get defaultOptions(): BaseEntitySheet.Options {
         const superDefaultOptions = super.defaultOptions;
         return mergeObject(superDefaultOptions, {
+            ...superDefaultOptions,
             classes: ["ds4", "sheet", "actor"],
-            width: 650,
             height: 600,
             scrollY: [
+                ".values",
                 ".inventory",
                 ".spells",
                 ".talents-abilities",
@@ -25,23 +26,8 @@ export class DS4ActorSheet extends ActorSheet<ActorSheet.Data<DS4Actor>> {
                 ".biography",
                 ".special-creature-abilities",
             ],
-            template: superDefaultOptions.template,
+            tabs: [{ navSelector: ".sheet-tabs", contentSelector: ".sheet-body", initial: "values" }],
-            viewPermission: superDefaultOptions.viewPermission,
+            width: 650,
-            closeOnSubmit: superDefaultOptions.closeOnSubmit,
-            submitOnChange: superDefaultOptions.submitOnChange,
-            submitOnClose: superDefaultOptions.submitOnClose,
-            editable: superDefaultOptions.editable,
-            baseApplication: superDefaultOptions.baseApplication,
-            top: superDefaultOptions.top,
-            left: superDefaultOptions.left,
-            popOut: superDefaultOptions.popOut,
-            minimizable: superDefaultOptions.minimizable,
-            resizable: superDefaultOptions.resizable,
-            id: superDefaultOptions.id,
-            dragDrop: superDefaultOptions.dragDrop,
-            filters: superDefaultOptions.filters,
-            title: superDefaultOptions.title,
-            tabs: superDefaultOptions.tabs,
         });
     }
 

src/module/actor/sheets/character-sheet.ts

@@ -8,27 +8,8 @@ export class DS4CharacterActorSheet extends DS4ActorSheet {
     static get defaultOptions(): BaseEntitySheet.Options {
         const superDefaultOptions = super.defaultOptions;
         return mergeObject(superDefaultOptions, {
+            ...superDefaultOptions,
             classes: ["ds4", "sheet", "actor", "character"],
-            tabs: [{ navSelector: ".sheet-tabs", contentSelector: ".sheet-body", initial: "inventory" }],
-            template: superDefaultOptions.template,
-            viewPermission: superDefaultOptions.viewPermission,
-            closeOnSubmit: superDefaultOptions.closeOnSubmit,
-            submitOnChange: superDefaultOptions.submitOnChange,
-            submitOnClose: superDefaultOptions.submitOnClose,
-            editable: superDefaultOptions.editable,
-            baseApplication: superDefaultOptions.baseApplication,
-            top: superDefaultOptions.top,
-            left: superDefaultOptions.left,
-            popOut: superDefaultOptions.popOut,
-            minimizable: superDefaultOptions.minimizable,
-            resizable: superDefaultOptions.resizable,
-            id: superDefaultOptions.id,
-            dragDrop: superDefaultOptions.dragDrop,
-            filters: superDefaultOptions.filters,
-            title: superDefaultOptions.title,
-            width: superDefaultOptions.width,
-            height: superDefaultOptions.height,
-            scrollY: superDefaultOptions.scrollY,
         });
     }
 }

src/module/actor/sheets/creature-sheet.ts

@@ -8,27 +8,8 @@ export class DS4CreatureActorSheet extends DS4ActorSheet {
     static get defaultOptions(): BaseEntitySheet.Options {
         const superDefaultOptions = super.defaultOptions;
         return mergeObject(superDefaultOptions, {
+            ...superDefaultOptions,
             classes: ["ds4", "sheet", "actor", "creature"],
-            tabs: [{ navSelector: ".sheet-tabs", contentSelector: ".sheet-body", initial: "inventory" }],
-            template: superDefaultOptions.template,
-            viewPermission: superDefaultOptions.viewPermission,
-            closeOnSubmit: superDefaultOptions.closeOnSubmit,
-            submitOnChange: superDefaultOptions.submitOnChange,
-            submitOnClose: superDefaultOptions.submitOnClose,
-            editable: superDefaultOptions.editable,
-            baseApplication: superDefaultOptions.baseApplication,
-            top: superDefaultOptions.top,
-            left: superDefaultOptions.left,
-            popOut: superDefaultOptions.popOut,
-            minimizable: superDefaultOptions.minimizable,
-            resizable: superDefaultOptions.resizable,
-            id: superDefaultOptions.id,
-            dragDrop: superDefaultOptions.dragDrop,
-            filters: superDefaultOptions.filters,
-            title: superDefaultOptions.title,
-            width: superDefaultOptions.width,
-            height: superDefaultOptions.height,
-            scrollY: superDefaultOptions.scrollY,
         });
     }
 }

src/module/handlebars/handlebars-partials.ts

@@ -10,9 +10,10 @@ export default async function registerHandlebarsPartials(): Promise<void> {
         "systems/ds4/templates/actor/partials/spells-overview.hbs",
         "systems/ds4/templates/actor/partials/overview-add-button.hbs",
         "systems/ds4/templates/actor/partials/overview-control-buttons.hbs",
-        "systems/ds4/templates/actor/partials/attributes-traits.hbs",
+        "systems/ds4/templates/actor/partials/core-values.hbs",
         "systems/ds4/templates/actor/partials/combat-values.hbs",
         "systems/ds4/templates/actor/partials/profile.hbs",
+        "systems/ds4/templates/actor/partials/values-tab.hbs",
         "systems/ds4/templates/actor/partials/character-progression.hbs",
         "systems/ds4/templates/actor/partials/special-creature-abilities-overview.hbs",
         "systems/ds4/templates/actor/partials/character-inventory.hbs",
@@ -22,6 +23,7 @@ export default async function registerHandlebarsPartials(): Promise<void> {
         "systems/ds4/templates/actor/partials/item-list-entry.hbs",
         "systems/ds4/templates/actor/partials/currency.hbs",
         "systems/ds4/templates/common/partials/rollable-image.hbs",
+        "systems/ds4/templates/actor/partials/core-value.hbs",
     ];
     await loadTemplates(templatePaths);
 }

src/scss/components/_attributes_traits.scss

@@ -1,56 +0,0 @@
-@use "../utils/colors";
-@use "../utils/typography";
-@use "../utils/variables";
-
-.attributes-traits {
-    margin-top: variables.$margin-sm;
-    .attribute {
-        .attribute-label {
-            @include typography.font-heading-upper;
-            font-size: 2em;
-            text-align: center;
-        }
-        .attribute-value {
-            border: variables.$border-groove;
-            font-size: 1.5em;
-            text-align: center;
-            padding-left: 2px;
-            padding-right: 2px;
-            gap: 0;
-            input,
-            .attribute-value-total {
-                grid-column: span 2;
-                line-height: variables.$default-input-height;
-            }
-            .attribute-value-arrow {
-                padding: 0 5px;
-            }
-        }
-    }
-    .trait {
-        .trait-label {
-            color: transparent;
-            @include typography.font-heading-upper;
-            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 colors.$c-black;
-        }
-        .trait-value {
-            border: variables.$border-groove;
-            font-size: 1.5em;
-            text-align: center;
-            padding-left: 2px;
-            padding-right: 2px;
-            gap: 0;
-            input,
-            .trait-value-total {
-                grid-column: span 2;
-                line-height: variables.$default-input-height;
-            }
-            .trait-value-arrow {
-                padding: 0 5px;
-            }
-        }
-    }
-}

src/scss/components/_core_value.scss

@@ -0,0 +1,36 @@
+@use "../utils/colors";
+@use "../utils/typography";
+@use "../utils/variables";
+
+.ds4-core-value {
+    align-items: center;
+    display: flex;
+
+    &__label {
+        @include typography.font-heading-upper;
+        flex: 1;
+        font-size: 2em;
+        text-align: center;
+    }
+
+    &__value {
+        align-items: center;
+        display: flex;
+        flex: 1.1;
+        font-size: 1.2em;
+        gap: 0.15em;
+        text-align: center;
+    }
+
+    &__value-input,
+    &__value-total {
+        flex: 1 1 4em;
+    }
+
+    &--trait {
+        .ds4-core-value__label {
+            -webkit-text-stroke: 1px colors.$c-black;
+            color: transparent;
+        }
+    }
+}

src/scss/components/_core_values.scss

@@ -0,0 +1,10 @@
+@use "../utils/colors";
+@use "../utils/typography";
+@use "../utils/variables";
+
+.ds4-core-values {
+    column-gap: 0.5em;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    row-gap: 0.5em;
+}

src/scss/ds4.scss

@@ -11,7 +11,8 @@
 
 /* Styles limited to ds4 sheets */
 .ds4 {
-    @include meta.load-css("components/attributes_traits");
+    @include meta.load-css("components/core_values");
+    @include meta.load-css("components/core_value");
     @include meta.load-css("components/apps");
     @include meta.load-css("components/basic_property");
     @include meta.load-css("components/character_progression");

src/templates/actor/character-sheet.hbs

@@ -2,7 +2,7 @@
     {{!-- Sheet Header --}}
     <header class="sheet-header">
         <img class="profile-img" src="{{actor.img}}" data-edit="img" alt="Actor Icon" title="{{actor.name}}"
-             height="100" width="100" />
+            height="100" width="100" />
         <div class="header-fields flexrow">
             <h1 class="charname">
                 <label for="actor.name" class="hidden">Name</label>
@@ -15,68 +15,62 @@
                     <label class="basic-property-label"
                         for="data.baseInfo.race">{{config.i18n.characterBaseInfo.race}}</label>
                     <input type="text" name="data.baseInfo.race" id="data.baseInfo.race" value="{{data.baseInfo.race}}"
-                           data-dtype="String" />
+                        data-dtype="String" />
                 </div>
                 <div class="basic-property">
                     <label class="basic-property-label"
                         for="data.baseInfo.culture">{{config.i18n.characterBaseInfo.culture}}</label>
                     <input id="data.baseInfo.culture" type="text" name="data.baseInfo.culture"
-                           value="{{data.baseInfo.culture}}"
+                        value="{{data.baseInfo.culture}}" data-dtype="String" />
-                           data-dtype="String" />
                 </div>
                 <div class="basic-property flex125">
                     <label class="basic-property-label"
-                           for="data.progression.progressPoints.used">{{config.i18n.characterProgression.progressPoints}}</label>
+                        for="data.progression.progressPoints.used">{{config.i18n.characterProgression.progressPoints}}</label>
                     <div class="flexrow">
                         <input id="data.progression.progressPoints.used" type="number"
-                               name="data.progression.progressPoints.used"
+                            name="data.progression.progressPoints.used" value="{{data.progression.progressPoints.used}}"
-                               value="{{data.progression.progressPoints.used}}" data-dtype="Number" />
+                            data-dtype="Number" />
                         <span class="input-divider"> / </span>
                         <label class="hidden" for="data.progression.progressPoints.total">Total
                             Progression Points</label>
-                        <input type="number"
+                        <input type="number" id="data.progression.progressPoints.total"
-                               id="data.progression.progressPoints.total"
+                            name="data.progression.progressPoints.total"
-                               name="data.progression.progressPoints.total"
+                            value="{{data.progression.progressPoints.total}}" data-dtype="Number" />
-                               value="{{data.progression.progressPoints.total}}"
-                               data-dtype="Number" />
                     </div>
                 </div>
                 <div class="basic-property flex125">
                     <label class="basic-property-label"
-                           for="data.progression.talentPoints.used">{{config.i18n.characterProgression.talentPoints}}</label>
+                        for="data.progression.talentPoints.used">{{config.i18n.characterProgression.talentPoints}}</label>
                     <div class="flexrow">
                         <input type="number" name="data.progression.talentPoints.used"
-                               id="data.progression.talentPoints.used"
+                            id="data.progression.talentPoints.used" value="{{data.progression.talentPoints.used}}"
-                               value="{{data.progression.talentPoints.used}}" data-dtype="Number" />
+                            data-dtype="Number" />
                         <span class="input-divider"> / </span>
                         <label for="data.progression.talentPoints.total" class="hidden">Total Talent Points</label>
-                        <input type="number" name="data.progression.talentPoints.total" id="data.progression.talentPoints.total"
+                        <input type="number" name="data.progression.talentPoints.total"
-                               value="{{data.progression.talentPoints.total}}" data-dtype="Number" />
+                            id="data.progression.talentPoints.total" value="{{data.progression.talentPoints.total}}"
+                            data-dtype="Number" />
                     </div>
                 </div>
                 <div class="basic-property">
                     <label class="basic-property-label"
                         for="data.baseInfo.class">{{config.i18n.characterBaseInfo.class}}</label>
                     <input type="text" id="data.baseInfo.class" name="data.baseInfo.class"
-                           value="{{data.baseInfo.class}}" data-dtype="String" />
+                        value="{{data.baseInfo.class}}" data-dtype="String" />
                 </div>
                 <div class="basic-property">
                     <label class="basic-property-label"
-                           for="data.baseInfo.heroClass">{{config.i18n.characterBaseInfo.heroClass}}</label>
+                        for="data.baseInfo.heroClass">{{config.i18n.characterBaseInfo.heroClass}}</label>
                     <input type="text" id="data.baseInfo.heroClass" name="data.baseInfo.heroClass"
-                           value="{{data.baseInfo.heroClass}}"
+                        value="{{data.baseInfo.heroClass}}" data-dtype="String" />
-                           data-dtype="String" />
                 </div>
             </div>
         </div>
-        <div class="character-values">
-            {{> systems/ds4/templates/actor/partials/attributes-traits.hbs}}
-            {{> systems/ds4/templates/actor/partials/combat-values.hbs}}
-        </div>
     </header>
 
     {{!-- Sheet Tab Navigation --}}
     <nav class="sheet-tabs tabs" data-group="primary">
+        <a class="item" data-tab="values">{{localize 'DS4.HeadingValues'}}</a>
         <a class="item" data-tab="inventory">{{localize 'DS4.HeadingInventory'}}</a>
         <a class="item" data-tab="spells">{{localize 'DS4.HeadingSpells'}}</a>
         <a class="item" data-tab="talents-abilities">{{localize 'DS4.HeadingTalentsAbilities'}}</a>
@@ -88,7 +82,10 @@
     <!-- prettier-ignore-start -->
 {{!-- Sheet Body (remove indentation to avoid annoying Handlebars auto-indent) --}}
 <section class="sheet-body">
-{{!-- Items Tab --}}
+{{!-- Values Tab --}}
+{{> systems/ds4/templates/actor/partials/values-tab.hbs}}
+
+{{!-- Inventory Tab --}}
 {{> systems/ds4/templates/actor/partials/character-inventory.hbs}}
 
 {{!-- Spells Tab --}}

src/templates/actor/creature-sheet.hbs

@@ -49,14 +49,11 @@
                 </div>
             </div>
         </div>
-        <div class="character-values">
-            {{> systems/ds4/templates/actor/partials/attributes-traits.hbs}}
-            {{> systems/ds4/templates/actor/partials/combat-values.hbs}}
-        </div>
     </header>
 
     {{!-- Sheet Tab Navigation --}}
     <nav class="sheet-tabs tabs" data-group="primary">
+        <a class="item" data-tab="values">{{localize 'DS4.HeadingValues'}}</a>
         <a class="item" data-tab="inventory">{{localize 'DS4.HeadingInventory'}}</a>
         <a class="item" data-tab="special-creature-abilities">{{localize 'DS4.HeadingSpecialCreatureAbilities'}}</a>
         <a class="item" data-tab="spells">{{localize 'DS4.HeadingSpells'}}</a>
@@ -65,7 +62,10 @@
 
     {{!-- Sheet Body --}}
     <section class="sheet-body">
-        {{!-- Items Tab --}}
+        {{!-- Values Tab --}}
+        {{> systems/ds4/templates/actor/partials/values-tab.hbs}}
+
+        {{!-- Inventory Tab --}}
         {{> systems/ds4/templates/actor/partials/creature-inventory.hbs}}
 
         {{!-- Special Creature Abilities Tab --}}

src/templates/actor/partials/attributes-traits.hbs

@@ -1,56 +0,0 @@
-{{!-- ======================================================================== --}}
-{{!-- 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"
-            title="{{attribute-label}} {{localize 'DS4.TooltipBaseValue'}}" /><span> +
-        </span><input type="number" name="data.attributes.{{attribute-key}}.mod" value='{{attribute-data.mod}}'
-            data-dtype="Number" title="{{attribute-label}} {{localize 'DS4.TooltipModifier'}}" /><span
-            class="attribute-value-arrow">➞</span><span class="attribute-value-total"
-            title="{{attribute-label}}: {{attribute-data.tooltip}}">{{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"
-            title="{{trait-label}} {{localize 'DS4.TooltipBaseValue'}}" /><span> +
-        </span><input type="number" name="data.traits.{{trait-key}}.mod" value='{{trait-data.mod}}' data-dtype="Number"
-            title="{{trait-label}} {{localize 'DS4.TooltipModifier'}}" /><span class=" trait-value-arrow">➞</span><span
-            class="trait-value-total" title="{{trait-label}}: {{trait-data.tooltip}}">{{trait-data.total}}</span></div>
-</div>
-{{/inline}}
-
-{{!-- ======================================================================== --}}
-
-<div class="attributes-traits grid grid-3col">
-    {{#each config.i18n.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.i18n.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/core-value.hbs

@@ -0,0 +1,27 @@
+{{!--
+!-- Render a core value.
+!--
+!-- @param core-value-label: The label to display for the core value
+!-- @param core-value-key: The key of the core value
+!-- @param core-value-data: The data for the core value
+!-- @param core-value-variant: The variant of the core value, i.e. attribute or trait
+--}}
+
+<div class="ds4-core-value ds4-core-value--{{core-value-variant}}">
+    <label for="data.{{core-value-variant}}s.{{core-value-key}}.base"
+        class="ds4-core-value__label">{{core-value-label}}</label>
+    <div class="ds4-core-value__value">
+        <input class="ds4-core-value__value-input" type="number"
+            name="data.{{core-value-variant}}s.{{core-value-key}}.base"
+            id="data.{{core-value-variant}}s.{{core-value-key}}.base" value='{{core-value-data.base}}'
+            data-dtype="Number" title="{{core-value-label}} {{localize 'DS4.TooltipBaseValue'}}" />
+        <span>+</span>
+        <input class="ds4-core-value__value-input" type="number"
+            name="data.{{core-value-variant}}s.{{core-value-key}}.mod"
+            id="data.{{core-value-variant}}s.{{core-value-key}}.mod" value='{{core-value-data.mod}}' data-dtype="Number"
+            title="{{core-value-label}} {{localize 'DS4.TooltipModifier'}}" />
+        <span class="ds4-core-value__value-arrow">➞</span>
+        <span class="ds4-core-value__value-total"
+            title="{{core-value-label}}: {{core-value-data.tooltip}}">{{core-value-data.total}}</span>
+    </div>
+</div>

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

@@ -0,0 +1,11 @@
+<div class="ds4-core-values">
+    {{#each config.i18n.attributes as |attribute-label attribute-key|}}
+    {{> systems/ds4/templates/actor/partials/core-value.hbs core-value-label=attribute-label
+    core-value-key=attribute-key core-value-data=(lookup ../data.attributes
+    attribute-key) core-value-variant="attribute"}}
+    {{/each}}
+    {{#each config.i18n.traits as |trait-label trait-key|}}
+    {{> systems/ds4/templates/actor/partials/core-value.hbs core-value-label=trait-label core-value-key=trait-key
+    core-value-data=(lookup ../data.traits trait-key) core-value-variant="trait"}}
+    {{/each}}
+</div>

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

@@ -0,0 +1,4 @@
+<div class="tab values" data-group="primary" data-tab="values">
+    {{> systems/ds4/templates/actor/partials/core-values.hbs}}
+    {{> systems/ds4/templates/actor/partials/combat-values.hbs}}
+</div>