added talents overview and sheet

- added talents item type:
  - added scss
  - added to template.json (Item.types, Item.talent)
   - added to config.ts itemTypes
   - added type definition
- added localizations
- added talent overview tab to actor sheet
- made total rank calculated upon data preparation
  by adding a prepareData method to DS4Item

src/ds4.scss

@@ -16,6 +16,7 @@
     @import "scss/components/basic_property";
     @import "scss/components/tabs";
     @import "scss/components/items";
+    @import "scss/components/talents";
     @import "scss/components/description";
     @import "scss/components/character_values";
     @import "scss/components/attributes_traits";

src/lang/en.json

@@ -5,6 +5,8 @@
     "DS4.DescriptionAbbr": "Desc",
     "DS4.Details": "Details",
     "DS4.Effects": "Effects",
+    "DS4.Items": "Items",
+    "DS4.Talents": "Talents & Abilities",
     "DS4.AttackType": "Attack Type",
     "DS4.AttackTypeAbbr": "AT",
     "DS4.WeaponBonus": "Weapon Bonus",
@@ -33,6 +35,7 @@
     "DS4.ItemTypeShield": "Shield",
     "DS4.ItemTypeTrinket": "Trinket",
     "DS4.ItemTypeEquipment": "Equipment",
+    "DS4.ItemTypeTalent": "Talent",
     "DS4.ArmorType": "Armor Type",
     "DS4.ArmorTypeAbbr": "AT",
     "DS4.ArmorMaterialType": "Material Type",
@@ -81,5 +84,10 @@
     "DS4.ProgressionLevel": "Level",
     "DS4.ProgressionExperiencePoints": "Experience Points",
     "DS4.ProgressionTalentPoints": "Talent Points",
-    "DS4.ProgressionProgressPoints": "Progress Points"
+    "DS4.ProgressionProgressPoints": "Progress Points",
+    "DS4.TalentRank": "Rank",
+    "DS4.TalentRankBase": "Acquired Ranks",
+    "DS4.TalentRankMax": "Maximum Ranks",
+    "DS4.TalentRankMod": "Additional Ranks",
+    "DS4.TalentRankTotal": "Total Ranks"
 }

src/module/config.ts

@@ -48,6 +48,7 @@ export const DS4 = {
         shield: "DS4.ItemTypeShield",
         trinket: "DS4.ItemTypeTrinket",
         equipment: "DS4.ItemTypeEquipment",
+        talent: "DS4.ItemTypeTalent",
     },
 
     /**

src/module/ds4.ts

@@ -37,6 +37,7 @@ async function registerHandlebarsPartials() {
         "systems/ds4/templates/item/partials/effects.hbs",
         "systems/ds4/templates/item/partials/body.hbs",
         "systems/ds4/templates/actor/partials/items-overview.hbs",
+        "systems/ds4/templates/actor/partials/talents-overview.hbs",
         "systems/ds4/templates/actor/partials/attributes-traits.hbs",
         "systems/ds4/templates/actor/partials/combat-values.hbs",
     ];

src/module/item/item-data.ts

@@ -1,5 +1,7 @@
+import { ModifiableData } from "../actor/actor-data";
+
 // TODO: Actually add a type for data
-export type DS4ItemDataType = DS4Weapon | DS4Armor | DS4Shield | DS4Trinket | DS4Equipment;
+export type DS4ItemDataType = DS4Weapon | DS4Armor | DS4Shield | DS4Trinket | DS4Equipment | DS4Talent;
 
 // types
 
@@ -14,6 +16,14 @@ interface DS4Armor extends DS4ItemBase, DS4ItemPhysical, DS4ItemEquipable, DS4It
     armorType: "body" | "helmet" | "vambrace" | "greaves" | "vambraceGreaves";
 }
 
+export interface DS4Talent extends DS4ItemBase {
+    talentRank: DS4TalentRank;
+}
+
+interface DS4TalentRank extends ModifiableData<number> {
+    max: number;
+}
+
 interface DS4Shield extends DS4ItemBase, DS4ItemPhysical, DS4ItemEquipable, DS4ItemProtective {}
 interface DS4Trinket extends DS4ItemBase, DS4ItemPhysical, DS4ItemEquipable {}
 interface DS4Equipment extends DS4ItemBase, DS4ItemPhysical {}

src/module/item/item.ts

@@ -1,6 +1,6 @@
 import { DS4Actor } from "../actor/actor";
 import { DS4ActorDataType } from "../actor/actor-data";
-import { DS4ItemDataType } from "./item-data";
+import { DS4ItemDataType, DS4Talent } from "./item-data";
 
 /**
  * Extend the basic Item with some very simple modifications.
@@ -12,10 +12,18 @@ export class DS4Item extends Item<DS4ItemDataType, DS4ActorDataType, DS4Actor> {
      */
     prepareData(): void {
         super.prepareData();
+        this.prepareDerivedData();
 
         // Get the Item's data
         // const itemData = this.data;
         // const actorData = this.actor ? this.actor.data : {};
         // const data = itemData.data;
     }
