Drag-and-drop overhaul

README.md

@@ -1,7 +1,7 @@
 ## 5E Encounter Builder
 
 * **Author**: RaySSharma#4736
-* **Version**: 0.0.2
+* **Version**: 0.1.0
 * **Foundry VTT Compatibility**: 0.5.0+
 * **System Compatibility (If applicable)**: D&D5E
 * **Translation Support**: en
@@ -19,7 +19,8 @@ This module adds an Application to aid in building D&D5E combat encounters. Foll
 * Includes difficulty multipliers for fights against many opponents
 * Adjusts difficulty for parties of <3 players, or >5 players.
 * Calculates total XP and XP per player.
-* Drag-and-drop tokens onto or off the Application.
+* Drag-and-drop from compendiums or existing actors.
+* Drag-and-drop from builder to canvas.
 
 ![Encounter](./images/testencounter.png "Encounter Building")
 ![Encounter2](./images/testencounter.gif "Encounter Building 2")
@@ -46,4 +47,12 @@ This module adds an Application to aid in building D&D5E combat encounters. Foll
 
 #### 0.0.2
 
-* Fixed call to the Application parent class (thanks @tposney#1462)
+* Fixed call to the Application parent class (thanks @tposney#1462).
+
+#### 0.1.0
+
+* Added drag-and-drop for actors from builder to canvas.
+* Added drag-and-drop for actors in compendiums to builder.
+* Changed to click-to-remove for actors in builder.
+* Added on-hover image for actors in builder.
+* Added Chrome support (event.explicitOriginalTarget -> event.srcElement).

encounter-builder/css/encounter-builder.css

@@ -16,18 +16,31 @@
 #EBContainers .leftField {
     display: flex;
     flex-wrap: wrap;
+    position: relative;
+}
+#EBContainers .pc-container {
+    opacity: 1;
+    position: relative;
+    margin: 0 auto;
 }
 #EBContainers .pc-portraits {
     width: 50px;
     height: 50px;
 }
-#EBContainers .pc-container {
-    padding: 2%;
-    line-height: 0%;
+#EBContainers .subtract {
+    opacity: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
 }
 #EBContainers .pc-container:hover .pc-portraits {
     opacity: 0.3;
 }
+#EBContainers .pc-container:hover .subtract {
+    opacity: 0.8;
+}
 
 #EBContainers .centerContainer {
     width: 50%;
@@ -56,17 +69,21 @@
     display: flex;
     flex-wrap: wrap;
 }
+#EBContainers .npc-container {
+    opacity: 1;
+    position: relative;
+    margin: 0 auto;
+}
 #EBContainers .npc-portraits {
     width: 50px;
     height: 50px;
 }
-#EBContainers .npc-container {
-    padding: 2%;
-    line-height: 0%;
-}
 #EBContainers .npc-container:hover .npc-portraits {
     opacity: 0.3;
 }
+#EBContainers .npc-container:hover .subtract {
+    opacity: 0.8;
+}
 
 #EBOutcome .scores {
     width: 50%;

encounter-builder/module.json

@@ -2,7 +2,7 @@
   "name": "encounter-builder",
   "title": "5e Encounter Builder",
   "description": "Adds an application to determine encounter difficulty, based on the Kobold Fight Club.",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "minimumCoreVersion": "0.5.0",
   "author": "RaySSharma",
   "scripts": ["./src/encounter-builder.js", "./src/builder-form.js"],

encounter-builder/src/builder-form.js

