Fixing issue after server restart frontend won't reconnect.
This commit is contained in:
parent
36a826e1bb
commit
67f64438b3
@ -201,7 +201,7 @@ export default function OverlayControls({firstMenuElement, setHiddenMenu, webSoc
|
|||||||
}
|
}
|
||||||
|
|
||||||
const keyMap: string[] = ["KeyZ", "KeyX", "KeyA", "KeyS",
|
const keyMap: string[] = ["KeyZ", "KeyX", "KeyA", "KeyS",
|
||||||
"Enter", " ", "ArrowUp", "ArrowDown",
|
"Enter", "Space", "ArrowUp", "ArrowDown",
|
||||||
"ArrowLeft", "ArrowRight"];
|
"ArrowLeft", "ArrowRight"];
|
||||||
function onPressControl(e: React.KeyboardEvent<HTMLDivElement>) {
|
function onPressControl(e: React.KeyboardEvent<HTMLDivElement>) {
|
||||||
if (webSocket == null) {
|
if (webSocket == null) {
|
||||||
@ -211,8 +211,6 @@ export default function OverlayControls({firstMenuElement, setHiddenMenu, webSoc
|
|||||||
let key = keyMap.findIndex((c: string) => c == e.code);
|
let key = keyMap.findIndex((c: string) => c == e.code);
|
||||||
if (key != -1) {
|
if (key != -1) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
console.log(e.code);
|
|
||||||
console.log(key);
|
|
||||||
sendKeyDown(webSocket, true, key);
|
sendKeyDown(webSocket, true, key);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -222,13 +220,8 @@ export default function OverlayControls({firstMenuElement, setHiddenMenu, webSoc
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
let key = keyMap.findIndex((c: string) => c == e.code);
|
let key = keyMap.findIndex((c: string) => c == e.code);
|
||||||
console.log(keyMap);
|
|
||||||
console.log(e.code);
|
|
||||||
console.log(key);
|
|
||||||
if (key != -1) {
|
if (key != -1) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
console.log(e.code);
|
|
||||||
console.log(key);
|
|
||||||
sendKeyDown(webSocket, false, key);
|
sendKeyDown(webSocket, false, key);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -17,24 +17,21 @@ export interface handleClickStartEmulationButtonObjectArgs {
|
|||||||
e: React.MouseEvent<HTMLInputElement>;
|
e: React.MouseEvent<HTMLInputElement>;
|
||||||
inputRom: HTMLInputElement | null;
|
inputRom: HTMLInputElement | null;
|
||||||
inputSaveState: HTMLInputElement | null;
|
inputSaveState: HTMLInputElement | null;
|
||||||
canvas: HTMLCanvasElement | null;
|
canvas: React.RefObject<HTMLCanvasElement | null>;
|
||||||
printingFrame: boolean;
|
|
||||||
setPrintingFrame: (c: boolean) => void;
|
|
||||||
setEmulationStarted: (c: boolean) => void,
|
setEmulationStarted: (c: boolean) => void,
|
||||||
setHiddenMenu: (c: boolean) => void;
|
setHiddenMenu: (c: boolean) => void;
|
||||||
setHiddenFormSelectFiles: (c: boolean) => void;
|
setHiddenFormSelectFiles: (c: boolean) => void;
|
||||||
setWebSocket: (c: WebSocket) => void;
|
setWebSocket: (c: WebSocket | null) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
function handleClickStartEmulationButton({e, inputRom, inputSaveState, canvas, printingFrame,
|
function handleClickStartEmulationButton({e, inputRom, inputSaveState, canvas, setEmulationStarted, setHiddenMenu,
|
||||||
setPrintingFrame, setEmulationStarted, setHiddenMenu,
|
|
||||||
setHiddenFormSelectFiles, setWebSocket}: handleClickStartEmulationButtonObjectArgs) {
|
setHiddenFormSelectFiles, setWebSocket}: handleClickStartEmulationButtonObjectArgs) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
if (canvas == null) {
|
if (canvas.current == null) {
|
||||||
alert('Canvas does not exists?');
|
alert('Canvas does not exists?');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const ctx = canvas.getContext('2d')
|
const ctx = canvas.current.getContext('2d')
|
||||||
if (ctx == null) {
|
if (ctx == null) {
|
||||||
alert('Unable to create canvas context, doing nothing');
|
alert('Unable to create canvas context, doing nothing');
|
||||||
return;
|
return;
|
||||||
@ -63,6 +60,7 @@ function handleClickStartEmulationButton({e, inputRom, inputSaveState, canvas, p
|
|||||||
webSocket.onclose = (message) => {
|
webSocket.onclose = (message) => {
|
||||||
setEmulationStarted(false);
|
setEmulationStarted(false);
|
||||||
console.log('Closing websocket.');
|
console.log('Closing websocket.');
|
||||||
|
setWebSocket(null);
|
||||||
}
|
}
|
||||||
webSocket.onopen = () => {
|
webSocket.onopen = () => {
|
||||||
console.log('Opened websocket.');
|
console.log('Opened websocket.');
|
||||||
@ -71,15 +69,14 @@ function handleClickStartEmulationButton({e, inputRom, inputSaveState, canvas, p
|
|||||||
setHiddenMenu(true);
|
setHiddenMenu(true);
|
||||||
setHiddenFormSelectFiles(true);
|
setHiddenFormSelectFiles(true);
|
||||||
};
|
};
|
||||||
setPrintingFrame(false);
|
|
||||||
webSocket.addEventListener('message', (event) => {
|
webSocket.addEventListener('message', (event) => {
|
||||||
onWebSocketPacket(event, canvas, ctx, printingFrame, setPrintingFrame)
|
onWebSocketPacket(event, canvas.current, ctx)
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function onWebSocketPacket(event: MessageEvent, canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D, printingFrame: boolean, setPrintingFrame: (c: boolean) => void) {
|
function onWebSocketPacket(event: MessageEvent, canvas: HTMLCanvasElement | null, ctx: CanvasRenderingContext2D) {
|
||||||
const buffer = event.data;
|
const buffer = event.data;
|
||||||
let packet_u8: Uint8Array | null = new Uint8Array(buffer);
|
let packet_u8: Uint8Array | null = new Uint8Array(buffer);
|
||||||
const id = Endian.byteArrayToU64BigEndian(packet_u8.slice(0, 8));
|
const id = Endian.byteArrayToU64BigEndian(packet_u8.slice(0, 8));
|
||||||
@ -89,7 +86,7 @@ function onWebSocketPacket(event: MessageEvent, canvas: HTMLCanvasElement, ctx:
|
|||||||
packet_u8 = null;
|
packet_u8 = null;
|
||||||
switch (id) {
|
switch (id) {
|
||||||
case PACKET_ID_SEND_FRAME:
|
case PACKET_ID_SEND_FRAME:
|
||||||
handleSendFrame(raw_data, canvas, ctx, printingFrame, setPrintingFrame);
|
handleSendFrame(raw_data, canvas, ctx);
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
console.log(`Received unknown packet ${id}`);
|
console.log(`Received unknown packet ${id}`);
|
||||||
@ -117,7 +114,6 @@ export default function Page() {
|
|||||||
fillBlack(canvas, ctx);
|
fillBlack(canvas, ctx);
|
||||||
};
|
};
|
||||||
const [hiddenFormSelectFiles, setHiddenFormSelectFiles] = React.useState<boolean>(true);
|
const [hiddenFormSelectFiles, setHiddenFormSelectFiles] = React.useState<boolean>(true);
|
||||||
const [printingFrame, setPrintingFrame] = React.useState<boolean>(false);
|
|
||||||
React.useEffect(resizeCanvas, [emulatorDimensions]);
|
React.useEffect(resizeCanvas, [emulatorDimensions]);
|
||||||
const refInputRom = React.useRef<HTMLInputElement | null>(null);
|
const refInputRom = React.useRef<HTMLInputElement | null>(null);
|
||||||
const refInputSaveState = React.useRef<HTMLInputElement | null>(null);
|
const refInputSaveState = React.useRef<HTMLInputElement | null>(null);
|
||||||
@ -130,9 +126,7 @@ export default function Page() {
|
|||||||
setEmulationStarted: setEmulationStarted,
|
setEmulationStarted: setEmulationStarted,
|
||||||
inputRom: refInputRom.current,
|
inputRom: refInputRom.current,
|
||||||
inputSaveState: refInputSaveState.current,
|
inputSaveState: refInputSaveState.current,
|
||||||
canvas: canvasRef.current,
|
canvas: canvasRef,
|
||||||
setPrintingFrame: setPrintingFrame,
|
|
||||||
printingFrame: printingFrame,
|
|
||||||
setHiddenMenu: setHiddenMenu,
|
setHiddenMenu: setHiddenMenu,
|
||||||
setHiddenFormSelectFiles: setHiddenFormSelectFiles,
|
setHiddenFormSelectFiles: setHiddenFormSelectFiles,
|
||||||
setWebSocket: setWebSocket,
|
setWebSocket: setWebSocket,
|
||||||
|
@ -41,11 +41,12 @@ export function sendPacket(websocket: WebSocket, id: bigint, raw_data: Uint8Arra
|
|||||||
websocket.send(packet_buffer);
|
websocket.send(packet_buffer);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function handleSendFrame(raw_data: Uint8Array, canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D, printingFrame: boolean, setPrintingFrame: (c: boolean) => void) {
|
export function handleSendFrame(raw_data: Uint8Array, canvas: HTMLCanvasElement | null, ctx: CanvasRenderingContext2D) {
|
||||||
if (printingFrame) {
|
console.log('Reachs here');
|
||||||
|
if (canvas == null) {
|
||||||
|
console.log('No canvas');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
setPrintingFrame(true);
|
|
||||||
let data: Uint8Array | null = raw_data;
|
let data: Uint8Array | null = raw_data;
|
||||||
const stride = Endian.byteArrayToU32BigEndian(data.slice(0, 4));
|
const stride = Endian.byteArrayToU32BigEndian(data.slice(0, 4));
|
||||||
data = data.slice(4, data.length);
|
data = data.slice(4, data.length);
|
||||||
@ -61,10 +62,9 @@ export function handleSendFrame(raw_data: Uint8Array, canvas: HTMLCanvasElement,
|
|||||||
img_data_u8[i] = data[i];
|
img_data_u8[i] = data[i];
|
||||||
}
|
}
|
||||||
data = null;
|
data = null;
|
||||||
createImageBitmap(img_data).then((bitmap) => drawBitmap(bitmap, canvas, ctx, printingFrame));
|
createImageBitmap(img_data).then((bitmap) => drawBitmap(bitmap, canvas, ctx));
|
||||||
}
|
}
|
||||||
|
|
||||||
function drawBitmap(bitmap: ImageBitmap, canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D, printingFrame: boolean) {
|
function drawBitmap(bitmap: ImageBitmap, canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D) {
|
||||||
ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
|
ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
|
||||||
printingFrame = false;
|
|
||||||
}
|
}
|
||||||
|
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user