+
+    prepareDerivedData(): void {
+        if (this.type === "talent") {
+            const data: DS4Talent = this.data.data as DS4Talent;
+            data.talentRank.total = data.talentRank.base + data.talentRank.mod;
+        }
+    }
 }

src/scss/components/_talents.scss

@@ -0,0 +1,3 @@
+.talent-ranks-equation {
+    text-align: center;
+}

src/template.json

@@ -100,7 +100,7 @@
         }
     },
     "Item": {
-        "types": ["weapon", "armor", "shield", "trinket", "equipment"],
+        "types": ["weapon", "armor", "shield", "trinket", "equipment", "talent"],
         "templates": {
             "base": {
                 "description": ""
@@ -137,6 +137,14 @@
         },
         "equipment": {
             "templates": ["base", "physical"]
+        },
+        "talent": {
+            "templates": ["base"],
+            "talentRank": {
+                "base": 0,
+                "max": 0,
+                "mod": 0
+            }
         }
     }
 }

src/templates/actor/actor-sheet.hbs

@@ -90,8 +90,9 @@
 
     {{!-- 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="talents">{{localize 'DS4.Talents'}}</a>
+        <a class="item" data-tab="items">{{localize 'DS4.Items'}}</a>
     </nav>
 
     {{!-- Sheet Body --}}
@@ -101,6 +102,9 @@
             {{editor content=data.biography target="data.biography" button=true owner=owner editable=editable}}
         </div>
 
+        {{!-- Talents Tab --}}
+        {{> systems/ds4/templates/actor/partials/talents-overview.hbs}}
+
         {{!-- Items Tab --}}
         {{> systems/ds4/templates/actor/partials/items-overview.hbs}}
     </section>

src/templates/actor/partials/talents-overview.hbs

@@ -0,0 +1,95 @@
+{{!-- ======================================================================== --}}
+{{!-- INLINE PARTIAL DEFINITIONS --}}
+{{!-- ======================================================================== --}}
+
+{{!--
+!-- Render an "add" button for a given data type.
+!--
+!-- @param datType: hand over the dataType to the partial as hash parameter
+--}}
+{{#*inline "addItemButton"}}
+    <div class="item-controls">
+        <a class="item-control item-create" title="Create item" data-type="{{dataType}}">
+            <i class="fas fa-plus"></i>
+            {{localize 'DS4.UserInteractionAddItem'}}</a>
+    </div>
+{{/inline}}
+{{!--
+!-- Render a group of an "edit" and a "delete" button for the current item.
+!-- The current item is defined by the data-item-id HTML property of the parent li element.
+--}}
+{{#*inline "itemControlButtons"}}
+    <div class="item-controls">
+        <a class="item-control item-edit" title="Edit Item"><i class="fas fa-edit"></i></a>
+        <a class="item-control item-delete" title="Delete Item"><i class="fas fa-trash"></i></a>
+    </div>
+{{/inline}}
+
+
+{{#*inline "talentRankValue"}}
+    <input class="item-num-val item-change" data-dtype="Number" type="number" min="0" step="1"
+        {{#if (eq property 'base') }}max="{{item.data.data.talentRank.max}}"{{/if}}
+        data-property="data.talentRank.{{property}}" value="{{lookup item.data.data.talentRank property}}"
+        title="{{localize localizeString}}" />
+{{/inline}}
+
+{{!--
+!-- Render a talent list row from a given item.
+!-- It is a flexbox with a child for each item value of interest.
+!-- The partial assumes a variable item to be given in the context.
+!--
+!-- @param item: hand over the item to the partial as hash parameter
+!-- @param partial-block: hand over custom children of the flexbox in the partial block.
+--}}
+{{#*inline "talentListEntry"}}
+    <li class="item flexrow" data-item-id="{{item._id}}">
+        {{!-- image --}}
+        <div class="flex05 item-image">
+            <img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
+        </div>
+        {{!-- name --}}
+        <input class="flex2 item-name item-change" type="text" value="{{item.name}}" data-dtype="String"
+            data-property="name" title="{{localize 'DS4.ItemName'}}">
+        <div class="flex3 flexrow talent-ranks-equation">
+            {{!-- acquired rank --}}
+            {{> talentRankValue item=item property='base' localizeString='DS4.TalentRankBase'}}
+            <span> ( of </span>
+            {{!-- maximum acquirable rank --}}
+            {{> talentRankValue item=item property='max' localizeString='DS4.TalentRankMax'}}
+            <span>) + </span>
+            {{!-- additional ranks --}}
+            {{> talentRankValue item=item property='mod' localizeString='DS4.TalentRankMod'}}
+            <span> = </span>
+            {{!-- derived total rank --}}
+            <span>{{item.data.data.talentRank.total}}</span>
+        </div>
+        {{!-- description --}}
+        <div class="flex4 item-description">{{{item.data.data.description}}}</div>
+        {{!-- control buttons --}}
+        {{> itemControlButtons}}
+    </li>
+{{/inline}}
+
+
+{{!-- ======================================================================== --}}
+
+
+<div class="tab items" data-group="primary" data-tab="talents">
+    <ol class="items-list">
+        <li class="item flexrow item-header">
+            {{!-- image --}}
+            <div class="flex05 item-image"></div>
+            {{!-- name --}}
+            <div class="flex2 item-name">{{localize 'DS4.ItemName'}}</div>
+            {{!-- rank info --}}
+            <div class="flex3">{{localize 'DS4.TalentRank'}}</div>
+            {{!-- description --}}
+            <div class="flex4">{{localize 'DS4.Description'}}</div>
+            {{!-- add button --}}
+            {{> addItemButton dataType='talent' }}
+        </li>
+        {{#each itemsByType.talent as |item id|}}
+            {{> talentListEntry item=item}}
+        {{/each}}
+    </ol>
+</div>

src/templates/item/talent-sheet.hbs

@@ -0,0 +1,63 @@
+
+{{#*inline "talentRankSideProperty" }}
+<div class="side-property">
+    <label for="data.talentRank.{{property}}">{{localize localizeString}}</label>
+    <input type="number" min="0" step="1" data-dtype="Number" {{disabled}}
+        {{#if (eq property 'base') }}max="{{data.talentRank.max}}"{{/if}}
+        name="data.talentRank.{{property}}" value="{{lookup data.talentRank property}}" />
+</div>
+{{/inline}}
+
+
+<form class="{{cssClass}}" autocomplete="off">
+    <header class="sheet-header">
+        <img class="profile-img" src="{{item.img}}" data-edit="img" title="{{item.name}}" />
+        <div class="header-fields flexrow">
+            <h1 class="charname"><input name="name" type="text" value="{{item.name}}" placeholder="Name" /></h1>
+            <h2 class="item-type">{{localize (lookup config.itemTypes item.type)}}</h2>
+        </div>
+    </header>
+
+    {{!-- Sheet Tab Navigation --}}
+    <nav class="sheet-tabs tabs" data-group="primary">
+        <a class="item" data-tab="description">{{localize "DS4.Description"}}</a>
+        <a class="item" data-tab="effects">{{localize "DS4.Effects"}}</a>
+    </nav>
+
+    {{!-- Sheet Body --}}
+    <section class="sheet-body">
+        {{!-- The item tab for details. --}}
+        <div class="tab flexrow" data-group="primary" data-tab="description">
+            {{!-- As you add new fields, add them in here! --}}
+            <div class="side-properties">
+                {{!-- TODO: remove duplication of isOwned section here and in description.hbs--}}
+                {{#if isOwned}}
+                    {{#if (ne data.equipped undefined)}}<div class="side-property">
+                        <label for="data.equipped">{{localize 'DS4.ItemEquipped'}}</label>
+                        <input type="checkbox" name="data.equipped" data-dtype="Boolean" {{checked data.equipped}} title="{{localize 'DS4.ItemEquipped'}}">
+                    </div>
+                    {{/if}}
+                    <div class="side-property">
+                        <label for="data.actor">{{localize 'DS4.ItemOwner'}}</label>
+                        <a class="entity-link" draggable="true" data-entity="Actor" data-id="{{actor._id}}"><i
+                                class="fas fa-user"></i>{{actor.name}}</a>
+                    </div>
+                {{else}}
+                <span>{{localize "DS4.NotOwned"}}</span>
+                {{/if}}
+                {{> talentRankSideProperty data=data property='base' localizeString='DS4.TalentRankBase' }}
+                {{> talentRankSideProperty data=data property='max' localizeString='DS4.TalentRankMax'}}
+                {{> talentRankSideProperty data=data property='mod' localizeString='DS4.TalentRankMod'}}
+                {{> talentRankSideProperty data=data property='total' localizeString='DS4.TalentRankTotal' disabled='disabled'}}
+            </div>
+            <div class="description" title="{{localize 'DS4.Description'}}">
+                {{editor content=data.description target="data.description" button=true owner=owner editable=editable}}
+            </div>
+        </div>
+        
+    </section>
+
+    {{!-- Effects Tab --}}
+    {{> systems/ds4/templates/item/partials/effects.hbs}}
+
+</form>