Add tinted militia and reduced legions as option (on by default).

Make it easier to see what is what in a mixed stack than just the tiny combat strength number.
author: Tor Andersson <tor@ccxvii.net> 2023-10-08 12:45:42 +0200
committer: Tor Andersson <tor@ccxvii.net> 2023-10-08 23:02:03 +0200
commit: fa93dc1cbb185bab17da9c09d6c2c08fefb2e99c (patch)
tree: 9c795adab354659eea91a5d044793b5bd4854380
parent: 111988c6d409029a1a27e20ebb9a4e2c90bcfeab (diff)
download: time-of-crisis-fa93dc1cbb185bab17da9c09d6c2c08fefb2e99c.tar.gz
7 files changed, 158 insertions, 5 deletions
diff --git a/images/legion_reduced_tint.png b/images/legion_reduced_tint.png
new file mode 100644
index 0000000..96aba97
--- /dev/null
+++ b/images/legion_reduced_tint.png
diff --git a/images/militia_tint.png b/images/militia_tint.png
new file mode 100644
index 0000000..bcdcf00
--- /dev/null
+++ b/images/militia_tint.png
diff --git a/play.css b/play.css
index bdca4c8..22f2853 100644
--- a/play.css
+++ b/play.css
@@ -9,6 +9,9 @@ header.your_turn { background-color: orange; }
 #turn_info { background-color: gainsboro; }
 .role_vp { float: right; }
 
+.checked::before { content: "\2714  " }
+.unchecked::before { content: "\2714  "; color:transparent; }
+
 body.Observer #hand_panel, body.Observer #draw_panel, body.Observer #discard_panel {
 	display: none;
 }
