Merge branch '001-add-combat-values' into 'master'

Add combat values to character  sheet

Closes #1

See merge request dungeonslayers/ds4!12

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

src/scss/global/_flex.scss

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

src/scss/utils/_mixins.scss

@@ -14,3 +14,8 @@
 @mixin hide {
     display: none;
 }
+
+@mixin centered-content {
+    display: grid;
+    place-items: center;
+}

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>