[foundryvtt#1403] Enable plus and minus buttons

module/applications/advancement/ability-score-improvement-flow.mjs

@@ -3,7 +3,19 @@ import AdvancementFlow from "./advancement-flow.mjs";
 /**
  * Inline application that presents the player with a choice between ability score improvement and taking a feat.
  */
-export default class AbilityScoreImprovementFlow extends AdvancementFlow {
+export class AbilityScoreImprovementFlow extends AdvancementFlow {
+
+ constructor(...args) {
+ super(...args);
+
+ /**
+ * Information on the ASI points available.
+ * @type {{ available: number, total: number }}
+ */
+ this.points = this.advancement.points;
+ }
+
+ /* -------------------------------------------- */
 
  /** @inheritdoc */
  static get defaultOptions() {
@@ -23,7 +35,56 @@ export default class AbilityScoreImprovementFlow extends AdvancementFlow {
  }, {});
 
  return foundry.utils.mergeObject(super.getData(), {
- abilities
+ abilities,
+ points: {
+ available: this.points,
+ total: 2
+ }
  });
  }
+
+ /* -------------------------------------------- */
+
+ /** @inheritdoc */
+ activateListeners(html) {
+ super.activateListeners(html);
+ html.find(".adjustment-button").click(this._onClickButton.bind(this));
+ this._disableControls();
+ }
+
+ /* -------------------------------------------- */
+
+ /**
+ *
+ */
+ _disableControls() {
+
+ }
+
+ /* -------------------------------------------- */
+
+ /**
+ * Handle clicking the plus and minus buttons.
+ * @param {Event} event Triggering click event.
+ */
+ _onClickButton(event) {
+ event.preventDefault();
+ const cl = event.currentTarget.classList;
+ const container = event.currentTarget.closest("li");
+ const input = container.querySelector("input");
+ const remaining = this.points.total - this.points.assigned;
+
+ if ( cl.contains("minus") && (this.points.assigned > 0) && (input.valueAsNumber > Number(input.min)) ) {
+ input.valueAsNumber -= 1;
+ this.points.assigned -= 1;
+ } else if ( cl.contains("plus") && (remaining > 0) && (input.valueAsNumber < Number(input.max)) ) {
+ input.valueAsNumber += 1;
+ this.points.assigned += 1;
+ } else {
+ return;
+ }
+
+ this._disableControls();
+ this.form.querySelector(".points-remaining").innerText = this.points.total - this.points.assigned;
+ }
 }

module/documents/advancement/ability-score-improvement.mjs

@@ -20,6 +20,21 @@ export default class AbilityScoreImprovementAdvancement extends Advancement {
  });
  }
 
+ /* -------------------------------------------- */
+ /* Instance Properties */
+ /* -------------------------------------------- */
+
+ /**
+ * Information on the ASI points available.
+ * @type {{ assigned: number, total: number }}
+ */
+ get points() {
+ return {
+ assigned: Object.values(this.value.improvements ?? {}).reduce((n, c) => n + c, 0),
+ total: 2
+ };
+ }
+
  /* -------------------------------------------- */
  /* Display Methods */
  /* -------------------------------------------- */

templates/advancement/ability-score-improvement-flow.hbs

@@ -1,13 +1,15 @@
 <form id="{{appId}}" data-level="{{level}}" data-id="{{advancement.id}}" data-type="{{type}}">
  <h3>{{{this.title}}}</h3>
 
+ <p>Points Remaining: <span class="points-remaining">2</span></p>
+
  <ul class="ability-scores">
  {{#each abilities as |data key|}}
  <li data-score="{{key}}">
  <label>{{label}}</label>
- <a class="minus"><i class="fas fa-minus"></i></a>
- <input name="ability.{{key}}" type="number" min="{{value}}" max="{{max}}" step="1" value="{{value}}">
- <a class="plus"><i class="fas fa-plus"></i></a>
+ <a class="adjustment-button minus"><i class="fas fa-minus"></i></a>
+ <input name="ability.{{key}}" type="number" readonly="readonly" min="{{value}}" max="{{max}}" step="1" value="{{value}}">
+ <a class="adjustment-button plus"><i class="fas fa-plus"></i></a>
  </li>
  {{/each}}
  </ul>