Merge branch '004_equipment_tracking' into 'master'

Item list in char sheet

See merge request dungeonslayers/ds4!6

src/lang/en.json

@@ -1,5 +1,7 @@
 {
+    "DS4.UserInteractionAddItem": "Add item",
     "DS4.Description": "Description",
+    "DS4.DescriptionAbbr": "Desc",
     "DS4.Details": "Details",
     "DS4.Effects": "Effects",
     "DS4.AttackType": "Attack Type",
@@ -14,6 +16,7 @@
     "DS4.Quantity": "Quantity",
     "DS4.PriceGold": "Price (Gold)",
     "DS4.StorageLocation": "Stored at",
+    "DS4.ItemEquipped": "Item equipped?",
     "DS4.ItemAvailability": "Availability",
     "DS4.ItemAvailabilityHamlet": "Hamlet",
     "DS4.ItemAvailabilityVilage": "Village",
@@ -22,14 +25,18 @@
     "DS4.ItemAvailabilityDwarves": "Dwarves",
     "DS4.ItemAvailabilityUnset": "Unset",
     "DS4.ItemAvailabilityNowhere": "Nowhere",
+    "DS4.ItemName": "Name",
     "DS4.ItemTypeWeapon": "Weapon",
     "DS4.ItemTypeArmor": "Armor",
     "DS4.ItemTypeShield": "Shield",
     "DS4.ItemTypeTrinket": "Trinket",
     "DS4.ItemTypeEquipment": "Equipment",
     "DS4.ArmorType": "Armor Type",
+    "DS4.ArmorTypeAbbr": "AT",
     "DS4.ArmorMaterialType": "Material Type",
+    "DS4.ArmorMaterialTypeAbbr": "Mat.",
     "DS4.ArmorValue": "Armor Value",
+    "DS4.ArmorValueAbbr": "AV",
     "DS4.ArmorTypeBody": "Body",
     "DS4.ArmorTypeHelmet": "Helmet",
     "DS4.ArmorTypeVambrace": "Vambrace",

src/module/actor/actor-sheet.ts

@@ -7,11 +7,29 @@ import { DS4ActorDataType } from "./actor-data";
  * @extends {ActorSheet}
  */
 export class DS4ActorSheet extends ActorSheet<DS4ActorDataType, DS4Actor, DS4ItemDataType> {
+    /**
+     * This method returns the data for the template of the actor sheet.
+     * It explicitly adds the items of the object sorted by type in the
+     * object itemsByType.
+     * @returns the data fed to the template of the actor sheet
+     */
+    getData(): ActorSheetData<DS4ActorDataType, DS4Actor> {
+        const data = {
+            ...super.getData(),
+            // Add the localization config to the data:
+            config: CONFIG.DS4,
+            // Add the items explicitly sorted by type to the data:
+            itemsByType: this.actor.itemTypes,
+        };
+        console.log("Data:", data);
+        return data;
+    }
+
     /** @override */
     static get defaultOptions(): FormApplicationOptions {
         return mergeObject(super.defaultOptions, {
             classes: ["ds4", "sheet", "actor"],
-            template: "systems/ds4/templates/actor/actor-sheet.html",
+            template: "systems/ds4/templates/actor/actor-sheet.hbs",
             width: 600,
             height: 600,
             tabs: [{ navSelector: ".sheet-tabs", contentSelector: ".sheet-body", initial: "description" }],

src/module/ds4.ts

@@ -36,6 +36,7 @@ async function registerHandlebarsPartials() {
         "systems/ds4/templates/item/partials/details.hbs",
         "systems/ds4/templates/item/partials/effects.hbs",
         "systems/ds4/templates/item/partials/body.hbs",
+        "systems/ds4/templates/actor/partials/items.hbs",
     ];
     return loadTemplates(templatePaths);
 }

src/module/item/item-sheet.ts

@@ -26,8 +26,8 @@ export class DS4ItemSheet extends ItemSheet<DS4ItemDataType, DS4Item> {
 
     /** @override */
     getData(): ItemSheetData<DS4ItemDataType, DS4Item> {
-        console.log(this);
         const data = { ...super.getData(), config: CONFIG.DS4 };
+        console.log(data);
         return data;
     }
 

src/scss/components/_apps.scss

@@ -7,9 +7,15 @@
         overflow: hidden;
     }
 
+    .sheet-body {
+        overflow-y: auto;
+    }
     .tab {
         height: 100%;
-        overflow-y: auto;
+        overflow-y: visible;
         align-content: flex-start;
+        ol {
+            overflow-y: visible;
+        }
     }
 }

src/scss/components/_items.scss

@@ -32,4 +32,32 @@
         flex: 0 0 86px;
         text-align: right;
     }
+
+    .item-num-val {
+        text-align: center;
+    }
+
+    .item-description {
+        font-size: 75%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        p {
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+        p:first-child {
+            margin-top: 0px;
+            padding-top: 0px;
+        }
+
+    }
 }
+
+.items-list-title {
+    margin-top: 2em;
+    margin-bottom: 0px;
+    padding-left: 1em;
+    border-bottom: 2px groove $c-border-groove;
+    font-weight: bold;
+}

src/scss/global/_flex.scss

@@ -12,9 +12,15 @@
         flex: 1;
     }
 
+    .flex05 {
+        flex: 0.5;
+    }
     .flex1 {
         flex: 1;
     }
+    .flex15 {
+        flex: 1.5;
+    }
     .flex2 {
         flex: 2;
     }
@@ -35,9 +41,15 @@
         flex: 1;
     }
 
