1 files changed, 95 insertions, 31 deletions

diff --git a/play.js b/play.js
index d36c503..7249bee 100644
--- a/play.js
+++ b/play.js
@@ -19,6 +19,44 @@ const SPACES = [
 	"extra",
 ];
 
+const PERSIAN_EVENT_NAMES = {
+	1: "Cavalry of Mardonius",
+	2: "Tribute of Earth and Water",
+	3: "Tribute of Earth and Water",
+	4: "Carneia Festival",
+	5: "The Immortals",
+	6: "Ostracism",
+	7: "The Great King",
+	8: "The Royal Road",
+	9: "Hippias",
+	10: "Separate Peace",
+	11: "Sudden Death of the Great King",
+	12: "Defection of Thebes",
+	13: "Tribute of Earth and Water",
+	14: "Alliance with Carthage",
+	15: "Acropolis on Fire",
+	16: "Pacification of Babylon or Egypt",
+};
+
+const GREEK_EVENT_NAMES = {
+	1: "Mines of Laurion",
+	2: "Ionian Revolt",
+	3: "Wrath of Poseidon",
+	4: "Miltiades",
+	5: "Themistocles",
+	6: "Pausanias",
+	7: "Oracle of Delphi",
+	8: "Leonidas",
+	9: "Artemisia I",
+	10: "Evangelion",
+	11: "Melas Zomos",
+	12: "Molon Labe",
+	13: "Triremes",
+	14: "Support from Syracuse",
+	15: "300 Spartans",
+	16: "Desertion of Greek Soldiers",
+};
+
 const PORTS = {
         "Abydos":{"x":866,"y":625,"w":138,"h":138,"layout_x":855,"layout_y":585,"wrap":4},
         "Ephesos":{"x":450,"y":765,"w":138,"h":138,"layout_x":424,"layout_y":743,"wrap":3},
@@ -57,6 +95,7 @@ let ui = {
 	all_armies: [],
 	selected_armies: null,
 	selected_fleets: null,
+	popup_label: document.getElementById("menu_card_label"),
 };
 
 function on_log(text) {
@@ -570,28 +609,61 @@ function update_ui() {
 			e.classList.remove("selected");
 }
 
-let current_popup_card = 0;
 
-function show_popup_menu(evt, list) {
-	document.querySelectorAll("#popup div").forEach(e => e.classList.remove('enabled'));
-	for (let item of list) {
-		let e = document.getElementById("menu_" + item);
-		e.classList.add('enabled');
+function is_action(action, card) {
+	return view.actions && view.actions[action] && view.actions[action].includes(card);
+}
+
+function show_popup_menu(evt, menu_id, target_id, title) {
+	let menu = document.getElementById(menu_id)
+
+	let show = true
+	for (let item of menu.querySelectorAll("li")) {
+		let action = item.dataset.action
+		if (action) {
+			if (is_action(action, target_id)) {
+				show = true
+				item.classList.add("action")
+				item.classList.remove("disabled")
+				item.onclick = function () {
+					send_action(action, target_id)
+					hide_popup_menu()
+					evt.stopPropagation()
+				}
+			} else {
+				item.classList.remove("action")
+				item.classList.add("disabled")
+				item.onclick = null
+			}
+		}
 	}
-	let popup = document.getElementById("popup");
-	popup.style.display = 'block';
-	popup.style.left = (evt.clientX-50) + "px";
-	popup.style.top = (evt.clientY-12) + "px";
-	ui.cards[current_popup_card].classList.add("selected");
+
+	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"
+
+		return true
+	}
+
+	return false
 }
 
 function hide_popup_menu() {
-	let popup = document.getElementById("popup");
-	popup.style.display = 'none';
-	if (current_popup_card) {
-		ui.cards[current_popup_card].classList.remove("selected");
-		current_popup_card = 0;
-	}
+	document.getElementById("popup").style.display = "none"
 }
 
 function on_card_event() {
@@ -603,25 +675,17 @@ function on_card_move() {
 	hide_popup_menu();
 }
 
-function is_card_action(action, card) {
-	return view.actions && view.actions[action] && view.actions[action].includes(card);
-}
-
 function on_card(evt) {
 	if (view.actions) {
 		let card = evt.target.card;
-		if (is_card_action('discard', card)) {
+		if (is_action('discard', card)) {
 			send_action('discard', card);
 		} else {
-			let menu = [];
-			if (is_card_action('card_event', card))
-				menu.push('card_event');
-			if (is_card_action('card_move', card))
-				menu.push('card_move');
-			if (menu.length > 0) {
-				current_popup_card = card;
-				show_popup_menu(evt, menu);
-			}
+			if (player === GREECE)
+				show_popup_menu(evt, "popup", card, GREEK_EVENT_NAMES[card])
+			else
+				show_popup_menu(evt, "popup", card, PERSIAN_EVENT_NAMES[card])
+			evt.stopPropagation()
 		}
 	}
 }