Tweak CSS a bit.

Still needs a huge overhaul.

2 files changed, 26 insertions, 14 deletions

diff --git a/play.css b/play.css
index d1f0df0..3b41b6e 100644
--- a/play.css
+++ b/play.css
@@ -321,7 +321,7 @@ body.shift .exhausted  {
 }
 
 .marker {
-	border: 2px solid aqua;
+	border: 2px solid transparent;
 	border-radius: 8px;
 	background-size: cover;
 	background-position: center;
@@ -482,14 +482,22 @@ body.shift .exhausted  {
 	background-color: #fff6;
 }
 
+.marker.rose {
+	position: absolute;
+}
+
+.marker.depexh { position: absolute; }
+.marker.depleted { position: absolute; }
+.marker.exhausted { position: absolute; }
+
 .locale {
 	box-sizing: border-box;
 	position: absolute;
 	border: 3px solid transparent;
 }
 
-.locale.town { border-radius: 24px 24px 0 0 }
-.locale.city { border-radius: 18px 18px 0 0 }
+.locale.town { border-radius: 50% }
+.locale.city { border-radius: 50% }
 .locale.fortress { border-radius: 0 0 0 0 }
 .locale.calais { border-radius: 0 0 0 0 }
 .locale.sea { border-radius: 50% }
@@ -497,6 +505,10 @@ body.shift .exhausted  {
 
 .locale.action { border-color: white; box-shadow: 0 0 4px white; }
 
+.locale.selected {
+	border-color: cyan;
+}
+
 .locale.tip {
 	background-color: #ff08;
 	box-shadow: 0 0 8px #ff08;
@@ -532,14 +544,6 @@ body.shift .exhausted  {
 	filter: drop-shadow(0px 2px 4px #0004);
 }
 
-.cylinder.command {
-	filter:
-		drop-shadow(2px 0px 0px gold)
-		drop-shadow(0px 2px 0px gold)
-		drop-shadow(0px -2px 0px gold)
-		drop-shadow(-2px 0px 0px gold);
-}
-
 .cylinder.action {
 	filter:
 		drop-shadow(2px 0px 0px white)
@@ -556,6 +560,14 @@ body.shift .exhausted  {
 		drop-shadow(-2px 0px 0px yellow);
 }
 
+.cylinder.command {
+	filter:
+		drop-shadow(2px 0px 0px gold)
+		drop-shadow(0px 2px 0px gold)
+		drop-shadow(0px -2px 0px gold)
+		drop-shadow(-2px 0px 0px gold);
+}
+
 .cylinder > .exile {
 	position: absolute;
 	top: 6px;
diff --git a/play.js b/play.js
index c66e64f..16f7211 100644
--- a/play.js
+++ b/play.js
@@ -753,7 +753,7 @@ function build_map() {
 
 		// Locale Markers
 		e = ui.locale_markers_rose[ix] = document.createElement("div")
-		e.className = "locale marker rose favour " + locale.name // York/Lancaster to add favour
+		e.className = "marker rose favour " + locale.name // York/Lancaster to add favour
 		e.style.top = y + h - small + "px"
 		e.style.left = x + (w - small) / 2 + "px"
 		e.style.width = small + "px"
@@ -765,7 +765,7 @@ function build_map() {
 
 		// Depleted markers
 		e = ui.locale_markers[ix] = document.createElement("div")
-		e.className = "locale marker " + locale.name // depleted or exhausted to add markers
+		e.className = "depexh marker " + locale.name // depleted or exhausted to add markers
 		e.style.top = y + h - small - offsetdeplete + "px"
 		e.style.left = offsetdeplete + x + (w - small) / 2 + "px"
 		e.style.width = small + "px"
@@ -1240,7 +1240,7 @@ function update_locale(loc) {
 	layout_locale_cylinders(loc)
 
 	ui.locale[loc].classList.toggle("action", is_action("locale", loc) || is_action("laden_march", loc))
-	ui.locale[loc].classList.toggle("laden", is_action("laden_march", loc))
+	ui.locale[loc].classList.toggle("selected", view.where === loc)
 	ui.locale[loc].classList.toggle("supply_path", !!(view.supply && view.supply[0] === loc))
 	ui.locale[loc].classList.toggle("supply_source", !!(view.supply && view.supply[1] === loc))
 	if (ui.locale_name[loc]) {