Fixing issue after server restart frontend won't reconnect.

js-src/components/overlay-controls.tsx

@@ -201,7 +201,7 @@ export default function OverlayControls({firstMenuElement, setHiddenMenu, webSoc
     }
 
     const keyMap: string[] = ["KeyZ", "KeyX", "KeyA", "KeyS",
-            "Enter", " ", "ArrowUp", "ArrowDown",
+            "Enter", "Space", "ArrowUp", "ArrowDown",
             "ArrowLeft", "ArrowRight"];
     function onPressControl(e: React.KeyboardEvent<HTMLDivElement>) {
         if (webSocket == null) {
@@ -211,8 +211,6 @@ export default function OverlayControls({firstMenuElement, setHiddenMenu, webSoc
         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);
         }
     }
@@ -222,13 +220,8 @@ export default function OverlayControls({firstMenuElement, setHiddenMenu, webSoc
             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);
         }
     }

js-src/components/page.tsx

@@ -17,24 +17,21 @@ export interface handleClickStartEmulationButtonObjectArgs {
     e: React.MouseEvent<HTMLInputElement>;
     inputRom: HTMLInputElement | null;
     inputSaveState: HTMLInputElement | null;
-    canvas: HTMLCanvasElement | null;
-    printingFrame: boolean;
-    setPrintingFrame: (c: boolean) => void;
+    canvas: React.RefObject<HTMLCanvasElement | null>;
     setEmulationStarted: (c: boolean) => void,
     setHiddenMenu: (c: boolean) => void;
     setHiddenFormSelectFiles: (c: boolean) => void;
-    setWebSocket: (c: WebSocket) => void;
+    setWebSocket: (c: WebSocket | null) => void;
 };
 
-function handleClickStartEmulationButton({e, inputRom, inputSaveState, canvas, printingFrame,
-        setPrintingFrame, setEmulationStarted, setHiddenMenu,
+function handleClickStartEmulationButton({e, inputRom, inputSaveState, canvas, setEmulationStarted, setHiddenMenu,
         setHiddenFormSelectFiles, setWebSocket}: handleClickStartEmulationButtonObjectArgs) {
     e.preventDefault();
-    if (canvas == null) {
+    if (canvas.current == null) {
         alert('Canvas does not exists?');
         return;
     }
-    const ctx = canvas.getContext('2d')
+    const ctx = canvas.current.getContext('2d')
     if (ctx == null) {
         alert('Unable to create canvas context, doing nothing');
         return;
@@ -63,6 +60,7 @@ function handleClickStartEmulationButton({e, inputRom, inputSaveState, canvas, p
             webSocket.onclose = (message) => {
                 setEmulationStarted(false);
                 console.log('Closing websocket.');
+                setWebSocket(null);
             }
             webSocket.onopen = () => {
                 console.log('Opened websocket.');
@@ -71,15 +69,14 @@ function handleClickStartEmulationButton({e, inputRom, inputSaveState, canvas, p
                 setHiddenMenu(true);
                 setHiddenFormSelectFiles(true);
             };
-            setPrintingFrame(false);
             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;
     let packet_u8: Uint8Array | null = new Uint8Array(buffer);
     const id = Endian.byteArrayToU64BigEndian(packet_u8.slice(0, 8));
@@ -89,7 +86,7 @@ function onWebSocketPacket(event: MessageEvent, canvas: HTMLCanvasElement, ctx:
     packet_u8 = null;
     switch (id) {
         case PACKET_ID_SEND_FRAME:
-            handleSendFrame(raw_data, canvas, ctx, printingFrame, setPrintingFrame);
+            handleSendFrame(raw_data, canvas, ctx);
             break;
         default:
             console.log(`Received unknown packet ${id}`);
@@ -117,7 +114,6 @@ export default function Page() {
         fillBlack(canvas, ctx);        
     };
     const [hiddenFormSelectFiles, setHiddenFormSelectFiles] = React.useState<boolean>(true);
-    const [printingFrame, setPrintingFrame] = React.useState<boolean>(false);
     React.useEffect(resizeCanvas, [emulatorDimensions]);
     const refInputRom = React.useRef<HTMLInputElement | null>(null);
     const refInputSaveState = React.useRef<HTMLInputElement | null>(null);
@@ -130,9 +126,7 @@ export default function Page() {
             setEmulationStarted: setEmulationStarted,
             inputRom: refInputRom.current,
             inputSaveState: refInputSaveState.current,
-            canvas: canvasRef.current,
-            setPrintingFrame: setPrintingFrame,
-            printingFrame: printingFrame,
+            canvas: canvasRef,
             setHiddenMenu: setHiddenMenu,
             setHiddenFormSelectFiles: setHiddenFormSelectFiles,
             setWebSocket: setWebSocket,

js-src/packet.ts

@@ -41,11 +41,12 @@ export function sendPacket(websocket: WebSocket, id: bigint, raw_data: Uint8Arra
     websocket.send(packet_buffer);
 }
 
-export function handleSendFrame(raw_data: Uint8Array, canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D, printingFrame: boolean, setPrintingFrame: (c: boolean) => void) {
-    if (printingFrame) {
+export function handleSendFrame(raw_data: Uint8Array, canvas: HTMLCanvasElement | null, ctx: CanvasRenderingContext2D) {
+    console.log('Reachs here');
+    if (canvas == null) {
+        console.log('No canvas');
         return;
     }
-    setPrintingFrame(true);
     let data: Uint8Array | null = raw_data;
     const stride = Endian.byteArrayToU32BigEndian(data.slice(0, 4));
     data = data.slice(4, data.length);
@@ -61,10 +62,9 @@ export function handleSendFrame(raw_data: Uint8Array, canvas: HTMLCanvasElement,
         img_data_u8[i] = data[i];
     }
     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);
-    printingFrame = false;
 }