simplify update the character sheet attribute

src/features/character-sheet.js

@@ -79,7 +79,6 @@ export class CharacterSheet {
       const attrMap = this.character.getAttributes((a) =>
         regex.test(a.get('name')),
       );
-      console.log({ attrMap, prefix });
       Object.entries(attributes).forEach(([name, current]) => {
         const attrName = `${prefix}_${name}`;
         const attr = attrMap[attrName];

src/features/powers.js

@@ -1,11 +1,8 @@
 'use strict';
 
 import {
-  addEventObserver,
   createElement,
   enhanceElement,
-  pathQuerySelector,
-  setInputValue,
   waitForCondition,
 } from '../common/helpers';
 
@@ -39,122 +36,6 @@ function createPowerDialog({ options }) {
   });
 }
 
-/**
- * Fill the a power container with the power data.
- *
- * @param {object} props
- * @param {HTMLDivElement} props.container - The container to be filled.
- * @param {Power} props.power - The Tormenta20 data.
- */
-function fillPowerContainer({ container, power }) {
-  if (power === undefined) return;
-  setInputValue({
-    selector: 'input[name="attr_nameability"],input[name="attr_namepower"]',
-    value: power.name,
-    origin: container.parentNode,
-  });
-  setInputValue({
-    selector:
-      'textarea[name="attr_abilitydescription"],textarea[name="attr_powerdescription"]',
-    value: power.description,
-    origin: container,
-  });
-}
-
-/**
- * Add the button to trigger the power choose dialog to a power container.
- *
- * @param {object} props
- * @param {HTMLDivElement} props.container - The container to be filled.
- * @param {T20Data} props.data - The Tormenta20 data.
- */
-function renderPowerButton({ container, data }) {
-  if (container.querySelector('button[name="choose-power"]')) return; // if the button already exists, ignore
-  container.prepend(
-    createElement('button', {
-      classes: 'sheet-singleline',
-      name: 'choose-power',
-      innerHTML: 'Escolher',
-    }),
-  );
-  container.prepend(
-    createPowerDialog({
-      options: Object.keys(data?.abilities_and_powers || {}),
-    }),
-  );
-  container.style.flexDirection = 'column';
-  container.style.gap = '8px';
-  const button = container.querySelector('button[name="choose-power"]');
-  const form = container.querySelector('form[name="power-form"]');
-  const input = form.querySelector('input[name="power-name"]');
-  // TODO: Use the dialog manager
-  const dialog = $(container.querySelector('div[name="power-dialog"]')).dialog({
-    autoOpen: false,
-    closeText: '',
-    buttons: {
-      Confirmar: () => {
-        fillPowerContainer({
-          container,
-          power: data.abilities_and_powers[input.value],
-        });
-        dialog.dialog('close');
-      },
-      Cancelar: () => {
-        dialog.dialog('close');
-      },
-    },
-    close: () => {
-      form.reset();
-    },
-  });
-  addEventObserver({
-    el: input,
-    eventName: 'keydown',
-    eventHandler: (e) => {
-      if (e.keyCode === 13) {
-        fillPowerContainer({
-          container,
-          power: data.abilities_and_powers[input.value],
-        });
-        dialog.dialog('close');
-      }
-    },
-  });
-  addEventObserver({
-    el: button,
-    eventName: 'click',
-    eventHandler: () => {
-      dialog.dialog('open');
-      dialog
-        .dialog('widget')
-        .position({ my: 'center', at: 'center', of: button });
-    },
-  });
-}
-
-/**
- * Add the button to trigger the power choose dialog to all powers containers.
- *
- * @param {object} props
- * @param {HTMLDocument} props.iframe - The character sheet iframe document.
- * @param {T20Data} props.data - The Tormenta20 data.
- */
-export function loadPowersEnhancement({ iframe, data }) {
-  const powersContainer = pathQuerySelector({
-    root: iframe,
-    path: ['div.sheet-left-container', 'div.sheet-powers-and-abilities'],
-  });
-  for (const parentContainer of powersContainer.querySelectorAll(
-    'div.repcontainer',
-  )) {
-    for (const container of parentContainer.querySelectorAll(
-      'div.sheet-extra',
-    )) {
-      renderPowerButton({ container, data });
-    }
-  }
-}
-
 /**
  * Create a new Power Sheet object.
  *
@@ -175,11 +56,6 @@ export class PowerSheet {
     this.abilitiesAndPowers = abilitiesAndPowers;
     /** @type {Object} */
     this.character = character;
-    // enhancement
-    this.character.updateAbilityPower = (groupName, id, name) => {
-      const attributes = this.getAttributes(groupName, name);
-      this.character.updateAttributes(`${groupName}_${id}`, attributes);
-    };
     /**
      * @type {EnhancedHTMLElement|null}
      * @private
@@ -220,6 +96,10 @@ export class PowerSheet {
    */
   addButton(container) {
     if (container.querySelector('button[name="choose-power"]')) return; // if the button already exists, ignore
+    const repRow = container.parentNode.parentNode;
+    const repcontainer = repRow.parentNode;
+    const id = repRow.getAttribute('data-reprowid');
+    const groupName = repcontainer.getAttribute('data-groupname');
     container.prepend(
       createElement('button', {
         classes: 'sheet-singleline',
@@ -243,15 +123,15 @@ export class PowerSheet {
       closeText: '',
       buttons: {
         Confirmar: () => {
-          this.update(container, input.value);
+          this.update(groupName, id, input.value);
           dialog.dialog('close');
         },
         Cancelar: () => dialog.dialog('close'),
       },
     });
     input.addEventObserver('keydown', (e) => {
       if (e.keyCode === 13) {
-        this.update(container, input.value);
+        this.update(groupName, id, input.value);
         dialog.dialog('close');
       }
     });
@@ -286,18 +166,16 @@ export class PowerSheet {
   /**
    * Update the ability/power data.
    *
-   * @param {EnhancedHTMLElement} container - The repitem div of the spell.
+   * @param {string} groupName
+   * @param {string} id
    * @param {string} name
    */
-  async update(container, name) {
+  async update(groupName, id, name) {
     this.character.attribs.fetch();
     await waitForCondition({
       checkFn: () => this.character.attribs.models.length > 0,
     });
-    const repRow = container.parentNode.parentNode;
-    const repcontainer = repRow.parentNode;
-    const id = repRow.getAttribute('data-reprowid');
-    const groupName = repcontainer.getAttribute('data-groupname');
-    this.character.updateAbilityPower(groupName, id, name);
+    const attributes = this.getAttributes(groupName, name);
+    this.character.updateAttributes(`${groupName}_${id}`, attributes);
   }
 }

src/features/spells.js

@@ -57,12 +57,6 @@ export class SpellSheet {
     this.spells = spells;
     /** @type {Object} */
     this.character = character;
-    // enhancement
-    this.character.updateSpell = (id, circle, spellName) => {
-      const prefix = `repeating_spells${circle}_${id}`;
-      const attributes = this.getAttributes(circle, spellName);
-      this.character.updateAttributes(prefix, attributes);
-    };
     /**
      * @type {EnhancedHTMLElement|null}
      * @private
@@ -97,6 +91,8 @@ export class SpellSheet {
    */
   addButton(container, circle) {
     if (container.querySelector('button[name="choose-spell"]')) return; // if the button already exists, ignore
+    const repRow = container.parentNode.parentNode;
+    const id = repRow.getAttribute('data-reprowid');
     container.prepend(
       createElement('button', {
         classes: 'sheet-singleline',
@@ -119,15 +115,15 @@ export class SpellSheet {
       closeText: '',
       buttons: {
         Confirmar: () => {
-          this.update(container, circle, input.value);
+          this.update(id, circle, input.value);
           dialog.dialog('close');
         },
         Cancelar: () => dialog.dialog('close'),
       },
     });
     input.addEventObserver('keydown', (e) => {
       if (e.keyCode === 13) {
-        this.update(container, circle, input.value);
+        this.update(id, circle, input.value);
         dialog.dialog('close');
       }
     });
@@ -170,19 +166,17 @@ export class SpellSheet {
   /**
    * Update the spell data.
    *
-   * @param {EnhancedHTMLElement} container - The repitem div of the spell.
+   * @param {string} id
    * @param {string} circle - The spell circle.
-   * @param {string} spellName
+   * @param {string} name
    */
-  async update(container, circle, spellName) {
+  async update(id, circle, name) {
     this.character.attribs.fetch();
     await waitForCondition({
       checkFn: () => this.character.attribs.models.length > 0,
     });
-    this.character.updateSpell(
-      container.parentNode.parentNode.getAttribute('data-reprowid'),
-      circle,
-      spellName,
-    );
+    const prefix = `repeating_spells${circle}_${id}`;
+    const attributes = this.getAttributes(circle, name);
+    this.character.updateAttributes(prefix, attributes);
   }
 }