From 507a087198aeac8ad640733a5b45885df1ce9b9b Mon Sep 17 00:00:00 2001
From: jude <jude@jellywx.com>
Date: Sat, 18 Feb 2023 15:12:06 +0000
Subject: [PATCH] Defending sort of works

---
 static/css/style.css |  2 +-
 static/js/dom.js     | 22 +++++++++++++++----
 static/js/index.js   |  4 ++++
 static/js/packet.js  |  8 +++++++
 static/js/player.js  | 50 ++++++++++++++++++++++++++++++++++++++++++--
 templates/index.html | 15 ++++++++++++-
 6 files changed, 93 insertions(+), 8 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index d0e1110..05b2a18 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -115,7 +115,7 @@
     justify-content: center;
 }
 
-#modal {
+.modal {
     position: fixed;
     z-index: 99;
     width: 100vw;
diff --git a/static/js/dom.js b/static/js/dom.js
index 4339b79..1d6151a 100644
--- a/static/js/dom.js
+++ b/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,9 +182,19 @@ document.addEventListener("DOMContentLoaded", () => {
         );
     });
 
-    document.querySelector(".cancel-modal").addEventListener("click", () => {
-        document.querySelector("#modal").classList.add("hidden");
-    });
+    document
+        .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", () => {
         Object.values(players).forEach((player) => {
@@ -207,3 +217,7 @@ function showRemainingReinforcements() {
         }</span>`;
     }
 }
+
+function showDefenseDom() {
+    document.querySelector("#defense-modal").classList.remove("hidden");
+}
diff --git a/static/js/index.js b/static/js/index.js
index 046dab6..3a554d0 100644
--- a/static/js/index.js
+++ b/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;
                 }
 
diff --git a/static/js/packet.js b/static/js/packet.js
index 4b8e6aa..cdc172e 100644
--- a/static/js/packet.js
+++ b/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"),
diff --git a/static/js/player.js b/static/js/player.js
index d36d8a0..ef9a16a 100644
--- a/static/js/player.js
+++ b/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.
      *
diff --git a/templates/index.html b/templates/index.html
index 09aa6ba..14c2435 100644
--- a/templates/index.html
+++ b/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">