Prettier!

1 files changed, 96 insertions, 48 deletions

diff --git a/play.js b/play.js
index 3a91056..c21df4f 100644
--- a/play.js
+++ b/play.js
@@ -119,10 +119,10 @@ const space_count = space_names.length
 const boxes = {
 	"Royalists": [80,428,126,126],
 	"Republicans": [490,428,126,126],
-	"Catholic Church": [80,786,126,126],
-	"Social Movements": [490,786,126,126],
+	"Catholic Church": [80,787,126,126],
+	"Social Movements": [490,787,126,126],
 	"Fort d'Issy": [844,793,126,126],
-	"Butte-Aux-Cailles": [1038,660,126,126],
+	"Butte-Aux-Cailles": [1038,661,126,126],
 	"Père Lachaise": [1206,591,126,126],
 	"Château de Vincennes": [1342,650,126,127],
 	"Press": [294,727,112,112],
@@ -131,29 +131,34 @@ const boxes = {
 	"Mont-Valérien": [717,507,112,112],
 	"Versailles HQ": [662,850,101,95],
 	"Prussian Occupied Territory": [1298,353,180,86],
-	"Red Crisis Track Start": [982,61,90,112],
-	"Red Crisis Track Escalation": [1072,61,84,112],
-	"Red Crisis Track Tension": [1156,61,83,112],
-	"Red Crisis Track Final Crisis": [1239,61,83,112],
-	"Blue Crisis Track Start": [432,61,88,112],
-	"Blue Crisis Track Escalation": [348,61,84,112],
-	"Blue Crisis Track Tension": [265,61,83,112],
-	"Blue Crisis Track Final Crisis": [182,61,83,112],
+
 	"Blue Objective Card": [120,996,272,54],
 	"Red Objective Card": [1114,996,272,54],
+
 	"Blue Cube Pool": [180,198,198,55],
-	"Red Bonus Cubes 1": [1072,22,84,39],
-	"Red Bonus Cubes 2": [1156,22,83,39],
-	"Red Bonus Cubes 3": [1239,22,83,39],
-	"Blue Bonus Cubes 1": [348,22,84,39],
-	"Blue Bonus Cubes 2": [265,22,83,39],
-	"Blue Bonus Cubes 3": [182,22,83,39],
-	"Red Cube Pool 1": [787,330,115,39],
-	"Red Cube Pool 2": [902,330,136,39],
-	"Red Cube Pool 3": [1038,330,157,40],
-	"Prussian Collaboration 1": [600,330,115,39],
-	"Prussian Collaboration 2": [463,330,136,39],
-	"Prussian Collaboration 3": [306,330,157,39],
+
+	"Red Crisis Track Start":		[982,70,90,112],
+	"Red Crisis Track Escalation":		[1072,70,84,112],
+	"Red Crisis Track Tension":		[1156,70,84,112],
+	"Red Crisis Track Final Crisis":	[1239,70,84,112],
+	"Blue Crisis Track Start":		[432,70,88,112],
+	"Blue Crisis Track Escalation":		[348,70,84,112],
+	"Blue Crisis Track Tension":		[265,70,84,112],
+	"Blue Crisis Track Final Crisis":	[182,70,84,112],
+
+	"Red Bonus Cubes 1": [1072,20,84,40],
+	"Red Bonus Cubes 2": [1156,20,84,40],
+	"Red Bonus Cubes 3": [1239,20,84,40],
+	"Blue Bonus Cubes 1": [348,23,84,40],
+	"Blue Bonus Cubes 2": [265,23,84,40],
+	"Blue Bonus Cubes 3": [182,20,84,40],
+
+	"Red Cube Pool 1": [787,340,115,40],
+	"Red Cube Pool 2": [902,340,100,40],
+	"Red Cube Pool 3": [1038,340,157,40],
+	"Prussian Collaboration 1": [600,340,115,40],
+	"Prussian Collaboration 2": [463,340,100,40],
+	"Prussian Collaboration 3": [306,340,140,40],
 }
 
 function is_action(action) {
@@ -188,6 +193,11 @@ function on_focus_space(evt) {
 	document.getElementById("status").textContent = evt.target.my_name
 }
 
+function on_focus_piece(evt) {
+	if (evt.target.my_name)
+		document.getElementById("status").textContent = evt.target.my_name
+}
+
 function on_click_red_momentum(evt) {
 	if (evt.button === 0) {
 		if (send_action('red_momentum'))
@@ -237,11 +247,34 @@ function create(t, p, ...c) {
 	return e
 }
 
+const DIMENSION_CLASS = [
+	"institutional", "institutional", "institutional",
+	"public_opinion", "public_opinion", "public_opinion",
+	"forts", "forts", "forts",
+	"paris", "paris", "paris",
+]
+
+
 function build_user_interface() {
 	let elt
 
-	document.getElementById("red_momentum").addEventListener("mousedown", on_click_red_momentum)
-	document.getElementById("blue_momentum").addEventListener("mousedown", on_click_blue_momentum)
+	ui.red_momentum.my_name = "Revolutionary Momentum"
+	ui.red_momentum.onmousedown = on_click_red_momentum
+	ui.red_momentum.onmouseenter = on_focus_piece
+	ui.red_momentum.onmouseleave = on_blur
+
+	ui.blue_momentum.my_name = "Prussian Collaboration"
+	ui.blue_momentum.onmousedown = on_click_blue_momentum
+	ui.blue_momentum.onmouseenter = on_focus_piece
+	ui.blue_momentum.onmouseleave = on_blur
+
+	ui.political_vp.my_name = "Political VP"
+	ui.political_vp.onmouseenter = on_focus_piece
+	ui.political_vp.onmouseleave = on_blur
+
+	ui.military_vp.my_name = "Military VP"
+	ui.military_vp.onmouseenter = on_focus_piece
+	ui.military_vp.onmouseleave = on_blur
 
 	ui.objective_back = [
 		create("div", { className: "card card_objective_back" }),
@@ -276,20 +309,35 @@ function build_user_interface() {
 		document.getElementById("pieces").appendChild(elt)
 	}
 
-	for (let i = 0; i < space_count; ++i) {
-		let name = space_names[i]
+	for (let s = 0; s < space_count; ++s) {
+		let name = space_names[s]
 		let [x, y, w, h] = boxes[name]
-		elt = ui.spaces[i] = create("div", {
-			className: "space",
-			my_space: i,
+		let cn = "space"
+		if (s < 12)
+			cn += " " + DIMENSION_CLASS[s]
+		if (s === 0 || s === 3 || s === 6 || s === 9) {
+			cn += " pivotal"
+			x -= 22
+			y -= 23
+			w += 46
+			h += 46
+		} else {
+			x += 5
+			y += 5
+			w -= 10
+			h -= 10
+		}
+		elt = ui.spaces[s] = create("div", {
+			className: cn,
+			my_space: s,
 			my_name: name,
 			onmousedown: on_click_space,
 			onmouseenter: on_focus_space,
 			onmouseleave: on_blur,
 			style: `top: ${y-1}px;left:${x-1}px;width:${w+2}px;height:${h+2}px`
 		})
-		space_layout_cube[i] = { x: x + Math.round(w/2), y: y + Math.round(h*1/2) }
-		space_layout_disc[i] = { x: x + w, y: y + h }
+		space_layout_cube[s] = { x: x + Math.round(w/2), y: y + Math.round(h*1/2) }
+		space_layout_disc[s] = { x: x + w, y: y + h }
 		document.getElementById("spaces").appendChild(elt)
 	}
 }
@@ -355,35 +403,35 @@ function sub_space_name(match, p1, offset, string) {
 	}
 	if (true) {
 		if (c <= 2)
-			return '<img class="s" src="space_institutional.svg">' + n
+			return '<img class="s" src="images/icon_institutional.svg">' + n
 		if (c <= 5)
-			return '<img class="s" src="space_public_opinion.svg">' + n
+			return '<img class="s" src="images/icon_public_opinion.svg">' + n
 		if (c <= 8)
-			return '<img class="s" src="space_forts.svg">' + n
+			return '<img class="s" src="images/icon_forts.svg">' + n
 		if (c <= 11)
-			return '<img class="s" src="space_paris.svg">' + n
+			return '<img class="s" src="images/icon_paris.svg">' + n
 	}
 	if (true) {
 		if (c <= 2)
-			return '<span class="institutional"><img class="s" src="space_institutional.svg">' + n + "</span>"
+			return '<span class="institutional"><img class="s" src="images/icon_institutional.svg">' + n + "</span>"
 		if (c <= 5)
-			return '<span class="public_opinion"><img class="s" src="space_public_opinion.svg">' + n + "</span>"
+			return '<span class="public_opinion"><img class="s" src="images/icon_public_opinion.svg">' + n + "</span>"
 		if (c <= 8)
-			return '<span class="forts"><img class="s" src="space_forts.svg">' + n + "</span>"
+			return '<span class="forts"><img class="s" src="images/icon_forts.svg">' + n + "</span>"
 		if (c <= 11)
-			return '<span class="paris"><img class="s" src="space_paris.svg">' + n + "</span>"
+			return '<span class="paris"><img class="s" src="images/icon_paris.svg">' + n + "</span>"
 	}
 	return n
 }
 
-const IMG_RC = '<img class="c" src="pieces/red_cube.svg">'
-const IMG_BC = '<img class="c" src="pieces/blue_cube.svg">'
-const IMG_RD = '<img class="d" src="pieces/red_disc.svg">'
-const IMG_BD = '<img class="d" src="pieces/blue_disc.svg">'
-const IMG_RM = '<img class="m" src="pieces/red_cylinder.svg">'
-const IMG_BM = '<img class="m" src="pieces/blue_cylinder.svg">'
-const IMG_MV = '<img class="m" src="pieces/purple_cylinder.svg">'
-const IMG_PV = '<img class="m" src="pieces/orange_cylinder.svg">'
+const IMG_RC = '<img class="c" src="images/red_cube.svg">'
+const IMG_BC = '<img class="c" src="images/blue_cube.svg">'
+const IMG_RD = '<img class="d" src="images/red_disc.svg">'
+const IMG_BD = '<img class="d" src="images/blue_disc.svg">'
+const IMG_RM = '<img class="m" src="images/red_cylinder.svg">'
+const IMG_BM = '<img class="m" src="images/blue_cylinder.svg">'
+const IMG_MV = '<img class="m" src="images/purple_cylinder.svg">'
+const IMG_PV = '<img class="m" src="images/orange_cylinder.svg">'
 
 function on_log(text) {
 	let p = document.createElement("div")