diff --git a/js-src/components/overlay-controls.tsx b/js-src/components/overlay-controls.tsx
index a5e2f6c..fc354d7 100644
--- a/js-src/components/overlay-controls.tsx
+++ b/js-src/components/overlay-controls.tsx
@@ -27,33 +27,6 @@ export default function OverlayControls({firstMenuElement, setHiddenMenu, webSoc
         }
         sendKeyDown(webSocket, true, key);
     }
-    function touchStart(e: React.TouchEvent<HTMLAnchorElement>, key: number) {
-        e.preventDefault();
-        if (webSocket == null) {
-            console.log('There is not websocket');
-            return;
-        }
-        for (let i = 0; i < e.changedTouches.length; i++) {
-            const touch = e.changedTouches[i];
-            const idx = touch.identifier;
-            onGoingTouches[idx] = key;
-            sendKeyDown(webSocket, true, key);
-        }
-    }
-    function touchEnd(e: React.TouchEvent<HTMLAnchorElement|HTMLDivElement>) {
-        e.preventDefault();
-        if (webSocket == null) {
-            console.log('There is not websocket');
-            return;
-        }
-        for (let i = 0; i < e.changedTouches.length; i++) {
-            const touch = e.changedTouches[i];
-            const idx = touch.identifier;
-            const key = onGoingTouches[idx];
-            delete onGoingTouches[idx];
-            sendKeyDown(webSocket, false, key);
-        }
-    }
 
     function mouseUp(e: React.MouseEvent<HTMLAnchorElement> | React.TouchEvent<HTMLAnchorElement>, key: number) {
         e.preventDefault();
@@ -64,57 +37,188 @@ export default function OverlayControls({firstMenuElement, setHiddenMenu, webSoc
         sendKeyDown(webSocket, false, key);
     }
 
+    const controls: {[id: string]: {key: number, ref: React.RefObject<HTMLAnchorElement>, sym: string, classes: string, transformX?: number, transformY?: number}} = {};
+    controls.a = {
+        ref: React.useRef<HTMLAnchorElement|null>(null),
+        key: 0,
+        sym: 'A',
+        classes: 'control-a control control-button',
+    }
+    controls.b = {
+        ref: React.useRef<HTMLAnchorElement|null>(null),
+        key: 1,
+        sym: 'B',
+        transformX: 50,
+        classes: 'control-b control control-button',
+    }
+    controls.up = {
+        ref: React.useRef<HTMLAnchorElement|null>(null),
+        key: 6,
+        sym: '^',
+        transformX: 100,
+        classes: 'control-up control control-pad-button',
+    }
+    controls.down = {
+        ref: React.useRef<HTMLAnchorElement|null>(null),
+        key: 7,
+        sym: 'v',
+        transformX: 100,
+        classes: 'control-down control control-pad-button',
+    }
+    controls.left = {
+        ref: React.useRef<HTMLAnchorElement|null>(null),
+        key: 8,
+        sym: '<',
+        classes: 'control-left control control-pad-button',
+    }
+    controls.right = {
+        ref: React.useRef<HTMLAnchorElement|null>(null),
+        key: 9,
+        sym: '>',
+        transformX: 200,
+        classes: 'control-right control control-pad-button',
+    }
+    function touchStartControls(e: React.TouchEvent<HTMLDivElement>) {
+        e.preventDefault();
+        if (webSocket == null) {
+            console.log('There is not websocket');
+            return;
+        }
+        for (let i = 0; i < e.changedTouches.length; i++) {
+            const touch = e.changedTouches[i];
+            const x = touch.pageX;
+            const y = touch.pageY;
+            let key: number|null = null;
+            for (const control of Object.keys(controls)) {
+                const ref = controls[control].ref.current;
+                if (ref == null) {
+                    console.log('No ref found');
+                    continue;
+                }
+                let top = ref.getBoundingClientRect().top + document.documentElement.scrollTop;
+                const currentControl = controls[control];
+                const transformX = currentControl.transformX; 
+                const transformY = currentControl.transformY; 
+                let offsetLeft = ref.offsetLeft;
+                const offsetWidth = ref.offsetWidth;
+                let offsetTop = top;
+                const offsetHeight = ref.offsetHeight;
+                if (transformX != null) {
+                    offsetLeft += offsetWidth * (transformX / 100);
+                }
+                if (transformY != null) {
+                    offsetTop += offsetHeight * (transformY / 100);
+                }
+                console.log(x, y, offsetLeft, offsetTop, offsetWidth, offsetHeight);
+                if (x >= offsetLeft && x <= offsetLeft + offsetWidth && y >= offsetTop && y <= offsetTop + offsetHeight) {
+                    key = controls[control].key;
+                    console.log(key);
+                    break;
+                }
+
+            }
+            console.log(key);
+            if (key == null) {
+                continue;
+            }
+            const idx = touch.identifier;
+            onGoingTouches[idx] = key;
+            sendKeyDown(webSocket, true, key);
+        }
+        return false;
+    }
+    function touchMoveControls(e: React.TouchEvent<HTMLDivElement>) {
+        e.preventDefault();
+        if (webSocket == null) {
+            console.log('There is not websocket');
+            return;
+        }
+        for (let i = 0; i < e.changedTouches.length; i++) {
+            const touch = e.changedTouches[i];
+            const x = touch.pageX;
+            const y = touch.pageY;
+            let key: number|null = null;
+            for (const control of Object.keys(controls)) {
+                const ref = controls[control].ref.current;
+                if (ref == null) {
+                    console.log('No ref found');
+                    continue;
+                }
+                let top = ref.getBoundingClientRect().top + document.documentElement.scrollTop;
+                const currentControl = controls[control];
+                const transformX = currentControl.transformX; 
+                const transformY = currentControl.transformY; 
+                let offsetLeft = ref.offsetLeft;
+                const offsetWidth = ref.offsetWidth;
+                let offsetTop = top;
+                const offsetHeight = ref.offsetHeight;
+                if (transformX != null) {
+                    offsetLeft += offsetWidth * (transformX / 100);
+                }
+                if (transformY != null) {
+                    offsetTop += offsetHeight * (transformY / 100);
+                }
+                if (x >= offsetLeft && x <= offsetLeft + offsetWidth && y >= offsetTop && y <= offsetTop + offsetHeight) {
+                    key = controls[control].key;
+                    console.log(key);
+                    break;
+                }
+
+            }
+            const idx = touch.identifier;
+            if (onGoingTouches[idx] != null) {
+                sendKeyDown(webSocket, false, onGoingTouches[idx]);
+                delete onGoingTouches[idx];
+            }
+            if (key == null) {
+                continue;
+            }
+            onGoingTouches[idx] = key;
+            sendKeyDown(webSocket, true, key);
+        }
+        return false;
+    }
+
+
+    function touchEndControls(e: React.TouchEvent<HTMLDivElement>) {
+        e.preventDefault();
+        if (webSocket == null) {
+            console.log('There is not websocket');
+            return;
+        }
+        for (let i = 0; i < e.changedTouches.length; i++) {
+            const touch = e.changedTouches[i];
+            const idx = touch.identifier;
+            if (onGoingTouches[idx] == null) {
+                return;
+            }
+            sendKeyDown(webSocket, false, onGoingTouches[idx]);
+            delete onGoingTouches[idx];
+        }
+        return false;
+    }
+
     document.onselectstart = () => false;
     return (
-        <div className="overlay" onTouchEnd={touchEnd}>
+        <div className="overlay"> 
             <div className="vertical-padding">
             </div>
-            <div className="controls">
+            <div className="controls" onTouchStart={touchStartControls} onTouchMove={touchMoveControls} onTouchEnd={touchEndControls}>
                 <a tabIndex={-1} className="gear control" onClick={showOverlayMenu} onTouchStart={showOverlayMenu}>
                     <img src={HOME_BUTTON_IMAGE} alt="Go to menu. (House icon)"/>
                 </a>
-                <a tabIndex={-1}
-                    onMouseDown={(e: React.MouseEvent<HTMLAnchorElement>) => mouseDown(e, 0)}
-                    onMouseUp={(e: React.MouseEvent<HTMLAnchorElement>) => mouseUp(e, 0)}
-                    onTouchStart={(e: React.TouchEvent<HTMLAnchorElement>) => touchStart(e, 0)}
-                    onTouchEnd={(e: React.TouchEvent<HTMLAnchorElement>) => touchEnd(e)}
-                    onClick={(e: React.MouseEvent<HTMLAnchorElement>) => e.preventDefault()}
-                    className="control-a control control-button">A</a>
-                <a tabIndex={-1}
-                    onMouseDown={(e: React.MouseEvent<HTMLAnchorElement>) => mouseDown(e, 1)} 
-                    onMouseUp={(e: React.MouseEvent<HTMLAnchorElement>) => mouseUp(e, 1)} 
-                    onTouchStart={(e: React.TouchEvent<HTMLAnchorElement>) => touchStart(e, 1)}
-                    onTouchEnd={(e: React.TouchEvent<HTMLAnchorElement>) => touchEnd(e)}
-                    onClick={(e: React.MouseEvent<HTMLAnchorElement>) => e.preventDefault()}
-                    className="control-b control control-button">B</a>
-                <a tabIndex={-1}
-                    onMouseDown={(e: React.MouseEvent<HTMLAnchorElement>) => mouseDown(e, 6)}
-                    onMouseUp={(e: React.MouseEvent<HTMLAnchorElement>) => mouseUp(e, 6)}
-                    onTouchStart={(e: React.TouchEvent<HTMLAnchorElement>) => touchStart(e, 6)}
-                    onTouchEnd={(e: React.TouchEvent<HTMLAnchorElement>) => touchEnd(e)}
-                    onClick={(e: React.MouseEvent<HTMLAnchorElement>) => e.preventDefault()}
-                    className="control-up control control-pad-button">&#94;</a>
-                <a tabIndex={-1}
-                    onMouseDown={(e: React.MouseEvent<HTMLAnchorElement>) => mouseDown(e, 7)}
-                    onMouseUp={(e: React.MouseEvent<HTMLAnchorElement>) => mouseUp(e, 7)}
-                    onTouchStart={(e: React.TouchEvent<HTMLAnchorElement>) => touchStart(e, 7)}
-                    onTouchEnd={(e: React.TouchEvent<HTMLAnchorElement>) => touchEnd(e)}
-                    onClick={(e: React.MouseEvent<HTMLAnchorElement>) => e.preventDefault()}
-                    className="control-down control control-pad-button">v</a>
-                <a tabIndex={-1}
-                    onMouseDown={(e: React.MouseEvent<HTMLAnchorElement>) => mouseDown(e, 8)}
-                    onMouseUp={(e: React.MouseEvent<HTMLAnchorElement>) => mouseUp(e, 8)}
-                    onTouchStart={(e: React.TouchEvent<HTMLAnchorElement>) => touchStart(e, 8)}
-                    onTouchEnd={(e: React.TouchEvent<HTMLAnchorElement>) => touchEnd(e)}
-                    onClick={(e: React.MouseEvent<HTMLAnchorElement>) => e.preventDefault()}
-                    className="control-left control control-pad-button">&lt;</a>
-                <a tabIndex={-1}
-                    onMouseDown={(e: React.MouseEvent<HTMLAnchorElement>) => mouseDown(e, 9)}
-                    onMouseUp={(e: React.MouseEvent<HTMLAnchorElement>) => mouseUp(e, 9)}
-                    onTouchStart={(e: React.TouchEvent<HTMLAnchorElement>) => touchStart(e, 9)}
-                    onTouchEnd={(e: React.TouchEvent<HTMLAnchorElement>) => touchEnd(e)}
-                    onClick={(e: React.MouseEvent<HTMLAnchorElement>) => e.preventDefault()}
-                    className="control-right control control-pad-button">&gt;</a>
+                {
+                    Object.keys(controls).map((key) =>  
+                        <a tabIndex={-1}
+                                className={controls[key].classes}
+                                ref={controls[key].ref}
+                                key={key}
+                                onMouseDown={(e: React.MouseEvent<HTMLAnchorElement>) => mouseDown(e, controls[key].key)}
+                                onMouseUp={(e: React.MouseEvent<HTMLAnchorElement>) => mouseUp(e, controls[key].key)}>
+                            {controls[key].sym}
+                        </a>
+                    )
+                }
             </div>
         </div>
     );
diff --git a/js-src/packet.ts b/js-src/packet.ts
index e86b780..33a324b 100644
--- a/js-src/packet.ts
+++ b/js-src/packet.ts
@@ -24,12 +24,10 @@ export function sendHello(websocket: WebSocket, rom_array: Uint8Array, savestate
 }
 
 export function sendKeyDown(websocket: WebSocket, isDown: boolean, key: number) {
-    console.log('Sending keyDown.');
-    console.log(PACKET_ID_KEY_DOWN);
+    console.log('Sending keyDown.', isDown);
     const isDownArray = new Uint8Array(1);
     isDownArray[0] = isDown ? 1: 0;
     const rawData = concatU8Array(isDownArray, Endian.u32ToByteArrayBigEndian(key));
-    console.log(rawData.length);
     sendPacket(websocket, PACKET_ID_KEY_DOWN, rawData);
 }
 
diff --git a/public/index.html b/public/index.html
index dd9e0cc..baa5e8d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,7 +2,13 @@
 <html>
     <head>
 	<link rel="stylesheet" href="/css/styles.css"/>
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="viewport" content="height = device-height,
+            width = device-width,
+            initial-scale = 1.0,
+            minimum-scale = 1.0,
+            maximum-scale = 1.0,
+            user-scalable = no,
+            target-densitydpi = device-dpi"/>
     </head>
     <body>
         <noscript style="font-size: 40px">
diff --git a/public/js/bundle.js b/public/js/bundle.js
index be1e7ca..f140f24 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;\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 touchStart(e, key) {\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            onGoingTouches[idx] = key;\n            (0,_packet__WEBPACK_IMPORTED_MODULE_2__.sendKeyDown)(webSocket, true, key);\n        }\n    }\n    function touchEnd(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            const key = onGoingTouches[idx];\n            delete onGoingTouches[idx];\n            (0,_packet__WEBPACK_IMPORTED_MODULE_2__.sendKeyDown)(webSocket, false, key);\n        }\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    document.onselectstart = () => false;\n    return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"overlay\", onTouchEnd: touchEnd },\n        react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"vertical-padding\" }),\n        react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"controls\" },\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            react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { tabIndex: -1, onMouseDown: (e) => mouseDown(e, 0), onMouseUp: (e) => mouseUp(e, 0), onTouchStart: (e) => touchStart(e, 0), onTouchEnd: (e) => touchEnd(e), onClick: (e) => e.preventDefault(), className: \"control-a control control-button\" }, \"A\"),\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { tabIndex: -1, onMouseDown: (e) => mouseDown(e, 1), onMouseUp: (e) => mouseUp(e, 1), onTouchStart: (e) => touchStart(e, 1), onTouchEnd: (e) => touchEnd(e), onClick: (e) => e.preventDefault(), className: \"control-b control control-button\" }, \"B\"),\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { tabIndex: -1, onMouseDown: (e) => mouseDown(e, 6), onMouseUp: (e) => mouseUp(e, 6), onTouchStart: (e) => touchStart(e, 6), onTouchEnd: (e) => touchEnd(e), onClick: (e) => e.preventDefault(), className: \"control-up control control-pad-button\" }, \"^\"),\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { tabIndex: -1, onMouseDown: (e) => mouseDown(e, 7), onMouseUp: (e) => mouseUp(e, 7), onTouchStart: (e) => touchStart(e, 7), onTouchEnd: (e) => touchEnd(e), onClick: (e) => e.preventDefault(), className: \"control-down control control-pad-button\" }, \"v\"),\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { tabIndex: -1, onMouseDown: (e) => mouseDown(e, 8), onMouseUp: (e) => mouseUp(e, 8), onTouchStart: (e) => touchStart(e, 8), onTouchEnd: (e) => touchEnd(e), onClick: (e) => e.preventDefault(), className: \"control-left control control-pad-button\" }, \"<\"),\n            react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { tabIndex: -1, onMouseDown: (e) => mouseDown(e, 9), onMouseUp: (e) => mouseUp(e, 9), onTouchStart: (e) => touchStart(e, 9), onTouchEnd: (e) => touchEnd(e), onClick: (e) => e.preventDefault(), className: \"control-right control control-pad-button\" }, \">\"))));\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;\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 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 control-button',\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 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            const x = touch.pageX;\n            const y = touch.pageY;\n            let key = null;\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                    key = controls[control].key;\n                    console.log(key);\n                    break;\n                }\n            }\n            console.log(key);\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            const x = touch.pageX;\n            const y = touch.pageY;\n            let key = null;\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                if (x >= offsetLeft && x <= offsetLeft + offsetWidth && y >= offsetTop && y <= offsetTop + offsetHeight) {\n                    key = controls[control].key;\n                    console.log(key);\n                    break;\n                }\n            }\n            const idx = touch.identifier;\n            if (onGoingTouches[idx] != null) {\n                (0,_packet__WEBPACK_IMPORTED_MODULE_2__.sendKeyDown)(webSocket, false, onGoingTouches[idx]);\n                delete onGoingTouches[idx];\n            }\n            if (key == null) {\n                continue;\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?");
 
 /***/ }),
 
