From 6fac2c597fccb51a1d0970cc79a2b8c8380039ab Mon Sep 17 00:00:00 2001 From: Johannes Loher Date: Thu, 31 Dec 2020 12:10:59 +0100 Subject: [PATCH 01/11] make equip icon for items clickable in item list in character sheet --- src/module/actor/actor-sheet.ts | 9 ++++++++- src/module/item/item-data.ts | 2 +- src/templates/actor/partials/items.hbs | 18 +++++++++--------- 3 files changed, 18 insertions(+), 11 deletions(-) diff --git a/src/module/actor/actor-sheet.ts b/src/module/actor/actor-sheet.ts index d08e488f..e7c16819 100644 --- a/src/module/actor/actor-sheet.ts +++ b/src/module/actor/actor-sheet.ts @@ -1,4 +1,4 @@ -import { DS4ItemDataType } from "../item/item-data"; +import { DS4ItemDataType, DS4ItemEquipable } from "../item/item-data"; import { DS4Actor } from "./actor"; import { DS4ActorDataType } from "./actor-data"; @@ -62,6 +62,13 @@ export class DS4ActorSheet extends ActorSheet this.render(false)); }); + html.find(".item-equip").on("click", (ev) => { + const id = $(ev.currentTarget).parents(".item").data("itemId"); + const item = duplicate(this.actor.getEmbeddedEntity("OwnedItem", id)); + setProperty(item, "data.equipped", !getProperty(item, "data.equipped")); + this.actor.updateOwnedItem(item); + }); + // Rollable abilities. html.find(".rollable").click(this._onRoll.bind(this)); } diff --git a/src/module/item/item-data.ts b/src/module/item/item-data.ts index 58f4dc90..a7771d67 100644 --- a/src/module/item/item-data.ts +++ b/src/module/item/item-data.ts @@ -30,7 +30,7 @@ interface DS4ItemPhysical { storageLocation: string; } -interface DS4ItemEquipable { +export interface DS4ItemEquipable { equipped: boolean; } diff --git a/src/templates/actor/partials/items.hbs b/src/templates/actor/partials/items.hbs index 1c72cd46..0d09670f 100644 --- a/src/templates/actor/partials/items.hbs +++ b/src/templates/actor/partials/items.hbs @@ -5,7 +5,7 @@ {{!-- WEAPONS --}}

{{localize 'DS4.ItemTypeWeapon'}}

