diff options
Diffstat (limited to 'sw-ui')
| -rw-r--r-- | sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/PlayerInfo.kt | 36 |
1 files changed, 31 insertions, 5 deletions
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 b939dfe1..62b9f7aa 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 @@ -1,12 +1,16 @@ package org.luxons.sevenwonders.ui.components.gameBrowser +import com.palantir.blueprintjs.bpIcon +import kotlinx.css.* import org.luxons.sevenwonders.model.api.ConnectedPlayer import org.luxons.sevenwonders.ui.redux.connectState import react.RBuilder import react.RComponent import react.RProps import react.RState -import react.dom.* +import styled.css +import styled.styledDiv +import styled.styledSpan interface PlayerInfoProps : RProps { var connectedPlayer: ConnectedPlayer? @@ -15,12 +19,34 @@ interface PlayerInfoProps : RProps { class PlayerInfoPresenter(props: PlayerInfoProps) : RComponent<PlayerInfoProps, RState>(props) { override fun RBuilder.render() { - span { - b { - +"Username:" + styledDiv { + css { + display = Display.flex + alignItems = Align.center } props.connectedPlayer?.let { - + " ${it.displayName}" + bpIcon(name = it.icon?.name ?: "user", size = 30) + styledDiv { + css { + display = Display.flex + flexDirection = FlexDirection.column + marginLeft = 0.3.rem + } + styledSpan { + css { + fontSize = 1.rem + } + +it.displayName + } + styledSpan { + css { + marginTop = 0.1.rem + color = Color.lightGray + fontSize = 0.8.rem + } + +"(${it.username})" + } + } } } } |