working weapons section in char sheet

Additions:
- re-added getData() method of actor sheet for sorted items
- added an item-description CSS class for handling of overflow
- added a 1.5 CSS flex box

Changes:
- restricted previous sample items section to only weapons
  (to be re-used for other item types)

Fixes:
- fixed input types in weapon sheet

src/module/actor/actor-sheet.ts

@@ -6,6 +6,21 @@ import { DS4ActorDataType } from "./actor-data";
  * @extends {ActorSheet}
  */
 export class DS4ActorSheet extends ActorSheet<DS4ActorDataType, DS4Actor> {
+    /**
+     * 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 items explicitly sorted by type to the data:
+        const itemsByType = this.actor.itemTypes;
+        data["itemsByType"] = itemsByType;
+        console.log("Shields:", data);
+        return data;
+    }
+
     /** @override */
     static get defaultOptions(): FormApplicationOptions {
         return mergeObject(super.defaultOptions, {

src/scss/components/_items.scss

@@ -32,4 +32,15 @@
         flex: 0 0 86px;
         text-align: right;
     }
+
+    .item-description {
+        font-size: 75%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        p {
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+    }
 }

src/scss/global/_flex.scss

@@ -15,6 +15,9 @@
     .flex1 {
         flex: 1;
     }
+    .flex15 {
+        flex: 1.5;
+    }
     .flex2 {
         flex: 2;
     }
@@ -38,6 +41,9 @@
     .flex1 {
         flex: 1;
     }
+    .flex15 {
+        flex: 1.5;
+    }
     .flex2 {
         flex: 2;
     }

src/templates/actor/partials/items.hbs

@@ -1,26 +1,61 @@
+{{!-- TODO: add localization! --}}
 {{!-- Tab with overview and quick-actions on owned items --}}
 <div class="tab items" data-group="primary" data-tab="items">
+
+    {{!-- WEAPONS --}}
+    <h3>Weapons</h3>
     <ol class="items-list">
         <li class="item flexrow item-header">
-            <div class="item-image"></div>
+            <div class="flexrow flex15">
-            <div class="item-name">Name</div>
+                <div></div> {{!-- equipped --}}
-            <div class="item-controls">
+                <div class="item-image"></div>
-                <a class="item-control item-create" title="Create item" data-type="weapon"
+                <div>#</div> {{!-- amount --}}
-                    ><i class="fas fa-plus"></i> Add item</a
+            </div>
-                >
+            <div class="item-name flex2">Name</div>
+            <div>AT</div> {{!-- attack type --}} {{!-- SPECIFIC --}}
+            <div class="flexrow flex15">
+                <div>WB</div> {{!-- weapon bonus --}} {{!-- SPECIFIC --}}
+                <div>OD</div> {{!-- opponent defence --}} {{!-- SPECIFIC --}}
+            </div>
+            <div class="flex4">Desc</div> {{!-- description --}}
+            {{!-- add button --}}
+            <div class="item-controls"> {{!-- SPECIFIC --}}
+                <a class="item-control item-create" title="Create item" data-type="weapon"><i class="fas fa-plus"></i>
+                    Add item</a> {{!-- SPECIFIC --}}
             </div>
         </li>
-        {{#each actor.items as |item id|}}
+        {{#each itemsByType.weapon as |item id|}} {{!-- SPECIFIC --}}
+        {{#with item.data.data as |itemData|}}
         <li class="item flexrow" data-item-id="{{item._id}}">
-            <div class="item-image">
+            <div class="flexrow flex15">
-                <img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
+                {{!-- 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>{{itemData.quantity}}</div>
             </div>
-            <h4 class="item-name">{{item.name}}</h4>
+            {{!-- name --}}
-            <div class="item-controls">
+            <h4 class="item-name flex2">{{item.name}}</h4>
+            {{!-- item specifics --}}
+            <div>{{itemData.attackType}}</div> {{!-- SPECIFIC --}}
+            <div class="flexrow flex15">
+                <div>{{itemData.weaponBonus}}</div> {{!-- SPECIFIC --}}
+                <div>{{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>
 </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>