diff --git a/src/module/actor/actor-sheet.ts b/src/module/actor/actor-sheet.ts index d08e488f..51eb9e65 100644 --- a/src/module/actor/actor-sheet.ts +++ b/src/module/actor/actor-sheet.ts @@ -62,6 +62,8 @@ export class DS4ActorSheet extends ActorSheet this.render(false)); }); + html.find(".item-change").on("change", this._onItemChange.bind(this)); + // Rollable abilities. html.find(".rollable").click(this._onRoll.bind(this)); } @@ -70,7 +72,7 @@ export class DS4ActorSheet extends ActorSheet { @@ -95,9 +97,93 @@ export class DS4ActorSheet extends ActorSheet} ev The originating change event + * @private + */ + private _onItemChange(ev: JQuery.ChangeEvent): void { + ev.preventDefault(); + console.log("Current target:", $(ev.currentTarget).get(0)["name"]); + const el: HTMLFormElement = $(ev.currentTarget).get(0); + const id = $(ev.currentTarget).parents(".item").data("itemId"); + const item = duplicate(this.actor.getOwnedItem(id)); // getOwnedItem is typed incorrectly, it actually returns a ItemData, not an Item + const property: string | undefined = $(ev.currentTarget).data("property"); + + // Early return: + // Disabled => do nothing + if (el.disabled || el.getAttribute("disabled")) return; + // name not given => raise + if (property === undefined) { + throw TypeError("HTML element does not provide 'data-property' attribute"); + } + + // Set new value + const newValue = this.getValue(el); + setProperty(item, property, newValue); + this.actor.updateOwnedItem(item); + } + + /** + * Collect the value of a form element depending on the element's type + * The value is parsed to: + * - Checkbox: boolean + * - Text input: string + * - Number: number + * @param el the input element to collect the value of + */ + private getValue(el: HTMLFormElement): boolean | string | number { + // One needs to differentiate between e.g. checkboxes (value="on") and select boxes etc. + // Checkbox: + if (el.type === "checkbox") { + const value: boolean = el.checked; + return value; + } + + // Text input: + else if (el.type === "text") { + const value: string = el.value; + return value; + } + + // Numbers: + else if (el.type === "number") { + const value = Number(el.value.trim()); + return value; + } + + // // Ranges: + // else if (el.type === "range") { + // const value: string = el.value.trim(); + // return value; + // } + + // // Radio Checkboxes (untested, cf. FormDataExtended.process) + // else if (el.type === "radio") { + // const chosen: HTMLFormElement = el.find((r: HTMLFormElement) => r["checked"]); + // const value: string = chosen ? chosen.value : null; + // return value; + // } + + // // Multi-Select (untested, cf. FormDataExtended.process) + // else if (el.type === "select-multiple") { + // const value: Array = []; + // el.options.array.forEach((opt: HTMLOptionElement) => { + // if (opt.selected) value.push(opt.value); + // }); + // return value; + + // unsupported: + else { + throw TypeError("Binding of item property to this type of HTML element not supported; given: " + el); + } + } + /** * Handle clickable rolls. - * @param {Event} event The originating click event + * @param {JQuery.ClickEvent} event The originating click event * @private */ private _onRoll(event: JQuery.ClickEvent): void { diff --git a/src/scss/components/_items.scss b/src/scss/components/_items.scss index 3f089ca3..4dd97f78 100644 --- a/src/scss/components/_items.scss +++ b/src/scss/components/_items.scss @@ -1,3 +1,5 @@ +@use "sass:color"; + .items-list { list-style: none; margin: 7px 0; @@ -16,13 +18,26 @@ .item-image { flex: 0 0 24px; - margin-right: 5px; + height: 100%; + //margin-right: 5px; + @include centered-content; } img { display: block; border: none; } + + input { + border: 0; + padding: 0; + } + + input[type="checkbox"] { + width: auto; + height: 100%; + margin: 0px; + } } .item-name { @@ -36,6 +51,11 @@ .item-num-val { text-align: center; + width: 2.5em; + padding: 0; + } + .item-num-val:invalid { + background-color: color.mix(lightcoral, $c-light-grey, 25%); } .item-description { @@ -43,6 +63,7 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + height: 100%; p { text-overflow: ellipsis; overflow: hidden; diff --git a/src/templates/actor/partials/items-overview.hbs b/src/templates/actor/partials/items-overview.hbs index f0840f59..0cc57faf 100644 --- a/src/templates/actor/partials/items-overview.hbs +++ b/src/templates/actor/partials/items-overview.hbs @@ -12,7 +12,7 @@ --}} {{#*inline "addItemButton"}}
- + {{localize 'DS4.UserInteractionAddItem'}}
@@ -44,14 +44,14 @@
  • {{!-- equipped --}} {{#if (ne dataType 'equipment')}} -
    E
    +
    E
    {{/if}} {{!-- image --}} -
    +
    {{!-- amount --}} -
    #
    +
    #
    {{!-- name --}} -
    {{localize 'DS4.ItemName'}}
    +
    {{localize 'DS4.ItemName'}}
    {{!-- item type specifics --}} {{> @partial-block }} {{!-- description --}} @@ -76,20 +76,19 @@
  • {{!-- equipped --}} {{#if (ne item.data.data.equipped undefined)}} - {{#if item.data.data.equipped}} - {{else}} - {{/if}} + {{/if}} -
    - {{!-- image --}} -
    - -
    - {{!-- amount --}} -
    {{item.data.data.quantity}}
    + {{!-- image --}} +
    +
    + {{!-- amount --}} + {{!-- name --}} -

    {{item.name}}

    + {{!-- item type specifics --}} {{> @partial-block}} {{!-- description --}} @@ -109,22 +108,22 @@

    {{localize 'DS4.ItemTypeWeapon'}}

      {{#> itemListHeader dataType='weapon'}} -
      {{localize 'DS4.AttackTypeAbbr'}}
      -
      +
      {{localize 'DS4.AttackTypeAbbr'}}
      +
      {{localize 'DS4.WeaponBonusAbbr'}}
      -
      +
      {{localize 'DS4.OpponentDefenseAbbr'}}
      {{/itemListHeader}} {{#each itemsByType.weapon as |item id|}} {{#> itemListEntry item=item}} -
      +
      -
      {{ item.data.data.weaponBonus}}
      -
      {{ item.data.data.opponentDefense}}
      +
      {{ item.data.data.weaponBonus}}
      +
      {{ item.data.data.opponentDefense}}
      {{/itemListEntry}} {{/each}}
    @@ -176,7 +175,8 @@ {{/itemListHeader}} {{#each itemsByType.trinket as |item id|}} {{#> itemListEntry item=item }} -
    {{{item.data.data.storageLocation}}}
    + {{/itemListEntry}} {{/each}} @@ -189,7 +189,8 @@ {{/itemListHeader}} {{#each itemsByType.equipment as |item id|}} {{#> itemListEntry item=item }} -
    {{{item.data.data.storageLocation}}}
    + {{/itemListEntry}} {{/each}} diff --git a/src/templates/item/partials/description.hbs b/src/templates/item/partials/description.hbs index 96b24106..1776f1f2 100644 --- a/src/templates/item/partials/description.hbs +++ b/src/templates/item/partials/description.hbs @@ -13,7 +13,7 @@
    - +
    diff --git a/src/templates/item/partials/details.hbs b/src/templates/item/partials/details.hbs index 0e57a780..d4cfb918 100644 --- a/src/templates/item/partials/details.hbs +++ b/src/templates/item/partials/details.hbs @@ -4,7 +4,7 @@
    - +