tweak look & feel of highlights

2 files changed, 25 insertions, 19 deletions

diff --git a/play.css b/play.css
index 49bb6ad..9913d57 100644
--- a/play.css
+++ b/play.css
@@ -272,6 +272,7 @@ span.suit.reserve { color: var(--color-reserve); font-weight: bold; font-family:
 	border-radius: 50%;
 }
 
+.space.tip { z-index: 3000 }
 .space.country_austria.tip { border-color: gray; }
 .space.country_sweden.tip { border-color: forestgreen; }
 .space.country_poland.tip { border-color: indianred; }
@@ -292,6 +293,7 @@ span.suit.reserve { color: var(--color-reserve); font-weight: bold; font-family:
 
 .space.action {
 	border-color: white;
+	box-shadow: 0 0 2px black, inset 0 0 2px black;
 	z-index: 2000;
 }
 
@@ -333,7 +335,9 @@ span.suit.reserve { color: var(--color-reserve); font-weight: bold; font-family:
 		drop-shadow(2px 0px 0px white)
 		drop-shadow(0px 2px 0px white)
 		drop-shadow(0px -2px 0px white)
-		drop-shadow(-2px 0px 0px white);
+		drop-shadow(-2px 0px 0px white)
+		drop-shadow(0 0 1px black)
+		;
 }
 
 .piece.selected {
@@ -341,15 +345,9 @@ span.suit.reserve { color: var(--color-reserve); font-weight: bold; font-family:
 		drop-shadow(2px 0px 0px yellow)
 		drop-shadow(0px 2px 0px yellow)
 		drop-shadow(0px -2px 0px yellow)
-		drop-shadow(-2px 0px 0px yellow);
-}
-
-.piece.austria.selected, .piece.imperial.selected {
-	filter:
-		drop-shadow(2px 0px 0px hotpink)
-		drop-shadow(0px 2px 0px hotpink)
-		drop-shadow(0px -2px 0px hotpink)
-		drop-shadow(-2px 0px 0px hotpink);
+		drop-shadow(-2px 0px 0px yellow)
+		drop-shadow(0 0 1px black)
+		;
 }
 
 .piece.tip {
@@ -357,7 +355,9 @@ span.suit.reserve { color: var(--color-reserve); font-weight: bold; font-family:
 		drop-shadow(2px 0px 0px lime)
 		drop-shadow(0px 2px 0px lime)
 		drop-shadow(0px -2px 0px lime)
-		drop-shadow(-2px 0px 0px lime);
+		drop-shadow(-2px 0px 0px lime)
+		drop-shadow(0 0 1px black)
+		;
 }
 
 .piece.cube.austria { background-image: url(images/cube_austria.svg) }
@@ -445,18 +445,23 @@ span.suit.reserve { color: var(--color-reserve); font-weight: bold; font-family:
 }
 
 .card.action {
-	box-shadow: 0 0 0 4px white;
+	box-shadow: 0 0 0 3px white;
+	border-color: white;
 }
 
+/*
+.card.diamonds.action { box-shadow: 0 0 0 2px var(--color-diamonds); border-color: var(--color-diamonds); }
+.card.hearts.action { box-shadow: 0 0 0 2px var(--color-hearts); border-color: var(--color-hearts); }
+.card.clubs.action { box-shadow: 0 0 0 2px var(--color-clubs); border-color: var(--color-clubs); }
+.card.spades.action { box-shadow: 0 0 0 2px var(--color-spades); border-color: var(--color-spades); }
+.card.reserve.action { box-shadow: 0 0 0 2px var(--color-reserve); border-color: var(--color-reserve); }
+*/
+
 .card.action:hover {
 	margin-top: -10px;
 	margin-bottom: 10px;
 }
 
-/*
-.card.tc.reverse + .card.tc.reverse { margin-left: -200px; }
-*/
-
 .draw-break { margin-left: 145px; }
 .card.tc { margin-right: -145px; }
 .panel_body { padding-right: calc(18px + 145px); }
diff --git a/play.js b/play.js
index 6f368c5..e2de08e 100644
--- a/play.js
+++ b/play.js
@@ -90,7 +90,8 @@ const all_power_trains = [
 ]
 
 const RESERVE = 4
-let suit_class = [ "S", "C", "H", "D", "R" ]
+let suit_class = [ "spades", "clubs", "hearts", "diamonds", "reserve" ]
+let suit_letter = [ "S", "C", "H", "D", "R" ]
 
 function to_deck(c) {
 	return c >> 7
@@ -465,12 +466,12 @@ function make_tc_deck(n) {
 	for (let suit = 0; suit <= 3; ++suit) {
 		for (let value = 2; value <= 13; ++value) {
 			let c = (n << 7) | (suit << 4) | value
-			ui.tc[c] = create_element("card", c, "card tc deck_" + (n+1) + " " + suit_class[suit] + value)
+			ui.tc[c] = create_element("card", c, "card tc deck_" + (n+1) + " " + suit_class[suit] + " " + suit_letter[suit] + value)
 		}
 	}
 	for (let value = 2; value <= 3; ++value) {
 		let c = (n << 7) | (4 << 4) | value
-		ui.tc[c] = create_element("card", c, "card tc deck_" + (n+1) + " R")
+		ui.tc[c] = create_element("card", c, "card tc deck_" + (n+1) + " reserve R")
 	}
 }