toggle pieces. remove unused popup menu code.

3 files changed, 53 insertions, 99 deletions

diff --git a/play.css b/play.css
index 5671132..e9485b7 100644
--- a/play.css
+++ b/play.css
@@ -55,6 +55,9 @@ body.America header.your_turn { background-color: hsl(211, 50%, 75%) }
 	box-shadow: 1px 1px 8px #0008;
 }
 
+#map.hide_pieces #pieces { display: none; }
+#map.hide_markers #markers { display: none; }
+
 @media (max-width: 800px) {
 	#tooltip {
 		top: 0;
diff --git a/play.html b/play.html
index 8379323..3c78e97 100644
--- a/play.html
+++ b/play.html
@@ -18,21 +18,6 @@
 
 <div id="tooltip"></div>
 
-<menu id="popup">
-	<li class="title">CARD
-	<li class="separator">
-	<li data-action="card_play_event">&#x1f3b4; Play Event
-	<li data-action="card_discard_event">&#x274c; Discard for PC action
-	<li data-action="card_campaign">&#x1f465; Play Campaign
-	<li data-action="card_ops_general">&#x1f464; Activate a General
-	<li data-action="card_ops_pc">&#x2b55; Place PC markers
-	<li data-action="card_ops_reinforcements">&#x1f6a9; Bring on Reinforcements
-	<li data-action="card_ops_queue">&#x231b; Place into Operations Queue
-	<li data-action="card_battle_play">&#x1f3b2; Play for +2 DRM
-	<li data-action="card_battle_discard">&#x1f3b2; Discard for +1 DRM
-	<li data-action="exchange_for_discard">&#x267b; Exchange for Discarded Event
-</menu>
-
 <header>
 	<div id="toolbar">
 		<details>
@@ -43,7 +28,7 @@
 				<li><a href="info/cards.html" target="blank">Cards</a>
 			</menu>
 		</details>
-		<button onclick="toggle_markers()"><img src="/images/earth-america.svg"></button>
+		<button onclick="toggle_counters()"><img src="/images/earth-america.svg"></button>
 	</div>
 </header>
 
@@ -66,11 +51,12 @@
 	<div id="log"></div>
 </aside>
 
-<main onclick="hide_popup_menu()">
+<main data-max-zoom="2">
 
 <div id="mapwrap">
 <div id="map">
 	<div id="spaces"></div>
+	<div id="markers"></div>
 	<div id="pieces"></div>
 	<div id="war_ends"></div>
 	<div id="played_british_reinforcements" class="reinforcements"></div>
diff --git a/play.js b/play.js
index 530b40f..3b11b69 100644
--- a/play.js
+++ b/play.js
@@ -5,6 +5,20 @@
 */
 
 // TODO: show "reshuffle" flag next to card deck display
+// TODO: improve animations by having one CU stack per general and one CU stack per space
+
+function toggle_counters() {
+	// Cycle between showing everything, only markers, and nothing.
+	if (ui.map.classList.contains("hide_markers")) {
+		ui.map.classList.remove("hide_markers")
+		ui.map.classList.remove("hide_pieces")
+	} else if (ui.map.classList.contains("hide_pieces")) {
+		ui.map.classList.add("hide_markers")
+	} else {
+		ui.map.classList.add("hide_pieces")
+	}
+}
+
 
 /* COMMON */
 
@@ -144,7 +158,9 @@ let ui = {
 
 	last_played: document.getElementById("last_played"),
 	hand: document.getElementById("hand"),
+	map: document.getElementById("map"),
 	spaces_element: document.getElementById("spaces"),
+	markers_element: document.getElementById("markers"),
 	pieces_element: document.getElementById("pieces"),
 
 	cards: [],
@@ -214,7 +230,6 @@ function on_init() {
 		e.className = "card card_" + c
 		if (c > 0) {
 			e.my_id = c
-			e.onclick = on_click_card
 			register_action(e, "card", c)
 		}
 	}
@@ -319,11 +334,7 @@ function show_move_marker(marker, s1, s2) {
 	marker.style.left = (x|0) - 24 + "px"
 	marker.style.top = (y|0) - 24 + "px"
 	marker.style.transform = "rotate(" + (a + Math.PI/2) + "rad)"
-	ui.pieces_element.appendChild(marker)
-}
-
-function show_marker(e) {
-	ui.pieces_element.appendChild(e)
+	ui.markers_element.appendChild(marker)
 }
 
 function toggle_marker(e, cond) {
@@ -331,6 +342,10 @@ function toggle_marker(e, cond) {
 		show_marker(e)
 }
 
+function show_marker(e) {
+	ui.markers_element.appendChild(e)
+}
+
 function show_marker_at(e, x, y) {
 	show_marker(e)
 	e.style.left = x - e.my_dx + "px"
@@ -341,9 +356,23 @@ function show_marker_at_xy(e, xy) {
 	show_marker_at(e, xy[0], xy[1])
 }
 
-function toggle_marker_with_number_at(e, n, x, y) {
+function show_piece(e) {
+	ui.pieces_element.appendChild(e)
+}
+
+function show_piece_at(e, x, y) {
+	show_piece(e)
+	e.style.left = x - e.my_dx + "px"
+	e.style.top = y - e.my_dy + "px"
+}
+
+function show_piece_at_xy(e, xy) {
+	show_piece_at(e, xy[0], xy[1])
+}
+
+function show_piece_with_number_at(e, n, x, y) {
 	if (n > 0) {
-		show_marker(e)
+		show_piece(e)
 		e.textContent = n
 		e.style.left = x - e.my_dx + "px"
 		e.style.top = y - e.my_dy + "px"
@@ -477,13 +506,13 @@ function get_static_bcu(s) {
 
 function layout_all_cu(an, fn, bn, ae, fe, be, pos) {
 	let [ x, y ] = pos
-	toggle_marker_with_number_at(ae, an, x, y)
+	show_piece_with_number_at(ae, an, x, y)
 	if (an > 0)
 		x += 30
-	toggle_marker_with_number_at(fe, fn, x, y)
+	show_piece_with_number_at(fe, fn, x, y)
 	if (fn > 0)
 		x += 30
-	toggle_marker_with_number_at(be, bn, x, y)
+	show_piece_with_number_at(be, bn, x, y)
 	if (bn > 0)
 		x += 30
 	// if (an > 0 || fn > 0 || bn > 0) x -= 10
@@ -510,6 +539,7 @@ function on_update() {
 
 	ui.last_played.className = "card shrink card_" + view.last_played
 
+	ui.markers_element.replaceChildren()
 	ui.pieces_element.replaceChildren()
 
 	for (let s = 0; s < data.spaces.length; ++s) {
@@ -518,16 +548,16 @@ function on_update() {
 	}
 
 	if (view.congress === CONTINENTAL_CONGRESS_DISPERSED)
-		show_marker_at(ui.congress, data.spaces[view.congress].x, data.spaces[view.congress].y)
+		show_piece_at(ui.congress, data.spaces[view.congress].x, data.spaces[view.congress].y)
 	else
-		show_marker_at(ui.congress, data.spaces[view.congress].x+20, data.spaces[view.congress].y-10)
+		show_piece_at(ui.congress, data.spaces[view.congress].x+20, data.spaces[view.congress].y-10)
 
 	if (view.french_navy < 0)
-		show_marker_at(ui.french_navy, data.spaces[FRENCH_REINFORCEMENTS].x-65, data.spaces[FRENCH_REINFORCEMENTS].y)
+		show_piece_at(ui.french_navy, data.spaces[FRENCH_REINFORCEMENTS].x-65, data.spaces[FRENCH_REINFORCEMENTS].y)
 	else if (view.french_navy > 1700)
-		show_marker_at_xy(ui.french_navy, data.layout.turn[view.french_navy])
+		show_piece_at_xy(ui.french_navy, data.layout.turn[view.french_navy])
 	else
-		show_marker_at(ui.french_navy, data.layout.sea[view.french_navy][0]-15, data.layout.sea[view.french_navy][1]+42)
+		show_piece_at(ui.french_navy, data.layout.sea[view.french_navy][0]-15, data.layout.sea[view.french_navy][1]+42)
 
 	if (view.move && view.move.from !== view.move.to)
 		show_move_marker(ui.combat, view.move.from, view.move.to)
@@ -628,7 +658,6 @@ function on_update() {
 		if (view.react && view.react.who === g)
 			[ x, y ] = ui.layout_react
 
-
 		ui.generals[g].classList.toggle("selected", view.selected_general === g)
 
 		if (view.move && view.move.who === g) {
@@ -654,7 +683,7 @@ function on_update() {
 			}
 		}
 
-		show_marker_at(ui.generals[g], x, y)
+		show_piece_at(ui.generals[g], x, y)
 	}
 
 	for (let i = 0; i < 14; ++i) {
@@ -743,70 +772,6 @@ function on_update() {
 
 }
 
-/* POPUP MENU */
-
-function show_popup_menu(evt, menu_id, card, title) {
-	let menu = document.getElementById(menu_id)
-
-	let show = false
-	for (let item of menu.querySelectorAll("li")) {
-		let action = item.dataset.action
-		if (action) {
-			if (is_action(action, card)) {
-				show = true
-				item.classList.add("action")
-				item.classList.remove("disabled")
-				item.onclick = function () {
-					send_action(action, card)
-					hide_popup_menu()
-					evt.stopPropagation()
-				}
-			} else {
-				item.classList.remove("action")
-				item.classList.add("disabled")
-				item.onclick = null
-			}
-		}
-	}
-
-	if (show) {
-		menu.onmouseleave = hide_popup_menu
-		menu.style.display = "block"
-		if (title) {
-			let item = menu.querySelector("li.title")
-			if (item) {
-				item.onclick = hide_popup_menu
-				item.textContent = title
-			}
-		}
-
-		let w = menu.clientWidth
-		let h = menu.clientHeight
-		let x = Math.max(5, Math.min(evt.clientX - w / 2, window.innerWidth - w - 5))
-		let y = Math.max(5, Math.min(evt.clientY - 12, window.innerHeight - h - 40))
-		menu.style.left = x + "px"
-		menu.style.top = y + "px"
-
-		evt.stopPropagation()
-	} else {
-		menu.style.display = "none"
-	}
-}
-
-function hide_popup_menu() {
-	document.getElementById("popup").style.display = "none"
-}
-
-function on_click_card(evt) {
-	if (view.actions) {
-		let c = evt.target.my_id
-		if (is_action("card", c))
-			send_action("card", c)
-		else
-			show_popup_menu(evt, "popup", c, data.cards[c].title)
-	}
-}
-
 /* LOG */
 
 function sub_space(_match, p1) {