From 8651ae9fec82c0a47dd1e17a883664f2054636b7 Mon Sep 17 00:00:00 2001
From: Tor Andersson <tor@ccxvii.net>
Date: Tue, 29 Oct 2024 17:23:12 +0100
Subject: Use SVG paths for spaces.

---
 play.js | 44 +++++++++++++++++++++++++++++---------------
 1 file changed, 29 insertions(+), 15 deletions(-)

(limited to 'play.js')

diff --git a/play.js b/play.js
index 20e3e90..8a10302 100644
--- a/play.js
+++ b/play.js
@@ -149,6 +149,25 @@ const last_province = S_PUNJAB
 
 const space_name = data.space_name
 
+const space_id = [
+	"space_Andhra",
+	"space_Bengal",
+	"space_Gondwana",
+	"space_Gujarat",
+	"space_Jaunpur",
+	"space_Karnataka",
+	"space_Madhyadesh",
+	"space_Maharashtra",
+	"space_Malwa",
+	"space_Orissa",
+	"space_Rajput_Kingdoms",
+	"space_Sindh",
+	"space_Tamilakam",
+	"space_Delhi",
+	"space_Mountain_Passes",
+	"space_Punjab",
+]
+
 /* LAYOUT DATA */
 // :r !node tools/parse-layout.js
 const layout = {
@@ -507,31 +526,26 @@ function init_ui() {
 	for (let s = 0; s < 26; ++s) {
 		let e = null
 
-		// provinces
-		if (s < S_DELHI) {
+		// provinces, mountain passes and punjab
+		if (s < S_DELHI || s === S_MOUNTAIN_PASSES || s == S_PUNJAB) {
 			let { cx, cy } = layout.circles.provinces[space_name[s]]
 			ui.control[s] = e = create("div", { className: "token tributary" })
 			e.style.left = (cx - 24) + "px"
 			e.style.top = (cy - 24) + "px"
 			document.getElementById("tokens").appendChild(e)
 
-			ui.spaces[s] = e = create("div", { className: "space province" })
-			e.style.left = (cx - 45) + "px"
-			e.style.top = (cy - 45) + "px"
-			e.style.width = (90 - 4) + "px"
-			e.style.height = (90 - 4) + "px"
+			ui.spaces[s] = e = document.getElementById("svgmap").getElementById(space_id[s])
 			register_action(e, "space", s)
-			document.getElementById("spaces").appendChild(e)
 		}
 
-		// delhi & passes
-		if (s >= S_DELHI && s <= S_PUNJAB) {
+		// delhi
+		if (s == S_DELHI) {
 			let { cx, cy, rx, ry } = layout.circles.mongol_invasion_regions[space_name[s]]
 			ui.spaces[s] = e = create("div", { className: "space province" })
 			e.style.left = (cx - rx) + "px"
 			e.style.top = (cy - ry) + "px"
-			e.style.width = (rx * 2 - 4) + "px"
-			e.style.height = (ry * 2 - 4) + "px"
+			e.style.width = (rx * 2 - 8) + "px"
+			e.style.height = (ry * 2 - 8) + "px"
 			register_action(e, "space", s)
 			document.getElementById("spaces").appendChild(e)
 		}
@@ -823,9 +837,9 @@ function on_update() {
 	}
 
 	switch (player) {
-	case "DS": ui.favicon.href = "images/Flag_DS.png"; break
-	case "BK": ui.favicon.href = "images/Flag_BK.png"; break
-	case "VE": ui.favicon.href = "images/Flag_VE.png"; break
+	case "DS": ui.favicon.href = "images/Flags_DS.png"; break
+	case "BK": ui.favicon.href = "images/Flags_BK.png"; break
+	case "VE": ui.favicon.href = "images/Flags_VE.png"; break
 	}
 
 	ui.header.classList.toggle("ds", view.current === DS)
-- 
cgit v1.2.3