Merge branch '003-add-character-profile' into 'master'

Add character profile

Closes #3

See merge request dungeonslayers/ds4!19

src/ds4.scss

@@ -20,4 +20,5 @@
     @import "scss/components/character_values";
     @import "scss/components/attributes_traits";
     @import "scss/components/combat_values";
+    @import "scss/components/character_progression";
 }

src/lang/en.json

@@ -5,6 +5,8 @@
     "DS4.DescriptionAbbr": "Desc",
     "DS4.Details": "Details",
     "DS4.Effects": "Effects",
+    "DS4.Profile": "Profile",
+    "DS4.Items": "Items",
     "DS4.AttackType": "Attack Type",
     "DS4.AttackTypeAbbr": "AT",
     "DS4.WeaponBonus": "Weapon Bonus",
@@ -78,8 +80,20 @@
     "DS4.BaseInfoClass": "Class",
     "DS4.BaseInfoHeroClass": "Hero Class",
     "DS4.BaseInfoRacialAbilities": "Racial Abilites",
+    "DS4.BaseInfoCulture": "Culture",
     "DS4.ProgressionLevel": "Level",
     "DS4.ProgressionExperiencePoints": "Experience Points",
     "DS4.ProgressionTalentPoints": "Talent Points",
-    "DS4.ProgressionProgressPoints": "Progress Points"
+    "DS4.ProgressionProgressPoints": "Progress Points",
+    "DS4.LanguageLanguages": "Languages",
+    "DS4.LanguageAlphabets": "Alphabets",
+    "DS4.ProfileGender": "Gender",
+    "DS4.ProfileBirthday": "Birthday",
+    "DS4.ProfileBirthplace": "Birthplace",
+    "DS4.ProfileAge": "Age",
+    "DS4.ProfileHeight": "Height",
+    "DS4.ProfilHairColor": "Hair Color",
+    "DS4.ProfileWeight": "Weight",
+    "DS4.ProfileEyeColor": "Eye Color",
+    "DS4.ProfileSpecialCharacteristics": "Special Characteristics"
 }

src/module/actor/actor-data.ts

