From 6c315d89e1f104a7ae5a7efc20e78b2bc0f3124e Mon Sep 17 00:00:00 2001
From: PeekabooSteam <matthew.lindley001+github@gmail.com>
Date: Wed, 20 Dec 2023 17:08:04 +0000
Subject: [PATCH] Finished styling; menu closes on click

---
 .../public/stylesheets/other/contextmenus.css |  6 +++---
 client/src/contextmenus/mapcontextmenu.ts     | 21 ++++++++++++++-----
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/client/public/stylesheets/other/contextmenus.css b/client/public/stylesheets/other/contextmenus.css
index d1739e1d..3701cc45 100644
--- a/client/public/stylesheets/other/contextmenus.css
+++ b/client/public/stylesheets/other/contextmenus.css
@@ -266,7 +266,7 @@
 [data-coalition="blue"].deploy-unit-button,
 [data-coalition="blue"]#spawn-airbase-aircraft-button,
 [data-coalition="blue"].create-iads-button,
-[data-coalition="blue"] + .upper-bar .spawn-mode-tabs button.active {
+[data-coalition="blue"] + #spawn-mode-tabs button.selected {
     background-color: var(--primary-blue)
 }
 
@@ -274,7 +274,7 @@
 [data-coalition="red"].deploy-unit-button,
 [data-coalition="red"]#spawn-airbase-aircraft-button,
 [data-coalition="red"].create-iads-button,
-[data-coalition="red"] + .upper-bar .spawn-mode-tabs button.active {
+[data-coalition="red"] + #spawn-mode-tabs button.selected {
     background-color: var(--primary-red)
 }
 
@@ -282,7 +282,7 @@
 [data-coalition="neutral"].deploy-unit-button,
 [data-coalition="neutral"]#spawn-airbase-aircraft-button,
 [data-coalition="neutral"].create-iads-button,
-[data-coalition="neutral"] + .upper-bar .spawn-mode-tabs button.active {
+[data-coalition="neutral"] + #spawn-mode-tabs button.selected {
     background-color: var(--primary-neutral)
 }
 
diff --git a/client/src/contextmenus/mapcontextmenu.ts b/client/src/contextmenus/mapcontextmenu.ts
index 8615a986..a40c11d7 100644
--- a/client/src/contextmenus/mapcontextmenu.ts
+++ b/client/src/contextmenus/mapcontextmenu.ts
@@ -262,33 +262,43 @@ export class MapContextMenu extends ContextMenu {
         this.#navyUnitSpawnMenu.setCountries();
     }
 
-
     /** Handles all of the logic for historal logging.
      * 
      */
     #setupHistory() {
-
         /* Set up the tab clicks */
         const spawnModes           = this.getContainer()?.querySelectorAll(".spawn-mode");
         const activeCoalitionLabel = document.getElementById("active-coalition-label");
-        this.getContainer()?.querySelectorAll(".spawn-mode-tab").forEach((btn:Element) => {
+        const tabs = this.getContainer()?.querySelectorAll(".spawn-mode-tab");
+
+        //  Default selected tab to the "spawn now" option
+        if (tabs) tabs[tabs.length-1].classList.add("selected");
+
+        tabs?.forEach((btn:Element) => {
             btn.addEventListener("click", (ev:MouseEventInit) => {
+                //  Highlight tab
+                tabs.forEach(tab => tab.classList.remove("selected"));
+                btn.classList.add("selected");
+
+                //  Hide/reset
                 spawnModes?.forEach(div => div.classList.add("hide"));
 
                 const prevSiblings = [];
                 let prev = btn.previousElementSibling;
 
-                /* Count previous */
+                /* Tabs and content windows are assumed to be in the same order */
+                //  Count previous
                 while ( prev ) {
                     prevSiblings.push(prev);
                     prev = prev.previousElementSibling;
                 }
 
-                /* Tabs and content windows are assumed to be in the same order */
+                //  Show content
                 if (spawnModes && spawnModes[prevSiblings.length]) {
                     spawnModes[prevSiblings.length].classList.remove("hide");
                 }
 
+                //  We don't want to see the "Spawn [coalition] unit" label
                 if (activeCoalitionLabel) activeCoalitionLabel.classList.toggle("hide", !btn.hasAttribute("data-show-label"));
             });
         });
@@ -324,6 +334,7 @@ export class MapContextMenu extends ContextMenu {
                     table.location.lat += 0.00015 * i;
                 });
                 getApp().getUnitsManager().spawnUnits(detail.category, detail.unitSpawnTable, detail.coalition, detail.immediate, detail.airbase, detail.country);
+                this.hide();
             });
 
             /*  Insert into DOM */