Add key binding for random name generation

1 files changed, 21 insertions, 1 deletions

diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/ChooseNameForm.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/ChooseNameForm.kt
index 2ebabcc9..4f79f19d 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/ChooseNameForm.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/ChooseNameForm.kt
@@ -3,12 +3,15 @@ package org.luxons.sevenwonders.ui.components.home
 import com.palantir.blueprintjs.Intent
 import com.palantir.blueprintjs.bpButton
 import com.palantir.blueprintjs.bpInputGroup
+import kotlinx.browser.document
 import kotlinx.css.*
 import kotlinx.html.js.onSubmitFunction
 import org.luxons.sevenwonders.ui.redux.RequestChooseName
 import org.luxons.sevenwonders.ui.redux.connectDispatch
 import org.w3c.dom.HTMLInputElement
 import org.w3c.dom.events.Event
+import org.w3c.dom.events.EventListener
+import org.w3c.dom.events.KeyboardEvent
 import react.*
 import styled.css
 import styled.styledDiv
@@ -20,12 +23,29 @@ private interface ChooseNameFormProps : RProps {
 
 private data class ChooseNameFormState(var username: String = "") : RState
 
+private const val KEY_RANDOM_NAME = "r"
+
 private class ChooseNameForm(props: ChooseNameFormProps) : RComponent<ChooseNameFormProps, ChooseNameFormState>(props) {
 
+    val rKeyListener = EventListener { event: Event ->
+        val e = event as? KeyboardEvent ?: return@EventListener
+        if (e.key == KEY_RANDOM_NAME) {
+            fillRandomUsername()
+        }
+    }
+
     override fun ChooseNameFormState.init(props: ChooseNameFormProps) {
         username = ""
     }
 
+    override fun componentWillMount() {
+        document.addEventListener(type = "keydown", callback = rKeyListener)
+    }
+
+    override fun componentWillUnmount() {
+        document.removeEventListener(type = "keydown", callback = rKeyListener)
+    }
+
     override fun RBuilder.render() {
         styledForm {
             css {
@@ -59,7 +79,7 @@ private class ChooseNameForm(props: ChooseNameFormProps) : RComponent<ChooseName
 
     private fun RBuilder.randomNameButton() {
         bpButton(
-            title = "Generate random name",
+            title = "Generate random name (${KEY_RANDOM_NAME.toUpperCase()})",
             large = true,
             icon = "random",
             intent = Intent.PRIMARY,