From 6a12ba3938cffbbad8bacea25770ce113489ca52 Mon Sep 17 00:00:00 2001 From: Johannes Loher Date: Mon, 4 Jan 2021 00:55:44 +0100 Subject: [PATCH 1/3] extract and simplify attributes and traits --- src/ds4.scss | 1 + src/module/config.ts | 4 +- src/module/ds4.ts | 3 +- src/scss/components/_attributes_traits.scss | 46 ++++++++++ src/scss/components/_character_values.scss | 46 ---------- src/templates/actor/actor-sheet.hbs | 83 +------------------ .../actor/partials/attributes-traits.hbs | 52 ++++++++++++ 7 files changed, 106 insertions(+), 129 deletions(-) create mode 100644 src/scss/components/_attributes_traits.scss create mode 100644 src/templates/actor/partials/attributes-traits.hbs diff --git a/src/ds4.scss b/src/ds4.scss index b2e83661..5eae4571 100644 --- a/src/ds4.scss +++ b/src/ds4.scss @@ -18,4 +18,5 @@ @import "scss/components/items"; @import "scss/components/description"; @import "scss/components/character_values"; + @import "scss/components/attributes_traits"; } diff --git a/src/module/config.ts b/src/module/config.ts index cb5437b3..89d285cf 100644 --- a/src/module/config.ts +++ b/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", }, diff --git a/src/module/ds4.ts b/src/module/ds4.ts index 18e066a5..99227746 100644 --- a/src/module/ds4.ts +++ b/src/module/ds4.ts @@ -37,6 +37,7 @@ 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", ]; return loadTemplates(templatePaths); } @@ -67,7 +68,7 @@ Hooks.once("setup", function () { ]; // Exclude some from sorting where the default order matters - const noSort = []; + const noSort = ["attributes", "traits"]; // Localize and sort CONFIG objects for (const o of toLocalize) { diff --git a/src/scss/components/_attributes_traits.scss b/src/scss/components/_attributes_traits.scss new file mode 100644 index 00000000..88ae9425 --- /dev/null +++ b/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: 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; + } + } + } +} diff --git a/src/scss/components/_character_values.scss b/src/scss/components/_character_values.scss index 7b6ec7d6..b27e2252 100644 --- a/src/scss/components/_character_values.scss +++ b/src/scss/components/_character_values.scss @@ -1,52 +1,6 @@ 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 { diff --git a/src/templates/actor/actor-sheet.hbs b/src/templates/actor/actor-sheet.hbs index 4f0c21f5..f288880e 100644 --- a/src/templates/actor/actor-sheet.hbs +++ b/src/templates/actor/actor-sheet.hbs @@ -81,86 +81,9 @@ -
-
-
+ - = - {{data.attributes.body.total}}
-
-
-
+ - = - {{data.attributes.mobility.total}}
-
-
-
+ - = - {{data.attributes.mind.total}}
-
-
-
+ - = - {{data.traits.strength.total}}
-
-
-
+ - = - {{data.traits.agility.total}}
-
-
-
+ - = - {{data.traits.intellect.total}}
-
-
-
+ - = - {{data.traits.constitution.total}}
-
-
-
+ - = - {{data.traits.dexterity.total}}
-
-
-
+ - = - {{data.traits.aura.total}}
-
-
+ + {{> systems/ds4/templates/actor/partials/attributes-traits.hbs}} +
+
+ + = + {{attribute-data.total}}
+
+{{/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"}} +
+
+ + = + {{trait-data.total}}
+
+{{/inline}} + +{{!-- ======================================================================== --}} + +
+ {{#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}} +
From 7cb6080808deb89895fa7b4a370b6ff9ffbd9622 Mon Sep 17 00:00:00 2001 From: Johannes Loher Date: Mon, 4 Jan 2021 01:11:05 +0100 Subject: [PATCH 2/3] extract and simplify combat values to own component --- src/ds4.scss | 1 + src/module/ds4.ts | 3 +- src/scss/components/_character_values.scss | 48 ------------- src/scss/components/_combat_values.scss | 48 +++++++++++++ src/templates/actor/actor-sheet.hbs | 69 +------------------ .../actor/partials/combat-values.hbs | 30 ++++++++ 6 files changed, 82 insertions(+), 117 deletions(-) create mode 100644 src/scss/components/_combat_values.scss create mode 100644 src/templates/actor/partials/combat-values.hbs diff --git a/src/ds4.scss b/src/ds4.scss index 5eae4571..2fedca1f 100644 --- a/src/ds4.scss +++ b/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"; } diff --git a/src/module/ds4.ts b/src/module/ds4.ts index 99227746..358074b0 100644 --- a/src/module/ds4.ts +++ b/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) { diff --git a/src/scss/components/_character_values.scss b/src/scss/components/_character_values.scss index b27e2252..69ccc0ff 100644 --- a/src/scss/components/_character_values.scss +++ b/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; - } - } - } - } } } diff --git a/src/scss/components/_combat_values.scss b/src/scss/components/_combat_values.scss new file mode 100644 index 00000000..5b7ad3d2 --- /dev/null +++ b/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; + } + } + } +} diff --git a/src/templates/actor/actor-sheet.hbs b/src/templates/actor/actor-sheet.hbs index f288880e..475ce2fd 100644 --- a/src/templates/actor/actor-sheet.hbs +++ b/src/templates/actor/actor-sheet.hbs @@ -83,75 +83,8 @@
{{> systems/ds4/templates/actor/partials/attributes-traits.hbs}} + {{> systems/ds4/templates/actor/partials/combat-values.hbs}} -
-
-
{{data.combatValues.hitPoints.total}}
-
-
-
-
{{data.combatValues.defense.total}}
-
-
-
-
{{data.combatValues.initiative.total}}
-
-
-
-
{{data.combatValues.movement.total}}
-
-
-
-
{{data.combatValues.meleeAttack.total}}
-
-
-
-
{{data.combatValues.rangedAttack.total}}
-
-
-
-
{{data.combatValues.spellcasting.total}}
-
-
-
-
{{data.combatValues.targetedSpellcasting.total}} -
-
-
-
diff --git a/src/templates/actor/partials/combat-values.hbs b/src/templates/actor/partials/combat-values.hbs new file mode 100644 index 00000000..49bfd024 --- /dev/null +++ b/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"}} +
+
{{combat-value-data.total}} +
+
+
+
+{{/inline}} + +{{!-- ======================================================================== --}} + +
+ {{#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}} +
From 0db345c7dea9db7767115bf2f4d2f92fd8852365 Mon Sep 17 00:00:00 2001 From: Johannes Loher Date: Mon, 4 Jan 2021 20:28:33 +0100 Subject: [PATCH 3/3] extract 26px line height for inputs to variable --- src/scss/components/_attributes_traits.scss | 4 ++-- src/scss/components/_description.scss | 2 +- src/scss/utils/_variables.scss | 2 ++ 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/scss/components/_attributes_traits.scss b/src/scss/components/_attributes_traits.scss index 88ae9425..19cef982 100644 --- a/src/scss/components/_attributes_traits.scss +++ b/src/scss/components/_attributes_traits.scss @@ -8,7 +8,7 @@ } .attribute-value { border: 2px groove $c-border-groove; - line-height: 26px; + line-height: $default-input-height; font-size: 1.5em; text-align: center; padding-left: 2px; @@ -32,7 +32,7 @@ .trait-value { border: 2px groove $c-border-groove; font-size: 1.5em; - line-height: 26px; + line-height: $default-input-height; text-align: center; padding-left: 2px; padding-right: 2px; diff --git a/src/scss/components/_description.scss b/src/scss/components/_description.scss index 71028e1b..8bd3b18b 100644 --- a/src/scss/components/_description.scss +++ b/src/scss/components/_description.scss @@ -13,7 +13,7 @@ justify-content: left; label { - line-height: 26px; + line-height: $default-input-height; font-weight: bold; } diff --git a/src/scss/utils/_variables.scss b/src/scss/utils/_variables.scss index e077f7a2..a10ef211 100644 --- a/src/scss/utils/_variables.scss +++ b/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";