@@ -15,6 +15,8 @@ class EncounterBuilderApplication extends Application {
     constructor(Actors, options = {}) {
         super(options);
 
+        if ( !game.user.isGM) return;
+
         this.object = Actors
         this.pc = [];
         this.npc = [];
@@ -124,7 +126,7 @@ class EncounterBuilderApplication extends Application {
     static get defaultOptions() {
         const options = super.defaultOptions;
         options.title = game.i18n.localize("EB.Title");
-        options.id = "encounter-builder";
+        options.id = game.i18n.localize("EB.id");
         options.template = "modules/encounter-builder/templates/builder-app.html";
         options.closeOnSubmit = true;
         options.popOut = true;
@@ -151,12 +153,12 @@ class EncounterBuilderApplication extends Application {
         html.find('.pc-container').each((i, li) => {
             li.setAttribute("draggable", true);
             li.addEventListener('dragstart', this._onDragStart, false);
-            li.addEventListener("dragend", this._onDragEnd.bind(this));
+            li.addEventListener('click', this._onClickPortrait.bind(this));
         });
         html.find('.npc-container').each((i, li) => {
             li.setAttribute("draggable", true);
             li.addEventListener('dragstart', this._onDragStart, false);
-            li.addEventListener("dragend", this._onDragEnd.bind(this));
+            li.addEventListener('click', this._onClickPortrait.bind(this));
         });
         html[0].render = this.render;
         html[0].ondragover = this._onDragOver;
@@ -183,11 +185,12 @@ class EncounterBuilderApplication extends Application {
         catch (err) {
             return false;
         }
-        const app = game.users.apps.find(b => b.id === "encounter-builder");
+        const app = game.users.apps.find(b => b.id === game.i18n.localize("EB.id"));
 
         let actor;
         try {
-            actor = game.actors.entities.find(b => b.id === data.id);
+            if ( data.pack ) actor = await game.actors.importFromCollection(data.pack, data.id)
+            else actor = game.actors.get(data.id)
         }
         catch (err) {
             console.log(game.i18n.localize("EB.ImportError"));
@@ -211,47 +214,54 @@ class EncounterBuilderApplication extends Application {
         return false;
     }
 
-    _onDragStart(event) {    
+    _onDragStart(event) {  
+        event.stopPropagation(); 
+        const id = this.firstElementChild.id
+        const name = this.firstElementChild.title
+
         event.dataTransfer.setData("text/plain", JSON.stringify({
-            name: event.explicitOriginalTarget.attributes.title.value
+            type: game.actors.entity,
+            id: id,
+            name: name
         }));
     }
 
+    _onDragEnd(event) {
+        event.preventDefault();
+        return false;
+    }
+
     /**
-     * When dragging from application, should try to remove actor.
+     * Remove actor from calculation on clicking the portrait.
      *
      * @param {*} event
-     * @returns {Promise}
      * @memberof EncounterBuilderApplication
      */
-    _onDragEnd(event) {
-        event.preventDefault();
-        if (event.dataTransfer.dropEffect !== 'none') {
-            if ((event.explicitOriginalTarget.className === "pc-portraits") || (event.explicitOriginalTarget.className === "npc-portraits")) {
-                let data;
-                try {
-                    data = JSON.parse(event.dataTransfer.getData('text/plain'));
-                }
-                catch (err) {
-                    return false;
-                }
+    _onClickPortrait(event) {
+        event.stopPropagation();
+        const isPCPortrait = event.srcElement.classList.value === "pc-portraits"
+        const isNPCPortrait = event.srcElement.classList.value === "npc-portraits"
+        const isHoverImage = event.srcElement.classList.value === "fas fa-minus"
+        if ((isPCPortrait) || (isNPCPortrait) || (isHoverImage)) {
 
-                let pcExists = this.pc.find(b => b.name === data.name);
-                let npcExists = this.npc.find(b => b.name === data.name);
-                if (pcExists) {
-                    let ix = this.pc.findIndex(b => b.name === data.name);
-                    this.pc.pop(ix);
-                }
-                if (npcExists) {
-                    let ix = this.npc.findIndex(b => b.name === data.name);
-                    this.npc.pop(ix);
-                }
+            let name = event.srcElement.title
 
-                const app = game.users.apps.find(b => b.id === "encounter-builder");
-                app.calcXPThresholds();
-                app.calcRating();
-                app.render();
+            let pcExists = this.pc.find(b => b.name === name);
+            let npcExists = this.npc.find(b => b.name === name);
+
+            if (pcExists) {
+                let ix = this.pc.findIndex(b => b.name === name);
+                this.pc.pop(ix);
+            }
+            if (npcExists) {
+                let ix = this.npc.findIndex(b => b.name === name);
+                this.npc.pop(ix);
             }
+
+            const app = game.users.apps.find(b => b.id === game.i18n.localize("EB.id"));
+            app.calcXPThresholds();
+            app.calcRating();
+            app.render();
         }
     }
 

encounter-builder/templates/builder-app.html

@@ -8,6 +8,9 @@
                 {{#each pcs}}
                     <div class='pc-container'>
                         <img class="pc-portraits" src="{{this.img}}" title="{{this.name}}" id="{{this.id}}"/>
+                        <div class="subtract">
+                            <i class="fas fa-minus" title="{{this.name}}" id="{{this.id}}"></i>
+                        </div>
                     </div>
                 {{/each}}
             </div>
@@ -35,7 +38,10 @@ <h1>{{capitalizeAll this.difficulty}}</h1>
             <div class="rightField">
                 {{#each npcs}}
                     <div class='npc-container'>
-                        <img class='npc-portraits' src="{{this.img}}" title="{{this.name}}" />
+                        <img class='npc-portraits' src="{{this.img}}" title="{{this.name}}" id="{{this.id}}"/>
+                        <div class="subtract">
+                            <i class="fas fa-minus"></i>
+                        </div>
                     </div>
                 {{/each}}
             </div>