dialog v2 for roll modification

2025-07-29 14:15:53 +03:00
parent c2d3634e21
commit 0f0c76bff5
3 changed files with 124 additions and 78 deletions
@@ -8,9 +8,19 @@
  grid-gap: 10px 15px;
 }

-.numeric-label-field {
-  width: 50px !important;
-  text-align: center !important;
+.plusMinusNumberFieldBox {
+
+  display: flex;
+  gap: 10px;
+
+  select[name="plusOrMinus"] {
+    flex: 1;
+  }
+
+  .numeric-label-field {
+    flex: 1;
+    text-align: center !important;
+  }
 }

 .damage-modify-label-grid {
@@ -142,7 +142,9 @@ export class DGPercentileRoll extends DGRoll {
        customModifierTarget = parseInt(
          this.actor.system.settings.rolling.defaultPercentileModifier,
        );
-      } catch {}
+      } catch {
+        /* empty */
+      }
    }

    const backingData = {
@@ -158,23 +160,31 @@ export class DGPercentileRoll extends DGRoll {
      "systems/deltagreen/templates/dialog/modify-percentile-roll.html";
    const content = await renderTemplate(template, backingData);
    return new Promise((resolve, reject) => {
-      new Dialog({
+      new foundry.applications.api.DialogV2({
        content,
-        title: DGUtils.localizeWithFallback(
-          "DG.ModifySkillRollDialogue.Title",
-          "Modify Roll",
-        ),
-        default: "roll",
-        buttons: {
-          roll: {
+        window: {
+          title: DGUtils.localizeWithFallback(
+            "DG.ModifySkillRollDialogue.Title",
+            "Modify Roll",
+          ),
+        },
+        buttons: [
+          {
+            default: true,
+            action: "roll",
            label: DGUtils.localizeWithFallback("DG.Roll.Roll", "Roll"),
-            callback: (html) => {
+            callback: (event, button, dialog) => {
              try {
-                let targetModifier = html.find("[name='targetModifier']").val(); // this is text as a heads up
+                let targetModifier = dialog.element.querySelector(
+                  "[name='targetModifier']",
+                )?.value; // this is text as a heads up

-                const rollMode = html.find("[name='rollMode']").val();
+                const rollMode =
+                  dialog.element.querySelector("[name='rollMode']")?.value;

-                const plusMinus = html.find("[name='plusOrMinus']").val();
+                const plusMinus = dialog.element.querySelector(
+                  "[name='plusOrMinus']",
+                )?.value;

                if (
                  targetModifier.trim() !== "" &&
@@ -200,11 +210,13 @@ export class DGPercentileRoll extends DGRoll {
              }
            },
          },
-          roll40Negative: {
+          {
+            action: "roll40Negative",
            label: "-40",
-            callback: (html) => {
+            callback: (event, button, dialog) => {
              try {
-                const rollMode = html.find("[name='rollMode']").val();
+                const rollMode =
+                  dialog.element.querySelector("[name='rollMode']")?.value;
                const targetModifier = -40;
                resolve({ targetModifier, rollMode });
              } catch (ex) {
@@ -212,11 +224,13 @@ export class DGPercentileRoll extends DGRoll {
              }
            },
          },
-          roll20Negative: {
+          {
+            action: "roll20Negative",
            label: "-20",
-            callback: (html) => {
+            callback: (event, button, dialog) => {
              try {
-                const rollMode = html.find("[name='rollMode']").val();
+                const rollMode =
+                  dialog.element.querySelector("[name='rollMode']")?.value;
                const targetModifier = -20;
                resolve({ targetModifier, rollMode });
              } catch (ex) {
@@ -224,11 +238,13 @@ export class DGPercentileRoll extends DGRoll {
              }
            },
          },
-          roll20Positive: {
+          {
+            action: "roll20Positive",
            label: "+20",
-            callback: (html) => {
+            callback: (event, button, dialog) => {
              try {
-                const rollMode = html.find("[name='rollMode']").val();
+                const rollMode =
+                  dialog.element.querySelector("[name='rollMode']")?.value;
                const targetModifier = 20;
                resolve({ targetModifier, rollMode });
              } catch (ex) {
@@ -236,11 +252,13 @@ export class DGPercentileRoll extends DGRoll {
              }
            },
          },
-          roll40Positive: {
+          {
+            action: "roll40Positive",
            label: "+40",
-            callback: (html) => {
+            callback: (event, button, dialog) => {
              try {
-                const rollMode = html.find("[name='rollMode']").val();
+                const rollMode =
+                  dialog.element.querySelector("[name='rollMode']")?.value;
                const targetModifier = 40;
                resolve({ targetModifier, rollMode });
              } catch (ex) {
@@ -248,7 +266,7 @@ export class DGPercentileRoll extends DGRoll {
              }
            },
          },
-        },
+        ],
      }).render(true);
    });
  }
@@ -275,7 +293,7 @@ export class DGPercentileRoll extends DGRoll {
      this.options.rollMode = "blindroll";
    }

-    let label = this.createLabel();
+    const label = this.createLabel();

    let resultString = "";
    let styleOverride = "";
@@ -288,21 +306,20 @@ export class DGPercentileRoll extends DGRoll {
      } else {
        resultString = `${game.i18n.localize("DG.Roll.Success")}`;
      }
+    } else if (this.isCritical) {
+      resultString = `${game.i18n.localize("DG.Roll.CriticalFailure")}`;
+      resultString = `${resultString.toUpperCase()}`;
+      styleOverride = "color: red";
    } else {
-      if (this.isCritical) {
-        resultString = `${game.i18n.localize("DG.Roll.CriticalFailure")}`;
-        resultString = `${resultString.toUpperCase()}`;
-        styleOverride = "color: red";
-      } else {
-        resultString = `${game.i18n.localize("DG.Roll.Failure")}`;
-      }
+      resultString = `${game.i18n.localize("DG.Roll.Failure")}`;
    }

-    const failureMark = !this.isSuccess && this.skillPath
-      && !foundry.utils.getProperty(this.actor, `${this.skillPath}.failure`)
-      && game.settings.get(DG.ID, "skillFailure");
+    const failureMark =
+      !this.isSuccess &&
+      this.skillPath &&
+      !foundry.utils.getProperty(this.actor, `${this.skillPath}.failure`) &&
+      game.settings.get(DG.ID, "skillFailure");

-    const { renderTemplate } = foundry.applications.handlebars;
    const html = await renderTemplate(
      "systems/deltagreen/templates/roll/percentile-roll.hbs",
      {
@@ -310,26 +327,32 @@ export class DGPercentileRoll extends DGRoll {
        resultString,
        formula: this.formula,
        total: this.total,
-        failureMark
-      });
+        failureMark,
+      },
+    );

-    //TODO: add setting for it?
+    // TODO: add setting for it?
    if (failureMark) {
      const keyForUpdate = `${this.skillPath}.failure`;

-      //TODO: auto-update actor or post icon with manual apply
+      // TODO: auto-update actor or post icon with manual apply
      await this.actor.update({
-        [keyForUpdate]: true
-      })
+        [keyForUpdate]: true,
+      });

-      return this.toMessage({ flags: { deltagreen: {
-        rollbacks: {
-          [keyForUpdate]: false
-        }
-      } }, content: html, flavor: label });
-    } else {
-      return this.toMessage({ content: html, flavor: label });
+      return this.toMessage({
+        flags: {
+          deltagreen: {
+            rollbacks: {
+              [keyForUpdate]: false,
+            },
+          },
+        },
+        content: html,
+        flavor: label,
+      });
    }
+    return this.toMessage({ content: html, flavor: label });
  }

  /**
@@ -383,16 +406,21 @@ export class DGPercentileRoll extends DGRoll {
   * @returns {string}
   */
  createLabel() {
-    const startOfLabel = game.i18n.localize("DG.Roll.Rolling")
-      + ` <b>${this.localizedKey}`
-    const endOfLabel =`${game.i18n.localize("DG.Roll.Target")} ${this.effectiveTarget}`
+    const startOfLabel = `${game.i18n.localize("DG.Roll.Rolling")} <b>${
+      this.localizedKey
+    }`;
+    const endOfLabel = `${game.i18n.localize("DG.Roll.Target")} ${
+      this.effectiveTarget
+    }`;

    let label = this.isInhuman
-      // "Inhuman" stat being rolled. See function for details.
-      ? `${startOfLabel} [${game.i18n.localize("DG.Roll.Inhuman").toUpperCase()}]</b> ${endOfLabel}`
+      ? // "Inhuman" stat being rolled. See function for details.
+        `${startOfLabel} [${game.i18n
+          .localize("DG.Roll.Inhuman")
+          .toUpperCase()}]</b> ${endOfLabel}`
      : `${startOfLabel}</b><br> ${endOfLabel}%`;

-    const {isExhausted, exhaustedCheckPenalty} = this.exhausted
+    const { isExhausted, exhaustedCheckPenalty } = this.exhausted;

    if (this.modifier || isExhausted) {
      label += ` (${this.target}%`;
@@ -429,7 +457,7 @@ export class DGPercentileRoll extends DGRoll {
      exhaustedCheckPenalty = -20;
    }

-    return {isExhausted, exhaustedCheckPenalty};
+    return { isExhausted, exhaustedCheckPenalty };
  }

  /**
@@ -510,7 +538,7 @@ export class DGPercentileRoll extends DGRoll {
  get effectiveTarget() {
    let target = 1;

-    let {isExhausted, exhaustedCheckPenalty} = this.exhausted
+    const { isExhausted, exhaustedCheckPenalty } = this.exhausted;

    if (!this.target || Number.isNaN(this.target)) {
      return null;
@@ -715,22 +743,30 @@ export class DGDamageRoll extends DGRoll {

    const content = await renderTemplate(template, backingData);
    return new Promise((resolve, reject) => {
-      new Dialog({
+      new foundry.applications.api.DialogV2({
        content,
-        title: game.i18n.localize("DG.ModifySkillRollDialogue.Title"),
-        default: "roll",
-        buttons: {
-          roll: {
+        window: {
+          title: game.i18n.localize("DG.ModifySkillRollDialogue.Title"),
+        },
+        buttons: [
+          {
+            default: true,
            label: game.i18n.translations.DG.Roll.Roll,
-
-            callback: (html) => {
+            action: "roll",
+            callback: (event, button, dialog) => {
              try {
-                const outerModifier = html.find("[name='outerModifier']").val(); // this is text as a heads up
-                let innerModifier = html.find("[name='innerModifier']").val(); // this is text as a heads up
-                const modifiedBaseRoll = html
-                  .find("[name='originalFormula']")
-                  .val(); // this is text as a heads up
-                const rollMode = html.find("[name='targetRollMode']").val();
+                const outerModifier = dialog.element.querySelector(
+                  "[name='outerModifier']",
+                )?.value; // this is text as a heads up
+                let innerModifier = dialog.element.querySelector(
+                  "[name='innerModifier']",
+                )?.value; // this is text as a heads up
+                const modifiedBaseRoll = dialog.element.querySelector(
+                  "[name='originalFormula']",
+                )?.value; // this is text as a heads up
+                const rollMode = dialog.element.querySelector(
+                  "[name='targetRollMode']",
+                )?.value;

                if (innerModifier.replace(" ", "") === "+0") {
                  innerModifier = "";
@@ -749,7 +785,7 @@ export class DGDamageRoll extends DGRoll {
              }
            },
          },
-        },
+        ],
      }).render(true);
    });
  }
@@ -16,8 +16,8 @@
        

        <span>{{localize 'DG.ModifySkillRollDialogue.TargetModifier'}}</span>
-        <div>
-            <select name="plusOrMinus">
+        <div class="plusMinusNumberFieldBox">
+            <select name="plusOrMinus" style="flex: 1;">
                <option value="+" selected>+</option>
                <option value="-">-</option>
            </select>