Add best price indication

2 files changed, 22 insertions, 5 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 87f163c5..0490a907 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,6 +8,11 @@ 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
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 a05effea..7920eaea 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
@@ -8,9 +8,7 @@ import kotlinx.html.classes
 import kotlinx.html.js.onClickFunction
 import org.luxons.sevenwonders.model.PlayerMove
 import org.luxons.sevenwonders.model.api.PlayerDTO
-import org.luxons.sevenwonders.model.resources.CountedResource
-import org.luxons.sevenwonders.model.resources.Provider
-import org.luxons.sevenwonders.model.resources.ResourceType
+import org.luxons.sevenwonders.model.resources.*
 import org.luxons.sevenwonders.ui.components.gameBrowser.playerInfo
 import org.luxons.sevenwonders.ui.redux.TransactionSelectorState
 import react.RBuilder
@@ -27,7 +25,7 @@ fun RBuilder.transactionsSelectorDialog(
 ) {
     bpDialog(
         isOpen = state != null,
-        title = "Time to foot the bill!",
+        title = "Trading time!",
         canEscapeKeyClose = true,
         canOutsideClickClose = true,
         isCloseButtonShown = true,
@@ -86,6 +84,8 @@ private fun RBuilder.optionsTable(
 ) {
     bpHtmlTable(interactive = true) {
         tbody {
+            val bestPrice = state.transactionsOptions.bestPrice
+            val hasExpensiveOptions = state.transactionsOptions.any { it.totalPrice != bestPrice }
             state.transactionsOptions.forEach { transactions ->
                 styledTr {
                     css {
@@ -116,7 +116,18 @@ private fun RBuilder.optionsTable(
                         }
                     }
                     styledTd {
-                        css { width = 2.rem }
+                        transactionCellCss()
+                        css {
+                            width = 1.5.rem
+                        }
+                        if (hasExpensiveOptions && transactions.totalPrice == bestPrice) {
+                            styledSpan {
+                                css {
+                                    +GameStyles.bestPrice
+                                }
+                                +"Best\nprice!"
+                            }
+                        }
                     }
                     styledTd {
                         transactionCellCss()
@@ -145,6 +156,7 @@ private fun StyledDOMBuilder<TD>.transactionCellCss() {
     // we need inline styles to win over BlueprintJS's styles (which are more specific than .class)
     inlineStyles {
         verticalAlign = VerticalAlign.middle
+        textAlign = TextAlign.center
     }
 }