From 0d2af1ae00e925c7b0738246e67631a819c1f699 Mon Sep 17 00:00:00 2001
From: Johannes Loher <johannes.loher@fg4f.de>
Date: Thu, 31 Dec 2020 00:32:17 +0100
Subject: [PATCH] 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 @@
                         </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>