diff --git a/src/components/player/InputBox.js b/src/components/player/InputBox.js index f76cdf7..16924e7 100644 --- a/src/components/player/InputBox.js +++ b/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 ( -
InputBox
+ ) } diff --git a/src/components/player/Player.js b/src/components/player/Player.js index c5cc299..bb312cd 100644 --- a/src/components/player/Player.js +++ b/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' ? (
{status.details}
) : (
@@ -97,6 +91,10 @@ export default function ({ vmParts: { file, engine } }) { inbox, currentWindow }}/> - +
) }