diff --git a/js-src/components/overlay-controls.tsx b/js-src/components/overlay-controls.tsx
index 90da8ce..3887f36 100644
--- a/js-src/components/overlay-controls.tsx
+++ b/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}>
diff --git a/public/js/bundle.js b/public/js/bundle.js
index 303a324..8719816 100644
--- a/public/js/bundle.js
+++ b/public/js/bundle.js
@@ -126,7 +126,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \************************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ OverlayControls)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../constants */ \"./js-src/constants.ts\");\n/* harmony import */ var _packet__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../packet */ \"./js-src/packet.ts\");\n\n\n\n;\n;\nfunction OverlayControls({ firstMenuElement, setHiddenMenu, webSocket }) {\n    function showOverlayMenu() {\n        setHiddenMenu(false);\n        setTimeout(() => {\n            if (firstMenuElement.current == null) {\n                return;\n            }\n            firstMenuElement.current.focus();\n        }, 100);\n    }\n    const [onGoingTouches, setOnGoingTouches] = react__WEBPACK_IMPORTED_MODULE_0__.useState({});\n    function mouseDown(e, key) {\n        e.preventDefault();\n        if (webSocket == null) {\n            console.log('There is not websocket');\n            return;\n        }\n        (0,_packet__WEBPACK_IMPORTED_MODULE_2__.sendKeyDown)(webSocket, true, key);\n    }\n    function mouseUp(e, key) {\n        e.preventDefault();\n        if (webSocket == null) {\n            console.log('There is not websocket');\n            return;\n        }\n        (0,_packet__WEBPACK_IMPORTED_MODULE_2__.sendKeyDown)(webSocket, false, key);\n    }\n    const controls = {};\n    controls.a = {\n        ref: react__WEBPACK_IMPORTED_MODULE_0__.useRef(null),\n        key: 0,\n        sym: 'A',\n        classes: 'control-a control-button-a-b control control-button',\n    };\n    controls.b = {\n        ref: react__WEBPACK_IMPORTED_MODULE_0__.useRef(null),\n        key: 1,\n        sym: 'B',\n        transformX: 50,\n        classes: 'control-b control-button-a-b control control-button',\n    };\n    controls.l = {\n        key: 2,\n        sym: 'L',\n        classes: 'control-l control-button-l-r control',\n        ref: react__WEBPACK_IMPORTED_MODULE_0__.useRef(null),\n    };\n    controls.r = {\n        key: 3,\n        sym: 'R',\n        classes: 'control-r control-button-l-r control',\n        ref: react__WEBPACK_IMPORTED_MODULE_0__.useRef(null),\n    };\n    controls.start = {\n        ref: react__WEBPACK_IMPORTED_MODULE_0__.useRef(null),\n        key: 4,\n        sym: 'START',\n        classes: 'control-start control-button-start-select control',\n        transformX: 25,\n    };\n    controls.select = {\n        ref: react__WEBPACK_IMPORTED_MODULE_0__.useRef(null),\n        key: 5,\n        sym: 'SEL',\n        classes: 'control-select control-button-start-select control',\n        transformX: -25,\n    };\n    controls.up = {\n        ref: react__WEBPACK_IMPORTED_MODULE_0__.useRef(null),\n        key: 6,\n        sym: '^',\n        transformX: 100,\n        classes: 'control-up control control-pad-button',\n    };\n    controls.down = {\n        ref: react__WEBPACK_IMPORTED_MODULE_0__.useRef(null),\n        key: 7,\n        sym: 'v',\n        transformX: 100,\n        classes: 'control-down control control-pad-button',\n    };\n    controls.left = {\n        ref: react__WEBPACK_IMPORTED_MODULE_0__.useRef(null),\n        key: 8,\n        sym: '<',\n        classes: 'control-left control control-pad-button',\n    };\n    controls.right = {\n        ref: react__WEBPACK_IMPORTED_MODULE_0__.useRef(null),\n        key: 9,\n        sym: '>',\n        transformX: 200,\n        classes: 'control-right control control-pad-button',\n    };\n    function determineKey(e, touch) {\n        const x = touch.pageX;\n        const y = touch.pageY;\n        for (const control of Object.keys(controls)) {\n            const ref = controls[control].ref.current;\n            if (ref == null) {\n                console.log('No ref found');\n                continue;\n            }\n            let top = ref.getBoundingClientRect().top + document.documentElement.scrollTop;\n            const currentControl = controls[control];\n            const transformX = currentControl.transformX;\n            const transformY = currentControl.transformY;\n            let offsetLeft = ref.offsetLeft;\n            const offsetWidth = ref.offsetWidth;\n            let offsetTop = top;\n            const offsetHeight = ref.offsetHeight;\n            if (transformX != null) {\n                offsetLeft += offsetWidth * (transformX / 100);\n            }\n            if (transformY != null) {\n                offsetTop += offsetHeight * (transformY / 100);\n            }\n            console.log(x, y, offsetLeft, offsetTop, offsetWidth, offsetHeight);\n            if (x >= offsetLeft && x <= offsetLeft + offsetWidth && y >= offsetTop && y <= offsetTop + offsetHeight) {\n                return controls[control].key;\n            }\n        }\n        return null;\n    }\n    function touchStartControls(e) {\n        e.preventDefault();\n        if (webSocket == null) {\n            console.log('There is not websocket');\n            return;\n        }\n        for (let i = 0; i < e.changedTouches.length; i++) {\n            const touch = e.changedTouches[i];\n            let key = determineKey(e, touch);\n            if (key == null) {\n                continue;\n            }\n            const idx = touch.identifier;\n            onGoingTouches[idx] = key;\n            (0,_packet__WEBPACK_IMPORTED_MODULE_2__.sendKeyDown)(webSocket, true, key);\n        }\n        return false;\n    }\n    function touchMoveControls(e) {\n        e.preventDefault();\n        if (webSocket == null) {\n            console.log('There is not websocket');\n            return;\n        }\n        for (let i = 0; i < e.changedTouches.length; i++) {\n            const touch = e.changedTouches[i];\n            let key = determineKey(e, touch);\n            const idx = touch.identifier;\n            if (key == null) {\n                continue;\n            }\n            if (onGoingTouches[idx] != null) {\n                (0,_packet__WEBPACK_IMPORTED_MODULE_2__.sendKeyDown)(webSocket, false, onGoingTouches[idx]);\n                delete onGoingTouches[idx];\n            }\n            onGoingTouches[idx] = key;\n            (0,_packet__WEBPACK_IMPORTED_MODULE_2__.sendKeyDown)(webSocket, true, key);\n        }\n        return false;\n    }\n    function touchEndControls(e) {\n        e.preventDefault();\n        if (webSocket == null) {\n            console.log('There is not websocket');\n            return;\n        }\n        for (let i = 0; i < e.changedTouches.length; i++) {\n            const touch = e.changedTouches[i];\n            const idx = touch.identifier;\n            if (onGoingTouches[idx] == null) {\n                return;\n            }\n            (0,_packet__WEBPACK_IMPORTED_MODULE_2__.sendKeyDown)(webSocket, false, onGoingTouches[idx]);\n            delete onGoingTouches[idx];\n        }\n        return false;\n    }\n    document.onselectstart = () => false;\n    return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"overlay\" },\n        react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"vertical-padding\" }),\n        react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"controls\", onTouchStart: touchStartControls, onTouchMove: touchMoveControls, onTouchEnd: touchEndControls },\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { tabIndex: -1, className: \"gear control\", onClick: showOverlayMenu, onTouchStart: showOverlayMenu },\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"img\", { src: _constants__WEBPACK_IMPORTED_MODULE_1__.HOME_BUTTON_IMAGE, alt: \"Go to menu. (House icon)\" })),\n            Object.keys(controls).map((key) => react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { tabIndex: -1, className: controls[key].classes, ref: controls[key].ref, key: key, onMouseDown: (e) => mouseDown(e, controls[key].key), onMouseUp: (e) => mouseUp(e, controls[key].key) }, controls[key].sym)))));\n}\n\n\n//# sourceURL=webpack://MSGBA-Web/./js-src/components/overlay-controls.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ OverlayControls)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../constants */ \"./js-src/constants.ts\");\n/* harmony import */ var _packet__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../packet */ \"./js-src/packet.ts\");\n\n\n\n;\n;\nfunction OverlayControls({ firstMenuElement, setHiddenMenu, webSocket }) {\n    function showOverlayMenu() {\n        setHiddenMenu(false);\n        setTimeout(() => {\n            if (firstMenuElement.current == null) {\n                return;\n            }\n            firstMenuElement.current.focus();\n        }, 100);\n    }\n    const [onGoingTouches, setOnGoingTouches] = react__WEBPACK_IMPORTED_MODULE_0__.useState({});\n    function mouseDown(e, key) {\n        e.preventDefault();\n        if (webSocket == null) {\n            console.log('There is not websocket');\n            return;\n        }\n        (0,_packet__WEBPACK_IMPORTED_MODULE_2__.sendKeyDown)(webSocket, true, key);\n    }\n    function mouseUp(e, key) {\n        e.preventDefault();\n        if (webSocket == null) {\n            console.log('There is not websocket');\n            return;\n        }\n        (0,_packet__WEBPACK_IMPORTED_MODULE_2__.sendKeyDown)(webSocket, false, key);\n    }\n    const controls = {};\n    controls.a = {\n        ref: react__WEBPACK_IMPORTED_MODULE_0__.useRef(null),\n        key: 0,\n        sym: 'A',\n        classes: 'control-a control-button-a-b control control-button',\n    };\n    controls.b = {\n        ref: react__WEBPACK_IMPORTED_MODULE_0__.useRef(null),\n        key: 1,\n        sym: 'B',\n        transformX: 50,\n        classes: 'control-b control-button-a-b control control-button',\n    };\n    controls.l = {\n        key: 2,\n        sym: 'L',\n        classes: 'control-l control-button-l-r control',\n        ref: react__WEBPACK_IMPORTED_MODULE_0__.useRef(null),\n    };\n    controls.r = {\n        key: 3,\n        sym: 'R',\n        classes: 'control-r control-button-l-r control',\n        ref: react__WEBPACK_IMPORTED_MODULE_0__.useRef(null),\n    };\n    controls.start = {\n        ref: react__WEBPACK_IMPORTED_MODULE_0__.useRef(null),\n        key: 4,\n        sym: 'START',\n        classes: 'control-start control-button-start-select control',\n        transformX: 25,\n    };\n    controls.select = {\n        ref: react__WEBPACK_IMPORTED_MODULE_0__.useRef(null),\n        key: 5,\n        sym: 'SEL',\n        classes: 'control-select control-button-start-select control',\n        transformX: -25,\n    };\n    controls.up = {\n        ref: react__WEBPACK_IMPORTED_MODULE_0__.useRef(null),\n        key: 6,\n        sym: '^',\n        transformX: 100,\n        classes: 'control-up control control-pad-button',\n    };\n    controls.down = {\n        ref: react__WEBPACK_IMPORTED_MODULE_0__.useRef(null),\n        key: 7,\n        sym: 'v',\n        transformX: 100,\n        classes: 'control-down control control-pad-button',\n    };\n    controls.left = {\n        ref: react__WEBPACK_IMPORTED_MODULE_0__.useRef(null),\n        key: 8,\n        sym: '<',\n        classes: 'control-left control control-pad-button',\n    };\n    controls.right = {\n        ref: react__WEBPACK_IMPORTED_MODULE_0__.useRef(null),\n        key: 9,\n        sym: '>',\n        transformX: 200,\n        classes: 'control-right control control-pad-button',\n    };\n    function determineKey(e, touch) {\n        const x = touch.pageX;\n        const y = touch.pageY;\n        for (const control of Object.keys(controls)) {\n            const ref = controls[control].ref.current;\n            if (ref == null) {\n                console.log('No ref found');\n                continue;\n            }\n            let top = ref.getBoundingClientRect().top + document.documentElement.scrollTop;\n            const currentControl = controls[control];\n            const transformX = currentControl.transformX;\n            const transformY = currentControl.transformY;\n            let offsetLeft = ref.offsetLeft;\n            const offsetWidth = ref.offsetWidth;\n            let offsetTop = top;\n            const offsetHeight = ref.offsetHeight;\n            if (transformX != null) {\n                offsetLeft += offsetWidth * (transformX / 100);\n            }\n            if (transformY != null) {\n                offsetTop += offsetHeight * (transformY / 100);\n            }\n            console.log(x, y, offsetLeft, offsetTop, offsetWidth, offsetHeight);\n            if (x >= offsetLeft && x <= offsetLeft + offsetWidth && y >= offsetTop && y <= offsetTop + offsetHeight) {\n                return controls[control].key;\n            }\n        }\n        return null;\n    }\n    function touchStartControls(e) {\n        e.preventDefault();\n        if (webSocket == null) {\n            console.log('There is not websocket');\n            return;\n        }\n        for (let i = 0; i < e.changedTouches.length; i++) {\n            const touch = e.changedTouches[i];\n            let key = determineKey(e, touch);\n            if (key == null) {\n                continue;\n            }\n            const idx = touch.identifier;\n            onGoingTouches[idx] = key;\n            (0,_packet__WEBPACK_IMPORTED_MODULE_2__.sendKeyDown)(webSocket, true, key);\n        }\n        return false;\n    }\n    function touchMoveControls(e) {\n        e.preventDefault();\n        if (webSocket == null) {\n            console.log('There is not websocket');\n            return;\n        }\n        for (let i = 0; i < e.changedTouches.length; i++) {\n            const touch = e.changedTouches[i];\n            let key = determineKey(e, touch);\n            const idx = touch.identifier;\n            if (key == null) {\n                continue;\n            }\n            if (onGoingTouches[idx] != null) {\n                (0,_packet__WEBPACK_IMPORTED_MODULE_2__.sendKeyDown)(webSocket, false, onGoingTouches[idx]);\n                delete onGoingTouches[idx];\n            }\n            onGoingTouches[idx] = key;\n            (0,_packet__WEBPACK_IMPORTED_MODULE_2__.sendKeyDown)(webSocket, true, key);\n        }\n        return false;\n    }\n    function touchEndControls(e) {\n        e.preventDefault();\n        if (webSocket == null) {\n            console.log('There is not websocket');\n            return;\n        }\n        for (let i = 0; i < e.changedTouches.length; i++) {\n            const touch = e.changedTouches[i];\n            const idx = touch.identifier;\n            if (onGoingTouches[idx] == null) {\n                return;\n            }\n            (0,_packet__WEBPACK_IMPORTED_MODULE_2__.sendKeyDown)(webSocket, false, onGoingTouches[idx]);\n            delete onGoingTouches[idx];\n        }\n        return false;\n    }\n    const keyMap = [\"KeyZ\", \"KeyX\", \"KeyA\", \"KeyS\",\n        \"Enter\", \" \", \"ArrowUp\", \"ArrowDown\",\n        \"ArrowLeft\", \"ArrowRight\"];\n    function onPressControl(e) {\n        if (webSocket == null) {\n            console.log('There is not websocket');\n            return;\n        }\n        let key = keyMap.findIndex((c) => c == e.code);\n        if (key != -1) {\n            e.preventDefault();\n            console.log(e.code);\n            console.log(key);\n            (0,_packet__WEBPACK_IMPORTED_MODULE_2__.sendKeyDown)(webSocket, true, key);\n        }\n    }\n    function onUnpressControl(e) {\n        if (webSocket == null) {\n            console.log('There is not websocket');\n            return;\n        }\n        let key = keyMap.findIndex((c) => c == e.code);\n        console.log(keyMap);\n        console.log(e.code);\n        console.log(key);\n        if (key != -1) {\n            e.preventDefault();\n            console.log(e.code);\n            console.log(key);\n            (0,_packet__WEBPACK_IMPORTED_MODULE_2__.sendKeyDown)(webSocket, false, key);\n        }\n    }\n    document.onselectstart = () => false;\n    return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { tabIndex: -1, className: \"overlay\", onKeyDown: onPressControl, onKeyUp: onUnpressControl },\n        react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"vertical-padding\" }),\n        react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"controls\", onTouchStart: touchStartControls, onTouchMove: touchMoveControls, onTouchEnd: touchEndControls },\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { tabIndex: -1, className: \"gear control\", onClick: showOverlayMenu, onTouchStart: showOverlayMenu },\n                react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"img\", { src: _constants__WEBPACK_IMPORTED_MODULE_1__.HOME_BUTTON_IMAGE, alt: \"Go to menu. (House icon)\" })),\n            Object.keys(controls).map((key) => react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { tabIndex: -1, className: controls[key].classes, ref: controls[key].ref, key: key, onMouseDown: (e) => mouseDown(e, controls[key].key), onMouseUp: (e) => mouseUp(e, controls[key].key) }, controls[key].sym)))));\n}\n\n\n//# sourceURL=webpack://MSGBA-Web/./js-src/components/overlay-controls.tsx?");
 
 /***/ }),