Preliminar keyboard support.

js-src/components/overlay-controls.tsx

@@ -200,9 +200,41 @@ export default function OverlayControls({firstMenuElement, setHiddenMenu, webSoc
         return false;
     }
 
+    const keyMap: string[] = ["KeyZ", "KeyX", "KeyA", "KeyS",
+            "Enter", " ", "ArrowUp", "ArrowDown",
+            "ArrowLeft", "ArrowRight"];
+    function onPressControl(e: React.KeyboardEvent<HTMLDivElement>) {
+        if (webSocket == null) {
+            console.log('There is not websocket');
+            return;
+        }
+        let key = keyMap.findIndex((c: string) => c == e.code);
+        if (key != -1) {
+            e.preventDefault();
+            console.log(e.code);
+            console.log(key);
+            sendKeyDown(webSocket, true, key);
+        }
+    }
+    function onUnpressControl(e: React.KeyboardEvent<HTMLDivElement>) {
+        if (webSocket == null) {
+            console.log('There is not websocket');
+            return;
+        }
+        let key = keyMap.findIndex((c: string) => c == e.code);
+        console.log(keyMap);
+        console.log(e.code);
+        console.log(key);
+        if (key != -1) {
+            e.preventDefault();
+            console.log(e.code);
+            console.log(key);
+            sendKeyDown(webSocket, false, key);
+        }
+    }
     document.onselectstart = () => false;
     return (
-        <div className="overlay"> 
+        <div tabIndex={-1} className="overlay" onKeyDown={onPressControl} onKeyUp={onUnpressControl}> 
             <div className="vertical-padding">
             </div>
             <div className="controls" onTouchStart={touchStartControls} onTouchMove={touchMoveControls} onTouchEnd={touchEndControls}>