add script choice dialog

Author: FurtherV

lang/en.json

@@ -19,6 +19,9 @@
       "ConfirmDelete": {
         "Title": "Delete {type}: {name}",
         "AreYouSure": "Are you sure that you want to delete the {type} '{name}'? This action cannot be undone."
+      },
+      "ScriptChoice": {
+        "Prompt": "Choose which script will be executed."
       }
     }
   }

less/scriptable-items.less

@@ -48,3 +48,22 @@
     }
   }
 }
+
+.dialog.script-choice-dialog {
+  button {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: center;
+
+    img {
+      width: 32px;
+      height: 32px;
+      border: none;
+    }
+  }
+  .dialog-buttons {
+    flex-direction: column;
+  }
+}

scripts/applications/script-choice-dialog.mjs

@@ -0,0 +1,43 @@
+import { LANG_ID } from "../constants.mjs";
+import { ScriptModel } from "../data/script-model.mjs";
+
+export class ScriptChoiceDialog extends Dialog {
+  constructor(scripts, dialogData, options) {
+    super(dialogData, options);
+    this.options.classes = ["dialog", "dnd5e", "script-choice-dialog"];
+
+    this.scripts = scripts;
+  }
+
+  /**
+   * A constructor function which displays the Script Choice Dialog app for a given Array of Scripts.
+   * Returns a Promise which resolves to the chosen Script's id once the choice is made.
+   * @param {ScriptModel[]} scripts Array of Scripts being chosen from.
+   * @returns {Promise} Promise that is resolved when the use dialog is acted upon.
+   */
+  static async create(scripts) {
+    if (!scripts.length) return null;
+
+    return new Promise((resolve) => {
+      const dlg = new this(scripts, {
+        title: "Select a Script",
+        content: `<p>${game.i18n.localize(`${LANG_ID}.Dialog.ScriptChoice.Prompt`)}</p>`,
+        buttons: scripts.reduce((obj, script) => {
+          obj[script.id] = {
+            icon: `<img src="${script.img}">`,
+            label: script.name,
+            callback: () => {
+              resolve(script.id);
+            },
+          };
+          return obj;
+        }, {}),
+        default: scripts[0].id,
+        close: () => resolve(null),
+      });
+      dlg.render(true);
+    });
+  }
+}
+
+globalThis["ScriptChoiceDialog"] = ScriptChoiceDialog;

scripts/scriptable-items.mjs

@@ -2,6 +2,7 @@
  * Main Module File
  */
 
+import { ScriptChoiceDialog } from "./applications/script-choice-dialog.mjs";
 import { MODULE_ID, SETTING, TRIGGER } from "./constants.mjs";
 import { ScriptsOverview } from "./applications/scripts-overview.mjs";
 import { getSetting, registerModuleSettings } from "./settings.mjs";
@@ -35,13 +36,15 @@ Hooks.on("dnd5e.preUseItem", (item, config, options) => {
   );
   if (!scripts.length) return true;
 
-  let script = scripts[0];
-  if (scripts.length > 1) {
-    ui.notifications.error(
-      `The ${TRIGGER.PRE_USE} trigger currently only supports one script per item.`,
-    );
-    return true;
+  if (scripts.length > 1 && options._selectedScript == null) {
+    ScriptChoiceDialog.create(scripts).then((scriptId) => {
+      if (scriptId == null) return;
+      options._selectedScript = scripts.find((x) => x.id === scriptId);
+      item.use(config, options);
+    });
+    return false;
   }
+  const script = options._selectedScript ?? scripts[0];
 
   script.executeScript({ trigger: TRIGGER.PRE_USE }).then((result) => {
     if (result === true) {

styles/scriptable-items.css

@@ -36,3 +36,18 @@
 .app.sheet form.script-config multi-select .tags .tag {
   cursor: pointer;
 }
+.dialog.script-choice-dialog button {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+}
+.dialog.script-choice-dialog button img {
+  width: 32px;
+  height: 32px;
+  border: none;
+}
+.dialog.script-choice-dialog .dialog-buttons {
+  flex-direction: column;
+}