From 0d2af1ae00e925c7b0738246e67631a819c1f699 Mon Sep 17 00:00:00 2001 From: Johannes Loher Date: Thu, 31 Dec 2020 00:32:17 +0100 Subject: [PATCH 1/2] Add combat values to character sheet --- src/scss/components/_character_values.scss | 50 +++++++++++++++- src/scss/global/_flex.scss | 4 ++ src/scss/utils/_variables.scss | 3 + src/templates/actor/actor-sheet.hbs | 68 ++++++++++++++++++++++ 4 files changed, 124 insertions(+), 1 deletion(-) diff --git a/src/scss/components/_character_values.scss b/src/scss/components/_character_values.scss index 6f2e1a2b..3f386649 100644 --- a/src/scss/components/_character_values.scss +++ b/src/scss/components/_character_values.scss @@ -2,7 +2,7 @@ header.sheet-header { .character-values { flex: 0 0 100%; .attributes-traits { - margin-top: 5px; + margin-top: $margin-sm; .attribute { .attribute-label { font-family: $font-heading; @@ -47,5 +47,53 @@ header.sheet-header { } } } + .combat-values { + margin-top: $margin-sm; + .combat-value-with-formula { + display: grid; + place-items: center; + $size: 60px; + row-gap: $margin-sm; + .combat-value { + display: grid; + place-items: center; + height: $size; + width: $size; + flex: 0 0 auto; + background-size: contain; + font-size: 1.5em; + } + .combat-value-formula { + width: $size; + input { + text-align: center; + } + } + } + .combat-value.hitPoints { + background-image: url("assets/DS4-HP.png"); + } + .combat-value.defense { + background-image: url("assets/DS4-DEF.png"); + } + .combat-value.initiative { + background-image: url("assets/DS4-INI.png"); + } + .combat-value.movement { + background-image: url("assets/DS4-MR.png"); + } + .combat-value.meleeAttack { + background-image: url("assets/DS4-MAT.png"); + } + .combat-value.rangedAttack { + background-image: url("assets/DS4-RAT.png"); + } + .combat-value.spellcasting { + background-image: url("assets/DS4-SPC.png"); + } + .combat-value.targetedSpellcasting { + background-image: url("assets/DS4-TSC.png"); + } + } } } diff --git a/src/scss/global/_flex.scss b/src/scss/global/_flex.scss index 4027bbc7..ca8ae406 100644 --- a/src/scss/global/_flex.scss +++ b/src/scss/global/_flex.scss @@ -70,3 +70,7 @@ .flex-between { justify-content: space-between; } + +.flex-around { + justify-content: space-around; +} diff --git a/src/scss/utils/_variables.scss b/src/scss/utils/_variables.scss index deee5de0..6b5cbd78 100644 --- a/src/scss/utils/_variables.scss +++ b/src/scss/utils/_variables.scss @@ -1,3 +1,6 @@ $padding-sm: 5px; $padding-md: 10px; $padding-lg: 20px; +$margin-sm: $padding-sm; +$margin-md: $padding-md; +$margin-lg: $padding-lg; diff --git a/src/templates/actor/actor-sheet.hbs b/src/templates/actor/actor-sheet.hbs index 555412a8..99de9e32 100644 --- a/src/templates/actor/actor-sheet.hbs +++ b/src/templates/actor/actor-sheet.hbs @@ -161,6 +161,74 @@ {{data.traits.aura.total}} +
+
+
{{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}} +
+
+
+
From 9cd430a229f2ae5f28d571849a506e277adac754 Mon Sep 17 00:00:00 2001 From: Johannes Loher Date: Thu, 31 Dec 2020 01:33:59 +0100 Subject: [PATCH 2/2] improve scss of character values --- src/scss/components/_character_values.scss | 52 +++++++++++----------- src/scss/utils/_mixins.scss | 5 +++ 2 files changed, 31 insertions(+), 26 deletions(-) diff --git a/src/scss/components/_character_values.scss b/src/scss/components/_character_values.scss index 3f386649..8c5e394d 100644 --- a/src/scss/components/_character_values.scss +++ b/src/scss/components/_character_values.scss @@ -55,14 +55,38 @@ header.sheet-header { $size: 60px; row-gap: $margin-sm; .combat-value { - display: grid; - place-items: center; + @include centered-content; height: $size; width: $size; flex: 0 0 auto; background-size: contain; font-size: 1.5em; + &.hitPoints { + background-image: url("assets/DS4-HP.png"); + } + &.defense { + background-image: url("assets/DS4-DEF.png"); + } + &.initiative { + background-image: url("assets/DS4-INI.png"); + } + &.movement { + background-image: url("assets/DS4-MR.png"); + } + &.meleeAttack { + background-image: url("assets/DS4-MAT.png"); + } + &.rangedAttack { + background-image: url("assets/DS4-RAT.png"); + } + &.spellcasting { + background-image: url("assets/DS4-SPC.png"); + } + &.targetedSpellcasting { + background-image: url("assets/DS4-TSC.png"); + } } + .combat-value-formula { width: $size; input { @@ -70,30 +94,6 @@ header.sheet-header { } } } - .combat-value.hitPoints { - background-image: url("assets/DS4-HP.png"); - } - .combat-value.defense { - background-image: url("assets/DS4-DEF.png"); - } - .combat-value.initiative { - background-image: url("assets/DS4-INI.png"); - } - .combat-value.movement { - background-image: url("assets/DS4-MR.png"); - } - .combat-value.meleeAttack { - background-image: url("assets/DS4-MAT.png"); - } - .combat-value.rangedAttack { - background-image: url("assets/DS4-RAT.png"); - } - .combat-value.spellcasting { - background-image: url("assets/DS4-SPC.png"); - } - .combat-value.targetedSpellcasting { - background-image: url("assets/DS4-TSC.png"); - } } } } diff --git a/src/scss/utils/_mixins.scss b/src/scss/utils/_mixins.scss index 46d30323..7e028c29 100644 --- a/src/scss/utils/_mixins.scss +++ b/src/scss/utils/_mixins.scss @@ -14,3 +14,8 @@ @mixin hide { display: none; } + +@mixin centered-content { + display: grid; + place-items: center; +}