msgba-web/js-src/components/overlay-controls.tsx

import * as React from 'react';
import {HOME_BUTTON_IMAGE} from '/constants';
import {sendKeyDown} from '/packet';

export interface OverlayControlsProps {
    firstMenuElement: React.RefObject<HTMLAnchorElement>,
    setHiddenMenu: (c: boolean) => void,
    webSocket: WebSocket | null;
};

export default function OverlayControls({firstMenuElement, setHiddenMenu, webSocket}: OverlayControlsProps) {
    function showOverlayMenu() {
        setHiddenMenu(false);
        setTimeout(() => {
            if (firstMenuElement.current == null) {
                return;
            }
            firstMenuElement.current.focus();
        }, 100);
    }
    const [onGoingTouches, setOnGoingTouches] = React.useState<{[id: string]: number}>({});
    function mouseDown(e: React.MouseEvent<HTMLAnchorElement> | React.TouchEvent<HTMLAnchorElement>, key: number) {
        e.preventDefault();
        if (webSocket == null) {
            console.log('There is not websocket');
            return;
        }
        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();
        if (webSocket == null) {
            console.log('There is not websocket');
            return;
        }
        sendKeyDown(webSocket, false, key);
    }

    document.onselectstart = () => false;
    return (
        <div className="overlay" onTouchEnd={touchEnd}>
            <div className="vertical-padding">
            </div>
            <div className="controls">
                <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>
            </div>
        </div>
    );
}