colorswip-ui-rework

3 files changed, 135 insertions, 75 deletions

diff --git a/play2.css b/play2.css
index 52cc061..07f0ab1 100644
--- a/play2.css
+++ b/play2.css
@@ -23,17 +23,10 @@ main {
 	position: absolute;
 }
 
-.card {
-	background-size: 100% 100%;
-	width: 206px;
-	height: 281px;
-	border-radius: 10px;
-	box-shadow: 0 0 0 1px black, 1px 1px 4px #0006;
-}
+/* SPACES */
 
 .track {
 	position: absolute;
-	background-color: #fff4;
 	border: 3px solid transparent;
 	width: 52px;
 	height: 54px;
@@ -45,11 +38,14 @@ main {
 
 .front {
 	position: absolute;
-	background-color: #fff4;
 	border: 6px solid transparent;
 	border-radius: 34px;
+}
 
+.front_container {
+	position: absolute;
 	display: flex;
+	justify-content: center;
 	flex-wrap: wrap;
 	gap: 4px;
 }
@@ -58,67 +54,34 @@ main {
 	border-color: white;
 }
 
-.front div {
+.front_container div {
 	margin-right: -30px;
+	margin-bottom: -30px;
 }
 
+/* TOKENS */
+
 .token {
-	background-color: #fff4;
 	border: 3px solid black;
 	width: 45px;
 	height: 45px;
-	box-shadow: 0 0 0 1px black, 1px 1px 4px #0006;
 }
 
+.token.white { background-color: hsl(0,0%,80%); border-color: hsl(0,0%,90%) hsl(0,0%,70%) hsl(0,0%,70%) hsl(0,0%,90%); box-shadow: 0 0 0 1px hsl(0,0%,26%), 0px 1px 4px #0008; }
+.token.red { background-color: hsl(1,100%,47%); border-color: hsl(1,100%,57%) hsl(1,100%,37%) hsl(1,100%,37%) hsl(1,100%,57%); box-shadow: 0 0 0 1px hsl(1,100%,15%), 0px 1px 4px #0008; }
+.token.pink { background-color: hsl(19,56%,67%); border-color: hsl(19,56%,77%) hsl(19,56%,57%) hsl(19,56%,57%) hsl(19,56%,77%); box-shadow: 0 0 0 1px hsl(19,56%,22%), 0px 1px 4px #0008; }
+.token.brown { background-color: hsl(50,33%,60%); border-color: hsl(50,33%,70%) hsl(50,33%,50%) hsl(50,33%,50%) hsl(50,33%,70%); box-shadow: 0 0 0 1px hsl(50,33%,20%), 0px 1px 4px #0008; }
+.token.gray { background-color: hsl(240,1%,65%); border-color: hsl(240,1%,75%) hsl(240,1%,55%) hsl(240,1%,55%) hsl(240,1%,75%); box-shadow: 0 0 0 1px hsl(240,1%,22%), 0px 1px 4px #0008; }
+
+.token.blank { width: 45px; height: 45px; }
 .token.round { width: 58px; height: 58px; }
 .token.square { width: 45px; height: 45px; }
 .token.standee { width: 44px; height: 54px; }
 .token.medallion { width: 53px; height: 53px; }
 
-.token.blank {
-	width: 45px;
-	height: 45px;
-	background-color: red;
-	border-radius: 50%;
-}
-
-.token.round, .token.blank {
-	background-color: red;
-	border-radius: 50%;
-	border-color: pink darkred darkred pink;
-}
-
-.token.round.off {
-	background-color: gray;
-	border-color: silver gray gray silver;
-}
-
-.token.standee {
-	background-color: white;
-	border-radius: 10px;
-	border-color: #ddd #888 #888 #ddd;
-}
-
-.player {
-	border-color: pink darkred darkred pink;
-}
-
-.token.front_plus,
-.token.front_minus {
-	background-color: tan;
-	border-color: tan brown brown tan;
-}
-
-.front_minus + .front_minus,
-.front_plus + .front_plus {
-	Xmargin-left: -30px;
-}
-
-.token.medallion {
-	background-color: tan;
-	border-radius: 10px;
-	border-color: wheat brown brown wheat;
-}
+.token.round, .token.blank { border-radius: 50%; }
+.token.standee { border-radius: 10px; }
+.token.medallion { border-radius: 10px; }
 
 .medallion_container {
 	position: absolute;
@@ -152,11 +115,25 @@ main {
 	box-shadow: 0 0 0 3px white;
 }
 
+.card.selected {
+	box-shadow: 0 0 0 3px aqua;
+}
+
+/* CARDS */
+
+.card {
+	background-size: 100% 100%;
+	width: 206px;
+	height: 281px;
+	border-radius: 10px;
+	box-shadow: 0 0 0 1px black, 1px 1px 4px #0006;
+}
+
 .card.action {
 	box-shadow: 0 0 0 3px white;
 }
 
-.selected {
+.card.selected {
 	box-shadow: 0 0 0 3px aqua;
 }
 
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")
diff --git a/tools/colors.js b/tools/colors.js
new file mode 100644
index 0000000..1f6e771
--- /dev/null
+++ b/tools/colors.js
@@ -0,0 +1,60 @@
+function rgb_to_hsl(rgb, add=0, scale=1) {
+	if (typeof rgb === "string") {
+		if (rgb[0] === "#")
+			rgb = rgb.substring(1)
+		rgb = parseInt(rgb, 16)
+	}
+
+	let r = ((rgb >> 16) & 255) / 255
+	let g = ((rgb >> 8) & 255) / 255
+	let b = ((rgb) & 255) / 255
+	let cmin = Math.min(r, g, b)
+	let cmax = Math.max(r, g, b)
+	let delta = cmax - cmin
+	let h = 0, s = 0, l = 0
+
+	if (delta == 0)
+		h = 0
+	else if (cmax == r)
+		h = ((g - b) / delta) % 6
+	else if (cmax == g)
+		h = (b - r) / delta + 2
+	else
+		h = (r - g) / delta + 4
+
+	h = Math.round(h * 60)
+
+	if (h < 0)
+		h += 360
+
+	l = (cmax + cmin) / 2
+
+	s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1))
+
+	l = Math.max(0, Math.min(1, l * scale + add))
+
+	s = Math.round(s * 100)
+	l = Math.round(l * 100)
+
+	return "hsl(" + h + "," + s + "%," + l + "%)"
+}
+
+function foo(sel, rgb) {
+	let bg = rgb_to_hsl(rgb, 0.00, 1.00)
+	let hi = rgb_to_hsl(rgb, 0.10, 1.00)
+	let sh = rgb_to_hsl(rgb, -0.10, 1.00)
+	let bd = rgb_to_hsl(rgb, 0.00, 0.33)
+	console.log(sel + ` { background-color: ${bg}; border-color: ${hi} ${sh} ${sh} ${hi}; box-shadow: 0 0 0 1px ${bd}, 0px 1px 4px #0008; }`)
+}
+
+function bar(sel, rgb) {
+	hsl = rgb_to_hsl(rgb)
+	console.log(sel + ` { background-color: ${hsl} }`)
+}
+
+foo(".token.white", "cccccc")
+foo(".token.red", "ef0500")
+foo(".token.pink", "da997b")
+foo(".token.brown", "bbb079")
+foo(".token.gray", "a6a6a8")
+