summaryrefslogtreecommitdiff
path: root/sw-ui
diff options
context:
space:
mode:
authorjoffrey-bion <joffrey.bion@gmail.com>2021-02-10 13:42:05 +0100
committerjoffrey-bion <joffrey.bion@gmail.com>2021-02-10 13:42:16 +0100
commitec23e12b61c5b7efea70c8d28f8073b29afd72bd (patch)
tree299450e434c72334e0c153561fa6ee5f558a2a2d /sw-ui
parentShow full table card on hover (diff)
downloadseven-wonders-ec23e12b61c5b7efea70c8d28f8073b29afd72bd.tar.gz
seven-wonders-ec23e12b61c5b7efea70c8d28f8073b29afd72bd.tar.bz2
seven-wonders-ec23e12b61c5b7efea70c8d28f8073b29afd72bd.zip
Bring wonder to the foreground on hover
Resolves: https://github.com/joffrey-bion/seven-wonders/issues/99
Diffstat (limited to 'sw-ui')
-rw-r--r--sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Board.kt13
-rw-r--r--sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/CardImage.kt2
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,
bgstack15