Fortifying works

static/css/style.css

@@ -87,7 +87,7 @@
 }
 
 .hidden {
-    display: none;
+    display: none !important;
 }
 
 .east {
@@ -114,3 +114,27 @@
     align-items: center;
     justify-content: center;
 }
+
+#modal {
+    position: fixed;
+    z-index: 99;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.2);
+}
+
+.modal-content {
+    display: block;
+    padding: 12px;
+    background: white;
+}
+
+.button-row {
+    display: flex;
+    justify-content: space-between;
+    margin: 4px;
+}

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;

templates/index.html

@@ -18,6 +18,26 @@
     <script src="{{ url_for('static', filename='js/paillier.js') }}"></script>
 </head>
 <body>
+    <div id="modal" class="hidden">
+        <div class="modal-content">
+            <div>
+                <label>
+                    Amount
+                    <input type="number" class="amount">
+                </label>
+            </div>
+            <div>
+                <label>
+                    Target
+                    <select class="target"></select>
+                </label>
+            </div>
+            <div class="button-row">
+                <button class="submit-modal">Submit</button>
+                <button class="cancel-modal">Cancel</button>
+            </div>
+        </div>
+    </div>
 
     <div id="players">
         <strong>Players</strong>
@@ -145,6 +165,5 @@
         <button id="ready-button">Not ready</button>
         <button id="end-turn" class="hidden">End Turn</button>
     </div>
-
 </body>
 </html>