Add combat values to character sheet

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");
+            }
+        }
     }
 }

src/scss/global/_flex.scss

@@ -70,3 +70,7 @@
 .flex-between {
     justify-content: space-between;
 }
+
+.flex-around {
+    justify-content: space-around;
+}

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;

src/templates/actor/actor-sheet.hbs

@@ -161,6 +161,74 @@
                         </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>