Migrate game browser to blueprint components

4 files changed, 89 insertions, 48 deletions

diff --git a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/CreateGameForm.kt b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/CreateGameForm.kt
index 318f49f4..c1bbf460 100644
--- a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/CreateGameForm.kt
+++ b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/CreateGameForm.kt
@@ -1,17 +1,28 @@
 package org.luxons.sevenwonders.ui.components.gameBrowser
 
-import kotlinx.html.InputType
-import kotlinx.html.js.onChangeFunction
+import com.palantir.blueprintjs.Intent
+import com.palantir.blueprintjs.bpButton
+import com.palantir.blueprintjs.bpInputGroup
+import com.palantir.blueprintjs.org.luxons.sevenwonders.ui.utils.createElement
+import kotlinx.css.Display
+import kotlinx.css.FlexDirection
+import kotlinx.css.JustifyContent
+import kotlinx.css.display
+import kotlinx.css.flexDirection
+import kotlinx.css.justifyContent
 import kotlinx.html.js.onSubmitFunction
 import org.luxons.sevenwonders.ui.redux.RequestCreateGameAction
 import org.luxons.sevenwonders.ui.redux.connectDispatch
 import org.w3c.dom.HTMLInputElement
+import org.w3c.dom.events.Event
 import react.RBuilder
 import react.RClass
 import react.RComponent
 import react.RProps
 import react.RState
 import react.dom.*
