Clean-up attack

1 files changed, 73 insertions, 2 deletions

diff --git a/play.js b/play.js
index 9872564..7ac3dcc 100644
--- a/play.js
+++ b/play.js
@@ -8,6 +8,8 @@ const first_piece = data.first_piece
 const last_piece = data.last_piece
 const last_cavalry = 9
 
+const faction_name = [ "Delhi Sultanate", "Bahmani Kingdom", "Vijayanagara Empire", "Mongol Invaders" ]
+
 // :r !python3 tools/genlayout.py
 const LAYOUT = {
 	"Andhra DS": [785, 1014],
@@ -469,7 +471,11 @@ let ui = {
 		document.getElementById("pool_a"),
 		document.getElementById("pool_d"),
 	],
-	dice: []
+	dice: [],
+	attack_table: document.getElementById("attack_table"),
+	attack_header: document.getElementById("attack_header"),
+	attack_attacker: document.getElementById("name_attacker"),
+	attack_defender: document.getElementById("name_defender"),
 }
 
 function create(t, p, ...c) {
@@ -525,6 +531,9 @@ function init_ui() {
 	ui.unshaded_event.onmouseenter = on_focus_unshaded_event
 	ui.unshaded_event.onmouseleave = on_focus_this_event
 
+	// Make combat table draggable
+	dragElement(ui.attack_table)
+
 	// player cavalry tokens
 	for (let i = 0; i <= LAST_CAVALRY; ++i) {
 		let e = null
@@ -866,12 +875,68 @@ function make_card_class_name(c) {
 	else
 		return "card card_" + c + " u" + data.card_unshaded_lines[c] + " s" + data.card_shaded_lines[c]
 }
-S_VE_AVAILABLE
+
 function update_player_active(name, x) {
 	if (roles[name])
 		roles[name].element.classList.toggle("active", x)
 }
 
+function update_dice_box() {
+	ui.attack_header.textContent = "Attack in " + data.space_name[view.attack.where]
+	ui.attack_attacker.textContent = "Attacker - " + faction_name[view.attack.attacker]
+	ui.attack_defender.textContent = "Defender - " + faction_name[view.attack.target]
+
+	if (ui.attack_table.classList.contains("hide"))
+		show_dice_box(ui.attack_table)
+}
+
+function show_dice_box(box) {
+	box.classList.remove("hide")
+	box.classList.add("show")
+	box.style.top = null
+	box.style.left = null
+	// box.setAttribute("open", true)
+
+	// calculate size
+	let w = box.clientWidth
+	let h = box.clientHeight
+
+	// center where possible
+	let x = 500
+	let y = 500
+
+	box.style.top = y + "px"
+	box.style.left = x + "px"
+}
+
+function dragElement(elmnt) {
+	var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
+	ui.attack_header.onmousedown = dragMouseDown;
+
+	function dragMouseDown(e) {
+		e.preventDefault();
+		pos3 = e.clientX;
+		pos4 = e.clientY;
+		document.onmouseup = closeDragElement;
+		document.onmousemove = elementDrag;
+	}
+
+	function elementDrag(e) {
+		e.preventDefault();
+		pos1 = pos3 - e.clientX;
+		pos2 = pos4 - e.clientY;
+		pos3 = e.clientX;
+		pos4 = e.clientY;
+		elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
+		elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
+	}
+  
+	function closeDragElement() {
+		document.onmouseup = null;
+		document.onmousemove = null;
+	}
+}
+
 let once = true
 function on_update() {
 	if (once) {
@@ -885,6 +950,12 @@ function on_update() {
 	case "VE": ui.favicon.href = "images/Flags_VE.png"; break
 	}
 
+	// Dice rolling
+	if (view.dice.reduce((sum, num) => sum + num, 0) > 0)
+		update_dice_box()
+	else
+		ui.attack_table.classList.add("hide")
+
 	ui.header.classList.toggle("ds", view.current === DS)
 	ui.header.classList.toggle("bk", view.current === BK)
 	ui.header.classList.toggle("ve", view.current === VE)