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