From fd5bad3c3e10219730fb5532780bbd3353024015 Mon Sep 17 00:00:00 2001
From: Johannes Loher <johannes.loher@fg4f.de>
Date: Wed, 30 Dec 2020 19:39:16 +0100
Subject: [PATCH] add attributes and traits to character sheet

---
 src/ds4.scss                               |   1 +
 src/scss/components/_character_values.scss |  51 ++++++
 src/scss/components/_forms.scss            |   4 -
 src/templates/actor/actor-sheet.hbs        | 203 +++++++++++++++------
 4 files changed, 196 insertions(+), 63 deletions(-)
 create mode 100644 src/scss/components/_character_values.scss

diff --git a/src/ds4.scss b/src/ds4.scss
index f91ff4ba..b2e83661 100644
--- a/src/ds4.scss
+++ b/src/ds4.scss
@@ -17,4 +17,5 @@
     @import "scss/components/tabs";
     @import "scss/components/items";
     @import "scss/components/description";
+    @import "scss/components/character_values";
 }
diff --git a/src/scss/components/_character_values.scss b/src/scss/components/_character_values.scss
new file mode 100644
index 00000000..6f2e1a2b
--- /dev/null
+++ b/src/scss/components/_character_values.scss
@@ -0,0 +1,51 @@
+header.sheet-header {
+    .character-values {
+        flex: 0 0 100%;
+        .attributes-traits {
+            margin-top: 5px;
+            .attribute {
+                .attribute-label {
+                    font-family: $font-heading;
+                    font-size: 2em;
+                    text-align: center;
+                }
+                .attribute-value {
+                    border: 2px groove $c-border-groove;
+                    line-height: 26px;
+                    font-size: 1.5em;
+                    text-align: center;
+                    padding-left: 2px;
+                    padding-right: 2px;
+                    gap: 0;
+                    input,
+                    .attribute-value-total {
+                        grid-column: span 2;
+                    }
+                }
+            }
+            .trait {
+                .trait-label {
+                    color: transparent;
+                    font-family: $font-heading;
+                    font-size: 2em;
+                    text-align: center;
+                    //text-shadow: -1px 1px 0 $c-black, 1px 1px 0 $c-black, 1px -1px 0 $c-black, -1px -1px 0 $c-black;
+                    -webkit-text-stroke: 1px $c-black;
+                }
+                .trait-value {
+                    border: 2px groove $c-border-groove;
+                    font-size: 1.5em;
+                    line-height: 26px;
+                    text-align: center;
+                    padding-left: 2px;
+                    padding-right: 2px;
+                    gap: 0;
+                    input,
+                    .trait-value-total {
+                        grid-column: span 2;
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/src/scss/components/_forms.scss b/src/scss/components/_forms.scss
index 2f1bafa1..2a992d7b 100644
--- a/src/scss/components/_forms.scss
+++ b/src/scss/components/_forms.scss
@@ -23,10 +23,6 @@ header.sheet-header {
         flex: 1;
     }
 
-    .base-infos {
-        flex: 0 0 100%;
-    }
-
     h1.charname {
         height: 50px;
         padding: 0px;
diff --git a/src/templates/actor/actor-sheet.hbs b/src/templates/actor/actor-sheet.hbs
index af98e0ec..555412a8 100644
--- a/src/templates/actor/actor-sheet.hbs
+++ b/src/templates/actor/actor-sheet.hbs
@@ -5,75 +5,160 @@
         <div class="header-fields">
             <h1 class="charname"><input name="name" type="text" value="{{actor.name}}" placeholder="Name" /></h1>
         </div>
-        {{!-- The grid classes are defined in scss/global/_grid.scss. To use, use both the "grid" and "grid-Ncol"
-        class where "N" can be any number from 1 to 12 and will create that number of columns. --}}
-        <div class="base-infos grid grid-3col">
-            {{!-- "flex-group-center" is also defined in the _grid.scss file and it will add a small amount of
-            padding, a border, and will center all of its child elements content and text. --}}
-            <div class="base-info flex-group-center">
-                <label for="data.baseInfo.race" class="base-info-label">{{config.baseInfo.race}}</label>
-                <div class="base-info-content flexrow flex-center flex-between">
-                    <input type="text" name="data.baseInfo.race" value="{{data.baseInfo.race}}" data-dtype="String" />
+        <div class="character-values">
+            {{!-- The grid classes are defined in scss/global/_grid.scss. To use, use both the "grid" and "grid-Ncol"
+            class where "N" can be any number from 1 to 12 and will create that number of columns. --}}
+            <div class="base-infos grid grid-3col">
+                {{!-- "flex-group-center" is also defined in the _grid.scss file and it will add a small amount of
+                padding, a border, and will center all of its child elements content and text. --}}
+                <div class="base-info flex-group-center">
+                    <label for="data.baseInfo.race" class="base-info-label">{{config.baseInfo.race}}</label>
+                    <div class="base-info-content flexrow flex-center flex-between">
+                        <input type="text" name="data.baseInfo.race" value="{{data.baseInfo.race}}"
+                            data-dtype="String" />
+                    </div>
                 </div>
-            </div>
-            <div class="base-info flex-group-center">
-                <div class="grid grid-3col">
-                    <div class="base-info flex-group-center">
-                        <label for="data.progression.level" class="base-info-label">{{config.progression.level}}</label>
-                        <div class="base-info-content flexrow flex-center flex-between">
-                            <input type="text" name="data.progression.level" value="{{data.progression.level}}"
-                                data-dtype="Number" />
+                <div class="base-info flex-group-center">
+                    <div class="grid grid-3col">
+                        <div class="base-info flex-group-center">
+                            <label for="data.progression.level"
+                                class="base-info-label">{{config.progression.level}}</label>
+                            <div class="base-info-content flexrow flex-center flex-between">
+                                <input type="text" name="data.progression.level" value="{{data.progression.level}}"
+                                    data-dtype="Number" />
+                            </div>
                         </div>
-                    </div>
-                    <div class="base-info flex-group-center">
-                        <label for="data.progression.progressPoints"
-                            class="base-info-label">{{config.progression.progressPoints}}</label>
-                        <div class="base-info-content flexrow flex-center flex-between">
-                            <input type="text" name="data.progression.progressPoints.used"
-                                value="{{data.progression.progressPoints.used}}" data-dtype="Number" /><span> /
-                            </span><input type="text" name="data.progression.progressPoints.total"
-                                value="{{data.progression.progressPoints.total}}" data-dtype="Number" />
+                        <div class="base-info flex-group-center">
+                            <label for="data.progression.progressPoints"
+                                class="base-info-label">{{config.progression.progressPoints}}</label>
+                            <div class="base-info-content flexrow flex-center flex-between">
+                                <input type="text" name="data.progression.progressPoints.used"
+                                    value="{{data.progression.progressPoints.used}}" data-dtype="Number" /><span> /
+                                </span><input type="text" name="data.progression.progressPoints.total"
+                                    value="{{data.progression.progressPoints.total}}" data-dtype="Number" />
+                            </div>
                         </div>
-                    </div>
-                    <div class="base-info flex-group-center">
-                        <label for="data.progression.talentPoints"
-                            class="base-info-label">{{config.progression.talentPoints}}</label>
-                        <div class="base-info-content flexrow flex-center flex-between">
-                            <input type="text" name="data.progression.talentPoints.used"
-                                value="{{data.progression.talentPoints.used}}" data-dtype="Number" /><span> /
-                            </span><input type="text" name="data.progression.talentPoints.total"
-                                value="{{data.progression.talentPoints.total}}" data-dtype="Number" />
+                        <div class="base-info flex-group-center">
+                            <label for="data.progression.talentPoints"
+                                class="base-info-label">{{config.progression.talentPoints}}</label>
+                            <div class="base-info-content flexrow flex-center flex-between">
+                                <input type="text" name="data.progression.talentPoints.used"
+                                    value="{{data.progression.talentPoints.used}}" data-dtype="Number" /><span> /
+                                </span><input type="text" name="data.progression.talentPoints.total"
+                                    value="{{data.progression.talentPoints.total}}" data-dtype="Number" />
+                            </div>
                         </div>
                     </div>
                 </div>
-            </div>
-            <div class="base-info flex-group-center">
-                <label for="data.baseInfo.class" class="base-info-label">{{config.baseInfo.class}}</label>
-                <div class="base-info-content flexrow flex-center flex-between">
-                    <input type="text" name="data.baseInfo.class" value="{{data.baseInfo.class}}" data-dtype="String" />
+                <div class="base-info flex-group-center">
+                    <label for="data.baseInfo.class" class="base-info-label">{{config.baseInfo.class}}</label>
+                    <div class="base-info-content flexrow flex-center flex-between">
+                        <input type="text" name="data.baseInfo.class" value="{{data.baseInfo.class}}"
+                            data-dtype="String" />
+                    </div>
+                </div>
+                <div class="base-info flex-group-center">
+                    <label for="data.baseInfo.racialAbilities"
+                        class="base-info-label">{{config.baseInfo.racialAbilities}}</label>
+                    <div class="base-info-content flexrow flex-center flex-between">
+                        <input type="text" name="data.baseInfo.racialAbilities"
+                            value="{{data.baseInfo.racialAbilities}}" data-dtype="String" />
+                    </div>
+                </div>
+                <div class="base-info flex-group-center">
+                    <label for="data.progression.experiencePoints"
+                        class="base-info-label">{{config.progression.experiencePoints}}</label>
+                    <div class="base-info-content flexrow flex-center flex-between">
+                        <input type="text" name="data.progression.experiencePoints"
+                            value="{{data.progression.experiencePoints}}" data-dtype="Number" />
+                    </div>
+                </div>
+                <div class="base-info flex-group-center">
+                    <label for="data.baseInfo.heroClass" class="base-info-label">{{config.baseInfo.heroClass}}</label>
+                    <div class="base-info-content flexrow flex-center flex-between">
+                        <input type="text" name="data.baseInfo.heroClass" value="{{data.baseInfo.heroClass}}"
+                            data-dtype="String" />
+                    </div>
                 </div>
             </div>
-            <div class="base-info flex-group-center">
-                <label for="data.baseInfo.racialAbilities"
-                    class="base-info-label">{{config.baseInfo.racialAbilities}}</label>
-                <div class="base-info-content flexrow flex-center flex-between">
-                    <input type="text" name="data.baseInfo.racialAbilities" value="{{data.baseInfo.racialAbilities}}"
-                        data-dtype="String" />
+            <div class="attributes-traits grid grid-3col">
+                <div class="attribute flexrow"><label for="data.attributes.body.total"
+                        class="attribute-label ">{{config.attributes.body}}</label>
+                    <div class="attribute-value flex15 grid grid-8col"><input type="number"
+                            name="data.attributes.body.base" value='{{data.attributes.body.base}}'
+                            data-dtype="Number" /><span> +
+                        </span><input type="number" name="data.attributes.body.mod" value='{{data.attributes.body.mod}}'
+                            data-dtype="Number" /><span> =
+                        </span><span class="attribute-value-total">{{data.attributes.body.total}}</span></div>
                 </div>
-            </div>
-            <div class="base-info flex-group-center">
-                <label for="data.progression.experiencePoints"
-                    class="base-info-label">{{config.progression.experiencePoints}}</label>
-                <div class="base-info-content flexrow flex-center flex-between">
-                    <input type="text" name="data.progression.experiencePoints"
-                        value="{{data.progression.experiencePoints}}" data-dtype="Number" />
+                <div class="attribute flexrow"><label for="data.attributes.mobility.total"
+                        class="attribute-label">{{config.attributes.mobility}}</label>
+                    <div class="attribute-value flex15 grid grid-8col"><input type="number"
+                            name="data.attributes.mobility.base" value='{{data.attributes.mobility.base}}'
+                            data-dtype="Number" /><span> +
+                        </span><input type="number" name="data.attributes.mobility.mod"
+                            value='{{data.attributes.mobility.mod}}' data-dtype="Number" /><span> =
+                        </span><span class="attribute-value-total">{{data.attributes.mobility.total}}</span></div>
                 </div>
-            </div>
-            <div class="base-info flex-group-center">
-                <label for="data.baseInfo.heroClass" class="base-info-label">{{config.baseInfo.heroClass}}</label>
-                <div class="base-info-content flexrow flex-center flex-between">
-                    <input type="text" name="data.baseInfo.heroClass" value="{{data.baseInfo.heroClass}}"
-                        data-dtype="String" />
+                <div class="attribute flexrow"><label for="data.attributes.mind.total"
+                        class="attribute-label">{{config.attributes.mind}}</label>
+                    <div class="attribute-value flex15 grid grid-8col"><input type="number"
+                            name="data.attributes.mind.base" value='{{data.attributes.mind.base}}'
+                            data-dtype="Number" /><span> +
+                        </span><input type="number" name="data.attributes.mind.mod" value='{{data.attributes.mind.mod}}'
+                            data-dtype="Number" /><span> =
+                        </span><span class="attribute-value-total">{{data.attributes.mind.total}}</span></div>
+                </div>
+                <div class="trait flexrow"><label for="data.traits.strength.total"
+                        class="trait-label">{{config.traits.strength}}</label>
+                    <div class="trait-value flex15 grid grid-8col"><input type="number" name="data.traits.strength.base"
+                            value='{{data.traits.strength.base}}' data-dtype="Number" /><span> +
+                        </span><input type="number" name="data.traits.strength.mod" value='{{data.traits.strength.mod}}'
+                            data-dtype="Number" /><span> =
+                        </span><span class="trait-value-total">{{data.traits.strength.total}}</span></div>
+                </div>
+                <div class="trait flexrow"><label for="data.traits.agility.total"
+                        class="trait-label">{{config.traits.agility}}</label>
+                    <div class="trait-value flex15 grid grid-8col"><input type="number" name="data.traits.agility.base"
+                            value='{{data.traits.agility.base}}' data-dtype="Number" /><span> +
+                        </span><input type="number" name="data.traits.agility.mod" value='{{data.traits.agility.mod}}'
+                            data-dtype="Number" /><span> =
+                        </span><span class="trait-value-total">{{data.traits.agility.total}}</span></div>
+                </div>
+                <div class="trait flexrow"><label for="data.traits.intellect.total"
+                        class="trait-label">{{config.traits.intellect}}</label>
+                    <div class="trait-value flex15 grid grid-8col"><input type="number"
+                            name="data.traits.intellect.base" value='{{data.traits.intellect.base}}'
+                            data-dtype="Number" /><span> +
+                        </span><input type="number" name="data.traits.intellect.mod"
+                            value='{{data.traits.intellect.mod}}' data-dtype="Number" /><span> =
+                        </span><span class="trait-value-total">{{data.traits.intellect.total}}</span></div>
+                </div>
+                <div class="trait flexrow"><label for="data.traits.constitution.total"
+                        class="trait-label">{{config.traits.constitution}}</label>
+                    <div class="trait-value flex15 grid grid-8col"><input type="number"
+                            name="data.traits.constitution.base" value='{{data.traits.constitution.base}}'
+                            data-dtype="Number" /><span> +
+                        </span><input type="number" name="data.traits.constitution.mod"
+                            value='{{data.traits.constitution.mod}}' data-dtype="Number" /><span> =
+                        </span><span class="trait-value-total">{{data.traits.constitution.total}}</span></div>
+                </div>
+                <div class="trait flexrow"><label for="data.traits.dexterity.total"
+                        class="trait-label">{{config.traits.dexterity}}</label>
+                    <div class="trait-value flex15 grid grid-8col"><input type="number"
+                            name="data.traits.dexterity.base" value='{{data.traits.dexterity.base}}'
+                            data-dtype="Number" /><span> +
+                        </span><input type="number" name="data.traits.dexterity.mod"
+                            value='{{data.traits.dexterity.mod}}' data-dtype="Number" /><span> =
+                        </span><span class="trait-value-total">{{data.traits.dexterity.total}}</span></div>
+                </div>
+                <div class="trait flexrow"><label for="data.traits.aura.total"
+                        class="trait-label">{{config.traits.aura}}</label>
+                    <div class="trait-value flex15 grid grid-8col"><input type="number" name="data.traits.aura.base"
+                            value='{{data.traits.aura.base}}' data-dtype="Number" /><span> +
+                        </span><input type="number" name="data.traits.aura.mod" value='{{data.traits.aura.mod}}'
+                            data-dtype="Number" /><span> =
+                        </span><span class="trait-value-total">{{data.traits.aura.total}}</span></div>
                 </div>
             </div>
         </div>