Fixing touch controls.

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>
     );

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);
 }
 

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">