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