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
This commit is contained in:
Gesina Schwalbe 2020-12-29 01:44:54 +01:00
parent 2fc7fb13c8
commit 2ac6d3a919
5 changed files with 80 additions and 13 deletions

View file

@ -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, {

View file

@ -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;
}
}
}

View file

@ -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;
}

View file

@ -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="flexrow flex15">
<div></div> {{!-- equipped --}}
<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>#</div> {{!-- amount --}}
</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="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>
<h4 class="item-name">{{item.name}}</h4>
{{!-- amount --}}
<div>{{itemData.quantity}}</div>
</div>
{{!-- name --}}
<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>

View file

@ -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>