diff options
Diffstat (limited to 'sw-ui/src/main')
4 files changed, 44 insertions, 12 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 bab6fe81..e9b7b5ad 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 @@ -19,7 +19,7 @@ import styled.getClassName import styled.styledDiv interface GameSceneStateProps : RProps { - var playerIsReady: Boolean + var currentPlayer: PlayerDTO? var players: List<PlayerDTO> var gameState: GameState? var preparedMove: PlayerMove? @@ -47,7 +47,7 @@ private class GameScene(props: GameSceneProps) : RComponent<GameSceneProps, RSta } val turnInfo = props.gameState?.turnInfo if (turnInfo == null) { - bpNonIdealState(icon = "error", title = "Error: no turn info data") + bpNonIdealState(icon = "error", title = "Error: no game data") } else { turnInfoScene(turnInfo) } @@ -76,6 +76,7 @@ private class GameScene(props: GameSceneProps) : RComponent<GameSceneProps, RSta } transactionsSelectorDialog( state = props.gameState?.transactionSelector, + neighbours = playerNeighbours(), prepareMove = props.prepareMove, cancelTransactionSelection = props.cancelTransactionsSelection, ) @@ -94,6 +95,14 @@ private class GameScene(props: GameSceneProps) : RComponent<GameSceneProps, RSta } } + private fun playerNeighbours(): Pair<PlayerDTO, PlayerDTO> { + val me = props.currentPlayer?.username ?: error("we shouldn't be trying to display this if there is no player") + val players = props.players + val size = players.size + val myIndex = players.indexOfFirst { it.username == me } + return players[(myIndex - 1 + size) % size] to players[(myIndex + 1) % size] + } + private fun RBuilder.actionInfo(message: String) { styledDiv { css { @@ -185,7 +194,7 @@ private class GameScene(props: GameSceneProps) : RComponent<GameSceneProps, RSta } private fun RBuilder.sayReadyButton(): ReactElement { - val isReady = props.playerIsReady + val isReady = props.currentPlayer?.isReady == true val intent = if (isReady) Intent.SUCCESS else Intent.PRIMARY return styledDiv { css { @@ -228,7 +237,7 @@ private val gameScene: RClass<GameSceneProps> = leaveGame = { dispatch(RequestLeaveGame()) } }, mapStateToProps = { state, _ -> - playerIsReady = state.currentPlayer?.isReady == true + currentPlayer = state.currentPlayer players = state.gameState?.players ?: emptyList() gameState = state.gameState preparedMove = state.gameState?.currentPreparedMove 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 e69bc671..87f163c5 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 @@ -39,6 +39,7 @@ object GameStyles : StyleSheet("GameStyles", isStatic = true) { val transactionsSelector by css { backgroundColor = sandColor + width = 600.px // default is 500px, we want to fit players on the side children(".bp3-dialog-header") { background = "none" // overrides default white background 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 12e166f5..ebe97bfa 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 @@ -7,9 +7,11 @@ import kotlinx.html.TD import kotlinx.html.classes import kotlinx.html.js.onClickFunction import org.luxons.sevenwonders.model.PlayerMove +import org.luxons.sevenwonders.model.api.PlayerDTO import org.luxons.sevenwonders.model.resources.CountedResource import org.luxons.sevenwonders.model.resources.Provider import org.luxons.sevenwonders.model.resources.ResourceType +import org.luxons.sevenwonders.ui.components.gameBrowser.playerInfo import org.luxons.sevenwonders.ui.redux.TransactionSelectorState import react.RBuilder import react.dom.div @@ -19,6 +21,7 @@ import styled.* fun RBuilder.transactionsSelectorDialog( state: TransactionSelectorState?, + neighbours: Pair<PlayerDTO, PlayerDTO>, prepareMove: (PlayerMove) -> Unit, cancelTransactionSelection: () -> Unit, ) { @@ -48,7 +51,7 @@ fun RBuilder.transactionsSelectorDialog( display = Display.flex alignItems = Align.center } - neighbour() + neighbour(neighbours.first) styledDiv { css { grow(Grow.GROW) @@ -56,22 +59,24 @@ fun RBuilder.transactionsSelectorDialog( } optionsTable(state, prepareMove) } - neighbour() + neighbour(neighbours.second) } } } } } -private fun StyledDOMBuilder<DIV>.neighbour() { +private fun StyledDOMBuilder<DIV>.neighbour(player: PlayerDTO) { styledDiv { css { width = 100.pct + + // center the icon display = Display.flex flexDirection = FlexDirection.column alignItems = Align.center } - bpIcon("user", size = 40) + playerInfo(player, iconSize = 40, orientation = FlexDirection.column) } } @@ -164,6 +169,8 @@ private fun RBuilder.resourceList(resources: List<CountedResource>) { alignItems = Align.center justifyContent = JustifyContent.center grow(Grow.GROW) + // this ensures stable dimensions, no matter how many resources (up to 2x3 matrix) + width = imgSize * 3 height = imgSize * 2 } rows.forEach { row -> diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/PlayerInfo.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/PlayerInfo.kt index 40581ff4..7e4c66ba 100644 --- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/PlayerInfo.kt +++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/PlayerInfo.kt @@ -17,6 +17,7 @@ interface PlayerInfoProps : RProps { var player: BasicPlayerInfo? var showUsername: Boolean var iconSize: Int + var orientation: FlexDirection } class PlayerInfoPresenter(props: PlayerInfoProps) : RComponent<PlayerInfoProps, RState>(props) { @@ -26,6 +27,7 @@ class PlayerInfoPresenter(props: PlayerInfoProps) : RComponent<PlayerInfoProps, css { display = Display.flex alignItems = Align.center + flexDirection = props.orientation } props.player?.let { bpIcon(name = it.icon?.name ?: "user", size = props.iconSize) @@ -42,18 +44,28 @@ class PlayerInfoPresenter(props: PlayerInfoProps) : RComponent<PlayerInfoProps, styledSpan { css { fontSize = 1.rem - marginLeft = 0.4.rem + iconSeparationMargin() } +displayName } } + private fun CSSBuilder.iconSeparationMargin() { + val margin = 0.4.rem + when (props.orientation) { + FlexDirection.row -> marginLeft = margin + FlexDirection.column -> marginTop = margin + FlexDirection.rowReverse -> marginRight = margin + FlexDirection.columnReverse -> marginBottom = margin + } + } + private fun RBuilder.playerNameWithUsername(displayName: String, username: String) { styledDiv { css { display = Display.flex flexDirection = FlexDirection.column - marginLeft = 0.4.rem + iconSeparationMargin() } styledSpan { css { @@ -74,14 +86,16 @@ class PlayerInfoPresenter(props: PlayerInfoProps) : RComponent<PlayerInfoProps, } fun RBuilder.playerInfo( - playerDTO: PlayerDTO, + player: PlayerDTO, showUsername: Boolean = false, iconSize: Int = 30, + orientation: FlexDirection = FlexDirection.row, ) = child(PlayerInfoPresenter::class) { attrs { - this.player = playerDTO + this.player = player this.showUsername = showUsername this.iconSize = iconSize + this.orientation = orientation } } @@ -92,5 +106,6 @@ private val playerInfo = connectState( mapStateToProps = { state, _ -> player = state.connectedPlayer showUsername = true + orientation = FlexDirection.row }, ) |