From 5d81b4294bd8f9b20ac8a396a185f6cf9550c00f Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Fri, 25 Oct 2024 11:58:58 +0200 Subject: Update client. Fixed some spelling errors in space data table. Create tools directory and add Makefile. Add layout.svg with boxes drawn on top of locations. Add genlayout.js to create list of box locations. Add gencolors.js to create beveled marker border colors. Major rewrite of play.js and play.css with official assets. --- tools/gencolors.js | 78 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 78 insertions(+) create mode 100644 tools/gencolors.js (limited to 'tools/gencolors.js') diff --git a/tools/gencolors.js b/tools/gencolors.js new file mode 100644 index 0000000..5904741 --- /dev/null +++ b/tools/gencolors.js @@ -0,0 +1,78 @@ +const { parse_hex, format_hex, lrgb_from_any, rgb_from_any, oklab_from_any } = require("./colors.js") + +const white = "#ffffff" +const black = "#000000" + +function lerp(a, b, n) { + return a + (b - a) * n +} + +function blend(a, b, n) { + a = lrgb_from_any(parse_hex(a)) + b = lrgb_from_any(parse_hex(b)) + return format_hex({ + mode: "lrgb", + r: lerp(a.r, b.r, n), + g: lerp(a.g, b.g, n), + b: lerp(a.b, b.b, n) + }) +} + +function multiply_luminance(hex, m) { + let oklab = oklab_from_any(parse_hex(hex)) + oklab.l = Math.max(0, Math.min(1, oklab.l * m)) + return format_hex(oklab) +} + +function add_luminance(hex, m) { + let oklab = oklab_from_any(parse_hex(hex)) + oklab.l = Math.max(0, Math.min(1, oklab.l + m)) + return format_hex(oklab) +} + +function make_3d_colors(base) { + return [ + base, + multiply_luminance(base, 0.9), + multiply_luminance(base, 0.8), + multiply_luminance(base, 0.7), + multiply_luminance(base, 0.4) + ] +} + +function make_2d_colors(base) { + return [ + base, + multiply_luminance(base, 1.2), + multiply_luminance(base, 0.8), + multiply_luminance(base, 0.4) + ] +} + +function make_2d_colors_add(base) { + return [ + base, + add_luminance(base, 0.2), + add_luminance(base, -0.2), + add_luminance(base, -0.5), + ] +} + +function print(x) { + console.log(x) +} + +function gencss(color, sel) { + let [ bg, hi, lo, sh ] = make_2d_colors(color) + print(`${sel} { background-color: ${color}; border-color: ${hi} ${lo} ${lo} ${hi}; box-shadow: 0 0 0 1px ${sh}, 1px 2px 4px #0008; }`) +} + +gencss("#bbbbbb", ".marker") +gencss("#c4e2f6", ".demInfl.ctl") +gencss("#c1272d", ".comInfl.ctl") +gencss("#147fc0", "#marker_action_round.com") +gencss("#c1272d", "#marker_action_round.dem") +gencss("#fadb04", "#marker_vp, #marker_turn") +gencss("#f26649", "#marker_com_tst") +gencss("#c4e2f4", "#marker_dem_tst") + -- cgit v1.2.3 From be53b4b3373da546644ce71ee6a311be406a27aa Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Sat, 26 Oct 2024 00:06:21 +0200 Subject: Fix mixed up colors and images in action round marker. --- play.css | 6 +++--- tools/gencolors.js | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) (limited to 'tools/gencolors.js') diff --git a/play.css b/play.css index 3b49c7b..d98c8ce 100644 --- a/play.css +++ b/play.css @@ -100,8 +100,8 @@ body.Communist header.your_turn { background-color: hsl(355, 70%, 75%); } .marker { background-color: #ffffff; border-color: #eeeeee #8a8a8a #8a8a8a #eeeeee; box-shadow: 0 0 0 1px #323232, 1px 2px 4px #0008; } .demInfl.ctl { background-color: #c4e2f6; border-color: #e6ffff #8ca8bb #8ca8bb #e6ffff; box-shadow: 0 0 0 1px #274050, 1px 2px 4px #0008; } .comInfl.ctl { background-color: #c1272d; border-color: #e74e4c #9c0009 #9c0009 #e74e4c; box-shadow: 0 0 0 1px #520000, 1px 2px 4px #0008; } -#marker_action_round.com { background-color: #147fc0; border-color: #44a3e6 #005c9b #005c9b #44a3e6; box-shadow: 0 0 0 1px #001a54, 1px 2px 4px #0008; } -#marker_action_round.dem { background-color: #c1272d; border-color: #e74e4c #9c0009 #9c0009 #e74e4c; box-shadow: 0 0 0 1px #520000, 1px 2px 4px #0008; } +#marker_action_round.dem { background-color: #147fc0; border-color: #44a3e6 #005c9b #005c9b #44a3e6; box-shadow: 0 0 0 1px #001a54, 1px 2px 4px #0008; } +#marker_action_round.com { background-color: #c1272d; border-color: #e74e4c #9c0009 #9c0009 #e74e4c; box-shadow: 0 0 0 1px #520000, 1px 2px 4px #0008; } #marker_vp, #marker_turn { background-color: #fadb04; border-color: #ffff51 #c0a100 #c0a100 #ffff51; box-shadow: 0 0 0 1px #563600, 1px 2px 4px #0008; } #marker_com_tst { background-color: #f26649; border-color: #ff9273 #c2391c #c2391c #ff9273; box-shadow: 0 0 0 1px #640000, 1px 2px 4px #0008; } #marker_dem_tst { background-color: #c4e2f4; border-color: #e6ffff #8ca8ba #8ca8ba #e6ffff; box-shadow: 0 0 0 1px #27404f, 1px 2px 4px #0008; } @@ -168,7 +168,7 @@ body.Communist header.your_turn { background-color: hsl(355, 70%, 75%); } #marker_turn { background-image: url(markers75/turn.png) } #marker_action_round.dem { background-image: url(markers75/action_round_blue.png) } -#marker_action_round.com { background-image: url(markers75/action_round_blue.png) } +#marker_action_round.com { background-image: url(markers75/action_round_red.png) } #marker_stability_track { background-image: url(markers75/ussr_stability_track.png) } #marker_dem_tst { background-image: url(markers75/ts_blue.png) } #marker_com_tst { background-image: url(markers75/ts_red.png) } diff --git a/tools/gencolors.js b/tools/gencolors.js index 5904741..cff0fe2 100644 --- a/tools/gencolors.js +++ b/tools/gencolors.js @@ -70,8 +70,8 @@ function gencss(color, sel) { gencss("#bbbbbb", ".marker") gencss("#c4e2f6", ".demInfl.ctl") gencss("#c1272d", ".comInfl.ctl") -gencss("#147fc0", "#marker_action_round.com") -gencss("#c1272d", "#marker_action_round.dem") +gencss("#147fc0", "#marker_action_round.dem") +gencss("#c1272d", "#marker_action_round.com") gencss("#fadb04", "#marker_vp, #marker_turn") gencss("#f26649", "#marker_com_tst") gencss("#c4e2f4", "#marker_dem_tst") -- cgit v1.2.3