Rework Lobby style

Resolves:
https://github.com/joffrey-bion/seven-wonders/issues/69

3 files changed, 59 insertions, 22 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 478f4f4f..f7dd0b2a 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
@@ -51,6 +51,7 @@ class LobbyPresenter(props: LobbyProps) : RComponent<LobbyProps, RState>(props)
             css {
                 padding(1.rem)
                 +GlobalStyles.fullscreen
+                +GlobalStyles.papyrusBackground
             }
             h2 { +"${currentGame.name} — Lobby" }
             radialPlayerList(currentGame.players, currentPlayer)
@@ -68,14 +69,20 @@ class LobbyPresenter(props: LobbyProps) : RComponent<LobbyProps, RState>(props)
                 bottom = 2.rem
                 left = 50.pct
                 transform { translate((-50).pct) }
+
+                width = 70.pct
+                display = Display.flex
+                justifyContent = JustifyContent.spaceAround
             }
             if (currentPlayer.isGameOwner) {
                 bpButtonGroup {
-                    startButton(currentGame, currentPlayer)
-                    addBotButton(currentGame)
                     leaveButton()
                     disbandButton()
                 }
+                bpButtonGroup {
+                    addBotButton(currentGame)
+                    startButton(currentGame, currentPlayer)
+                }
             } else {
                 leaveButton()
             }
@@ -99,12 +106,9 @@ class LobbyPresenter(props: LobbyProps) : RComponent<LobbyProps, RState>(props)
     private fun RBuilder.setupPanel(currentGame: LobbyDTO) {
         styledDiv {
             css {
-                position = Position.fixed
-                top = 2.rem
-                right = 1.rem
-                width = 15.rem
+                +LobbyStyles.setupPanel
             }
-            bpCard(Elevation.TWO) {
+            bpCard(Elevation.TWO, className = Classes.DARK) {
                 styledH2 {
                     css {
                         margin(top = 0.px)
@@ -130,6 +134,7 @@ class LobbyPresenter(props: LobbyProps) : RComponent<LobbyProps, RState>(props)
             large = true,
             icon = "plus",
             rightIcon = "desktop",
+            intent = Intent.PRIMARY,
             title = if (currentGame.maxPlayersReached) "Max players reached" else "Add a bot to this game",
             disabled = currentGame.maxPlayersReached,
             onClick = { addBot(currentGame) },
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/LobbyStyles.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/LobbyStyles.kt
new file mode 100644
index 00000000..1d9d8e4c
--- /dev/null
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/LobbyStyles.kt
@@ -0,0 +1,22 @@
+package org.luxons.sevenwonders.ui.components.lobby
+
+import kotlinx.css.*
+import styled.StyleSheet
+
+object LobbyStyles : StyleSheet("LobbyStyles", isStatic = true) {
+
+    val setupPanel by css {
+        position = Position.fixed
+        top = 2.rem
+        right = 1.rem
+        width = 15.rem
+    }
+
+    val wonderTagSideA by css {
+        backgroundColor = Color.seaGreen
+    }
+
+    val wonderTagSideB by css {
+        backgroundColor = Color.darkRed
+    }
+}
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 44e779c7..c316f6e5 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
@@ -1,17 +1,16 @@
 package org.luxons.sevenwonders.ui.components.lobby
 
-import com.palantir.blueprintjs.Intent
 import com.palantir.blueprintjs.bpIcon
+import com.palantir.blueprintjs.bpTag
 import kotlinx.css.*
 import org.luxons.sevenwonders.model.api.PlayerDTO
 import org.luxons.sevenwonders.model.api.actions.Icon
+import org.luxons.sevenwonders.model.wonders.WonderSide
 import react.RBuilder
 import react.ReactElement
 import react.buildElement
 import react.dom.*
-import styled.css
-import styled.styledDiv
-import styled.styledH4
+import styled.*
 
 fun RBuilder.radialPlayerList(players: List<PlayerDTO>, currentPlayer: PlayerDTO): ReactElement {
     val playerItems = players //
@@ -64,11 +63,10 @@ private sealed class PlayerItem {
     data class Player(val player: PlayerDTO, val isMe: Boolean) : PlayerItem() {
         override val key = player.username
         override val playerText = player.displayName
-        override val wonderText = "${player.wonder.name} (${player.wonder.side.name})"
+        override val wonderText = "${player.wonder.name} ${player.wonder.side.name}"
         override val opacity = 1.0
         override val icon = buildElement {
             userIcon(
-                isMe = isMe,
                 icon = player.icon ?: when {
                     player.isGameOwner -> Icon("badge")
                     else -> Icon("user")
@@ -82,10 +80,9 @@ private sealed class PlayerItem {
         override val key = "player-placeholder-$index"
         override val playerText = "?"
         override val wonderText = " "
-        override val opacity = 0.3
+        override val opacity = 0.4
         override val icon = buildElement {
             userIcon(
-                isMe = false,
                 icon = Icon("user"),
                 title = "Waiting for player...",
             )
@@ -93,9 +90,8 @@ private sealed class PlayerItem {
     }
 }
 
-private fun RBuilder.userIcon(isMe: Boolean, icon: Icon, title: String?): ReactElement = bpIcon(
+private fun RBuilder.userIcon(icon: Icon, title: String?): ReactElement = bpIcon(
     name = icon.name,
-    intent = if (isMe) Intent.WARNING else Intent.NONE,
     size = 50,
     title = title,
 )
@@ -109,18 +105,32 @@ private fun RBuilder.playerElement(playerItem: PlayerItem) {
             opacity = playerItem.opacity
         }
         child(playerItem.icon)
-        styledH4 {
+        styledSpan {
             css {
                 margin(all = 0.px)
                 textAlign = TextAlign.center
+                fontSize = if (playerItem is PlayerItem.Placeholder) 1.5.rem else 0.9.rem
+                fontWeight = FontWeight.bold
             }
             +playerItem.playerText
         }
-        styledDiv {
-            css {
-                margin(top = 0.3.rem)
+        if (playerItem is PlayerItem.Player) {
+            styledDiv {
+                css {
+                    margin(top = 0.3.rem)
+                }
+                bpTag(round = true) {
+                    attrs {
+                        className = LobbyStyles.getClassName {
+                            when (playerItem.player.wonder.side) {
+                                WonderSide.A -> it::wonderTagSideA
+                                WonderSide.B -> it::wonderTagSideB
+                            }
+                        }
+                    }
+                    +playerItem.wonderText
+                }
             }
-            +playerItem.wonderText
         }
     }
 }