Add InputBox component

src/components/player/InputBox.js

@@ -1,8 +1,63 @@
 import { h } from 'preact'
 // import { useState, useEffect } from 'preact/hooks'
 
+/* eslint-disable */
+const keyCodes = {
+  KEY_BACKSPACE: 8,
+  KEY_TAB:       9,
+  KEY_RETURN:   13,
+  KEY_ESC:      27,
+  KEY_PAGEUP:   33,
+  KEY_PAGEDOWN: 34,
+  KEY_END:      35,
+  KEY_HOME:     36,
+  KEY_LEFT:     37,
+  KEY_UP:       38,
+  KEY_RIGHT:    39,
+  KEY_DOWN:     40}
+
+const keyNames = {
+  [keyCodes.KEY_BACKSPACE]: 'delete',
+  [keyCodes.KEY_TAB]: 'tab',
+  [keyCodes.KEY_RETURN]: 'return',
+  [keyCodes.KEY_ESC]: 'escape',
+  [keyCodes.KEY_PAGEUP]: 'pageup',
+  [keyCodes.KEY_PAGEDOWN]: 'pagedown',
+  [keyCodes.KEY_END]: 'end',
+  [keyCodes.KEY_HOME]: 'home',
+  [keyCodes.KEY_LEFT]: 'left',
+  [keyCodes.KEY_UP]: 'up',
+  [keyCodes.KEY_RIGHT]: 'right',
+  [keyCodes.KEY_DOWN]: 'down'}
+/* eslint-enable */
+
 export default function ({ currentWindow, inputType, sendMessage }) {
+  const charHandler = event => {
+    event.preventDefault()
+
+    const key =
+      keyNames[event.keyCode] ||
+      event.key
+
+    sendMessage(key, currentWindow)
+  }
+
+  const lineHandler = ({ keyCode, target: { value } }) => {
+    if (keyCode === keyCodes.KEY_RETURN) {
+      sendMessage(value, currentWindow)
+    }
+  }
+
+  const inputHandlers = {
+    'char': {
+      onKeyDown: charHandler
+    },
+    'line': {
+      onKeyPress: lineHandler
+    }
+  }
   return (
-    <div>InputBox</div>
+    <input {...inputHandlers[inputType]}
+      type="text"/>
   )
 }

src/components/player/Player.js

@@ -58,8 +58,6 @@ export default function ({ vmParts: { file, engine } }) {
   const [inputType, setInputType] = useState(null)
   const [inbox, setInbox] = useState([])
 
-  const [messages, setMessages] = useState([])
-
   const [vm, setVm] = useState(null)
   const [sendMessage, setSendMessage] = useState(null)
 
@@ -86,10 +84,6 @@ export default function ({ vmParts: { file, engine } }) {
       : null)
   }, [vm])
 
-  useEffect(() => {
-    window.send = x => sendMessage(x, currentWindow)
-  }, [sendMessage, currentWindow])
-
   return status.stage !== 'ready'
     ? (<div>{status.details}</div>)
     : (<section>
@@ -97,6 +91,10 @@ export default function ({ vmParts: { file, engine } }) {
           inbox,
           currentWindow
         }}/>
-        <InputBox/>
+        <InputBox {...{
+          currentWindow,
+          inputType,
+          sendMessage
+        }}/>
       </section>)
 }