show defending region

static/css/style.css

@@ -4,6 +4,7 @@
     top: 0;
     padding: 12px;
     z-index: 2;
+    font-family: monospace;
 }
 
 #ready {

static/js/dom.js

@@ -190,11 +190,11 @@ document.addEventListener("DOMContentLoaded", () => {
             socket.emit("message", Packet.createDefense(amount));
         });
 
-    document
-        .querySelector(".submit-modal, .cancel-modal")
-        .addEventListener("click", (el) => {
-            el.target.closest(".modal").classList.add("hidden");
+    document.querySelectorAll(".submit-modal, .cancel-modal").forEach((el) => {
+        el.addEventListener("click", () => {
+            el.closest(".modal").classList.add("hidden");
         });
+    });
 
     document.querySelector("#shuffleColors").addEventListener("click", () => {
         Object.values(players).forEach((player) => {
@@ -218,6 +218,8 @@ function showRemainingReinforcements() {
     }
 }
 
-function showDefenseDom() {
-    document.querySelector("#defense-modal").classList.remove("hidden");
+function showDefenseDom(region) {
+    const modal = document.querySelector("#defense-modal");
+    modal.querySelector("span").textContent = region;
+    modal.classList.remove("hidden");
 }

static/js/player.js

@@ -148,7 +148,7 @@ class Player {
 
         // If we're the defender, we need to send a packet to state our defense.
         if (defender.owner === us) {
-            showDefenseDom();
+            showDefenseDom(defender.name);
         }
 
         // Grab the defense amount from