Add rotation to "best price indicator"

2 files changed, 11 insertions, 7 deletions

diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameStyles.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameStyles.kt
index 0490a907..c3fb46a1 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameStyles.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameStyles.kt
@@ -8,11 +8,6 @@ object GameStyles : StyleSheet("GameStyles", isStatic = true) {
 
     private val sandColor = Color.paleGoldenrod.withAlpha(0.7)
 
-    val bestPrice by css {
-        fontWeight = FontWeight.bold
-        color = rgb(50, 120, 50)
-    }
-
     val fullBoardPreviewPopover by css {
         val bgColor = sandColor
         backgroundColor = bgColor
@@ -51,6 +46,14 @@ object GameStyles : StyleSheet("GameStyles", isStatic = true) {
         }
     }
 
+    val bestPrice by css {
+        fontWeight = FontWeight.bold
+        color = rgb(50, 120, 50)
+        transform {
+            rotate((-20).deg)
+        }
+    }
+
     val discardMoveText by css {
         display = Display.flex
         alignItems = Align.center
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/TransactionsSelector.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/TransactionsSelector.kt
index 7920eaea..bb6a51f5 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/TransactionsSelector.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/TransactionsSelector.kt
@@ -87,6 +87,7 @@ private fun RBuilder.optionsTable(
             val bestPrice = state.transactionsOptions.bestPrice
             val hasExpensiveOptions = state.transactionsOptions.any { it.totalPrice != bestPrice }
             state.transactionsOptions.forEach { transactions ->
+                val isCheapest = transactions.totalPrice == bestPrice
                 styledTr {
                     css {
                         cursor = Cursor.pointer
@@ -120,8 +121,8 @@ private fun RBuilder.optionsTable(
                         css {
                             width = 1.5.rem
                         }
-                        if (hasExpensiveOptions && transactions.totalPrice == bestPrice) {
-                            styledSpan {
+                        if (hasExpensiveOptions && isCheapest) {
+                            styledDiv {
                                 css {
                                     +GameStyles.bestPrice
                                 }