@@ -4,6 +4,8 @@ export interface DS4ActorDataType {
     combatValues: DS4ActorDataCombatValues;
     baseInfo: DS4ActorDataBaseInfo;
     progression: DS4ActorDataProgression;
+    language: DS4ActorDataLanguage;
+    profile: DS4ActorDataProfile;
 }
 
 interface DS4ActorDataAttributes {
@@ -55,6 +57,7 @@ interface DS4ActorDataBaseInfo {
     class: string;
     heroClass: string;
     racialAbilities: string;
+    culture: string;
 }
 
 interface DS4ActorDataProgression {
@@ -63,3 +66,20 @@ interface DS4ActorDataProgression {
     talentPoints: UsableResource<number>;
     progressPoints: UsableResource<number>;
 }
+
+interface DS4ActorDataLanguage {
+    languages: string;
+    alphabets: string;
+}
+
+interface DS4ActorDataProfile {
+    gender: string;
+    birthday: string;
+    birthplace: string;
+    age: number;
+    height: number;
+    hairColor: string;
+    weight: number;
+    eyeColor: string;
+    specialCharacteristics: string;
+}

src/module/config.ts

@@ -135,10 +135,11 @@ export const DS4 = {
         class: "DS4.BaseInfoClass",
         heroClass: "DS4.BaseInfoHeroClass",
         racialAbilities: "DS4.BaseInfoRacialAbilities",
+        culture: "DS4.BaseInfoCulture",
     },
 
     /**
-     * Definme the progression info of a character
+     * Define the progression info of a character
      */
     progression: {
         level: "DS4.ProgressionLevel",
@@ -146,4 +147,42 @@ export const DS4 = {
         talentPoints: "DS4.ProgressionTalentPoints",
         progressPoints: "DS4.ProgressionProgressPoints",
     },
+
+    /**
+     * Define the language info of a character
+     */
+    language: {
+        languages: "DS4.LanguageLanguages",
+        alphabets: "DS4.LanguageAlphabets",
+    },
+
+    /**
+     * Define the profile info of a character
+     */
+    profile: {
+        gender: "DS4.ProfileGender",
+        birthday: "DS4.ProfileBirthday",
+        birthplace: "DS4.ProfileBirthplace",
+        age: "DS4.ProfileAge",
+        height: "DS4.ProfileHeight",
+        hairColor: "DS4.ProfilHairColor",
+        weight: "DS4.ProfileWeight",
+        eyeColor: "DS4.ProfileEyeColor",
+        specialCharacteristics: "DS4.ProfileSpecialCharacteristics",
+    },
+
+    /**
+     * Define the profile info types for hanndlebars of a character
+     */
+    profileDTypes: {
+        gender: "String",
+        birthday: "String",
+        birthplace: "String",
+        age: "Number",
+        height: "Number",
+        hairColor: "String",
+        weight: "Number",
+        eyeColor: "String",
+        specialCharacteristics: "String",
+    },
 };

src/module/ds4.ts

@@ -39,6 +39,8 @@ async function registerHandlebarsPartials() {
         "systems/ds4/templates/actor/partials/items-overview.hbs",
         "systems/ds4/templates/actor/partials/attributes-traits.hbs",
         "systems/ds4/templates/actor/partials/combat-values.hbs",
+        "systems/ds4/templates/actor/partials/profile.hbs",
+        "systems/ds4/templates/actor/partials/character-progression.hbs",
     ];
     return loadTemplates(templatePaths);
 }
@@ -66,6 +68,8 @@ Hooks.once("setup", function () {
         "combatValues",
         "baseInfo",
         "progression",
+        "language",
+        "profile",
     ];
 
     // Exclude some from sorting where the default order matters

src/scss/components/_attributes_traits.scss

@@ -8,7 +8,6 @@
         }
         .attribute-value {
             border: 2px groove $c-border-groove;
-            line-height: $default-input-height;
             font-size: 1.5em;
             text-align: center;
             padding-left: 2px;
@@ -17,6 +16,7 @@
             input,
             .attribute-value-total {
                 grid-column: span 2;
+                line-height: $default-input-height;
             }
         }
     }
@@ -32,7 +32,6 @@
         .trait-value {
             border: 2px groove $c-border-groove;
             font-size: 1.5em;
-            line-height: $default-input-height;
             text-align: center;
             padding-left: 2px;
             padding-right: 2px;
@@ -40,6 +39,7 @@
             input,
             .trait-value-total {
                 grid-column: span 2;
+                line-height: $default-input-height;
             }
         }
     }

src/scss/components/_basic_property.scss

@@ -1,6 +1,9 @@
 .basic-properties {
     flex: 0 0 100%;
+    gap: 2px;
     .basic-property {
+        padding-left: 1px;
+        padding-right: 1px;
         .basic-property-label {
             font-weight: bold;
         }
@@ -9,5 +12,8 @@
             display: block;
             width: 100%;
         }
+        .input-divider {
+            text-align: center;
+        }
     }
 }

src/scss/components/_character_progression.scss

@@ -0,0 +1,28 @@
+.progression {
+    .progression-entry {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: flex-end;
+        align-items: center;
+
+        padding-right: 3px;
+        h2.progression-label {
+            font-family: $font-heading;
+            display: block;
+            height: 50px;
+            padding: 0px;
+            color: $c-light-grey;
+            border: none;
+            line-height: 50px;
+            margin: $header-top-margin 0;
+            text-align: right;
+            //flex: 0;
+        }
+        input.progression-value {
+            margin-left: 5px;
+            flex: 0 0 40px;
+            text-align: left;
+        }
+    }
+}

src/scss/global/_flex.scss

@@ -18,6 +18,9 @@
     .flex1 {
         flex: 1;
     }
+    .flex125 {
+        flex: 1.25;
+    }
     .flex15 {
         flex: 1.5;
     }
