Colors.

2 files changed, 127 insertions, 66 deletions

diff --git a/play.html b/play.html
index 1a250c2..5141023 100644
--- a/play.html
+++ b/play.html
@@ -20,32 +20,65 @@
 @font-face { font-family: "URW Gothic"; font-style: italic; font-weight: bold; src: url(fonts/URWGothic-DemiOblique.woff2); }
 
 :root {
-	--area-highlight-color: white;
-	--urban-highlight-color: white;
-	--rural-highlight-color: green;
-	--remote-highlight-color: brown;
-	--highlight-color: yellow;
-	--selected-color: cyan;
-
-	--tip-color: yellow;
-	--target-color: indianred;
-
-	--counter-french-color: #BCDDFF;
-	--counter-elite-color: #FFCCCB;
-	--counter-algerian-color: #FFE7BD;
-	--counter-remote-color: #DFD9C1;
+	--fln-base: #006633;
+	--fln-70: #61b37b;
+	--fln-75: #71c38a;
+	--fln-80: #81d49a;
+	--fln-85: #91e5aa;
+
+	--gov-base: #002153;
+	--gov-44: #31548b;
+	--gov-70: #78a0dc;
+	--gov-75: #87b0ed;
+	--gov-80: #98c0ff;
+	--gov-85: #b2d0ff;
+
+	--red-base: #d21034;
+	--red-80: #ffa09e;
+	--red-75: #ff8484;
+	--red-67: #fe4a57;
+
+	--area-tip-color: yellow;
+	--area-target-color: gold;
+
+	--urban-action-color: white;
+	--rural-action-color: green;
+	--remote-action-color: brown;
+
+	--unit-tip-color: yellow;
+	--unit-action-color: yellow;
+	--unit-selected-color: cyan;
+	--unit-target-color: lime;
+
+	--counter-french-color: #bcddff;
+	--counter-elite-color: #ffcccb;
+	--counter-algerian-color: #ffe7bd;
 	--counter-fln-color: #51a36d;
+
+	--counter-french-border: #556373;
+	--counter-elite-border: #735c5b;
+	--counter-algerian-border: #736855;
+	--counter-fln-border: #316241;
+
+	--counter-terror-color: #666;
+	--counter-terror-border: #444;
+
+	--counter-remote-color: #dfd9c1;
+	--counter-remote-border: #645f4a;
 }
 
 main { background-color: dimgray }
 
-#role_FLN .role_name { background-color: #C1E1C1;}
-#role_Government .role_name { background-color: #BCDDFF;}
+body.FLN header.your_turn { background-color: var(--fln-80) }
+body.Government header.your_turn { background-color: var(--gov-80) }
+
+#role_FLN .role_name { background-color: var(--fln-80) }
+#role_Government .role_name { background-color: var(--gov-80) }
 
 .role.active span { text-decoration: underline; }
