diff options
Diffstat (limited to 'sw-ui')
4 files changed, 95 insertions, 30 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 67f94848..715fc25d 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 @@ -1,27 +1,53 @@ package org.luxons.sevenwonders.ui.components.game +import com.palantir.blueprintjs.PopoverPosition import com.palantir.blueprintjs.bpDivider +import com.palantir.blueprintjs.bpPopover import kotlinx.css.* import kotlinx.html.DIV import org.luxons.sevenwonders.model.api.PlayerDTO import org.luxons.sevenwonders.model.boards.Board import org.luxons.sevenwonders.ui.components.gameBrowser.playerInfo import react.RBuilder -import styled.StyledDOMBuilder -import styled.css -import styled.styledDiv -import styled.styledHr +import react.ReactElement +import react.buildElement +import styled.* enum class BoardSummarySide( val tokenCountPosition: TokenCountPosition, - val alignment: Align + val alignment: Align, + val popoverPosition: PopoverPosition ) { - LEFT(TokenCountPosition.RIGHT, Align.flexStart), - TOP(TokenCountPosition.OVER, Align.flexStart), - RIGHT(TokenCountPosition.LEFT, Align.flexEnd) + LEFT(TokenCountPosition.RIGHT, Align.flexStart, PopoverPosition.RIGHT), + TOP(TokenCountPosition.OVER, Align.flexStart, PopoverPosition.BOTTOM), + RIGHT(TokenCountPosition.LEFT, Align.flexEnd, PopoverPosition.LEFT) } -fun RBuilder.boardSummary( +fun RBuilder.boardSummaryWithPopover( + player: PlayerDTO, + board: Board, + boardSummarySide: BoardSummarySide, + block: StyledDOMBuilder<DIV>.() -> Unit = {} +) { + val popoverClass = GameStyles.getClassName { it::fullBoardPreviewPopover } + bpPopover( + content = createFullBoardPreview(board), + position = boardSummarySide.popoverPosition, + popoverClassName = popoverClass + ) { + boardSummary(player, board, boardSummarySide, block) + } +} + +private fun createFullBoardPreview(board: Board): ReactElement = buildElement { + boardComponent(board = board) { + css { + +GameStyles.fullBoardPreview + } + } +} + +private fun RBuilder.boardSummary( player: PlayerDTO, board: Board, boardSummarySide: BoardSummarySide, @@ -35,8 +61,11 @@ fun RBuilder.boardSummary( padding(all = 0.5.rem) backgroundColor = Color.paleGoldenrod.withAlpha(0.5) zIndex = 50 // above table cards + + hover { + backgroundColor = Color.paleGoldenrod + } } - val tokenSize = 2.rem playerInfo(player, iconSize = 25) styledHr { @@ -51,6 +80,7 @@ fun RBuilder.boardSummary( flexDirection = if (boardSummarySide == BoardSummarySide.TOP) FlexDirection.row else FlexDirection.column alignItems = boardSummarySide.alignment } + val tokenSize = 2.rem generalCounts(board, tokenSize, boardSummarySide.tokenCountPosition) bpDivider() scienceTokens(board, tokenSize, boardSummarySide.tokenCountPosition) 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 afc3b157..b4e432df 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 @@ -116,25 +116,33 @@ private class GameScene(props: GameSceneProps) : RComponent<GameSceneProps, RSta } private fun RBuilder.leftPlayerBoardSummary(board: Board) { - boardSummary(props.players[board.playerIndex], board, BoardSummarySide.LEFT) { + styledDiv { css { position = Position.absolute left = 0.px bottom = 40.pct - borderTopRightRadius = 0.4.rem - borderBottomRightRadius = 0.4.rem + } + boardSummaryWithPopover(props.players[board.playerIndex], board, BoardSummarySide.LEFT) { + css { + borderTopRightRadius = 0.4.rem + borderBottomRightRadius = 0.4.rem + } } } } private fun RBuilder.rightPlayerBoardSummary(board: Board) { - boardSummary(props.players[board.playerIndex], board, BoardSummarySide.RIGHT) { + styledDiv { css { position = Position.absolute right = 0.px bottom = 40.pct - borderTopLeftRadius = 0.4.rem - borderBottomLeftRadius = 0.4.rem + } + boardSummaryWithPopover(props.players[board.playerIndex], board, BoardSummarySide.RIGHT) { + css { + borderTopLeftRadius = 0.4.rem + borderBottomLeftRadius = 0.4.rem + } } } } @@ -150,7 +158,7 @@ private class GameScene(props: GameSceneProps) : RComponent<GameSceneProps, RSta flexDirection = FlexDirection.row } boards.forEach { board -> - boardSummary(props.players[board.playerIndex], board, BoardSummarySide.TOP) { + boardSummaryWithPopover(props.players[board.playerIndex], board, BoardSummarySide.TOP) { css { borderBottomLeftRadius = 0.4.rem borderBottomRightRadius = 0.4.rem 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 dc52a83a..2fae1fb8 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 @@ -1,10 +1,48 @@ package org.luxons.sevenwonders.ui.components.game import kotlinx.css.* +import kotlinx.css.properties.* import styled.StyleSheet object GameStyles : StyleSheet("GameStyles", isStatic = true) { + val fullBoardPreviewPopover by css { + val bgColor = Color.paleGoldenrod.withAlpha(0.7) + backgroundColor = bgColor + borderRadius = 0.5.rem + padding(all = 0.5.rem) + + children(".bp3-popover-content") { + background = "none" // overrides default white background + } + descendants(".bp3-popover-arrow-fill") { + put("fill", bgColor.toString()) // overrides default white arrow + } + descendants(".bp3-popover-arrow::before") { + boxShadow(Color.transparent) + } + } + + val fullBoardPreview by css { + width = 40.vw + height = 50.vh + } + + val dimmedCard by css { + filter = "brightness(60%) grayscale(50%)" + } + + val discardMoveText by css { + display = Display.flex + alignItems = Align.center + height = 3.rem + fontSize = 2.rem + color = Color.goldenrod + fontWeight = FontWeight.bold + borderTop(0.2.rem, BorderStyle.solid, Color.goldenrod) + borderBottom(0.2.rem, BorderStyle.solid, Color.goldenrod) + } + val scoreBoard by css { backgroundColor = Color.paleGoldenrod } diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/PreparedMove.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/PreparedMove.kt index a27c7393..083338a8 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/PreparedMove.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/PreparedMove.kt @@ -25,7 +25,7 @@ fun RBuilder.preparedMove( block() cardImage(card) { if (move.type == MoveType.DISCARD || move.type == MoveType.UPGRADE_WONDER) { - css { discardedCardStyle() } + css { +GameStyles.dimmedCard } } } if (move.type == MoveType.DISCARD) { @@ -51,22 +51,11 @@ fun RBuilder.preparedMove( } } -private fun CSSBuilder.discardedCardStyle() { - filter = "brightness(60%) grayscale(50%)" -} - private fun StyledDOMBuilder<DIV>.discardText() { styledDiv { css { +GlobalStyles.centerInParent - display = Display.flex - alignItems = Align.center - height = 3.rem - fontSize = 2.rem - color = Color.goldenrod - fontWeight = FontWeight.bold - borderTop(0.2.rem, BorderStyle.solid, Color.goldenrod) - borderBottom(0.2.rem, BorderStyle.solid, Color.goldenrod) + +GameStyles.discardMoveText } +"DISCARD" } |