Add neighbours info to transaction selector

Related:
https://github.com/joffrey-bion/seven-wonders/issues/50

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
     },
 )