@@ -51,6 +54,9 @@
     .flex1 {
         flex: 1;
     }
+    .flex125 {
+        flex: 1.25;
+    }
     .flex15 {
         flex: 1.5;
     }

src/scss/global/_grid.scss

@@ -28,8 +28,8 @@
 }
 
 .grid-6col {
-    grid-column: span 5 / span 5;
+    grid-column: span 6 / span 6;
-    grid-template-columns: repeat(5, minmax(0, 1fr));
+    grid-template-columns: repeat(6, minmax(0, 1fr));
 }
 
 .grid-7col {

src/scss/global/_window.scss

@@ -1,5 +1,12 @@
 .window-app {
     font-family: $font-primary;
+    input[type="text"],
+    input[type="number"],
+    input[type="password"],
+    input[type="date"],
+    input[type="time"] {
+        width: 100%;
+    }
 }
 
 .rollable {

src/template.json

@@ -83,7 +83,8 @@
                 "race": "",
                 "class": "",
                 "heroClass": "",
-                "racialAbilities": ""
+                "racialAbilities": "",
+                "culture": ""
             },
             "progression": {
                 "level": 0,
@@ -96,6 +97,21 @@
                     "total": 0,
                     "used": 0
                 }
+            },
+            "language": {
+                "languages": "",
+                "alphabets": ""
+            },
+            "profile": {
+                "gender": "",
+                "birthday": "",
+                "birthplace": "",
+                "age": 0,
+                "height": 0,
+                "hairColor": "",
+                "weight": 0,
+                "eyeColor": "",
+                "specialCharacteristics": ""
             }
         }
     },

src/templates/actor/actor-sheet.hbs

@@ -2,96 +2,65 @@
     {{!-- Sheet Header --}}
     <header class="sheet-header">
         <img class="profile-img" src="{{actor.img}}" data-edit="img" title="{{actor.name}}" height="100" width="100" />
-        <div class="header-fields">
+        <div class="header-fields flexrow">
             <h1 class="charname"><input name="name" type="text" value="{{actor.name}}" placeholder="Name" /></h1>
+            {{> systems/ds4/templates/actor/partials/character-progression.hbs}}
+
+            <div class="flexrow basic-properties">
+                <div class="basic-property">
+                    <label class="basic-property-label" for="data.baseInfo.race">{{config.baseInfo.race}}</label>
+                    <input type="text" name="data.baseInfo.race" value="{{data.baseInfo.race}}" data-dtype="String" />
                 </div>
-        <div class="character-values">
+                <div class="basic-property">
-            {{!-- The grid classes are defined in scss/global/_grid.scss. To use, use both the "grid" and "grid-Ncol"
+                    <label class="basic-property-label" for="data.baseInfo.culture">{{config.baseInfo.culture}}</label>
-            class where "N" can be any number from 1 to 12 and will create that number of columns. --}}
+                    <input type="text" name="data.baseInfo.culture" value="{{data.baseInfo.culture}}"
-            <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 class="basic-property flex125">
-                <div class="base-info flex-group-center">
+                    <label class="basic-property-label"
-                    <div class="grid grid-3col">
+                        for="data.progression.progressPoints.used">{{config.progression.progressPoints}}</label>
-                        <div class="base-info flex-group-center">
+                    <div class="flexrow">
-                            <label for="data.progression.level"
+                        <input type="number" name="data.progression.progressPoints.used"
-                                class="base-info-label">{{config.progression.level}}</label>
+                            value="{{data.progression.progressPoints.used}}" data-dtype="Number" /><span
-                            <div class="base-info-content flexrow flex-center flex-between">
+                            class="input-divider"> /
-                                <input type="text" name="data.progression.level" value="{{data.progression.level}}"
+                        </span><input type="number" name="data.progression.progressPoints.total"
-                                    data-dtype="Number" />
-                            </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>
                 </div>
