diff options
Diffstat (limited to 'sw-ui/src/main')
4 files changed, 137 insertions, 12 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 4f1459de..ee69622e 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 @@ -11,11 +11,7 @@ import org.luxons.sevenwonders.ui.components.gameBrowser.playerInfo import react.RBuilder import react.ReactElement import react.buildElement -import styled.StyledDOMBuilder -import styled.css -import styled.getClassName -import styled.styledDiv -import styled.styledHr +import styled.* enum class BoardSummarySide( val tokenCountPosition: TokenCountPosition, @@ -71,25 +67,62 @@ private fun RBuilder.boardSummary( } } - playerInfo(player, iconSize = 25) + topBar(player, side) styledHr { css { margin(vertical = 0.5.rem) width = 100.pct } } + bottomBar(side, board, player) + block() + } +} + +private fun RBuilder.topBar(player: PlayerDTO, side: BoardSummarySide) { + val playerIconSize = 25 + if (side == BoardSummarySide.TOP) { styledDiv { css { display = Display.flex - flexDirection = if (side == BoardSummarySide.TOP) FlexDirection.row else FlexDirection.column - alignItems = side.alignment + flexDirection = FlexDirection.row + justifyContent = JustifyContent.spaceBetween + width = 100.pct + } + playerInfo(player, iconSize = playerIconSize) + playerPreparedCard(player) + } + } else { + playerInfo(player, iconSize = playerIconSize) + } +} + +private fun RBuilder.bottomBar(side: BoardSummarySide, board: Board, player: PlayerDTO) { + styledDiv { + css { + display = Display.flex + flexDirection = if (side == BoardSummarySide.TOP) FlexDirection.row else FlexDirection.column + alignItems = side.alignment + if (side != BoardSummarySide.TOP) { + width = 100.pct } - val tokenSize = 2.rem - generalCounts(board, tokenSize, side.tokenCountPosition) + } + val tokenSize = 2.rem + generalCounts(board, tokenSize, side.tokenCountPosition) + bpDivider() + scienceTokens(board, tokenSize, side.tokenCountPosition) + if (side != BoardSummarySide.TOP) { bpDivider() - scienceTokens(board, tokenSize, side.tokenCountPosition) + styledDiv { + css { + width = 100.pct + alignItems = Align.center + display = Display.flex + flexDirection = FlexDirection.column + } + playerPreparedCard(player) + } } - block() } } diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/PlayerPreparedCard.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/PlayerPreparedCard.kt new file mode 100644 index 00000000..3da63a38 --- /dev/null +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/PlayerPreparedCard.kt @@ -0,0 +1,84 @@ +package org.luxons.sevenwonders.ui.components.game + +import kotlinx.css.* +import kotlinx.css.properties.* +import kotlinx.html.title +import org.luxons.sevenwonders.model.api.PlayerDTO +import org.luxons.sevenwonders.model.cards.CardBack +import org.luxons.sevenwonders.ui.redux.connectStateWithOwnProps +import react.RBuilder +import react.RComponent +import react.RProps +import react.RState +import styled.animation +import styled.css +import styled.styledDiv +import styled.styledImg + +interface PlayerPreparedCardProps : RProps { + var playerDisplayName: String + var cardBack: CardBack? +} + +interface PlayerPreparedCardContainerProps : RProps { + var playerDisplayName: String + var username: String +} + +fun RBuilder.playerPreparedCard(player: PlayerDTO) = playerPreparedCard { + attrs { + this.playerDisplayName = player.displayName + this.username = player.username + } +} + +private class PlayerPreparedCard(props: PlayerPreparedCardProps) : RComponent<PlayerPreparedCardProps, RState>(props) { + + override fun RBuilder.render() { + val cardBack = props.cardBack + val sideSize = 30.px + styledDiv { + css { + width = sideSize + height = sideSize + } + attrs { + title = if (cardBack == null) { + "${props.playerDisplayName} is still thinking…" + } else { + "${props.playerDisplayName} has prepared his move" + } + } + if (cardBack != null) { + cardBackImage(cardBack) { + css { + maxHeight = sideSize + } + } + } else { + styledImg(src = "images/gear-50.png") { + css { + maxHeight = sideSize + animation( + duration = 1.5.s, + iterationCount = IterationCount.infinite, + timing = cubicBezier(0.2, 0.9, 0.7, 1.3) + ) { + to { + transform { rotate(360.deg) } + } + } + } + } + } + } + } +} + +private val playerPreparedCard = connectStateWithOwnProps( + clazz = PlayerPreparedCard::class, + mapStateToProps = { state, ownProps: PlayerPreparedCardContainerProps -> + playerDisplayName = ownProps.playerDisplayName + cardBack = state.gameState?.preparedCardsByUsername?.get(ownProps.username) + }, +) diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/redux/Utils.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/redux/Utils.kt index b748c3a5..064e3391 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/redux/Utils.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/redux/Utils.kt @@ -26,6 +26,14 @@ inline fun <reified SP : RProps> connectState( return connect.invoke(clazz.js.unsafeCast<RClass<SP>>()) } +inline fun <reified SP : RProps, OP : RProps> connectStateWithOwnProps( + clazz: KClass<out RComponent<SP, out RState>>, + noinline mapStateToProps: SP.(SwState, OP) -> Unit, +): RClass<OP> { + val connect = rConnect(mapStateToProps = mapStateToProps) + return connect.invoke(clazz.js.unsafeCast<RClass<SP>>()) +} + inline fun <reified SP : RProps, reified DP : RProps, reified P : RProps> connectStateAndDispatch( clazz: KClass<out RComponent<P, out RState>>, noinline mapStateToProps: SP.(SwState, RProps) -> Unit, diff --git a/sw-ui/src/main/resources/images/gear-50.png b/sw-ui/src/main/resources/images/gear-50.png Binary files differnew file mode 100644 index 00000000..93a4a186 --- /dev/null +++ b/sw-ui/src/main/resources/images/gear-50.png |
