Add player icon in player info

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})"
+                    }
+                }
             }
         }
     }