Defending sort of works

static/css/style.css

@@ -115,7 +115,7 @@
     justify-content: center;
 }
 
-#modal {
+.modal {
     position: fixed;
     z-index: 99;
     width: 100vw;

static/js/dom.js

@@ -167,7 +167,7 @@ document.addEventListener("DOMContentLoaded", () => {
         })
     );
 
-    document.querySelector(".submit-modal").addEventListener("click", () => {
+    document.querySelector("#modal .submit-modal").addEventListener("click", () => {
         let modal = document.querySelector("#modal");
 
         let startRegion = modal.dataset["region"];
@@ -182,8 +182,18 @@ document.addEventListener("DOMContentLoaded", () => {
         );
     });
 
-    document.querySelector(".cancel-modal").addEventListener("click", () => {
+    document
-        document.querySelector("#modal").classList.add("hidden");
+        .querySelector("#defense-modal .submit-modal")
+        .addEventListener("click", () => {
+            let modal = document.querySelector("#defense-modal");
+            let amount = modal.querySelector(".amount").value;
+            socket.emit("message", Packet.createDefense(amount));
+        });
+
+    document
+        .querySelector(".submit-modal, .cancel-modal")
+        .addEventListener("click", (el) => {
+            el.target.closest(".modal").classList.add("hidden");
         });
 
     document.querySelector("#shuffleColors").addEventListener("click", () => {
@@ -207,3 +217,7 @@ function showRemainingReinforcements() {
         }</span>`;
     }
 }
+
+function showDefenseDom() {
+    document.querySelector("#defense-modal").classList.remove("hidden");
+}

static/js/index.js

@@ -78,6 +78,10 @@ document.addEventListener("DOMContentLoaded", () => {
 
             case "ACT":
                 if (data.author !== currentPlayer().id) {
+                    if (data.action === "DEFENSE") {
+                        await players[data.author].setDefense(data.amount);
+                    }
+
                     return;
                 }
 

static/js/packet.js

@@ -50,6 +50,14 @@ class Packet {
         };
     }
 
+    static createDefense(amount) {
+        return {
+            ...this._createBase("ACT"),
+            action: "DEFENSE",
+            amount: amount,
+        };
+    }
+
     static createEndTurn() {
         return {
             ...this._createBase("ACT"),

static/js/player.js

@@ -18,6 +18,10 @@ class Player {
         this.offenderRegion = null;
         this.turnPhase = PHASE_REINFORCE;
 
+        // Data for defending
+        this.defenderPromise = null;
+        this.defenderAmount = null;
+
         this.resetColor();
     }
 
@@ -129,8 +133,6 @@ class Player {
         let offender = Region.getRegion(data.startRegion);
         let defender = Region.getRegion(data.endRegion);
         let offenderStrength = parseInt(data.strength);
-        // Assume this for now.
-        let defenderStrength = 1;
 
         // Basic validation on game state
         if (
@@ -144,6 +146,20 @@ class Player {
             return false;
         }
 
+        // If we're the defender, we need to send a packet to state our defense.
+        if (defender.owner === us) {
+            showDefenseDom();
+        }
+
+        // Grab the defense amount from
+        let defenderStrength = 0;
+        while (
+            defenderStrength <= 0 ||
+            defenderStrength > Math.min(2, defender.strength)
+        ) {
+            defenderStrength = await defender.owner.getDefense();
+        }
+
         /* How do Risk attacks work?
         - Offender signs 1-3 armies, defender signs 1-2 armies
         - Both roll respective dice
@@ -193,9 +209,39 @@ class Player {
             }
         }
 
+        // Reset the promises in case they attack again.
+        defender.owner.defenderPromise = null;
+        defender.owner.defenderAmount = null;
+
         updateDom();
     }
 
+    async setDefense(amount) {
+        await navigator.locks.request("defender", () => {
+            this.defenderAmount = amount;
+            if (this.defenderPromise !== null) {
+                this.defenderPromise(amount);
+            }
+        });
+    }
+
+    async getDefense() {
+        let promise, resolver;
+        await navigator.locks.request("defender", () => {
+            if (this.defenderAmount === null) {
+                promise = new Promise((resolve) => {
+                    resolver = resolve;
+                });
+                this.defenderPromise = resolver;
+            } else {
+                promise = new Promise((resolve) => {
+                    resolve(this.defenderAmount);
+                });
+            }
+        });
+        return promise;
+    }
+
     /**
      * Process an action which is to attack another region.
      *

templates/index.html

@@ -18,7 +18,7 @@
     <script src="{{ url_for('static', filename='js/paillier.js') }}"></script>
 </head>
 <body>
-    <div id="modal" class="hidden">
+    <div id="modal" class="hidden modal">
         <div class="modal-content">
             <div>
                 <label>
@@ -39,6 +39,19 @@
         </div>
     </div>
 
+    <div id="defense-modal" class="hidden modal">
+        <div class="modal-content">
+            <div>
+                <h2>Defending region <span class="region-tag">R</span></h2>
+                <label>
+                    Defense amount
+                    <input type="number" class="amount">
+                </label>
+            </div>
+            <button class="submit-modal">Submit</button>
+        </div>
+    </div>
+
     <div id="players">
         <strong>Players</strong>
         <ul id="playerList">