{{!-- SPECIFIC --}}
    -
  1. +
  2. E
    {{!-- equipped --}} {{!-- SPECIFIC --}}
    @@ -32,8 +32,8 @@
  3. {{!-- equipped? --}} - {{#if itemData.equipped}} - {{else}} + {{#if itemData.equipped}} + {{else}} {{/if}} {{!--SPECIFIC --}} {{!-- image --}}
    @@ -94,8 +94,8 @@
  4. {{!-- equipped? --}} - {{#if itemData.equipped}} - {{else}} + {{#if itemData.equipped}} + {{else}} {{/if}} {{!--SPECIFIC --}} {{!-- image --}}
    @@ -152,8 +152,8 @@
  5. {{!-- equipped? --}} - {{#if itemData.equipped}} - {{else}} + {{#if itemData.equipped}} + {{else}} {{/if}} {{!--SPECIFIC --}} {{!-- image --}}
    @@ -202,8 +202,8 @@
  6. {{!-- equipped? --}} - {{#if itemData.equipped}} - {{else}} + {{#if itemData.equipped}} + {{else}} {{/if}} {{!--SPECIFIC --}} {{!-- image --}}
    From 61213d399e9daffa8ab72dbd5518a92d7864d9a2 Mon Sep 17 00:00:00 2001 From: Johannes Loher Date: Thu, 31 Dec 2020 12:20:32 +0100 Subject: [PATCH 02/11] use getOwnedItem instead of getEmbeddedEntity --- src/module/actor/actor-sheet.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/module/actor/actor-sheet.ts b/src/module/actor/actor-sheet.ts index e7c16819..a972964b 100644 --- a/src/module/actor/actor-sheet.ts +++ b/src/module/actor/actor-sheet.ts @@ -64,8 +64,8 @@ export class DS4ActorSheet extends ActorSheet { const id = $(ev.currentTarget).parents(".item").data("itemId"); - const item = duplicate(this.actor.getEmbeddedEntity("OwnedItem", id)); - setProperty(item, "data.equipped", !getProperty(item, "data.equipped")); + const item = duplicate(this.actor.getOwnedItem(id)); // getOwnedItem is typed incorrectly, it actually returns a ItemData, not an Item + setProperty(item, "data.equipped", !getProperty(item, "data.equipped")); // TODO: use "."" accessors instead, once typing has been fixed this.actor.updateOwnedItem(item); }); From 62e96641b9239d7f2378cbe33828dc091eb66911 Mon Sep 17 00:00:00 2001 From: Johannes Loher Date: Thu, 31 Dec 2020 12:21:24 +0100 Subject: [PATCH 03/11] remove unnecessary imports --- src/module/actor/actor-sheet.ts | 2 +- src/module/item/item-data.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/module/actor/actor-sheet.ts b/src/module/actor/actor-sheet.ts index a972964b..779f5c8a 100644 --- a/src/module/actor/actor-sheet.ts +++ b/src/module/actor/actor-sheet.ts @@ -1,4 +1,4 @@ -import { DS4ItemDataType, DS4ItemEquipable } from "../item/item-data"; +import { DS4ItemDataType } from "../item/item-data"; import { DS4Actor } from "./actor"; import { DS4ActorDataType } from "./actor-data"; diff --git a/src/module/item/item-data.ts b/src/module/item/item-data.ts index a7771d67..58f4dc90 100644 --- a/src/module/item/item-data.ts +++ b/src/module/item/item-data.ts @@ -30,7 +30,7 @@ interface DS4ItemPhysical { storageLocation: string; } -export interface DS4ItemEquipable { +interface DS4ItemEquipable { equipped: boolean; } From fec7a2a735245a14d8b9257bb7bac5e457f67b71 Mon Sep 17 00:00:00 2001 From: Johannes Loher Date: Thu, 31 Dec 2020 12:22:15 +0100 Subject: [PATCH 04/11] fix typo --- src/templates/actor/partials/items.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/templates/actor/partials/items.hbs b/src/templates/actor/partials/items.hbs index 0d09670f..0f8da315 100644 --- a/src/templates/actor/partials/items.hbs +++ b/src/templates/actor/partials/items.hbs @@ -5,7 +5,7 @@ {{!-- WEAPONS --}}

    {{localize 'DS4.ItemTypeWeapon'}}

    {{!-- SPECIFIC --}}
      -
    1. +
    2. E
      {{!-- equipped --}} {{!-- SPECIFIC --}}
      From d8423ce364242f111b15427732806ef75caad1ce Mon Sep 17 00:00:00 2001 From: Gesina Schwalbe Date: Fri, 1 Jan 2021 19:26:52 +0100 Subject: [PATCH 05/11] data binding for owned item properties Additions: - now also text, number, and range input fields of owned items can be bound to HTML (input) elements of the char sheet Changes: - moved prototype handle for checkboxes to own function - replaced some static HTML elements in item list with input fields - item-num-val HTML elements (e.g. item quantity) now have a max-width --- src/module/actor/actor-sheet.ts | 68 +++++++++++++++++++++++--- src/scss/components/_items.scss | 1 + src/templates/actor/partials/items.hbs | 64 ++++++++++++++---------- 3 files changed, 100 insertions(+), 33 deletions(-) diff --git a/src/module/actor/actor-sheet.ts b/src/module/actor/actor-sheet.ts index 779f5c8a..ee1860a2 100644 --- a/src/module/actor/actor-sheet.ts +++ b/src/module/actor/actor-sheet.ts @@ -62,12 +62,7 @@ export class DS4ActorSheet extends ActorSheet this.render(false)); }); - html.find(".item-equip").on("click", (ev) => { - 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 - setProperty(item, "data.equipped", !getProperty(item, "data.equipped")); // TODO: use "."" accessors instead, once typing has been fixed - this.actor.updateOwnedItem(item); - }); + html.find(".item-change").on("change", this._onItemChange.bind(this)); // Rollable abilities. html.find(".rollable").click(this._onRoll.bind(this)); @@ -102,6 +97,67 @@ export class DS4ActorSheet extends ActorSheet): 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 = $(ev.currentTarget).data("property"); + let newValue; + + // 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"); + } + + // One needs to differentiate between e.g. checkboxes (value="on") and select boxes etc. + // Checkbox: + if (el.type === "checkbox") { + newValue = el.checked; //!getProperty(item, property); + } + + // Text input: + else if (el.type === "text") { + newValue = el.value; + } + + // Numbers and ranges: + else if (["number", "range"].includes(el.type)) { + newValue = el.value.trim(); + } + + // // Radio Checkboxes (untested, cf. FormDataExtended.process) + // else if (el.type === "radio") { + // const chosen: HTMLFormElement = el.find((r: HTMLFormElement) => r["checked"]); + // newValue = chosen ? chosen.value : null; + // } + + // // Multi-Select (untested, cf. FormDataExtended.process) + // else if (el.type === "select-multiple") { + // newValue = []; + // el.options.array.forEach((opt: HTMLOptionElement) => { + // if (opt.selected) newValue.push(opt.value); + // }); + + // unsupported: + else { + throw TypeError("Binding of item property to this type of HTML element not supported; given: " + el); + } + setProperty(item, property, newValue); + this.actor.updateOwnedItem(item); + } + /** * Handle clickable rolls. * @param {Event} event The originating click event diff --git a/src/scss/components/_items.scss b/src/scss/components/_items.scss index 3f089ca3..fe3370ab 100644 --- a/src/scss/components/_items.scss +++ b/src/scss/components/_items.scss @@ -36,6 +36,7 @@ .item-num-val { text-align: center; + max-width: 2.5em; } .item-description { diff --git a/src/templates/actor/partials/items.hbs b/src/templates/actor/partials/items.hbs index cda5f1e4..52349781 100644 --- a/src/templates/actor/partials/items.hbs +++ b/src/templates/actor/partials/items.hbs @@ -16,10 +16,12 @@
      {{localize 'DS4.ItemName'}}
      {{localize 'DS4.AttackTypeAbbr'}}
      {{!-- SPECIFIC --}}
      -
      {{localize 'DS4.WeaponBonusAbbr'}} +
      + {{localize 'DS4.WeaponBonusAbbr'}} +
      {{!-- SPECIFIC --}} +
      + {{localize 'DS4.OpponentDefenseAbbr'}}
      {{!-- SPECIFIC --}} -
      {{localize - 'DS4.OpponentDefenseAbbr'}}
      {{!-- SPECIFIC --}}
      {{localize 'DS4.Description'}}
      {{!-- add button --}} @@ -34,18 +36,19 @@
    3. {{!-- equipped? --}} - {{#if itemData.equipped}} - {{else}} - {{/if}} {{!--SPECIFIC --}} + {{!--SPECIFIC --}} {{!-- image --}}
      {{!-- amount --}} -
      {{itemData.quantity}}
      +
      {{!-- name --}} -

      {{item.name}}

      + {{!-- item specifics --}}
      {{!-- equipped? --}} - {{#if itemData.equipped}} - {{else}} - {{/if}} {{!--SPECIFIC --}} + {{!--SPECIFIC --}} {{!-- image --}}
      {{!-- amount --}} -
      {{itemData.quantity}}
      +
      {{!-- name --}} -

      {{item.name}}

      + {{!-- item specifics --}}
      {{lookup ../../config.armorMaterialTypesAbbr itemData.armorMaterialType}} @@ -154,18 +158,19 @@
    4. {{!-- equipped? --}} - {{#if itemData.equipped}} - {{else}} - {{/if}} {{!--SPECIFIC --}} + {{!--SPECIFIC --}} {{!-- image --}}
      {{!-- amount --}} -
      {{itemData.quantity}}
      +
      {{!-- name --}} -

      {{item.name}}

      + {{!-- item specifics --}}
      {{itemData.armorValue}}
      {{!-- SPECIFIC --}} {{!-- description --}} @@ -204,20 +209,22 @@
    5. {{!-- equipped? --}} - {{#if itemData.equipped}} - {{else}} - {{/if}} {{!--SPECIFIC --}} + {{!--SPECIFIC --}} {{!-- image --}}
      {{!-- amount --}} -
      {{itemData.quantity}}
      +
      {{!-- name --}} -

      {{item.name}}

      + {{!-- storage location --}} -
      {{{itemData.storageLocation}}}
      {{!-- SPECIFIC --}} + {{!-- SPECIFIC --}} {{!-- description --}}
      {{{itemData.description}}}
      {{!-- edit & delete buttons --}} @@ -257,12 +264,15 @@
    {{!-- amount --}} -
    {{itemData.quantity}}
    +
    {{!-- name --}} -

    {{item.name}}

    + {{!-- storage location --}} -
    {{{itemData.storageLocation}}}
    {{!-- SPECIFIC --}} + {{!-- SPECIFIC --}} {{!-- description --}}
    {{{itemData.description}}}
    {{!-- edit & delete buttons --}} From 4e60687b2bbf06b63cca10b73b7bb77005309bdb Mon Sep 17 00:00:00 2001 From: Gesina Schwalbe Date: Sun, 3 Jan 2021 21:24:32 +0100 Subject: [PATCH 06/11] unified class specifier in HTML elements - now all class=... is always first - flex attributes are first in class specifier - marked armor type image as item-image class --- .../actor/partials/items-overview.hbs | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/templates/actor/partials/items-overview.hbs b/src/templates/actor/partials/items-overview.hbs index 4faefc94..dac99439 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 @@
  7. {{!-- equipped --}} {{#if (ne dataType 'equipment')}} -
    E
    +
    E
    {{/if}} {{!-- image --}} -
    +
    {{!-- amount --}} -
    #
    +
    #
    {{!-- name --}} -
    {{localize 'DS4.ItemName'}}
    +
    {{localize 'DS4.ItemName'}}
    {{!-- item type specifics --}} {{> @partial-block }} {{!-- description --}} @@ -108,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}}
    @@ -175,7 +175,7 @@ {{/itemListHeader}} {{#each itemsByType.trinket as |item id|}} {{#> itemListEntry item=item }} - {{/itemListEntry}} {{/each}} @@ -189,7 +189,7 @@ {{/itemListHeader}} {{#each itemsByType.equipment as |item id|}} {{#> itemListEntry item=item }} - {{/itemListEntry}} {{/each}} From d9eef7592f5d5c682deda9e590f47208aefad2ba Mon Sep 17 00:00:00 2001 From: Gesina Schwalbe Date: Sun, 3 Jan 2021 21:50:16 +0100 Subject: [PATCH 07/11] fixed some issues with the flexbox approach - had to remove border, padding, and margin from input boxes - centered images - fixed y-overflow of description and images by restricting height --- src/scss/components/_items.scss | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/src/scss/components/_items.scss b/src/scss/components/_items.scss index fe3370ab..01358b75 100644 --- a/src/scss/components/_items.scss +++ b/src/scss/components/_items.scss @@ -16,13 +16,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,7 +49,8 @@ .item-num-val { text-align: center; - max-width: 2.5em; + width: 2.5em; + padding: 0; } .item-description { @@ -44,6 +58,7 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + height: 100%; p { text-overflow: ellipsis; overflow: hidden; From e2e9bca5fdf307fd4c4970b16d107ec2da210832 Mon Sep 17 00:00:00 2001 From: Gesina Schwalbe Date: Sun, 3 Jan 2021 21:54:42 +0100 Subject: [PATCH 08/11] fixed _onItem... handle param types in docstrings --- src/module/actor/actor-sheet.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/module/actor/actor-sheet.ts b/src/module/actor/actor-sheet.ts index ee1860a2..31536a69 100644 --- a/src/module/actor/actor-sheet.ts +++ b/src/module/actor/actor-sheet.ts @@ -72,7 +72,7 @@ export class DS4ActorSheet extends ActorSheet { @@ -101,7 +101,7 @@ export class DS4ActorSheet extends ActorSheet} ev The originating change event * @private */ private _onItemChange(ev: JQuery.ChangeEvent): void { @@ -160,7 +160,7 @@ export class DS4ActorSheet extends ActorSheet Date: Sun, 3 Jan 2021 22:26:36 +0100 Subject: [PATCH 09/11] moved input el value retrieval to helper func --- src/module/actor/actor-sheet.ts | 37 ++++++++++++++++++++++++--------- 1 file changed, 27 insertions(+), 10 deletions(-) diff --git a/src/module/actor/actor-sheet.ts b/src/module/actor/actor-sheet.ts index 31536a69..94dcafcd 100644 --- a/src/module/actor/actor-sheet.ts +++ b/src/module/actor/actor-sheet.ts @@ -99,7 +99,7 @@ export class DS4ActorSheet extends ActorSheet} ev The originating change event * @private @@ -111,7 +111,6 @@ export class DS4ActorSheet extends ActorSheet, not an Item const property: string = $(ev.currentTarget).data("property"); - let newValue; // Early return: // Disabled => do nothing @@ -121,41 +120,59 @@ export class DS4ActorSheet extends ActorSheet r["checked"]); - // newValue = chosen ? chosen.value : null; + // const value: string = chosen ? chosen.value : null; + // return value; // } // // Multi-Select (untested, cf. FormDataExtended.process) // else if (el.type === "select-multiple") { - // newValue = []; + // const value: Array = []; // el.options.array.forEach((opt: HTMLOptionElement) => { - // if (opt.selected) newValue.push(opt.value); + // 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); } - setProperty(item, property, newValue); - this.actor.updateOwnedItem(item); } /** From ec404624c7c39e1fa7dea685d627c7c5e2fb446a Mon Sep 17 00:00:00 2001 From: Gesina Schwalbe Date: Sun, 3 Jan 2021 22:40:01 +0100 Subject: [PATCH 10/11] fixed type of HTML property name in _onItemChange --- src/module/actor/actor-sheet.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/module/actor/actor-sheet.ts b/src/module/actor/actor-sheet.ts index 94dcafcd..4b2c69d8 100644 --- a/src/module/actor/actor-sheet.ts +++ b/src/module/actor/actor-sheet.ts @@ -110,7 +110,7 @@ export class DS4ActorSheet extends ActorSheet, not an Item - const property: string = $(ev.currentTarget).data("property"); + const property: string | undefined = $(ev.currentTarget).data("property"); // Early return: // Disabled => do nothing From 61beda7734cd637d784e5cced3e8a5b4deb8205c Mon Sep 17 00:00:00 2001 From: Gesina Schwalbe Date: Sun, 3 Jan 2021 23:27:51 +0100 Subject: [PATCH 11/11] added number conversion in HTML value retrieval Changes: - number input fields now return numbers - range elements removed since they are untested Additions: - added min and step specifiers to input fields associated to item number properties - added a color hint for invalidity of item number input fields in actor sheet --- src/module/actor/actor-sheet.ts | 14 ++++++++++---- src/scss/components/_items.scss | 5 +++++ src/templates/actor/partials/items-overview.hbs | 2 +- src/templates/item/partials/description.hbs | 2 +- src/templates/item/partials/details.hbs | 2 +- 5 files changed, 18 insertions(+), 7 deletions(-) diff --git a/src/module/actor/actor-sheet.ts b/src/module/actor/actor-sheet.ts index 4b2c69d8..51eb9e65 100644 --- a/src/module/actor/actor-sheet.ts +++ b/src/module/actor/actor-sheet.ts @@ -131,7 +131,7 @@ export class DS4ActorSheet extends ActorSheet r["checked"]); diff --git a/src/scss/components/_items.scss b/src/scss/components/_items.scss index 01358b75..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; @@ -52,6 +54,9 @@ width: 2.5em; padding: 0; } + .item-num-val:invalid { + background-color: color.mix(lightcoral, $c-light-grey, 25%); + } .item-description { font-size: 75%; diff --git a/src/templates/actor/partials/items-overview.hbs b/src/templates/actor/partials/items-overview.hbs index dac99439..0cc57faf 100644 --- a/src/templates/actor/partials/items-overview.hbs +++ b/src/templates/actor/partials/items-overview.hbs @@ -84,7 +84,7 @@ {{!-- amount --}} - {{!-- name --}}
    - +
    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 @@
    - +