Add blueprint externals and migrate

4 files changed, 50 insertions, 45 deletions

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 778ef684..94058131 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
@@ -1,7 +1,9 @@
 package org.luxons.sevenwonders.ui.components.home
 
-import kotlinx.html.InputType
-import kotlinx.html.js.onChangeFunction
+import com.palantir.blueprintjs.Intent
+import com.palantir.blueprintjs.bpButton
+import com.palantir.blueprintjs.inputGroup
+import com.palantir.blueprintjs.org.luxons.sevenwonders.ui.utils.createElement
 import kotlinx.html.js.onSubmitFunction
 import org.luxons.sevenwonders.ui.redux.RequestChooseName
 import org.luxons.sevenwonders.ui.redux.connectDispatch
@@ -11,6 +13,7 @@ import react.RClass
 import react.RComponent
 import react.RProps
 import react.RState
+import react.ReactElement
 import react.dom.*
 
 private interface ChooseNameFormProps: RProps {
@@ -28,28 +31,26 @@ private class ChooseNameForm(props: ChooseNameFormProps): RComponent<ChooseNameF
     override fun RBuilder.render() {
         form {
             attrs.onSubmitFunction = { props.chooseUsername(state.username) }
-
-            // TODO <InputGroup
-            //    className={Classes.LARGE}
-            //    placeholder="Username"
-            //    onChange={(e: ChangeEvent<HTMLInputElement>) => (this._username = e.target.value)}
-            //    rightElement={this.renderSubmit()}
-            //  />
-            //  Where:
-            //  renderSubmit = () => (
-            //    <Button className={Classes.MINIMAL} onClick={this.play} intent={Intent.PRIMARY} icon="arrow-right" />
-            //  );
-            input(type = InputType.text) {
-                attrs {
-                    value = state.username
-                    onChangeFunction = { e ->
-                        val input = e.currentTarget as HTMLInputElement
-                        setState(transformState = { ChooseNameFormState(input.value) })
-                    }
+            inputGroup(
+                large = true,
+                placeholder = "Username",
+                rightElement = submitButton(),
+                onChange = { e ->
+                    val input = e.currentTarget as HTMLInputElement
+                    setState(transformState = { ChooseNameFormState(input.value) })
                 }
-            }
+            )
         }
     }
+
+    private fun submitButton(): ReactElement = createElement {
+        bpButton(
+            minimal = true,
+            icon = "arrow-right",
+            intent = Intent.PRIMARY,
+            onClick = { props.chooseUsername(state.username) }
+        )
+    }
 }
 
 val chooseNameForm: RClass<RProps> = connectDispatch(ChooseNameForm::class) { dispatch, _ ->
diff --git a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/Lobby.kt b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/Lobby.kt
index 0858eff7..8773277f 100644
--- a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/Lobby.kt
+++ b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/Lobby.kt
@@ -1,6 +1,7 @@
 package org.luxons.sevenwonders.ui.components.lobby
 
-import kotlinx.html.js.onClickFunction
+import com.palantir.blueprintjs.Intent
+import com.palantir.blueprintjs.bpButton
 import org.luxons.sevenwonders.model.api.LobbyDTO
 import org.luxons.sevenwonders.model.api.PlayerDTO
 import org.luxons.sevenwonders.ui.redux.RequestStartGameAction
@@ -36,19 +37,13 @@ class LobbyPresenter(props: LobbyProps) : RComponent<LobbyProps, RState>(props)
             h2 { +"${currentGame.name} — Lobby" }
             radialPlayerList(props.players)
             if (currentPlayer.isGameOwner) {
-                // TODO <Button text="START"
-                //         className={Classes.LARGE}
-                //         intent={Intent.PRIMARY}
-                //         icon='play'
-                //         onClick={startGame}
-                //         disabled={players.size < 3}/>
-                button {
-                    attrs {
-                        onClickFunction = { props.startGame() }
-                        disabled = props.players.size < 3
-                    }
-                    +"START"
-                }
+                bpButton(
+                    large = true,
+                    intent = Intent.PRIMARY,
+                    icon = "play",
+                    disabled = props.players.size < 3,
+                    onClick = { props.startGame() }
+                )
             }
         }
     }
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 3c98c3ce..78f7fbed 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
@@ -1,5 +1,8 @@
 package org.luxons.sevenwonders.ui.components.lobby
 
+import com.palantir.blueprintjs.IconName
+import com.palantir.blueprintjs.Intent
+import com.palantir.blueprintjs.icon
 import kotlinx.css.Align
 import kotlinx.css.FlexDirection
 import kotlinx.css.alignContent
@@ -93,14 +96,7 @@ private fun RBuilder.playerPlaceholder(): ReactElement = styledDiv {
 }
 
 private fun RBuilder.userIcon(isUser: Boolean, isOwner: Boolean, title: String?): ReactElement {
-    // TODO
-    //  const icon: IconName = isOwner ? 'badge' : 'user';
-    //  const intent: Intent = isUser ? Intent.WARNING : Intent.NONE;
-    //  return <Icon icon={icon} iconSize={50} intent={intent} title={title}/>;
-    val owner = if (isOwner) "(owner)" else ""
-    val user = if (isUser) "(me)" else ""
-    val hint = listOf(owner, user).joinToString(" ")
-    return span {
-        +hint
-    }
+    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)
 }
diff --git a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/utils/Utils.kt b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/utils/Utils.kt
new file mode 100644
index 00000000..ba0fbddf
--- /dev/null
+++ b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/utils/Utils.kt
@@ -0,0 +1,13 @@
+package com.palantir.blueprintjs.org.luxons.sevenwonders.ui.utils
+
+import kotlinx.html.SPAN
+import kotlinx.html.attributesMapOf
+import react.RBuilder
+import react.ReactElement
+import react.dom.*
+
+fun createElement(block: RBuilder.() -> ReactElement): ReactElement {
+    return RDOMBuilder { SPAN(attributesMapOf("class", null), it) }
+        .apply { block() }
+        .create()
+}