WIP: use draggable HTML for moving human soldiers

cypress.json

@@ -9,7 +9,8 @@
     "topbar_actions.spec.js",
     "map_info.spec.js",
     "narrator.spec.js",
-    "manual.spec.js"
+    "manual.spec.js",
+    "movement_drag.spec.js"
   ],
   "video": false
 }

cypress/integration/core/movement.spec.js

@@ -51,6 +51,7 @@ context("Units movements", () => {
 
     click("#icon32a");
     click("#cell62");
+    click("#modal-ok");
 
     cy.get('#icon32a[src="./src/images/board/mob/roman/1.png"]').should(
       "exist"
@@ -63,6 +64,7 @@ context("Units movements", () => {
 
     click("#icon32a");
     click("#cell33");
+    click("#modal-ok");
 
     cy.get('#icon32a[src="./src/images/board/mob/roman/1.png"]').should(
       "exist"

cypress/integration/movement_drag.spec.js

@@ -0,0 +1,103 @@
+/// <reference types="cypress" />
+
+import { start, click, endTurn, moreStrength } from "../utils/ui.js";
+
+context("Human Soldiers movements using drag and drop", () => {
+  it("User drags a soldier 2 steps and cannot move anymore; then next turn user drags it 2 steps again", () => {
+    start();
+
+    cy.get("#tooltip32a").drag("#cell30");
+
+    click('#icon30a[src="./src/images/board/mob/roman/grey/1.png"]');
+    cy.get("#movement").should("contain", "Movements left: [0]");
+    click("#cell32");
+
+    cy.get('#icon30a[src="./src/images/board/mob/roman/grey/1.png"]').should(
+      "exist"
+    );
+
+    endTurn();
+
+    cy.get("#tooltip30a").drag("#cell32");
+
+    cy.get('#icon32a[src="./src/images/board/mob/roman/grey/1.png"]').should(
+      "exist"
+    );
+  });
+
+  it("User drags a soldier 1 step and then move it 1 step again; after that, it cannot be moved anymore", () => {
+    start();
+
+    cy.get("#tooltip32a").drag("#cell31");
+    click('#icon31a[src="./src/images/board/mob/roman/1.png"]');
+    cy.get("#movement").should("contain", "Movements left: [1]");
+
+    cy.get("#tooltip31a").drag("#cell30");
+    click('#icon30a[src="./src/images/board/mob/roman/grey/1.png"]');
+    cy.get("#movement").should("contain", "Movements left: [0]");
+
+    cy.get("#tooltip30a").drag("#cell31", { force: true });
+    click("#modal-ok");
+    cy.get('#icon30a[src="./src/images/board/mob/roman/grey/1.png"]').should(
+      "exist"
+    );
+  });
+
+  it("User cannot drag a soldier more than 2 steps", () => {
+    start();
+
+    cy.get("#tooltip32a").drag("#cell62", { force: true });
+    click("#modal-ok");
+
+    cy.get('#icon32a[src="./src/images/board/mob/roman/1.png"]').should(
+      "exist"
+    );
+    click("#icon32a");
+    cy.get("#movement").should("contain", "Movements left: [2]");
+  });
+
+  it("User cannot drag a soldier into an obstacle", () => {
+    start();
+
+    cy.get("#tooltip32a").drag("#cell33", { force: true });
+    click("#modal-ok");
+
+    cy.get('#icon32a[src="./src/images/board/mob/roman/1.png"]').should(
+      "exist"
+    );
+
+    click("#icon32a");
+    cy.get("#movement").should("contain", "Movements left: [2]");
+  });
+
+  it("User can drag a soldier after moving to next map", () => {
+    start(19);
+
+    cy.get("#icon71a").should("not.exist");
+
+    endTurn();
+
+    click("#icon64a");
+    moreStrength();
+    moreStrength();
+
+    click("#cell54").then(() => {
+      cy.get("#modal-content").should(
+        "contain",
+        "Victory! The area is safe again."
+      );
+      click("#modal-ok");
+
+      cy.get("#modal-content").should("contain", "A new map awaits you...");
+      click("#modal-ok");
+
+      cy.get("#icon71a").should("exist");
+
+      endTurn();
+
+      cy.get("#icon54a").should("not.exist");
+      cy.get("#tooltip71a").drag("#cell72");
+      cy.get("#icon72a").should("exist");
+    });
+  });
+});

cypress/support/commands.js

@@ -23,3 +23,5 @@
 //
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+
+require("@4tw/cypress-drag-drop");

package.json

@@ -22,5 +22,8 @@
   "bugs": {
     "url": "https://github.com/W01fw00d/barbarians/issues"
   },
-  "homepage": "https://github.com/W01fw00d/barbarians#readme"
+  "homepage": "https://github.com/W01fw00d/barbarians#readme",
+  "devDependencies": {
+    "@4tw/cypress-drag-drop": "^1.6.0"
+  }
 }

src/scripts/browser/BrowserUtils.js

@@ -4,6 +4,8 @@ function BrowserUtils() {
   };
 
   this.showMessage = function (message, onClose) {
+    //TODO: add a flag to disable this feature
+    // (take into account that next map won't load without user confirming modal right now...)
     $("#modal-content").html(message);
     $("#modal").modal("show");
     onClose &&

src/scripts/game/Game.js

@@ -80,9 +80,10 @@ Game.prototype.getUnit = function (icon) {
     },
     annotation = icon[icon.length - 1];
 
-  let units = this.players[unitsAnnotationCorralation[annotation][0]].units[
-    unitsAnnotationCorralation[annotation][1]
-  ];
+  let units =
+    this.players[unitsAnnotationCorralation[annotation][0]].units[
+      unitsAnnotationCorralation[annotation][1]
+    ];
   let unitsLength = units.length;
 
   for (i = 0; i < unitsLength; i++) {
@@ -95,8 +96,6 @@ Game.prototype.getUnit = function (icon) {
 Game.prototype.onCellClick = function (event, unit) {
   const target = event.target.id;
 
-  let newMapLevel;
-
   //if this cell has an icon and the icon represents unit or town data, show that data instead of moving unit
   if (target.indexOf("icon") !== -1 && this.getUnit(target)) {
     //        showIconData.apply(targetIcon);
@@ -123,6 +122,7 @@ Game.prototype.onCellClick = function (event, unit) {
           if (newMapLevel) {
             this.currentMapLevel = newMapLevel;
             this.map.generate(this.currentMapLevel, this.players);
+            this.bindDrag();
           }
 
           this.resetBoardBindings();
@@ -149,6 +149,7 @@ Game.prototype.moveMode = function (unit) {
           if (newMapLevel) {
             this.currentMapLevel = newMapLevel;
             this.map.generate(this.currentMapLevel, this.players);
+            this.bindDrag();
           }
 
           this.resetBoardBindings();
@@ -163,6 +164,71 @@ Game.prototype.moveMode = function (unit) {
   });
 };
 
+Game.prototype.bindDrag = function () {
+  document.querySelectorAll(".cell").forEach((node) => {
+    const handleDrop = (event) => {
+      var data = event.dataTransfer.getData("Text");
+
+      const checkEncounter = (unit) => {
+        const target = event.target.id;
+
+        //if this cell has an icon and the icon represents unit or town data, don't do anything
+        if (
+          (target.indexOf("icon") === -1 || !this.getUnit(target)) &&
+          unit.movements > 0 &&
+          unit.cell.replace("icon", "").substring(0, 2) !==
+            target.replace("cell", "")
+        ) {
+          const dataElement = document.getElementById(data);
+          result = this.players.human.moveSoldier(unit, target);
+
+          if (result) {
+            event.target.appendChild(dataElement);
+
+            this.encounter.check(unit, this.players);
+
+            this.levelManager.checkEndOfLevelCondition(
+              this.currentMapLevel,
+              this.players,
+              (newMapLevel) => {
+                if (newMapLevel) {
+                  this.currentMapLevel = newMapLevel;
+                  this.map.generate(this.currentMapLevel, this.players);
+                  this.bindDrag();
+                }
+
+                this.resetBoardBindings();
+              }
+            );
+          }
+        } else {
+          this.browserUtils.showMessage("Invalid movement");
+        }
+      };
+
+      event.preventDefault();
+
+      const draggedIcon = data.replace("tooltip", "icon");
+
+      const unit = this.infoLayer.findUnit(
+        draggedIcon,
+        this.players.human.units.mobs
+      );
+      checkEncounter(unit);
+    };
+
+    node.addEventListener("drop", handleDrop, false);
+
+    node.addEventListener(
+      "dragover",
+      (event) => {
+        event.preventDefault();
+      },
+      false
+    );
+  });
+};
+
 Game.prototype.bindIconClick = function () {
   $(".icon").one("click", (event) => {
     event.stopPropagation();
@@ -175,6 +241,16 @@ Game.prototype.bindIconClick = function () {
       this.bindIconClick();
     }
   });
+
+  Array.from(document.getElementsByClassName("icon-wrapper")).forEach(
+    (node) => {
+      const handleDragstart = (event) => {
+        event.dataTransfer.setData("Text", event.currentTarget.id);
+      };
+
+      node.addEventListener("dragstart", handleDragstart, false);
+    }
+  );
 };
 
 Game.prototype.resetBoardBindings = function () {
@@ -193,6 +269,7 @@ Game.prototype.bindAll = function () {
     if (confirm("Reset current map?")) {
       this.map.generate(this.currentMapLevel, this.players);
       this.bindIconClick();
+      this.bindDrag();
     }
   });
 
@@ -201,6 +278,7 @@ Game.prototype.bindAll = function () {
       if (newMapLevel) {
         this.currentMapLevel = newMapLevel;
         this.map.generate(this.currentMapLevel, this.players);
+        this.bindDrag();
       }
 
       $("#end_turn").html("<b>End turn</b> (+3 gold)");
@@ -257,4 +335,6 @@ Game.prototype.bindAll = function () {
     enableAnimationsCheckbox.addEventListener("change", ({ currentTarget }) => {
       this.animationManager.enableAnimations = currentTarget.checked;
     });
+
+  this.bindDrag();
 };

src/scripts/game/InfoLayer.js

@@ -9,7 +9,6 @@ function InfoLayer(painter) {
         mode: null,
         unit: null,
       },
-      color,
       unit;
 
     switch (type) {
@@ -90,4 +89,5 @@ function InfoLayer(painter) {
 
     return unit;
   };
+  this.findUnit = findUnit;
 }

src/scripts/players/Player.js

@@ -26,6 +26,7 @@ Player.prototype.setGold = function (gold) {
 };
 
 Player.prototype.showModal = function (message) {
+  //TODO: use BrowserUtils modal here
   $("#modal-content").html(message);
   $("#modal").modal("show");
 };
@@ -45,15 +46,15 @@ Player.prototype.moveSoldier = function (unit, target) {
     Math.abs(finalCell[1] - initialCell[1]);
 
   if (icon === null && movement > 0 && movement <= unit.movements) {
-    //Move the soldier icon to he selected cell, and calculate movements left
+    // Move the soldier icon to the selected cell, and calculate movements left
     unit.cell = "icon" + finalCell[0] + "" + finalCell[1] + initialCell[2];
     unit.movements -= movement;
 
     result = unit;
 
     this.mapPainter.clearCell(initialCell[0], initialCell[1]);
   } else {
-    if (unit.player === "Roman") {
+    if (unit.player === "human") {
       this.showModal("Invalid movement");
       result = null;
     }