diff options
Diffstat (limited to 'sw-ui/src/main')
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 } } } |