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

Add character profile Closes #3 See merge request dungeonslayers/ds4!19
2021-01-06 23:53:51 +01:00 · 2021-01-06 23:53:51 +01:00 · 80da77b2e6
commit 80da77b2e6
parent 2ce3d7090d 1f6d8b7980
15 changed files with 223 additions and 82 deletions
--- a/src/ds4.scss
+++ b/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";
 }
--- a/src/lang/en.json
+++ b/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"
 }
--- a/src/module/actor/actor-data.ts
+++ b/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;
+}
--- a/src/module/config.ts
+++ b/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",
+    },
 };
--- a/src/module/ds4.ts
+++ b/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
--- a/src/scss/components/_attributes_traits.scss
+++ b/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;
            }
        }
    }
--- a/src/scss/components/_basic_property.scss
+++ b/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;
+        }
    }
 }
--- a/src/scss/components/_character_progression.scss
+++ b/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;
+        }
+    }
+}
--- a/src/scss/global/_flex.scss
+++ b/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;
    }
--- a/src/scss/global/_grid.scss
+++ b/src/scss/global/_grid.scss
@ -28,8 +28,8 @@
 }

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

 .grid-7col {
--- a/src/scss/global/_window.scss
+++ b/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 {
--- a/src/template.json
+++ b/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": ""
            }
        }
    },
--- a/src/templates/actor/actor-sheet.hbs
+++ b/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">
-            {{!-- 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}}"
+                <div class="basic-property">
+                    <label class="basic-property-label" for="data.baseInfo.culture">{{config.baseInfo.culture}}</label>
+                    <input type="text" name="data.baseInfo.culture" value="{{data.baseInfo.culture}}"
                        data-dtype="String" />
                </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>
-                        </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"
+                <div class="basic-property flex125">
+                    <label class="basic-property-label"
+                        for="data.progression.progressPoints.used">{{config.progression.progressPoints}}</label>
+                    <div class="flexrow">
+                        <input type="number" name="data.progression.progressPoints.used"
+                            value="{{data.progression.progressPoints.used}}" data-dtype="Number" /><span
+                            class="input-divider"> /
+                        </span><input type="number" name="data.progression.progressPoints.total"
                            value="{{data.progression.progressPoints.total}}" data-dtype="Number" />
                    </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"
+                <div class="basic-property flex125">
+                    <label class="basic-property-label"
+                        for="data.progression.talentPoints.used">{{config.progression.talentPoints}}</label>
+                    <div class="flexrow">
+                        <input type="number" name="data.progression.talentPoints.used"
+                            value="{{data.progression.talentPoints.used}}" data-dtype="Number" /><span
+                            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="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">
+                <div class="basic-property">
+                    <label class="basic-property-label"
+                        for="data.baseInfo.heroClass">{{config.baseInfo.heroClass}}</label>
                    <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="items">Items</a>
+        <a class="item" data-tab="description">{{localize "DS4.Description"}}</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>
--- a/src/templates/actor/partials/character-progression.hbs
+++ b/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>
--- a/src/templates/actor/partials/profile.hbs
+++ b/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>