Fortifying works

static/js/dom.js

@@ -116,13 +116,65 @@ document.addEventListener("DOMContentLoaded", () => {
         socket.emit("message", Packet.createEndTurn());
     });
 
-    document.querySelectorAll(".actions button").forEach((el) =>
+    document.querySelectorAll(".reinforce").forEach((el) =>
         el.addEventListener("click", (ev) => {
             let region = ev.target.closest(".node").dataset.name;
             socket.emit("message", Packet.createRegionClaim(region));
         })
     );
 
+    document.querySelectorAll(".attack").forEach((el) =>
+        el.addEventListener("click", (ev) => {
+            let modal = document.querySelector("#modal");
+
+            modal.dataset["region"] = ev.target.closest(".node").dataset.name;
+            modal.dataset["action"] = "ATTACK";
+
+            modal.classList.remove("hidden");
+        })
+    );
+
+    document.querySelectorAll(".fortify").forEach((el) =>
+        el.addEventListener("click", (ev) => {
+            let modal = document.querySelector("#modal");
+
+            let region = ev.target.closest(".node").dataset["name"];
+
+            modal.dataset["region"] = region;
+            modal.dataset["action"] = "FORTIFY";
+
+            let selector = modal.querySelector(".target");
+            selector.replaceChildren("");
+            for (let neighbour of Region.getRegion(region).neighbours) {
+                let opt = document.createElement("option");
+                opt.value = neighbour.name;
+                opt.textContent = neighbour.name;
+                selector.appendChild(opt);
+            }
+
+            modal.classList.remove("hidden");
+        })
+    );
+
+    document.querySelector(".submit-modal").addEventListener("click", () => {
+        let modal = document.querySelector("#modal");
+
+        let startRegion = modal.dataset["region"];
+        let action = modal.dataset["action"];
+
+        let amount = modal.querySelector(".amount").value;
+        let endRegion = modal.querySelector(".target").value;
+
+        socket.emit(
+            "message",
+            Packet.createAction(action, startRegion, endRegion, amount)
+        );
+    });
+
+    document.querySelector(".cancel-modal").addEventListener("click", () => {
+        document.querySelector("#modal").classList.add("hidden");
+    });
+
     document.querySelector("#shuffleColors").addEventListener("click", () => {
         Object.values(players).forEach((player) => {
             player.resetColor();
@@ -144,15 +196,3 @@ function showRemainingReinforcements() {
         }</span>`;
     }
 }
-
-function addInfoMessage(message) {
-    let child = document.createElement("div");
-    child.textContent = message;
-
-    let info = document.querySelector("#info");
-    info.appendChild(child);
-
-    setTimeout(() => {
-        info.removeChild(child);
-    }, 8000);
-}

static/js/packet.js

@@ -40,10 +40,13 @@ class Packet {
         };
     }
 
-    static createReinforce(region) {
+    static createAction(action, startRegion, endRegion, amount) {
         return {
             ...this._createBase("ACT"),
-            region: region,
+            startRegion: startRegion,
+            endRegion: endRegion,
+            strength: amount,
+            action: action,
         };
     }
 

static/js/player.js

@@ -82,6 +82,9 @@ class Player {
      * @returns {boolean} Whether this player's turn has ended or not.
      */
     act(data) {
+        console.log(`player: ${this.id}`);
+        console.log(data);
+
         if (this.turnPhase === PHASE_REINFORCE) {
             if (this.reinforce(data)) {
                 this.reinforcementsPlaced += 1;
@@ -128,16 +131,17 @@ class Player {
      * @param data Data received via socket
      */
     fortify(data) {
-        let sender = Region.getRegion(data.sender);
-        let receiver = Region.getRegion(data.receiver);
+        let sender = Region.getRegion(data.startRegion);
+        let receiver = Region.getRegion(data.endRegion);
+        let strength = parseInt(data.strength);
 
         if (
             sender.owner === this &&
             receiver.owner === this &&
-            sender.strength > data.strength
+            sender.strength > strength
         ) {
-            receiver.reinforce(data.strength);
-            sender.strength -= data.strength;
+            receiver.reinforce(strength);
+            sender.strength -= strength;
             return true;
         } else {
             return false;