Bring wonder to the foreground on hover

Resolves:
https://github.com/joffrey-bion/seven-wonders/issues/99

2 files changed, 12 insertions, 3 deletions

diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Board.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Board.kt
index 3febee86..734099f1 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Board.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Board.kt
@@ -80,12 +80,11 @@ private fun RBuilder.tableCard(card: TableCard, indexInColumn: Int, block: Style
             maxWidth = 100.pct
             maxHeight = 70.pct
 
-            // bring to the foreground on hover
             hover {
                 zIndex = 1000
                 maxWidth = 110.pct
                 maxHeight = 75.pct
-                boxShadow(offsetX = 3.px, offsetY = 3.px, blurRadius = 7.px, color = Color.black)
+                hoverHighlightStyle()
             }
         }
         block()
@@ -107,14 +106,20 @@ private fun RBuilder.wonderComponent(wonder: ApiWonder, military: Military) {
                 transform { translateX((-50).pct) }
                 height = 100.pct
                 maxWidth = 95.pct // same as wonder
+
+                // bring to the foreground on hover
+                hover { zIndex = 1000 }
             }
             styledImg(src = "/images/wonders/${wonder.image}") {
                 css {
+                    classes.add("wonder-image")
                     declarations["border-radius"] = "0.5%/1.5%"
                     boxShadow(color = Color.black, offsetX = 0.2.rem, offsetY = 0.2.rem, blurRadius = 0.5.rem)
                     maxHeight = 100.pct
                     maxWidth = 100.pct
                     zIndex = 1 // go above the built wonder cards, but below the table cards
+
+                    hover { hoverHighlightStyle() }
                 }
                 attrs {
                     this.title = wonder.name
@@ -198,3 +203,7 @@ private fun stagePositionPercent(stageIndex: Int, nbStages: Int): Double = when
     4 -> -1.5 + stageIndex * 26.7 // -1.5 (26.6) 25.1 (26.8) 51.9 (26.7) 78.6
     else -> 7.9 + stageIndex * 30.0
 }
+
+private fun CSSBuilder.hoverHighlightStyle() {
+    highlightStyle(Color.paleGoldenrod)
+}
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/CardImage.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/CardImage.kt
index 79836f70..dffa2ccd 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/CardImage.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/CardImage.kt
@@ -68,7 +68,7 @@ private fun CSSBuilder.cardImageStyle(highlightColor: Color?) {
     highlightStyle(highlightColor)
 }
 
-private fun CSSBuilder.highlightStyle(highlightColor: Color?) {
+internal fun CSSBuilder.highlightStyle(highlightColor: Color?) {
     if (highlightColor != null) {
         boxShadow(
             offsetX = 0.px,