@@ -311,8 +314,8 @@ body.p2 #npg_galatia { display: block }
 .blue.action { box-shadow: 0 0 0 1px #113854, 0 0 0 4px white; }
 .yellow.action { box-shadow: 0 0 0 1px #553a00, 0 0 0 4px white; }
 .green.action { box-shadow: 0 0 0 1px #033600, 0 0 0 4px white; }
-.legion.action { box-shadow: 0 0 0 1px #434343, 0 0 0 4px white; }
-.militia.action { box-shadow: 0 0 0 1px #434343, 0 0 0 4px white; }
+.legion.action { box-shadow: 0 0 0 1px #434343, 0 0 0 4px white !important; }
+.militia.action { box-shadow: 0 0 0 1px #434343, 0 0 0 4px white !important; }
 
 .alamanni.action { box-shadow: 0 0 0 1px #393204, 0 0 0 4px white; }
 .franks.action { box-shadow: 0 0 0 1px #1d323a, 0 0 0 4px white; }
@@ -520,6 +523,22 @@ body.shift .shapur.inactive { background-image: url(images/shapur.png) }
 .red.breakaway { background-image: url(images/red_breakaway.svg) }
 .yellow.breakaway { background-image: url(images/yellow_breakaway.svg) }
 
+/* TINTED UNITS */
+
+body.tint .militia {
+	background-color: #f3ddbd;
+	background-image: url(images/militia_tint.png);
+	border-color: #fffcdb #b8a385 #b8a385 #fffcdb;
+	box-shadow: 0 0 0 1px #4c3b1f, 1px 2px 4px #0008;
+}
+
+body.tint .legion.reduced {
+	background-color: #f4cccd;
+	background-image: url(images/legion_reduced_tint.png);
+	border-color: #fff4f5 #ba9596 #ba9596 #fff4f5;
+	box-shadow: 0 0 0 1px #503133, 1px 2px 4px #0008;
+}
+
 /* CARDS */
 
 #card_tip {
diff --git a/play.html b/play.html
index 4307497..8c07d39 100644
--- a/play.html
+++ b/play.html
@@ -12,7 +12,7 @@
 <script defer src="/common/play.js"></script>
 <script defer src="play.js"></script>
 </head>
-<body class="p4">
+<body class="tint p4">
 
 <div id="card_tip" class="hide"></div>
 
@@ -21,6 +21,8 @@
 		<div class="menu">
 			<div class="menu_title"><img src="/images/cog.svg"></div>
 			<div class="menu_popup">
+				<div id="tint" class="menu_item checked" onclick="toggle_tint()">Colored units</div>
+				<div class="menu_separator"></div>
 				<a class="menu_item" target="_blanK" href="/time-of-crisis/info/readme.html">Read me!</a>
 				<a class="menu_item" target="_blanK" href="/time-of-crisis/info/rules.html">Rules of Play</a>
 				<a class="menu_item" target="_blanK" href="/time-of-crisis/info/expansion.html">Expansion Rules</a>
diff --git a/play.js b/play.js
index 2beae4e..c188a83 100644
--- a/play.js
+++ b/play.js
@@ -1,8 +1,11 @@
 "use strict"
 
-// TODO: battle dialog popup for rolling and assigning hits!
 // TODO: show killed leaders taken for bonus purchase
 
+function check_menu(id, x) {
+	document.getElementById(id).className = x ? "menu_item checked" : "menu_item unchecked"
+}
+
 const ICONS = {
 	B0: '<span class="black d0"></span>',
 	B1: '<span class="black d1"></span>',
@@ -1717,5 +1720,21 @@ function on_blur_tip() {
 	ui.card_tip.className = "hide"
 }
 
+let tint = window.localStorage[params.title_id + "/tint"]
+if (tint === undefined)
+	tint = 1
+
+set_tint(tint)
+
+function set_tint(x) {
+	window.localStorage[params.title_id + "/tint"] = tint = x
+	check_menu("tint", !!tint)
+	ui.body.classList.toggle("tint", !!tint)
+}
+
+function toggle_tint() {
+	set_tint(!tint)
+}
+
 on_init()
 scroll_with_middle_mouse("main")
diff --git a/tools/colors.js b/tools/colors.js
new file mode 100644
index 0000000..f8f7ace
--- /dev/null
+++ b/tools/colors.js
@@ -0,0 +1,110 @@
+"use strict"
+
+function rgb_from_any(color) {
+	switch (color.mode) {
+	case "rgb": return color
+	case "lrgb": return rgb_from_lrgb(color)
+	case "oklab": return rgb_from_oklab(color)
+	}
+}
+
+function lrgb_from_any(color) {
+	switch (color.mode) {
+	case "rgb": return lrgb_from_rgb(color)
+	case "lrgb": return color
+	case "oklab": return lrgb_from_oklab(color)
+	}
+}
+
+function oklab_from_any(color) {
+	switch (color.mode) {
+	case "rgb": return oklab_from_rgb(color)
+	case "lrgb": return oklab_from_lrgb(color)
+	case "oklab": return color
+	}
+}
+
+function format_hex(color) {
+	let {r, g, b} = rgb_from_any(color)
+	let adj = 1
+	r = Math.round(Math.max(0, Math.min(1, r)) * 255)
+	g = Math.round(Math.max(0, Math.min(1, g)) * 255)
+	b = Math.round(Math.max(0, Math.min(1, b)) * 255)
+	let x = (r << 16) | (g << 8) | b
+	return "#" + x.toString(16).padStart(6, "0")
+}
+
+function parse_hex(str) {
+	let x = parseInt(str.substring(1), 16)
+	return {
+		mode: "rgb",
+		r: ((x >> 16) & 255) / 255.0,
+		g: ((x >> 8) & 255) / 255.0,
+		b: ((x) & 255) / 255.0
+	}
+}
+
+function lrgb_from_rgb({ r, g, b }) {
+	function to_linear(c) {
+		let ac = Math.abs(c)
+		if (ac < 0.04045)
+			return c / 12.92
+		return (Math.sign(c) || 1) * Math.pow((ac + 0.055) / 1.055, 2.4)
+	}
+	return {
+		mode: "lrgb",
+                r: to_linear(r),
+                g: to_linear(g),
+                b: to_linear(b)
+        }
+}
+
+function rgb_from_lrgb({ r, g, b }) {
+	function from_linear(c) {
+		let ac = Math.abs(c)
+		if (ac > 0.0031308)
+			return (Math.sign(c) || 1) * (1.055 * Math.pow(ac, 1 / 2.4) - 0.055)
+		return c * 12.92
+	}
+        return {
+                mode: "rgb",
+                r: from_linear(r),
+                g: from_linear(g),
+                b: from_linear(b)
+	}
+}
+
+function oklab_from_lrgb({ r, g, b }) {
+	let L = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b)
+        let M = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b)
+        let S = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b)
+        return {
+                mode: "oklab",
+                l: 0.2104542553 * L + 0.793617785 * M - 0.0040720468 * S,
+                a: 1.9779984951 * L - 2.428592205 * M + 0.4505937099 * S,
+                b: 0.0259040371 * L + 0.7827717662 * M - 0.808675766 * S
+        }
+}
+
+function lrgb_from_oklab({ l, a, b }) {
+        let L = Math.pow(l + 0.3963377774 * a + 0.2158037573 * b, 3)
+        let M = Math.pow(l - 0.1055613458 * a - 0.0638541728 * b, 3)
+        let S = Math.pow(l - 0.0894841775 * a - 1.291485548 * b, 3)
+        return {
+                mode: "lrgb",
+                r: +4.0767416621 * L - 3.3077115913 * M + 0.2309699292 * S,
+                g: -1.2684380046 * L + 2.6097574011 * M - 0.3413193965 * S,
+                b: -0.0041960863 * L - 0.7034186147 * M + 1.707614701 * S
+	}
+}
+
+function oklab_from_rgb(rgb) {
+        return oklab_from_lrgb(lrgb_from_rgb(rgb))
+}
+
+function rgb_from_oklab(oklab) {
+	return rgb_from_lrgb(lrgb_from_oklab(oklab))
+}
+
+if (typeof module === "object")
+	module.exports = { format_hex, parse_hex, rgb_from_any, lrgb_from_any, oklab_from_any }
diff --git a/tools/gencolors.js b/tools/gencolors.js
index 53c0612..eaff630 100644
--- a/tools/gencolors.js
+++ b/tools/gencolors.js
@@ -1,4 +1,4 @@
-const { parse_hex, format_hex, lrgb_from_any, rgb_from_any, oklab_from_any } = require("../../common/colors.js")
+const { parse_hex, format_hex, lrgb_from_any, rgb_from_any, oklab_from_any } = require("./colors.js")
 
 const white = "#ffffff"
 const black = "#000000"
@@ -83,6 +83,9 @@ gencss("#f0f0f0", ".militia")
 gencss("#f0f0f0", ".legion")
 gencss("#6e6e6e", ".no_place_governor")
 
+gencss("#f3ddbd", "body.tint .militia")
+gencss("#f4cccd", "body.tint .legion.reduced")
+
 gencss("#444444", ".dice.black")
 gencss("#eeeeee", ".dice.white")
author	Tor Andersson <tor@ccxvii.net>	2023-10-08 12:45:42 +0200
committer	Tor Andersson <tor@ccxvii.net>	2023-10-08 23:02:03 +0200
commit	fa93dc1cbb185bab17da9c09d6c2c08fefb2e99c (patch)
tree	9c795adab354659eea91a5d044793b5bd4854380
parent	111988c6d409029a1a27e20ebb9a4e2c90bcfeab (diff)
download	time-of-crisis-fa93dc1cbb185bab17da9c09d6c2c08fefb2e99c.tar.gz