+import styled.css
+import styled.styledDiv
 
 private interface CreateGameFormProps: RProps {
     var createGame: (String) -> Unit
@@ -26,22 +37,40 @@ private class CreateGameForm(props: CreateGameFormProps): RComponent<CreateGameF
     }
 
     override fun RBuilder.render() {
-        form {
-            attrs.onSubmitFunction = { props.createGame(state.gameName) }
-
-            input(type = InputType.text) {
+        styledDiv {
+            css {
+                display = Display.flex
+                flexDirection = FlexDirection.row
+                justifyContent = JustifyContent.spaceBetween
+            }
+            form {
                 attrs {
-                    value = state.gameName
-                    onChangeFunction = { e ->
+                    onSubmitFunction = { e -> createGame(e) }
+                }
+
+                bpInputGroup(
+                    placeholder = "Game name",
+                    onChange = { e ->
                         val input = e.currentTarget as HTMLInputElement
                         setState(transformState = { CreateGameFormState(input.value) })
-                    }
-                }
+                    },
+                    rightElement = createGameButton()
+                )
             }
-
-            input(type = InputType.submit) {}
+            // TODO
+            div { +"PLAYER INFO HERE" }
+            //playerInfo()
         }
     }
+
+    private fun createGameButton() = createElement {
+        bpButton(minimal = true, intent = Intent.PRIMARY, icon = "add", onClick = { e -> createGame(e) })
+    }
+
+    private fun createGame(e: Event) {
+        e.preventDefault() // prevents refreshing the page when pressing Enter
+        props.createGame(state.gameName)
+    }
 }
 
 val createGameForm: RClass<RProps> = connectDispatch(CreateGameForm::class) { dispatch, _ ->
diff --git a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameList.kt b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameList.kt
index 206ef749..e32409e4 100644
--- a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameList.kt
+++ b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameList.kt
@@ -1,8 +1,19 @@
 package org.luxons.sevenwonders.ui.components.gameBrowser
 
+import com.palantir.blueprintjs.Classes
+import com.palantir.blueprintjs.Intent
+import com.palantir.blueprintjs.bpButton
+import com.palantir.blueprintjs.bpIcon
+import com.palantir.blueprintjs.bpTag
+import kotlinx.css.Align
+import kotlinx.css.Display
+import kotlinx.css.FlexDirection
 import kotlinx.css.VerticalAlign
+import kotlinx.css.alignItems
+import kotlinx.css.display
+import kotlinx.css.flexDirection
 import kotlinx.css.verticalAlign
-import kotlinx.html.js.onClickFunction
+import kotlinx.html.classes
 import kotlinx.html.title
 import org.luxons.sevenwonders.model.api.LobbyDTO
 import org.luxons.sevenwonders.model.api.State
@@ -14,7 +25,9 @@ import react.RProps
 import react.RState
 import react.dom.*
 import styled.css
+import styled.styledDiv
 import styled.styledSpan
+import styled.styledTr
 
 interface GameListStateProps : RProps {
     var games: List<LobbyDTO>
@@ -30,6 +43,9 @@ class GameListPresenter(props: GameListProps) : RComponent<GameListProps, RState
 
     override fun RBuilder.render() {
         table {
+            attrs {
+                classes = setOf(Classes.HTML_TABLE)
+            }
             thead {
                 gameListHeaderRow()
             }
@@ -49,58 +65,54 @@ private fun RBuilder.gameListHeaderRow() = tr {
     th { +"Join" }
 }
 
-private fun RBuilder.gameListItemRow(lobby: LobbyDTO, joinGame: (Long) -> Unit) = tr {
+private fun RBuilder.gameListItemRow(lobby: LobbyDTO, joinGame: (Long) -> Unit) = styledTr {
+    css {
+        verticalAlign = VerticalAlign.middle
+    }
     attrs {
         key = lobby.id.toString()
     }
-    th { +lobby.name }
-    th { gameStatus(lobby.state) }
-    th { playerCount(lobby.players.size) }
-    th { joinButton(lobby, joinGame) }
+    td { +lobby.name }
+    td { gameStatus(lobby.state) }
+    td { playerCount(lobby.players.size) }
+    td { joinButton(lobby, joinGame) }
 }
 
 private fun RBuilder.gameStatus(state: State) {
-    // TODO
-    // <Tag minimal intent={statusIntents[state]}>{state}</Tag>
-    // const statusIntents = {
-    //   'LOBBY': Intent.SUCCESS,
-    //   'PLAYING': Intent.WARNING,
-    // };
-    span {
+    val intent = when(state) {
+        State.LOBBY -> Intent.SUCCESS
+        State.PLAYING -> Intent.WARNING
+    }
+    bpTag(minimal = true, intent = intent) {
         +state.toString()
     }
 }
 
 private fun RBuilder.playerCount(nPlayers: Int) {
-    //<div title='Number of players'>
-    //  <Icon className="playerCountIcon" icon="people" title={false} />
-    //  <span className="playerCount"> {nbPlayers}</span>
-    //</div>;
-
-    // CSS:
-    // .playerCountIcon, .playerCount {
-    //    vertical-align: middle;
-    // }
-    div {
+    styledDiv {
+        css {
+            display = Display.flex
+            flexDirection = FlexDirection.row
+            alignItems = Align.center
+        }
         attrs {
             title = "Number of players"
         }
+        bpIcon(name = "people", title = null)
         styledSpan {
-            css {
-              verticalAlign = VerticalAlign.middle
-            }
             +nPlayers.toString()
         }
     }
 }
 
 private fun RBuilder.joinButton(lobby: LobbyDTO, joinGame: (Long) -> Unit) {
-    button {
-        attrs {
-            disabled = lobby.state != State.LOBBY
-            onClickFunction = { joinGame(lobby.id) }
-        }
-    }
+    bpButton(
+        minimal = true,
+        title = "Join Game",
+        icon = "arrow-right",
+        disabled = lobby.state != State.LOBBY,
+        onClick = { joinGame(lobby.id) }
+    )
 }
 
 val gameList = connect<GameListStateProps, GameListDispatchProps, GameListProps>(
diff --git a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/ChooseNameForm.kt b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/ChooseNameForm.kt
index 91f6e291..b0a7b5e2 100644
--- a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/ChooseNameForm.kt
+++ b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/ChooseNameForm.kt
@@ -2,7 +2,7 @@ package org.luxons.sevenwonders.ui.components.home
 
 import com.palantir.blueprintjs.Intent
 import com.palantir.blueprintjs.bpButton
-import com.palantir.blueprintjs.inputGroup
+import com.palantir.blueprintjs.bpInputGroup
 import com.palantir.blueprintjs.org.luxons.sevenwonders.ui.utils.createElement
 import kotlinx.html.js.onSubmitFunction
 import org.luxons.sevenwonders.ui.redux.RequestChooseName
@@ -32,7 +32,7 @@ private class ChooseNameForm(props: ChooseNameFormProps): RComponent<ChooseNameF
     override fun RBuilder.render() {
         form {
             attrs.onSubmitFunction = { e -> chooseUsername(e) }
-            inputGroup(
+            bpInputGroup(
                 large = true,
                 placeholder = "Username",
                 rightElement = submitButton(),
diff --git a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialPlayerList.kt b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialPlayerList.kt
index f096c5db..7c6d688f 100644
--- a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialPlayerList.kt
+++ b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialPlayerList.kt
@@ -2,7 +2,7 @@ package org.luxons.sevenwonders.ui.components.lobby
 
 import com.palantir.blueprintjs.IconName
 import com.palantir.blueprintjs.Intent
-import com.palantir.blueprintjs.icon
+import com.palantir.blueprintjs.bpIcon
 import kotlinx.css.Align
 import kotlinx.css.Display
 import kotlinx.css.FlexDirection
@@ -104,5 +104,5 @@ private fun RBuilder.playerPlaceholder(): ReactElement = styledDiv {
 private fun RBuilder.userIcon(isUser: Boolean, isOwner: Boolean, title: String?): ReactElement {
     val iconName: IconName = if (isOwner) "badge" else "user"
     val intent: Intent = if (isUser) Intent.WARNING else Intent.NONE
-    return icon(name = iconName, intent = intent, size = 50, title = title)
+    return bpIcon(name = iconName, intent = intent, size = 50, title = title)
 }