260 lines
9.0 KiB
TypeScript
260 lines
9.0 KiB
TypeScript
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;
|
|
};
|
|
|
|
interface ControlMap {
|
|
[id: string]: {key: number, ref: React.RefObject<HTMLAnchorElement>, sym: string, classes: string, transformX?: number, transformY?: number}
|
|
};
|
|
|
|
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 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);
|
|
}
|
|
|
|
const controls: ControlMap = {};
|
|
controls.a = {
|
|
ref: React.useRef<HTMLAnchorElement|null>(null),
|
|
key: 0,
|
|
sym: 'A',
|
|
classes: 'control-a control-button-a-b control control-button',
|
|
};
|
|
controls.b = {
|
|
ref: React.useRef<HTMLAnchorElement|null>(null),
|
|
key: 1,
|
|
sym: 'B',
|
|
transformX: 50,
|
|
classes: 'control-b control-button-a-b control control-button',
|
|
};
|
|
controls.l = {
|
|
key: 2,
|
|
sym: 'L',
|
|
classes: 'control-l control-button-l-r control',
|
|
ref: React.useRef<HTMLAnchorElement|null>(null),
|
|
};
|
|
|
|
controls.r = {
|
|
key: 3,
|
|
sym: 'R',
|
|
classes: 'control-r control-button-l-r control',
|
|
ref: React.useRef<HTMLAnchorElement|null>(null),
|
|
};
|
|
controls.start = {
|
|
ref: React.useRef<HTMLAnchorElement|null>(null),
|
|
key: 4,
|
|
sym: 'START',
|
|
classes: 'control-start control-button-start-select control',
|
|
transformX: 25,
|
|
};
|
|
controls.select = {
|
|
ref: React.useRef<HTMLAnchorElement|null>(null),
|
|
key: 5,
|
|
sym: 'SEL',
|
|
classes: 'control-select control-button-start-select control',
|
|
transformX: -25,
|
|
};
|
|
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 determineKey(e: React.TouchEvent<HTMLDivElement>, touch: React.Touch): number | null {
|
|
const x = touch.pageX;
|
|
const y = touch.pageY;
|
|
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) {
|
|
return controls[control].key;
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
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];
|
|
let key: number|null = determineKey(e, touch);
|
|
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];
|
|
let key: number|null = determineKey(e, touch);
|
|
const idx = touch.identifier;
|
|
if (key == null) {
|
|
continue;
|
|
}
|
|
if (onGoingTouches[idx] != null) {
|
|
sendKeyDown(webSocket, false, onGoingTouches[idx]);
|
|
delete onGoingTouches[idx];
|
|
}
|
|
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;
|
|
}
|
|
|
|
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 tabIndex={-1} className="overlay" onKeyDown={onPressControl} onKeyUp={onUnpressControl}>
|
|
<div className="vertical-padding">
|
|
</div>
|
|
<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>
|
|
{
|
|
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>
|
|
);
|
|
}
|