Fixing issue after server restart frontend won't reconnect.

This commit is contained in:
Sergiotarxz 2023-03-26 18:40:54 +02:00
parent 36a826e1bb
commit 67f64438b3
4 changed files with 20 additions and 33 deletions

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