diff options
| -rw-r--r-- | images/legion_reduced_tint.png | bin | 0 -> 69067 bytes | |||
| -rw-r--r-- | images/militia_tint.png | bin | 0 -> 7119 bytes | |||
| -rw-r--r-- | play.css | 23 | ||||
| -rw-r--r-- | play.html | 4 | ||||
| -rw-r--r-- | play.js | 21 | ||||
| -rw-r--r-- | tools/colors.js | 110 | ||||
| -rw-r--r-- | tools/gencolors.js | 5 |
7 files changed, 158 insertions, 5 deletions
diff --git a/images/legion_reduced_tint.png b/images/legion_reduced_tint.png Binary files differnew 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 Binary files differnew file mode 100644 index 0000000..bcdcf00 --- /dev/null +++ b/images/militia_tint.png @@ -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 { @@ -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> @@ -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") |