-.role_ap_text { color: #555; float: right; margin-right: 4px; }
+.role_ap_text { color: #0008; float: right; margin-right: 4px; }
 .role_ap { float: right; margin-right: 8px;}
-.role_psl_text { color: #555; float: right; margin-right: 4px;}
+.role_psl_text { color: #0008; float: right; margin-right: 4px;}
 .role_psl { float: right; }
 
 #log { background-color: whitesmoke; }
@@ -70,12 +103,12 @@ main { background-color: dimgray }
 	border-bottom: 1px solid #333;
 }
 
-#log .h1 { background-color: hsl(0, 100%, 80%); }
-#log .h2 { background-color: hsl(0, 100%, 85%); }
-#log .h3 { background-color: hsl(0, 0%, 85%); }
+#log .h1 { background-color: var(--red-75); }
+#log .h2 { background-color: var(--red-80); }
+#log .h3 { background-color: gainsboro; }
 
-#log .fln { background-color: #c1e1c1; }
-#log .gov { background-color: #bcddff; }
+#log .fln { background-color: var(--fln-85) }
+#log .gov { background-color: var(--gov-85) }
 
 X#log .oas { background-color: #555; color: white; }
 
@@ -110,13 +143,13 @@ X#log .oas { background-color: #555; color: white; }
 
 #log .die_gov {
 	background-image: url(images/die_black_pips.svg);
-	background-color: hsl(216, 100%, 85%);
+	background-color: var(--gov-85);
 	border: 1px solid #222;
 }
 
 #log .die_fln {
 	background-image: url(images/die_black_pips.svg);
-	background-color: hsl(140, 70%, 70%);
+	background-color: var(--fln-85);
 	border: 1px solid #222;
 }
 
@@ -142,13 +175,13 @@ X#log .oas { background-color: #555; color: white; }
 svg .urban2 {
 	fill: #614528;
 	fill-opacity: 0.4;
+	stroke-width: 3;
 }
 
 svg .urban2.action {
 	fill: #614528;
 	fill-opacity: 1;
 	stroke: white;
-	stroke-width: 3;
 }
 
 svg .urban2.target {
@@ -166,9 +199,9 @@ svg .area {
 	stroke-width: 3;
 }
 
-svg .area.urban { fill: var(--urban-highlight-color); }
-svg .area.rural { fill: var(--rural-highlight-color); }
-svg .area.remote { fill: var(--remote-highlight-color); }
+svg .area.urban { fill: var(--urban-action-color); }
+svg .area.rural { fill: var(--rural-action-color); }
+svg .area.remote { fill: var(--remote-action-color); }
 
 svg .area.action {
 	fill-opacity: 0.2;
@@ -182,11 +215,11 @@ svg .area.target {
 	stroke: var(--target-color);
 }
 
-svg .area.tip {
+svg .area.tip, svg .urban2.tip {
 	fill-opacity: 0.4;
 	stroke-opacity: 1.0;
-	fill: var(--tip-color);
-	stroke: var(--tip-color);
+	fill: var(--area-tip-color);
+	stroke: var(--area-tip-color);
 	stroke-dasharray: 12 6;
 }
 
@@ -268,78 +301,91 @@ svg .area.tip {
 	background-size: 1000%;
 	background-repeat: no-repeat;
 	border-style: solid;
-	border-color: #333;
+	border-color: #555;
 	width: 39px;
 	height: 39px;
 	border-width: 2px;
 	background-image: url(images/counters.png);
-	background-color: white;
+	background-color: whitesmoke;
 }
 
 .counter.action {
-	box-shadow: 0 0 0 2px var(--highlight-color);
+	box-shadow: 0 0 0 2px var(--unit-action-color);
 }
 
 .counter.contacted {
-	box-shadow: 0 0 0 2px var(--target-color);
+	box-shadow: 0 0 0 2px var(--unit-target-color);
 }
 
 .counter.tip {
-	box-shadow: 0 0 0 2px var(--tip-color);
+	box-shadow: 0 0 0 2px var(--unit-tip-color);
 }
 
 .counter.selected {
-	box-shadow: 0 0 0 2px var(--selected-color);
-}
-
-.counter.neutralized {
-	border-color: grey;
-	background-color: lightgray;
+	box-shadow: 0 0 0 2px var(--unit-selected-color);
 }
 
 .counter.oas_active {
 	pointer-events: none;
 }
 
-.counter.turn_now{background-position:0% 0%;}
-.counter.fln_psl{background-position:11.11111111111111% 0%;}
-.counter.fln_ap{background-position:22.22222222222222% 0%;}
-.counter.gov_psl{background-position:33.33333333333333% 0%;}
-.counter.fln_control{background-position:44.44444444444444% 0%;}
-.counter.gov_control{background-position:55.55555555555556% 0%;}
-.counter.oas_active{background-position:66.66666666666666% 0%;}
-.counter.remote{background-position:77.77777777777777% 0%; background-color: var(--counter-remote-color);}
-.counter.terror{background-position:88.88888888888889% 0%}
+.counter.remote {
+	background-color: var(--counter-remote-color);
+	border-color: var(--counter-remote-border);
+}
 
-.counter.air_avail{background-position:0% 11.11111111111111%;}
-.counter.air_max{background-position:11.11111111111111% 11.11111111111111%;}
-.counter.helo_avail{background-position:22.22222222222222% 11.11111111111111%;}
-.counter.helo_max{background-position:33.33333333333333% 11.11111111111111%;}
-.counter.naval_pts{background-position:44.44444444444444% 11.11111111111111%;}
-.counter.border_zone{background-position:55.55555555555556% 11.11111111111111%;}
-.counter.border_zone_inactive{background-position:66.66666666666666% 11.11111111111111%;}
+.counter.terror {
+	background-color: var(--counter-terror-color);
+	border-color: var(--counter-terror-border);
+}
 
 .unit[class*=' fr_x'] {
 	background-color: var(--counter-french-color);
-	border-color: color-mix(in srgb, var(--counter-french-color) 35%, black);
+	border-color: var(--counter-french-border);
 }
+
 .unit[class*=' fr_elite_x_'] {
 	background-color: var(--counter-elite-color);
-	border-color: color-mix(in srgb, var(--counter-elite-color) 35%, black);
+	border-color: var(--counter-elite-border);
 }
+
 .unit[class*=' alg_'] {
 	background-color: var(--counter-algerian-color);
-	border-color: color-mix(in srgb, var(--counter-algerian-color) 35%, black);
+	border-color: var(--counter-algerian-border);
 }
+
 .unit[class*=' fln_'] {
 	background-color: var(--counter-fln-color);
-	border-color: color-mix(in srgb, var(--counter-fln-color) 45%, black);
+	border-color: var(--counter-fln-border);
 }
+
 .unit.neutralized {
 	filter: grayscale(50%) brightness(125%);
-	border-color: #555;
 }
 
+.border_zone.neutralized {
+	border-color: grey;
+	background-color: silver;
+}
+
+.counter.turn_now{background-position:0% 0%;}
+.counter.fln_psl{background-position:11.11111111111111% 0%;}
+.counter.fln_ap{background-position:22.22222222222222% 0%;}
+.counter.gov_psl{background-position:33.33333333333333% 0%;}
+.counter.fln_control{background-position:44.44444444444444% 0%;}
+.counter.gov_control{background-position:55.55555555555556% 0%;}
+.counter.oas_active{background-position:66.66666666666666% 0%;}
+.counter.remote{background-position:77.77777777777777% 0%;}
+.counter.terror{background-position:88.88888888888889% 0%;}
+
+.counter.air_avail{background-position:0% 11.11111111111111%;}
+.counter.air_max{background-position:11.11111111111111% 11.11111111111111%;}
+.counter.helo_avail{background-position:22.22222222222222% 11.11111111111111%;}
+.counter.helo_max{background-position:33.33333333333333% 11.11111111111111%;}
+.counter.naval_pts{background-position:44.44444444444444% 11.11111111111111%;}
+.counter.border_zone{background-position:55.55555555555556% 11.11111111111111%;}
+.counter.border_zone_inactive{background-position:66.66666666666666% 11.11111111111111%;}
+
 .unit.fr_xx_2{background-position:0% 22.22222222222222%}
 .unit.fr_xx_4{background-position:11.11111111111111% 22.22222222222222%}
 .unit.fr_xx_9{background-position:22.22222222222222% 22.22222222222222%}
diff --git a/play.js b/play.js
index 50bcb61..f7fc6a1 100644
--- a/play.js
+++ b/play.js
@@ -563,7 +563,7 @@ function create_border_zone(i, label) {
 	e.style.left = (DRM_X + i * DRM_DX) + "px"
 	e.style.top = (DRM_Y + i * DRM_DY) + "px"
 	e.textContent = label
-	document.getElementById("boxes").appendChild(e)
+	document.getElementById("decor").appendChild(e)
 }
 
 const URBAN = 2
@@ -587,8 +587,19 @@ function create_area_u(i, sel) {
 	return e
 }
 
+function use_wide_marker_box(i) {
+	return (
+		i === 6 || // I-1 Barika
+		i === 9 || // I-4 Tebessa
+		i === 11 || // II-1 Setif
+		i === 18 || // IV-1 Medea
+		is_area_urban(i) ||
+		is_area_country(i)
+	)
+}
+
 function create_area_markers(i, area_id, area_name) {
-	const box_w = is_area_urban(i) || is_area_country(i) ? 150 : 100
+	const box_w = use_wide_marker_box(i) ? 150 : 100
 	const box_h = 100
 
 	let layout = LAYOUT[area_name + '-MK']
@@ -942,10 +953,14 @@ function sub_icon(match) {
 }
 
 function on_focus_area_tip(x) { // eslint-disable-line no-unused-vars
+	if (ui.areas_u[x])
+		ui.areas_u[x].classList.add("tip")
 	ui.areas[x].classList.add("tip")
 }
 
 function on_blur_area_tip(x) { // eslint-disable-line no-unused-vars
+	if (ui.areas_u[x])
+		ui.areas_u[x].classList.remove("tip")
 	ui.areas[x].classList.remove("tip")
 }