diff options
| -rw-r--r-- | sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/PlayerInfo.kt | 48 |
1 files changed, 35 insertions, 13 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 b05b903c..214663dc 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 @@ -2,6 +2,7 @@ package org.luxons.sevenwonders.ui.components.gameBrowser import com.palantir.blueprintjs.bpIcon import kotlinx.css.* +import kotlinx.html.title import org.luxons.sevenwonders.model.api.BasicPlayerInfo import org.luxons.sevenwonders.model.api.PlayerDTO import org.luxons.sevenwonders.ui.redux.connectState @@ -18,6 +19,7 @@ interface PlayerInfoProps : RProps { var showUsername: Boolean var iconSize: Int var orientation: FlexDirection + var ellipsize: Boolean } class PlayerInfoPresenter(props: PlayerInfoProps) : RComponent<PlayerInfoProps, RState>(props) { @@ -32,24 +34,42 @@ class PlayerInfoPresenter(props: PlayerInfoProps) : RComponent<PlayerInfoProps, props.player?.let { bpIcon(name = it.icon?.name ?: "user", size = props.iconSize) if (props.showUsername) { - playerNameWithUsername(it.displayName, it.username) + playerNameWithUsername(it.displayName, it.username) { + iconSeparationMargin() + } } else { - playerName(it.displayName) + playerName(it.displayName) { + iconSeparationMargin() + } } } } } - private fun RBuilder.playerName(displayName: String) { + private fun RBuilder.playerName(displayName: String, style: CSSBuilder.() -> Unit = {}) { styledSpan { css { fontSize = 1.rem - iconSeparationMargin() + if (props.orientation == FlexDirection.column) { + textAlign = TextAlign.center + } + style() + } + // TODO replace by BlueprintJS's Text elements (built-in ellipsize based on width) + val maxDisplayNameLength = 15 + if (props.ellipsize && displayName.length > maxDisplayNameLength) { + attrs { + title = displayName + } + +displayName.ellipsize(maxDisplayNameLength) + } else { + +displayName } - +displayName } } + private fun String.ellipsize(maxLength: Int) = take(maxLength - 1) + "…" + private fun CSSBuilder.iconSeparationMargin() { val margin = 0.4.rem when (props.orientation) { @@ -61,19 +81,18 @@ class PlayerInfoPresenter(props: PlayerInfoProps) : RComponent<PlayerInfoProps, } } - private fun RBuilder.playerNameWithUsername(displayName: String, username: String) { + private fun RBuilder.playerNameWithUsername( + displayName: String, + username: String, + style: CSSBuilder.() -> Unit = {} + ) { styledDiv { css { display = Display.flex flexDirection = FlexDirection.column - iconSeparationMargin() - } - styledSpan { - css { - fontSize = 1.rem - } - +displayName + style() } + playerName(displayName) styledSpan { css { marginTop = 0.1.rem @@ -91,12 +110,14 @@ fun RBuilder.playerInfo( showUsername: Boolean = false, iconSize: Int = 30, orientation: FlexDirection = FlexDirection.row, + ellipsize: Boolean = true, ) = child(PlayerInfoPresenter::class) { attrs { this.player = player this.showUsername = showUsername this.iconSize = iconSize this.orientation = orientation + this.ellipsize = ellipsize } } @@ -108,5 +129,6 @@ private val playerInfo = connectState( player = state.connectedPlayer showUsername = true orientation = FlexDirection.row + ellipsize = false }, ) |