diff options
Diffstat (limited to 'sw-ui')
4 files changed, 45 insertions, 111 deletions
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/BoardSummary.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/BoardSummary.kt index ee69622e..9573c12a 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/BoardSummary.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/BoardSummary.kt @@ -20,7 +20,8 @@ enum class BoardSummarySide( ) { LEFT(TokenCountPosition.RIGHT, Align.flexStart, PopoverPosition.RIGHT), TOP(TokenCountPosition.OVER, Align.flexStart, PopoverPosition.BOTTOM), - RIGHT(TokenCountPosition.LEFT, Align.flexEnd, PopoverPosition.LEFT) + RIGHT(TokenCountPosition.LEFT, Align.flexEnd, PopoverPosition.LEFT), + BOTTOM(TokenCountPosition.OVER, Align.flexStart, PopoverPosition.TOP), } fun RBuilder.boardSummaryWithPopover( @@ -35,7 +36,12 @@ fun RBuilder.boardSummaryWithPopover( position = boardSummarySide.popoverPosition, popoverClassName = popoverClass, ) { - boardSummary(player, board, boardSummarySide, block) + boardSummary( + player = player, + board = board, + side = boardSummarySide, + block = block, + ) } } @@ -47,10 +53,11 @@ private fun createFullBoardPreview(board: Board): ReactElement = buildElement { } } -private fun RBuilder.boardSummary( +fun RBuilder.boardSummary( player: PlayerDTO, board: Board, side: BoardSummarySide, + showPreparationStatus: Boolean = true, block: StyledDOMBuilder<DIV>.() -> Unit = {}, ) { styledDiv { @@ -67,21 +74,21 @@ private fun RBuilder.boardSummary( } } - topBar(player, side) + topBar(player, side, showPreparationStatus) styledHr { css { margin(vertical = 0.5.rem) width = 100.pct } } - bottomBar(side, board, player) + bottomBar(side, board, player, showPreparationStatus) block() } } -private fun RBuilder.topBar(player: PlayerDTO, side: BoardSummarySide) { +private fun RBuilder.topBar(player: PlayerDTO, side: BoardSummarySide, showPreparationStatus: Boolean) { val playerIconSize = 25 - if (side == BoardSummarySide.TOP) { + if (showPreparationStatus && side == BoardSummarySide.TOP) { styledDiv { css { display = Display.flex @@ -97,11 +104,11 @@ private fun RBuilder.topBar(player: PlayerDTO, side: BoardSummarySide) { } } -private fun RBuilder.bottomBar(side: BoardSummarySide, board: Board, player: PlayerDTO) { +private fun RBuilder.bottomBar(side: BoardSummarySide, board: Board, player: PlayerDTO, showPreparationStatus: Boolean) { styledDiv { css { display = Display.flex - flexDirection = if (side == BoardSummarySide.TOP) FlexDirection.row else FlexDirection.column + flexDirection = if (side == BoardSummarySide.TOP || side == BoardSummarySide.BOTTOM) FlexDirection.row else FlexDirection.column alignItems = side.alignment if (side != BoardSummarySide.TOP) { width = 100.pct @@ -111,7 +118,7 @@ private fun RBuilder.bottomBar(side: BoardSummarySide, board: Board, player: Pla generalCounts(board, tokenSize, side.tokenCountPosition) bpDivider() scienceTokens(board, tokenSize, side.tokenCountPosition) - if (side != BoardSummarySide.TOP) { + if (showPreparationStatus && side != BoardSummarySide.TOP) { bpDivider() styledDiv { css { diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameScene.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameScene.kt index 79e003cf..d26fc81d 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameScene.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameScene.kt @@ -89,7 +89,7 @@ private class GameScene(props: GameSceneProps) : RComponent<GameSceneProps, RSta if (turnInfo.action == Action.SAY_READY) { sayReadyButton() } - productionBar(gold = board.gold, production = board.production) + selfBoardSummary(turnInfo) } } @@ -194,6 +194,30 @@ private class GameScene(props: GameSceneProps) : RComponent<GameSceneProps, RSta } } + private fun RBuilder.selfBoardSummary(turnInfo: PlayerTurnInfo) { + styledDiv { + css { + position = Position.absolute + bottom = 0.px + left = 0.px + display = Display.flex + flexDirection = FlexDirection.row + } + val board = turnInfo.getOwnBoard() + boardSummary( + player = props.players[board.playerIndex], + board = board, BoardSummarySide.BOTTOM, + showPreparationStatus = false, + ) { + css { + borderTopLeftRadius = 0.4.rem + borderTopRightRadius = 0.4.rem + margin(horizontal = 2.rem) + } + } + } + } + private fun RBuilder.preparedMove(card: HandCard, move: PlayerMove) { bpOverlay(isOpen = true, onClose = props.unprepareMove) { preparedMove(card, move, props.unprepareMove) { diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Hand.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Hand.kt index 85f78cb3..8800c92e 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Hand.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Hand.kt @@ -213,13 +213,14 @@ private fun CSSBuilder.handStyle() { maxHeight = 25.vw position = Position.absolute transform { - translate(tx = (-50).pct, ty = 55.pct) + translate(tx = (-50).pct, ty = 65.pct) } transition(duration = 0.5.s) zIndex = 30 hover { - bottom = 4.rem + bottom = 1.rem + zIndex = 60 transform { translate(tx = (-50).pct, ty = 0.pct) } diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/ProductionBar.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/ProductionBar.kt deleted file mode 100644 index c3cd9911..00000000 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/ProductionBar.kt +++ /dev/null @@ -1,98 +0,0 @@ -package org.luxons.sevenwonders.ui.components.game - -import kotlinx.css.* -import kotlinx.css.properties.borderTop -import kotlinx.css.properties.boxShadow -import kotlinx.html.DIV -import org.luxons.sevenwonders.model.boards.Production -import org.luxons.sevenwonders.model.resources.CountedResource -import org.luxons.sevenwonders.model.resources.ResourceType -import react.RBuilder -import react.dom.key -import styled.StyledDOMBuilder -import styled.css -import styled.styledDiv -import styled.styledSpan - -fun RBuilder.productionBar(gold: Int, production: Production) { - styledDiv { - css { - productionBarStyle() - } - goldIndicator(gold) - fixedResources(production.fixedResources) - alternativeResources(production.alternativeResources) - } -} - -private fun RBuilder.fixedResources(resources: List<CountedResource>) { - styledDiv { - css { - margin = "auto" - display = Display.flex - } - resources.forEach { - resourceWithCount(resourceType = it.type, count = it.count, imgSize = 3.rem) { - attrs { key = it.type.toString() } - css { marginLeft = 1.rem } - } - } - } -} - -private fun RBuilder.alternativeResources(resources: List<Set<ResourceType>>) { - styledDiv { - css { - margin = "auto" - display = Display.flex - } - resources.forEachIndexed { index, res -> - resourceChoice(types = res) { - attrs { - key = index.toString() - } - } - } - } -} - -private fun RBuilder.resourceChoice(types: Set<ResourceType>, block: StyledDOMBuilder<DIV>.() -> Unit = {}) { - styledDiv { - css { - marginLeft = (1.5).rem - } - block() - for ((i, t) in types.withIndex()) { - resourceImage(resourceType = t, size = 3.rem) { - attrs { this.key = t.toString() } - } - if (i < types.indices.last) { - styledSpan { - css { choiceSeparatorStyle() } - +"/" - } - } - } - } -} - -private fun CSSBuilder.productionBarStyle() { - alignItems = Align.center - background = "linear-gradient(#eaeaea, #888 7%)" - bottom = 0.px - borderTop(width = 1.px, color = Color("#8b8b8b"), style = BorderStyle.solid) - boxShadow(blurRadius = 15.px, color = Color("#747474")) - display = Display.flex - height = (3.5).rem - width = 100.vw - position = Position.fixed - zIndex = 99 -} - -private fun CSSBuilder.choiceSeparatorStyle() { - fontSize = 2.rem - verticalAlign = VerticalAlign.middle - margin(all = 5.px) - color = Color("#c29929") - declarations["text-shadow"] = "0 0 1px black" -} |