diff options
Diffstat (limited to 'sw-ui/src/main/kotlin/org/luxons')
| -rw-r--r-- | sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/TransactionsSelector.kt | 80 |
1 files changed, 38 insertions, 42 deletions
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 e8b6cf8c..12e166f5 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 @@ -48,7 +48,7 @@ fun RBuilder.transactionsSelectorDialog( display = Display.flex alignItems = Align.center } - bpIcon("user", size = 50) + neighbour() styledDiv { css { grow(Grow.GROW) @@ -56,13 +56,25 @@ fun RBuilder.transactionsSelectorDialog( } optionsTable(state, prepareMove) } - bpIcon("user", size = 50) + neighbour() } } } } } +private fun StyledDOMBuilder<DIV>.neighbour() { + styledDiv { + css { + width = 100.pct + display = Display.flex + flexDirection = FlexDirection.column + alignItems = Align.center + } + bpIcon("user", size = 40) + } +} + private fun RBuilder.optionsTable( state: TransactionSelectorState, prepareMove: (PlayerMove) -> Unit, @@ -79,57 +91,43 @@ private fun RBuilder.optionsTable( onClickFunction = { prepareMove(PlayerMove(state.moveType, state.card.name, transactions)) } } // there should be at most one of each - val left = transactions.firstOrNull { it.provider == Provider.LEFT_PLAYER } - val right = transactions.firstOrNull { it.provider == Provider.RIGHT_PLAYER } + val leftTr = transactions.firstOrNull { it.provider == Provider.LEFT_PLAYER } + val rightTr = transactions.firstOrNull { it.provider == Provider.RIGHT_PLAYER } styledTd { transactionCellCss() - if (left != null) { - styledDiv { - transactionCellInnerCss() - bpIcon(name = left.provider.arrowIcon(), size = Icon.SIZE_LARGE) - goldIndicator(left.totalPrice, imgSize = 2.rem) + styledDiv { + css { + opacity = if (leftTr == null) 0.5 else 1 } + transactionCellInnerCss() + bpIcon(name = "caret-left", size = Icon.SIZE_LARGE) + goldIndicator(leftTr?.totalPrice ?: 0, imgSize = 2.5.rem) } } styledTd { transactionCellCss() - if (left != null) { - styledDiv { - transactionCellInnerCss() - resourceList(left.resources) - } + if (leftTr != null) { + resourceList(leftTr.resources) } } styledTd { - transactionCellCss() - css { - // make this cell fill the space - width = 100.pct - } -// goldIndicator(-transactions.sumBy { it.totalPrice }) { -// css { -// width = LinearDimension.fitContent -// margin(horizontal = LinearDimension.auto) -// } -// } + css { width = 2.rem } } styledTd { transactionCellCss() - if (right != null) { - styledDiv { - transactionCellInnerCss() - resourceList(right.resources) - } + if (rightTr != null) { + resourceList(rightTr.resources) } } styledTd { transactionCellCss() - if (right != null) { - styledDiv { - transactionCellInnerCss() - goldIndicator(right.totalPrice, imgSize = 2.rem) - bpIcon(name = right.provider.arrowIcon(), size = Icon.SIZE_LARGE) + styledDiv { + css { + opacity = if (rightTr == null) 0.5 else 1 } + transactionCellInnerCss() + goldIndicator(rightTr?.totalPrice ?: 0, imgSize = 2.5.rem) + bpIcon(name = "caret-right", size = Icon.SIZE_LARGE) } } } @@ -139,7 +137,7 @@ private fun RBuilder.optionsTable( } private fun StyledDOMBuilder<TD>.transactionCellCss() { - // we need inline styles to win over blueprintjs's styles (which are more specific than .class) + // we need inline styles to win over BlueprintJS's styles (which are more specific than .class) inlineStyles { verticalAlign = VerticalAlign.middle } @@ -153,28 +151,26 @@ private fun StyledDOMBuilder<DIV>.transactionCellInnerCss() { } } -private fun Provider.arrowIcon() = when (this) { - Provider.LEFT_PLAYER -> "caret-left" - Provider.RIGHT_PLAYER -> "caret-right" -} - private fun RBuilder.resourceList(resources: List<CountedResource>) { // The biggest card is the Palace and requires 7 resources (1 of each). // We always have at least 1 resource on our wonder, so we'll never need to buy more than 6. // Therefore, 3 by row seems decent. val rows = resources.toRepeatedTypesList().chunked(3) + val imgSize = 1.5.rem styledDiv { css { display = Display.flex flexDirection = FlexDirection.column alignItems = Align.center + justifyContent = JustifyContent.center grow(Grow.GROW) + height = imgSize * 2 } rows.forEach { row -> styledDiv { resourceRowCss() row.forEach { - resourceImage(it, size = 1.5.rem) + resourceImage(it, size = imgSize) } } } |