Fixing touch controls.
This commit is contained in:
parent
93cc25adf5
commit
2bbb566c42
|
@ -27,33 +27,6 @@ export default function OverlayControls({firstMenuElement, setHiddenMenu, webSoc
|
||||||
}
|
}
|
||||||
sendKeyDown(webSocket, true, key);
|
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) {
|
function mouseUp(e: React.MouseEvent<HTMLAnchorElement> | React.TouchEvent<HTMLAnchorElement>, key: number) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
@ -64,57 +37,188 @@ export default function OverlayControls({firstMenuElement, setHiddenMenu, webSoc
|
||||||
sendKeyDown(webSocket, false, key);
|
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;
|
document.onselectstart = () => false;
|
||||||
return (
|
return (
|
||||||
<div className="overlay" onTouchEnd={touchEnd}>
|
<div className="overlay">
|
||||||
<div className="vertical-padding">
|
<div className="vertical-padding">
|
||||||
</div>
|
</div>
|
||||||
<div className="controls">
|
<div className="controls" onTouchStart={touchStartControls} onTouchMove={touchMoveControls} onTouchEnd={touchEndControls}>
|
||||||
<a tabIndex={-1} className="gear control" onClick={showOverlayMenu} onTouchStart={showOverlayMenu}>
|
<a tabIndex={-1} className="gear control" onClick={showOverlayMenu} onTouchStart={showOverlayMenu}>
|
||||||
<img src={HOME_BUTTON_IMAGE} alt="Go to menu. (House icon)"/>
|
<img src={HOME_BUTTON_IMAGE} alt="Go to menu. (House icon)"/>
|
||||||
</a>
|
</a>
|
||||||
<a tabIndex={-1}
|
{
|
||||||
onMouseDown={(e: React.MouseEvent<HTMLAnchorElement>) => mouseDown(e, 0)}
|
Object.keys(controls).map((key) =>
|
||||||
onMouseUp={(e: React.MouseEvent<HTMLAnchorElement>) => mouseUp(e, 0)}
|
<a tabIndex={-1}
|
||||||
onTouchStart={(e: React.TouchEvent<HTMLAnchorElement>) => touchStart(e, 0)}
|
className={controls[key].classes}
|
||||||
onTouchEnd={(e: React.TouchEvent<HTMLAnchorElement>) => touchEnd(e)}
|
ref={controls[key].ref}
|
||||||
onClick={(e: React.MouseEvent<HTMLAnchorElement>) => e.preventDefault()}
|
key={key}
|
||||||
className="control-a control control-button">A</a>
|
onMouseDown={(e: React.MouseEvent<HTMLAnchorElement>) => mouseDown(e, controls[key].key)}
|
||||||
<a tabIndex={-1}
|
onMouseUp={(e: React.MouseEvent<HTMLAnchorElement>) => mouseUp(e, controls[key].key)}>
|
||||||
onMouseDown={(e: React.MouseEvent<HTMLAnchorElement>) => mouseDown(e, 1)}
|
{controls[key].sym}
|
||||||
onMouseUp={(e: React.MouseEvent<HTMLAnchorElement>) => mouseUp(e, 1)}
|
</a>
|
||||||
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">^</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"><</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">></a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -24,12 +24,10 @@ export function sendHello(websocket: WebSocket, rom_array: Uint8Array, savestate
|
||||||
}
|
}
|
||||||
|
|
||||||
export function sendKeyDown(websocket: WebSocket, isDown: boolean, key: number) {
|
export function sendKeyDown(websocket: WebSocket, isDown: boolean, key: number) {
|
||||||
console.log('Sending keyDown.');
|
console.log('Sending keyDown.', isDown);
|
||||||
console.log(PACKET_ID_KEY_DOWN);
|
|
||||||
const isDownArray = new Uint8Array(1);
|
const isDownArray = new Uint8Array(1);
|
||||||
isDownArray[0] = isDown ? 1: 0;
|
isDownArray[0] = isDown ? 1: 0;
|
||||||
const rawData = concatU8Array(isDownArray, Endian.u32ToByteArrayBigEndian(key));
|
const rawData = concatU8Array(isDownArray, Endian.u32ToByteArrayBigEndian(key));
|
||||||
console.log(rawData.length);
|
|
||||||
sendPacket(websocket, PACKET_ID_KEY_DOWN, rawData);
|
sendPacket(websocket, PACKET_ID_KEY_DOWN, rawData);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -2,7 +2,13 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<link rel="stylesheet" href="/css/styles.css"/>
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript style="font-size: 40px">
|
<noscript style="font-size: 40px">
|
||||||
|
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue