diff --git a/src/scss/components/_character_values.scss b/src/scss/components/_character_values.scss index 6f2e1a2b..8c5e394d 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 { + @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 { + text-align: center; + } + } + } + } } } 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/_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; +} 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}} +
+
+
+