@@ -196,7 +196,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var reac
   \**************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"handleSendFrame\": () => (/* binding */ handleSendFrame),\n/* harmony export */   \"sendHello\": () => (/* binding */ sendHello),\n/* harmony export */   \"sendKeyDown\": () => (/* binding */ sendKeyDown),\n/* harmony export */   \"sendPacket\": () => (/* binding */ sendPacket)\n/* harmony export */ });\n/* harmony import */ var _endian__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../endian */ \"./js-src/endian.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../constants */ \"./js-src/constants.ts\");\n\n\nfunction concatU8Array(array1, array2) {\n    const final_array = new Uint8Array(array1.length + array2.length);\n    final_array.set(array1);\n    final_array.set(array2, array1.length);\n    return final_array;\n}\nfunction sendHello(websocket, rom_array, savestate_array) {\n    console.log('Sending hello.');\n    const length_rom = BigInt(rom_array.length);\n    const length_savestate = BigInt(savestate_array.length);\n    const raw_data = concatU8Array(concatU8Array(concatU8Array(_endian__WEBPACK_IMPORTED_MODULE_0__[\"default\"].u64ToByteArrayBigEndian(length_rom), rom_array), _endian__WEBPACK_IMPORTED_MODULE_0__[\"default\"].u64ToByteArrayBigEndian(length_savestate)), savestate_array);\n    sendPacket(websocket, _constants__WEBPACK_IMPORTED_MODULE_1__.PACKET_ID_HELLO, raw_data);\n}\nfunction sendKeyDown(websocket, isDown, key) {\n    console.log('Sending keyDown.');\n    console.log(_constants__WEBPACK_IMPORTED_MODULE_1__.PACKET_ID_KEY_DOWN);\n    const isDownArray = new Uint8Array(1);\n    isDownArray[0] = isDown ? 1 : 0;\n    const rawData = concatU8Array(isDownArray, _endian__WEBPACK_IMPORTED_MODULE_0__[\"default\"].u32ToByteArrayBigEndian(key));\n    console.log(rawData.length);\n    sendPacket(websocket, _constants__WEBPACK_IMPORTED_MODULE_1__.PACKET_ID_KEY_DOWN, rawData);\n}\nfunction sendPacket(websocket, id, raw_data) {\n    const packet_u8 = concatU8Array(concatU8Array(_endian__WEBPACK_IMPORTED_MODULE_0__[\"default\"].u64ToByteArrayBigEndian(id), _endian__WEBPACK_IMPORTED_MODULE_0__[\"default\"].u64ToByteArrayBigEndian(BigInt(raw_data.length))), raw_data);\n    const packet_buffer = packet_u8.buffer;\n    console.log('Sending packet');\n    websocket.send(packet_buffer);\n}\nfunction handleSendFrame(raw_data, canvas, ctx, printingFrame, setPrintingFrame) {\n    if (printingFrame) {\n        return;\n    }\n    setPrintingFrame(true);\n    let data = raw_data;\n    const stride = _endian__WEBPACK_IMPORTED_MODULE_0__[\"default\"].byteArrayToU32BigEndian(data.slice(0, 4));\n    data = data.slice(4, data.length);\n    const output_buffer_size = _endian__WEBPACK_IMPORTED_MODULE_0__[\"default\"].byteArrayToU64BigEndian(data.slice(0, 8));\n    data = data.slice(8, data.length);\n    const img_data = ctx.createImageData(_constants__WEBPACK_IMPORTED_MODULE_1__.MIN_WIDTH, _constants__WEBPACK_IMPORTED_MODULE_1__.MIN_HEIGHT);\n    const img_data_u8 = new Uint8Array(img_data.data.buffer);\n    for (let i = 0; i < data.length; i++) {\n        if (i % 4 == 3) {\n            img_data_u8[i] = 255;\n            continue;\n        }\n        img_data_u8[i] = data[i];\n    }\n    data = null;\n    createImageBitmap(img_data).then((bitmap) => drawBitmap(bitmap, canvas, ctx, printingFrame));\n}\nfunction drawBitmap(bitmap, canvas, ctx, printingFrame) {\n    ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);\n    printingFrame = false;\n}\n\n\n//# sourceURL=webpack://MSGBA-Web/./js-src/packet.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"handleSendFrame\": () => (/* binding */ handleSendFrame),\n/* harmony export */   \"sendHello\": () => (/* binding */ sendHello),\n/* harmony export */   \"sendKeyDown\": () => (/* binding */ sendKeyDown),\n/* harmony export */   \"sendPacket\": () => (/* binding */ sendPacket)\n/* harmony export */ });\n/* harmony import */ var _endian__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../endian */ \"./js-src/endian.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../constants */ \"./js-src/constants.ts\");\n\n\nfunction concatU8Array(array1, array2) {\n    const final_array = new Uint8Array(array1.length + array2.length);\n    final_array.set(array1);\n    final_array.set(array2, array1.length);\n    return final_array;\n}\nfunction sendHello(websocket, rom_array, savestate_array) {\n    console.log('Sending hello.');\n    const length_rom = BigInt(rom_array.length);\n    const length_savestate = BigInt(savestate_array.length);\n    const raw_data = concatU8Array(concatU8Array(concatU8Array(_endian__WEBPACK_IMPORTED_MODULE_0__[\"default\"].u64ToByteArrayBigEndian(length_rom), rom_array), _endian__WEBPACK_IMPORTED_MODULE_0__[\"default\"].u64ToByteArrayBigEndian(length_savestate)), savestate_array);\n    sendPacket(websocket, _constants__WEBPACK_IMPORTED_MODULE_1__.PACKET_ID_HELLO, raw_data);\n}\nfunction sendKeyDown(websocket, isDown, key) {\n    console.log('Sending keyDown.', isDown);\n    const isDownArray = new Uint8Array(1);\n    isDownArray[0] = isDown ? 1 : 0;\n    const rawData = concatU8Array(isDownArray, _endian__WEBPACK_IMPORTED_MODULE_0__[\"default\"].u32ToByteArrayBigEndian(key));\n    sendPacket(websocket, _constants__WEBPACK_IMPORTED_MODULE_1__.PACKET_ID_KEY_DOWN, rawData);\n}\nfunction sendPacket(websocket, id, raw_data) {\n    const packet_u8 = concatU8Array(concatU8Array(_endian__WEBPACK_IMPORTED_MODULE_0__[\"default\"].u64ToByteArrayBigEndian(id), _endian__WEBPACK_IMPORTED_MODULE_0__[\"default\"].u64ToByteArrayBigEndian(BigInt(raw_data.length))), raw_data);\n    const packet_buffer = packet_u8.buffer;\n    console.log('Sending packet');\n    websocket.send(packet_buffer);\n}\nfunction handleSendFrame(raw_data, canvas, ctx, printingFrame, setPrintingFrame) {\n    if (printingFrame) {\n        return;\n    }\n    setPrintingFrame(true);\n    let data = raw_data;\n    const stride = _endian__WEBPACK_IMPORTED_MODULE_0__[\"default\"].byteArrayToU32BigEndian(data.slice(0, 4));\n    data = data.slice(4, data.length);\n    const output_buffer_size = _endian__WEBPACK_IMPORTED_MODULE_0__[\"default\"].byteArrayToU64BigEndian(data.slice(0, 8));\n    data = data.slice(8, data.length);\n    const img_data = ctx.createImageData(_constants__WEBPACK_IMPORTED_MODULE_1__.MIN_WIDTH, _constants__WEBPACK_IMPORTED_MODULE_1__.MIN_HEIGHT);\n    const img_data_u8 = new Uint8Array(img_data.data.buffer);\n    for (let i = 0; i < data.length; i++) {\n        if (i % 4 == 3) {\n            img_data_u8[i] = 255;\n            continue;\n        }\n        img_data_u8[i] = data[i];\n    }\n    data = null;\n    createImageBitmap(img_data).then((bitmap) => drawBitmap(bitmap, canvas, ctx, printingFrame));\n}\nfunction drawBitmap(bitmap, canvas, ctx, printingFrame) {\n    ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);\n    printingFrame = false;\n}\n\n\n//# sourceURL=webpack://MSGBA-Web/./js-src/packet.ts?");
 
 /***/ })