colorswip-ui-rework

1 files changed, 41 insertions, 18 deletions

diff --git a/play2.js b/play2.js
index 494e3c6..ab846e5 100644
--- a/play2.js
+++ b/play2.js
@@ -14,6 +14,8 @@ const ui = {
 	tracks_x: [],
 	tracks: [],
 	fronts: [],
+	con_fronts: [],
+	str_fronts: [],
 
 	// tokens
 	standees: [],
@@ -86,7 +88,7 @@ function build_track(t, action_name, track_name, a, b) {
 		const bm = t * 11 + s
 
 		e = (ui.blank_markers[bm] = document.createElement("div"))
-		e.className = "token blank hide"
+		e.className = "red token blank hide"
 		e.style.top = Math.round(y+4) + "px"
 		e.style.left = Math.round(x+3) + "px"
 		register_action(e, "blank_marker", bm)
@@ -104,7 +106,7 @@ function build_track(t, action_name, track_name, a, b) {
 	}
 
 	e = (ui.standees[t] = document.createElement("div"))
-	e.className = "token standee standee_" + t
+	e.className = "white token standee standee_" + t
 	e.style.top = y - 10 + "px"
 	e.style.left = boxes[track_name][0] + 4 + "px"
 	register_action(e, "standee", t)
@@ -114,7 +116,7 @@ function build_track(t, action_name, track_name, a, b) {
 function build_bonus(b, box_name, cname) {
 	let e = ui.bonuses[b] = document.createElement("div")
 	let [x, y, w, h] = boxes[box_name]
-	e.className = "token round " + cname
+	e.className = "red token round " + cname
 	e.style.top = Math.round(y + w/2 - 32) + "px"
 	e.style.left = Math.round(x + w/2 - 32) + "px"
 	register_action(e, "bonus", b)
@@ -131,6 +133,23 @@ function build_front(i, action_id, box_name) {
 	e.style.height = Math.round(h - 6) + "px"
 	register_action(e, "front", action_id)
 	ui.map.appendChild(e)
+
+	e = ui.con_fronts[i] = document.createElement("div")
+	e.className = "front_container"
+	e.style.top = y + 5 + "px"
+	e.style.left = x + "px"
+	e.style.width = w - 25 + "px"
+	e.style.height = 55 + "px"
+	ui.map.appendChild(e)
+
+	e = ui.str_fronts[i] = document.createElement("div")
+	e.className = "front_container"
+	e.style.top = y + h - 55 - 5+ "px"
+	e.style.left = x + "px"
+	e.style.width = w - 25 + "px"
+	e.style.height = 55 + "px"
+	ui.map.appendChild(e)
+
 }
 
 function on_init() {
@@ -185,7 +204,7 @@ function on_init() {
 
 	for (i = 0; i < 9; ++i) {
 		e = (ui.medallions[i] = document.createElement("div"))
-		e.className = "token medallion medallion_" + i
+		e.className = "pink token medallion medallion_" + i
 		register_action(e, "medallion", i)
 	}
 
@@ -216,28 +235,29 @@ const faction_class = {
 	"m": "moderate",
 }
 
-function update_front(container, front) {
+function update_front(str_container, con_container, front) {
 	var i, n, e, cn
-	container.replaceChildren()
 
+	str_container.replaceChildren()
 	if (front.value < 0) {
 		n = -front.value
-		cn = "token front_minus"
+		cn = "brown token front_minus"
 	} else {
-		n = -front.value
-		cn = "token front_plus"
+		n = front.value
+		cn = "pink token front_plus"
 	}
 	for (i = 0; i < n; ++i) {
 		let e = document.createElement("div")
 		e.className = cn
-		container.appendChild(e)
+		str_container.appendChild(e)
 	}
 
+	con_container.replaceChildren()
 	for (i of ["a", "c", "m"]) {
 		if (front.contributions.includes(i)) {
 			let e = document.createElement("div")
-			e.className = "token player " + faction_class[i]
-			container.appendChild(e)
+			e.className = "red token player " + faction_class[i]
+			con_container.appendChild(e)
 		}
 	}
 }
@@ -254,8 +274,11 @@ function on_update() {
 	place_cards(ui.tableaus.m, [ 117, ...view.tableaus.m])
 
 	// TODO: current year deck
-	ui.bonuses[0].classList.toggle("off", !view.bonuses[0])
-	ui.bonuses[1].classList.toggle("off", !view.bonuses[1])
+	for (i = 0; i <= 1; ++i) {
+		ui.bonuses[i].classList.toggle("red", !!view.bonuses[i])
+		ui.bonuses[i].classList.toggle("gray", !view.bonuses[i])
+		ui.bonuses[i].classList.toggle("off", !view.bonuses[i])
+	}
 
 	for (i = 0; i < 4; ++i) {
 		if (i < view.current_events.length)
@@ -278,10 +301,10 @@ function on_update() {
 			ui.medallion_container[i].appendChild(ui.medallions[i])
 	}
 
-	update_front(ui.fronts[0], view.fronts.a)
-	update_front(ui.fronts[1], view.fronts.m)
-	update_front(ui.fronts[2], view.fronts.n)
-	update_front(ui.fronts[3], view.fronts.s)
+	update_front(ui.str_fronts[0], ui.con_fronts[0], view.fronts.a)
+	update_front(ui.str_fronts[1], ui.con_fronts[1], view.fronts.m)
+	update_front(ui.str_fronts[2], ui.con_fronts[2], view.fronts.n)
+	update_front(ui.str_fronts[3], ui.con_fronts[3], view.fronts.s)
 
 	action_button("add_to_front", "+1 to a Front")
 	action_button("d_liberty", "Decrease Liberty")