Display assigned wonder in Lobby

3 files changed, 46 insertions, 41 deletions

diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/Lobby.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/Lobby.kt
index 8ecc6f62..2fbb75a5 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/Lobby.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/Lobby.kt
@@ -3,6 +3,8 @@ package org.luxons.sevenwonders.ui.components.lobby
 import com.palantir.blueprintjs.Intent
 import com.palantir.blueprintjs.bpButton
 import com.palantir.blueprintjs.bpNonIdealState
+import kotlinx.css.*
+import kotlinx.css.properties.*
 import org.luxons.sevenwonders.model.api.LobbyDTO
 import org.luxons.sevenwonders.model.api.PlayerDTO
 import org.luxons.sevenwonders.ui.redux.RequestAddBot
@@ -14,6 +16,8 @@ import react.RComponent
 import react.RProps
 import react.RState
 import react.dom.*
+import styled.css
+import styled.styledDiv
 
 private val BOT_NAMES = listOf("Wall-E", "B-Max", "Sonny", "T-800", "HAL", "GLaDOS")
 
@@ -42,11 +46,20 @@ class LobbyPresenter(props: LobbyProps) : RComponent<LobbyProps, RState>(props)
         div {
             h2 { +"${currentGame.name} — Lobby" }
             radialPlayerList(currentGame.players, currentPlayer)
-            if (currentPlayer.isGameOwner) {
-                startButton(currentGame, currentPlayer)
-                addBotButton(currentGame)
-            } else {
-                leaveButton()
+
+            styledDiv {
+                css {
+                    position = Position.fixed
+                    bottom = 2.rem
+                    left = 50.pct
+                    transform { translate((-50).pct) }
+                }
+                if (currentPlayer.isGameOwner) {
+                    startButton(currentGame, currentPlayer)
+                    addBotButton(currentGame)
+                } else {
+                    leaveButton()
+                }
             }
         }
     }
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialList.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialList.kt
index be3bb1de..10ddb2b1 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialList.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialList.kt
@@ -1,33 +1,13 @@
 package org.luxons.sevenwonders.ui.components.lobby
 
-import kotlinx.css.CSSBuilder
-import kotlinx.css.Display
-import kotlinx.css.ListStyleType
-import kotlinx.css.Position
-import kotlinx.css.display
-import kotlinx.css.height
-import kotlinx.css.left
-import kotlinx.css.listStyleType
-import kotlinx.css.margin
-import kotlinx.css.padding
-import kotlinx.css.pct
-import kotlinx.css.position
-import kotlinx.css.properties.Timing
-import kotlinx.css.properties.ms
-import kotlinx.css.properties.transform
-import kotlinx.css.properties.transition
-import kotlinx.css.properties.translate
-import kotlinx.css.px
-import kotlinx.css.top
-import kotlinx.css.width
-import kotlinx.css.zIndex
+import kotlinx.css.*
+import kotlinx.css.properties.*
+import kotlinx.html.DIV
+import org.luxons.sevenwonders.ui.components.GlobalStyles
 import react.RBuilder
 import react.ReactElement
 import react.dom.*
-import styled.css
-import styled.styledDiv
-import styled.styledLi
-import styled.styledUl
+import styled.*
 
 typealias ElementBuilder = RBuilder.() -> ReactElement
 
@@ -36,7 +16,8 @@ fun RBuilder.radialList(
     centerElementBuilder: ElementBuilder,
     itemWidth: Int,
     itemHeight: Int,
-    options: RadialConfig = RadialConfig()
+    options: RadialConfig = RadialConfig(),
+    block: StyledDOMBuilder<DIV>.() -> Unit = {}
 ): ReactElement {
     val containerWidth = options.diameter + itemWidth
     val containerHeight = options.diameter + itemHeight
@@ -44,10 +25,11 @@ fun RBuilder.radialList(
     return styledDiv {
         css {
             zeroMargins()
-            position = Position.relative
+            +GlobalStyles.fixedCenter
             width = containerWidth.px
             height = containerHeight.px
         }
+        block()
         radialListItems(itemBuilders, options)
         radialListCenter(centerElementBuilder)
     }
@@ -116,6 +98,6 @@ private fun CSSBuilder.absoluteCenter() {
 }
 
 private fun CSSBuilder.zeroMargins() {
-    margin = "0"
-    padding = "0"
+    margin(all = 0.px)
+    padding(all = 0.px)
 }
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialPlayerList.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialPlayerList.kt
index b40e622b..78133f92 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialPlayerList.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialPlayerList.kt
@@ -10,7 +10,7 @@ import react.ReactElement
 import react.dom.*
 import styled.css
 import styled.styledDiv
-import styled.styledH5
+import styled.styledH4
 
 fun RBuilder.radialPlayerList(players: List<PlayerDTO>, currentPlayer: PlayerDTO): ReactElement {
     val playerItemBuilders = players
@@ -33,10 +33,8 @@ fun RBuilder.radialPlayerList(players: List<PlayerDTO>, currentPlayer: PlayerDTO
     )
 }
 
-private fun RBuilder.roundTableImg(): ReactElement = img {
+private fun RBuilder.roundTableImg(): ReactElement = img(src = "images/round-table.png", alt = "Round table") {
     attrs {
-        src = "images/round-table.png"
-        alt = "Round table"
         width = "200"
         height = "200"
     }
@@ -73,12 +71,18 @@ private fun RBuilder.playerItem(player: PlayerDTO, isMe: Boolean): ReactElement
         else -> Icon("user")
     }
     userIcon(isMe = isMe, icon = icon, title = title)
-    styledH5 {
+    styledH4 {
         css {
-            margin = "0"
+            margin(all = 0.px)
         }
         +player.displayName
     }
+    styledDiv {
+        css {
+            margin(top = 0.3.rem)
+        }
+        +"${player.wonder.name} (${player.wonder.side.name})"
+    }
 }
 
 private fun RBuilder.playerPlaceholder(): ReactElement = styledDiv {
@@ -89,12 +93,18 @@ private fun RBuilder.playerPlaceholder(): ReactElement = styledDiv {
         opacity = 0.3
     }
     userIcon(isMe = false, icon = Icon("user"), title = "Waiting for player...")
-    styledH5 {
+    styledH4 {
         css {
             margin = "0"
         }
         +"?"
     }
+    styledDiv {
+        css {
+            margin(top = 0.3.rem)
+        }
+        +" " // placeholder for wonder name
+    }
 }
 
 private fun RBuilder.userIcon(isMe: Boolean, icon: Icon, title: String?): ReactElement {