-                        <div class="base-info flex-group-center">
+                <div class="basic-property flex125">
-                            <label for="data.progression.talentPoints"
+                    <label class="basic-property-label"
-                                class="base-info-label">{{config.progression.talentPoints}}</label>
+                        for="data.progression.talentPoints.used">{{config.progression.talentPoints}}</label>
-                            <div class="base-info-content flexrow flex-center flex-between">
+                    <div class="flexrow">
-                                <input type="text" name="data.progression.talentPoints.used"
+                        <input type="number" name="data.progression.talentPoints.used"
-                                    value="{{data.progression.talentPoints.used}}" data-dtype="Number" /><span> /
+                            value="{{data.progression.talentPoints.used}}" data-dtype="Number" /><span
-                                </span><input type="text" name="data.progression.talentPoints.total"
+                            class="input-divider"> /
+                        </span><input type="number" name="data.progression.talentPoints.total"
                             value="{{data.progression.talentPoints.total}}" data-dtype="Number" />
                     </div>
                 </div>
+                <div class="basic-property">
+                    <label class="basic-property-label" for="data.baseInfo.class">{{config.baseInfo.class}}</label>
+                    <input type="text" name="data.baseInfo.class" value="{{data.baseInfo.class}}" data-dtype="String" />
                 </div>
-                </div>
+                <div class="basic-property">
-                <div class="base-info flex-group-center">
+                    <label class="basic-property-label"
-                    <label for="data.baseInfo.class" class="base-info-label">{{config.baseInfo.class}}</label>
+                        for="data.baseInfo.heroClass">{{config.baseInfo.heroClass}}</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="character-values">
             {{> systems/ds4/templates/actor/partials/attributes-traits.hbs}}
             {{> systems/ds4/templates/actor/partials/combat-values.hbs}}
-
         </div>
     </header>
 
     {{!-- Sheet Tab Navigation --}}
     <nav class="sheet-tabs tabs" data-group="primary">
-        <a class="item" data-tab="description">Description</a>
+        <a class="item" data-tab="description">{{localize "DS4.Description"}}</a>
-        <a class="item" data-tab="items">Items</a>
+        <a class="item" data-tab="profile">{{localize "DS4.Profile"}}</a>
+        <a class="item" data-tab="items">{{localize "DS4.Items"}}</a>
     </nav>
 
     {{!-- Sheet Body --}}
@@ -101,6 +70,9 @@
             {{editor content=data.biography target="data.biography" button=true owner=owner editable=editable}}
         </div>
 
+        {{! Profile Tab --}}
+        {{> systems/ds4/templates/actor/partials/profile.hbs}}
+
         {{!-- Items Tab --}}
         {{> systems/ds4/templates/actor/partials/items-overview.hbs}}
     </section>

src/templates/actor/partials/character-progression.hbs

@@ -0,0 +1,15 @@
+<div class="progression flexrow">
+    <div class="progression-entry">
+        <h2 class="progression-label"><label for="data.progression.level">{{config.progression.level}}</label>
+        </h2>
+        <input class="progression-value" type="number" name="data.progression.level" value="{{data.progression.level}}"
+            data-dtype="Number" />
+    </div>
+    <div class="progression-entry">
+        <h2 class="progression-label"><label
+                for="data.progression.experiencePoints">{{config.progression.experiencePoints}}</label>
+        </h2>
+        <input class="progression-value" type="number" name="data.progression.experiencePoints"
+            value="{{data.progression.experiencePoints}}" data-dtype="Number" />
+    </div>
+</div>

src/templates/actor/partials/profile.hbs

@@ -0,0 +1,13 @@
+<div class="tab profile" data-group="primary" data-tab="profile">
+    <div class="grid grid-2col">
+        {{#each data.profile as |profile-data-value profile-data-key|}}
+        <div class="profile-entry">
+            <label for="data.profile.{{profile-data-key}}">
+                {{lookup ../config.profile profile-data-key}}
+            </label>
+            <input type="text" name="data.profile.{{profile-data-key}}" value="{{profile-data-value}}"
+                data-dtype="{{lookup ../config/profileDTypes profile-data-key}}" />
+        </div>
+        {{/each}}
+    </div>
+</div>