From 62204634e16c7dfac2b352ec0f640f53fef655bd Mon Sep 17 00:00:00 2001
From: jude <jude@jellywx.com>
Date: Sat, 18 Feb 2023 16:48:31 +0000
Subject: [PATCH] show defending region

---
 static/css/style.css |  1 +
 static/js/dom.js     | 14 ++++++++------
 static/js/player.js  |  2 +-
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index 05b2a18..f9663dc 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -4,6 +4,7 @@
     top: 0;
     padding: 12px;
     z-index: 2;
+    font-family: monospace;
 }
 
 #ready {
diff --git a/static/js/dom.js b/static/js/dom.js
index 1d6151a..f3f062b 100644
--- a/static/js/dom.js
+++ b/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");
 }
diff --git a/static/js/player.js b/static/js/player.js
index ef9a16a..7b45e41 100644
--- a/static/js/player.js
+++ b/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