add extra (hidden) panel to show pool of unused units

2 files changed, 10 insertions, 4 deletions

diff --git a/play.html b/play.html
index 2fce514..5f1131d 100644
--- a/play.html
+++ b/play.html
@@ -645,10 +645,15 @@ svg .area.tip {
 		</div>
 
 		<div id="eliminated_panel" class="panel">
-			<div id="eliminated_header" class="panel_header">Eliminated / Out of Play</div>
+			<div id="eliminated_header" class="panel_header">Eliminated</div>
 			<div id="eliminated" class="panel_body"></div>
 		</div>
 
+		<div id="unused_panel" class="panel hide">
+			<div id="unused_header" class="panel_header">Unused</div>
+			<div id="unused" class="panel_body"></div>
+		</div>
+
 	</section>
 
 </main>
diff --git a/play.js b/play.js
index 2c0cf85..50bcb61 100644
--- a/play.js
+++ b/play.js
@@ -29,7 +29,7 @@ var ORAN = data.locations["ORAN"]
 var ALGIERS = data.locations["ALGIERS"]
 var CONSTANTINE = data.locations["CONSTANTINE"]
 
-const OUT_OF_PLAY = 0
+const UNUSED = 0
 const DEPLOY = 1
 const ELIMINATED = 2
 
@@ -236,6 +236,7 @@ let ui = {
 	fln_supply: document.getElementById("fln_supply"),
 	gov_supply: document.getElementById("gov_supply"),
 	eliminated: document.getElementById("eliminated"),
+	unused: document.getElementById("unused"),
 }
 
 const LAYOUT_BOX = []
@@ -767,8 +768,8 @@ function update_map() {
 		let e = ui.units[u]
 		let loc = unit_loc(u)
 		switch (loc) {
-			case OUT_OF_PLAY:
-				e.remove()
+			case UNUSED:
+				ui.unused.appendChild(e)
 				break
 			case DEPLOY:
 				if (is_gov_unit(u))