+    .flex05 {
+        flex: 0.5;
+    }
     .flex1 {
         flex: 1;
     }
+    .flex15 {
+        flex: 1.5;
+    }
     .flex2 {
         flex: 2;
     }

src/templates/actor/actor-sheet.hbs

@@ -60,31 +60,7 @@
             {{editor content=data.biography target="data.biography" button=true owner=owner editable=editable}}
         </div>
 
-        {{!-- Owned Items Tab --}}
+        {{!-- Items Tab --}}
-        <div class="tab items" data-group="primary" data-tab="items">
+        {{> systems/ds4/templates/actor/partials/items.hbs}}
-            <ol class="items-list">
-                <li class="item flexrow item-header">
-                    <div class="item-image"></div>
-                    <div class="item-name">Name</div>
-                    <div class="item-controls">
-                        <a class="item-control item-create" title="Create item" data-type="weapon"
-                            ><i class="fas fa-plus"></i> Add item</a
-                        >
-                    </div>
-                </li>
-                {{#each actor.items as |item id|}}
-                <li class="item flexrow" data-item-id="{{item._id}}">
-                    <div class="item-image">
-                        <img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
-                    </div>
-                    <h4 class="item-name">{{item.name}}</h4>
-                    <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>
-                </li>
-                {{/each}}
-            </ol>
-        </div>
     </section>
 </form>

src/templates/actor/partials/items.hbs

@@ -0,0 +1,262 @@
+{{!-- TODO: Where possible use icons with complete names as hovers instead of long names --}}
+{{!-- Tab with overview and quick-actions on owned items --}}
+<div class="tab items" data-group="primary" data-tab="items">
+
+    {{!-- WEAPONS --}}
+    <h4 class="items-list-title">{{localize "DS4.ItemTypeWeapon"}}</h4> {{!-- SPECIFIC --}}
+    <ol class="items-list">
+        <li class="item flexrow item-header">
+            <div class="flexrow flex15">
+                <div title="{{localize "DS4.ItemEquipped"}}">E</div> {{!-- equipped --}} {{!-- SPECIFIC --}}
+                <div class="item-image"></div>
+                <div class="item-num-val" title="{{localize "DS4.Quantity"}}">#</div> {{!-- amount --}}
+            </div>
+            <div class="item-name flex3">{{localize "DS4.ItemName"}}</div>
+            <div title="{{localize "DS4.AttackType"}}">{{localize "DS4.AttackTypeAbbr"}}</div> {{!-- SPECIFIC --}}
+            <div class="flexrow flex15">
+                <div class="item-num-val" title="{{localize "DS4.WeaponBonus"}}">{{localize "DS4.WeaponBonusAbbr"}}</div> {{!-- SPECIFIC --}}
+                <div class="item-num-val" title="{{localize "DS4.OpponentDefense"}}">{{localize "DS4.OpponentDefenseAbbr"}}</div> {{!-- SPECIFIC --}}
+            </div>
+            <div class="flex4">{{localize "DS4.Description"}}</div>
+            {{!-- add button --}}
+            <div class="item-controls"> {{!-- SPECIFIC --}}
+                <a class="item-control item-create" title="Create item" data-type="weapon"{{!-- SPECIFIC --}}>
+                    <i class="fas fa-plus"></i>
+                    {{localize "DS4.UserInteractionAddItem"}}</a>
+            </div>
+        </li>
+        {{#each itemsByType.weapon as |item id|}} {{!-- SPECIFIC --}}
+        {{#with item.data.data as |itemData|}}
+        <li class="item flexrow" data-item-id="{{item._id}}">
+            <div class="flexrow flex15">
+                {{!-- equipped? --}}
+                {{#if itemData.equipped}}<i class="fas fa-check-square"></i>
+                {{else}}<i class="far fa-square"></i>
+                {{/if}} {{!--SPECIFIC --}}
+                {{!-- image --}}
+                <div class="item-image">
+                    <img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
+                </div>
+                {{!-- amount --}}
+                <div class="item-num-val">{{itemData.quantity}}</div>
+            </div>
+            {{!-- name --}}
+            <h4 class="item-name flex3">{{item.name}}</h4>
+            {{!-- item specifics --}}
+            <div>{{lookup ../../config.attackTypes itemData.attackType}}</div> {{!-- SPECIFIC --}}
+            <div class="flexrow flex15">
+                <div class="item-num-val">{{itemData.weaponBonus}}</div> {{!-- SPECIFIC --}}
+                <div class="item-num-val">{{itemData.opponentDefense}}</div> {{!-- SPECIFIC --}}
+            </div>
+            {{!-- description --}}
+            <div class="flex4 item-description">{{{itemData.description}}}</div>
+            {{!-- edit & delete buttons --}}
+            <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>
+        </li>
+        {{/with}}
+        {{/each}}
+    </ol>
+
+    {{!-- ARMOR --}}
+    <h4 class="items-list-title">{{localize "DS4.ItemTypeArmor"}}</h4> {{!-- SPECIFIC --}}
+    <ol class="items-list">
+        <li class="item flexrow item-header">
+            <div class="flexrow flex15">
+                <div title="{{localize "DS4.ItemEquipped"}}">E</div> {{!-- equipped --}} {{!-- SPECIFIC --}}
+                <div class="item-image"></div>
+                <div class="item-num-val" title="{{localize "DS4.Quantity"}}">#</div> {{!-- amount --}}
+            </div>
+            <div class="item-name flex3">{{localize "DS4.ItemName"}}</div>
+            <div title="{{localize "DS4.ArmorMaterialType"}}">{{localize "DS4.ArmorMaterialTypeAbbr"}}</div> {{!-- SPECIFIC --}}
+            <div title="{{localize "DS4.ArmorType"}}">{{localize "DS4.ArmorTypeAbbr"}}</div> {{!-- SPECIFIC --}}
+            <div class="flex05 item-num-val" title="{{localize "DS4.ArmorValue"}}">{{localize "DS4.ArmorValueAbbr"}}</div> {{!-- SPECIFIC --}}
+            <div class="flex4">{{localize "DS4.Description"}}</div>
+            {{!-- add button --}}
+            <div class="item-controls"> {{!-- SPECIFIC --}}
+                <a class="item-control item-create" title="Create item" data-type="armor"{{!-- SPECIFIC --}}>
+                    <i class="fas fa-plus"></i>
+                    {{localize "DS4.UserInteractionAddItem"}}</a>
+            </div>
+        </li>
+        {{#each itemsByType.armor as |item id|}} {{!-- SPECIFIC --}}
+        {{#with item.data.data as |itemData|}}
+        <li class="item flexrow" data-item-id="{{item._id}}">
+            <div class="flexrow flex15">
+                {{!-- equipped? --}}
+                {{#if itemData.equipped}}<i class="fas fa-check-square"></i>
+                {{else}}<i class="far fa-square"></i>
+                {{/if}} {{!--SPECIFIC --}}
+                {{!-- image --}}
+                <div class="item-image">
+                    <img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
+                </div>
+                {{!-- amount --}}
+                <div class="item-num-val">{{itemData.quantity}}</div>
+            </div>
+            {{!-- name --}}
+            <h4 class="item-name flex3">{{item.name}}</h4>
+            {{!-- item specifics --}}
+            <div>{{lookup ../../config.armorMaterialTypes itemData.armorMaterialType}}</div> {{!-- SPECIFIC --}}
+            <div>{{lookup ../../config.armorTypes itemData.armorType}}</div> {{!-- SPECIFIC --}}
+            <div class="flex05 item-num-val">{{itemData.armorValue}}</div> {{!-- SPECIFIC --}}
+            {{!-- description --}}
+            <div class="flex4 item-description">{{{itemData.description}}}</div>
+            {{!-- edit & delete buttons --}}
+            <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>
+        </li>
+        {{/with}}
+        {{/each}}
+    </ol>
+
+
+    {{!-- SHIELD --}}
+    <h4 class="items-list-title">{{localize "DS4.ItemTypeShield"}}</h4> {{!-- SPECIFIC --}}
+    <ol class="items-list">
+        <li class="item flexrow item-header">
+            <div class="flexrow flex15">
+                <div title="{{localize "DS4.ItemEquipped"}}">E</div> {{!-- equipped --}} {{!-- SPECIFIC --}}
+                <div class="item-image"></div>
+                <div class="item-num-val" title="{{localize "DS4.Quantity"}}">#</div> {{!-- amount --}}
+            </div>
+            <div class="item-name flex3">{{localize "DS4.ItemName"}}</div>
+            <div class="flex05 item-num-val" title="{{localize "DS4.ArmorValue"}}">{{localize "DS4.ArmorValueAbbr"}}</div> {{!-- SPECIFIC --}}
+            <div class="flex4">{{localize "DS4.Description"}}</div>
+            {{!-- add button --}}
+            <div class="item-controls"> {{!-- SPECIFIC --}}
+                <a class="item-control item-create" title="Create item" data-type="shield"{{!-- SPECIFIC --}}>
+                    <i class="fas fa-plus"></i>
+                    {{localize "DS4.UserInteractionAddItem"}}</a>
+            </div>
+        </li>
+        {{#each itemsByType.shield as |item id|}} {{!-- SPECIFIC --}}
+        {{#with item.data.data as |itemData|}}
+        <li class="item flexrow" data-item-id="{{item._id}}">
+            <div class="flexrow flex15">
+                {{!-- equipped? --}}
+                {{#if itemData.equipped}}<i class="fas fa-check-square"></i>
+                {{else}}<i class="far fa-square"></i>
+                {{/if}} {{!--SPECIFIC --}}
+                {{!-- image --}}
+                <div class="item-image">
+                    <img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
+                </div>
+                {{!-- amount --}}
+                <div class="item-num-val">{{itemData.quantity}}</div>
+            </div>
+            {{!-- name --}}
+            <h4 class="item-name flex3">{{item.name}}</h4>
+            {{!-- item specifics --}}
+            <div class="flex05 item-num-val">{{itemData.armorValue}}</div> {{!-- SPECIFIC --}}
+            {{!-- description --}}
+            <div class="flex4 item-description">{{{itemData.description}}}</div>
+            {{!-- edit & delete buttons --}}
+            <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>
+        </li>
+        {{/with}}
+        {{/each}}
+    </ol>
+
+    {{!-- TRINKET --}}
+    <h4 class="items-list-title">{{localize "DS4.ItemTypeTrinket"}}</h4> {{!-- SPECIFIC --}}
+    <ol class="items-list">
+        <li class="item flexrow item-header">
+            <div class="flexrow flex15">
+                <div title="{{localize "DS4.ItemEquipped"}}">E</div> {{!-- equipped --}} {{!-- SPECIFIC --}}
+                <div class="item-image"></div>
+                <div class="item-num-val" title="{{localize "DS4.Quantity"}}">#</div> {{!-- amount --}}
+            </div>
+            <div class="item-name flex3">{{localize "DS4.ItemName"}}</div>
+            <div class="flex2">{{localize "DS4.StorageLocation"}}</div>  {{!-- SPECIFIC --}}
+            <div class="flex4">{{localize "DS4.Description"}}</div>
+            {{!-- add button --}}
+            <div class="item-controls"> {{!-- SPECIFIC --}}
+                <a class="item-control item-create" title="Create item" data-type="trinket"{{!-- SPECIFIC --}}>
+                    <i class="fas fa-plus"></i>
+                    {{localize "DS4.UserInteractionAddItem"}}</a>
+            </div>
+        </li>
+        {{#each itemsByType.trinket as |item id|}} {{!-- SPECIFIC --}}
+        {{#with item.data.data as |itemData|}}
+        <li class="item flexrow" data-item-id="{{item._id}}">
+            <div class="flexrow flex15">
+                {{!-- equipped? --}}
+                {{#if itemData.equipped}}<i class="fas fa-check-square"></i>
+                {{else}}<i class="far fa-square"></i>
+                {{/if}} {{!--SPECIFIC --}}
+                {{!-- image --}}
+                <div class="item-image">
+                    <img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
+                </div>
+                {{!-- amount --}}
+                <div class="item-num-val">{{itemData.quantity}}</div>
+            </div>
+            {{!-- name --}}
+            <h4 class="item-name flex3">{{item.name}}</h4>
+            {{!-- storage location --}}
+            <div class="flex2">{{{itemData.storageLocation}}}</div>  {{!-- SPECIFIC --}}
+            {{!-- description --}}
+            <div class="flex4 item-description">{{{itemData.description}}}</div>
+            {{!-- edit & delete buttons --}}
+            <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>
+        </li>
+        {{/with}}
+        {{/each}}
+    </ol>
+
+    {{!-- EQUIPMENT --}}
+    <h4 class="items-list-title">{{localize "DS4.ItemTypeEquipment"}}</h4> {{!-- SPECIFIC --}}
+    <ol class="items-list">
+        <li class="item flexrow item-header">
+            <div class="flexrow flex15">
+                <div class="item-image"></div>
+                <div class="item-num-val" title="{{localize "DS4.Quantity"}}">#</div> {{!-- amount --}}
+            </div>
+            <div class="item-name flex3">{{localize "DS4.ItemName"}}</div>
+            <div class="flex2">{{localize "DS4.StorageLocation"}}</div>  {{!-- SPECIFIC --}}
+            <div class="flex4">{{localize "DS4.Description"}}</div>
+            {{!-- add button --}}
+            <div class="item-controls"> {{!-- SPECIFIC --}}
+                <a class="item-control item-create" title="Create item" data-type="equipment" {{!-- SPECIFIC --}}>
+                    <i class="fas fa-plus"></i>
+                    {{localize "DS4.UserInteractionAddItem"}}</a>
+            </div>
+        </li>
+        {{#each itemsByType.equipment as |item id|}} {{!-- SPECIFIC --}}
+        {{#with item.data.data as |itemData|}}
+        <li class="item flexrow" data-item-id="{{item._id}}">
+            <div class="flexrow flex15">
+                {{!-- image --}}
+                <div class="item-image">
+                    <img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
+                </div>
+                {{!-- amount --}}
+                <div class="item-num-val">{{itemData.quantity}}</div>
+            </div>
+            {{!-- name --}}
+            <h4 class="item-name flex3">{{item.name}}</h4>
+            {{!-- storage location --}}
+            <div class="flex2">{{{itemData.storageLocation}}}</div>  {{!-- SPECIFIC --}}
+            {{!-- description --}}
+            <div class="flex4 item-description">{{{itemData.description}}}</div>
+            {{!-- edit & delete buttons --}}
+            <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>
+        </li>
+        {{/with}}
+        {{/each}}
+    </ol>
+</div>

src/templates/item/weapon-sheet.hbs

@@ -17,12 +17,12 @@
                 </div>
                 <div class="basic-property">
                     <label class="basic-property-label">{{localize "DS4.WeaponBonus"}}</label>
-                    <input class="basic-property-input" type="text" name="data.weaponBonus" value="{{data.weaponBonus}}"
+                    <input class="basic-property-input" type="number" name="data.weaponBonus" value="{{data.weaponBonus}}"
                         placeholder="0" data-dtype="Number" />
                 </div>
                 <div class="basic-property">
                     <label class="basic-property-label">{{localize "DS4.OpponentDefense"}}</label>
-                    <input class="basic-property-input" type="text" name="data.opponentDefense"
+                    <input class="basic-property-input" type="number" name="data.opponentDefense"
                         value="{{data.opponentDefense}}" placeholder="0" data-dtype="Number" />
                 </div>
             </div>