diff options
3 files changed, 132 insertions, 96 deletions
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 2422e66f..be6b0e50 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 @@ -3,19 +3,18 @@ package org.luxons.sevenwonders.ui.components.game import com.palantir.blueprintjs.* import kotlinx.css.* import kotlinx.css.properties.* -import kotlinx.html.DIV import org.luxons.sevenwonders.model.Action -import org.luxons.sevenwonders.model.MoveType import org.luxons.sevenwonders.model.PlayerMove import org.luxons.sevenwonders.model.PlayerTurnInfo import org.luxons.sevenwonders.model.api.PlayerDTO import org.luxons.sevenwonders.model.cards.HandCard -import org.luxons.sevenwonders.model.cards.HandRotationDirection import org.luxons.sevenwonders.ui.components.GlobalStyles import org.luxons.sevenwonders.ui.redux.* import react.* import react.dom.* -import styled.* +import styled.css +import styled.getClassName +import styled.styledDiv interface GameSceneStateProps : RProps { var playerIsReady: Boolean @@ -98,101 +97,10 @@ private class GameScene(props: GameSceneProps) : RComponent<GameSceneProps, RSta } } - private fun RBuilder.handRotationIndicator(direction: HandRotationDirection) { - styledDiv { - css { - position = Position.absolute - display = Display.flex - alignItems = Align.center - bottom = 25.vh - } - val sideDistance = 2.rem - when (direction) { - HandRotationDirection.LEFT -> { - css { left = sideDistance } - bpIcon("arrow-left", size = 25) - handCardsImg() - } - HandRotationDirection.RIGHT -> { - css { right = sideDistance } - handCardsImg() - bpIcon("arrow-right", size = 25) - } - } - } - } - - private fun RBuilder.handCardsImg() { - styledImg(src = "images/hand-cards5.png") { - css { - width = 4.rem - } - } - } - private fun RBuilder.preparedMove(card: HandCard, move: PlayerMove) { bpOverlay(isOpen = true, onClose = props.unprepareMove) { - styledDiv { + preparedMove(card, move, props.unprepareMove) { css { +GlobalStyles.fixedCenter } - cardImage(card, faceDown = move.type == MoveType.UPGRADE_WONDER) { - if (move.type == MoveType.DISCARD) { - css { discardedCardStyle() } - } - } - if (move.type == MoveType.DISCARD) { - discardText() - } - if (move.type == MoveType.UPGRADE_WONDER) { - upgradeWonderSymbol() - } - styledDiv { - css { - position = Position.absolute - top = 0.px - right = 0.px - } - bpButton( - icon = "cross", - title = "Cancel prepared move", - small = true, - intent = Intent.DANGER, - onClick = { props.unprepareMove() } - ) - } - } - } - } - - 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 - borderTop(2.px, BorderStyle.solid, Color.goldenrod) - borderBottom(2.px, BorderStyle.solid, Color.goldenrod) - } - +"DISCARD" - } - } - - private fun StyledDOMBuilder<DIV>.upgradeWonderSymbol() { - styledImg(src = "/images/wonder-upgrade-bright.png") { - css { - width = 8.rem - position = Position.absolute - left = 10.pct - top = 50.pct - transform { - translate((-50).pct, (-50).pct) - } } } } diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/HandRotationIndicator.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/HandRotationIndicator.kt new file mode 100644 index 00000000..5755fc21 --- /dev/null +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/HandRotationIndicator.kt @@ -0,0 +1,41 @@ +package org.luxons.sevenwonders.ui.components.game + +import com.palantir.blueprintjs.bpIcon +import kotlinx.css.* +import org.luxons.sevenwonders.model.cards.HandRotationDirection +import react.RBuilder +import styled.css +import styled.styledDiv +import styled.styledImg + +fun RBuilder.handRotationIndicator(direction: HandRotationDirection) { + styledDiv { + css { + position = Position.absolute + display = Display.flex + alignItems = Align.center + bottom = 25.vh + } + val sideDistance = 2.rem + when (direction) { + HandRotationDirection.LEFT -> { + css { left = sideDistance } + bpIcon("arrow-left", size = 25) + handCardsImg() + } + HandRotationDirection.RIGHT -> { + css { right = sideDistance } + handCardsImg() + bpIcon("arrow-right", size = 25) + } + } + } +} + +private fun RBuilder.handCardsImg() { + styledImg(src = "images/hand-cards5.png") { + css { + width = 4.rem + } + } +} 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 new file mode 100644 index 00000000..a27c7393 --- /dev/null +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/PreparedMove.kt @@ -0,0 +1,87 @@ +package org.luxons.sevenwonders.ui.components.game + +import com.palantir.blueprintjs.Intent +import com.palantir.blueprintjs.bpButton +import kotlinx.css.* +import kotlinx.css.properties.* +import kotlinx.html.DIV +import org.luxons.sevenwonders.model.MoveType +import org.luxons.sevenwonders.model.PlayerMove +import org.luxons.sevenwonders.model.cards.HandCard +import org.luxons.sevenwonders.ui.components.GlobalStyles +import react.RBuilder +import styled.StyledDOMBuilder +import styled.css +import styled.styledDiv +import styled.styledImg + +fun RBuilder.preparedMove( + card: HandCard, + move: PlayerMove, + unprepareMove: () -> Unit, + block: StyledDOMBuilder<DIV>.() -> Unit +) { + styledDiv { + block() + cardImage(card) { + if (move.type == MoveType.DISCARD || move.type == MoveType.UPGRADE_WONDER) { + css { discardedCardStyle() } + } + } + if (move.type == MoveType.DISCARD) { + discardText() + } + if (move.type == MoveType.UPGRADE_WONDER) { + upgradeWonderSymbol() + } + styledDiv { + css { + position = Position.absolute + top = 0.px + right = 0.px + } + bpButton( + icon = "cross", + title = "Cancel prepared move", + small = true, + intent = Intent.DANGER, + onClick = { unprepareMove() } + ) + } + } +} + +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) + } + +"DISCARD" + } +} + +private fun StyledDOMBuilder<DIV>.upgradeWonderSymbol() { + styledImg(src = "/images/wonder-upgrade-bright.png") { + css { + width = 8.rem + position = Position.absolute + left = 10.pct + top = 50.pct + transform { + translate((-50).pct, (-50).pct) + } + } + } +} |