diff --git a/templates/static/index.html.ep b/templates/static/index.html.ep index 6a409db..775f494 100644 --- a/templates/static/index.html.ep +++ b/templates/static/index.html.ep @@ -27,7 +27,7 @@ Rom file - Savestate (A ss file from mgba...) @@ -48,6 +48,7 @@ const PACKET_ID_HELLO = 0n; // Send is sent from server, so it is get here but whatever, it is the bad naming of the protocol. const PACKET_ID_SEND_FRAME = 1n; + let printing_frame = false; let is_little_endian = true; (()=>{ let buf = new ArrayBuffer(4); @@ -101,26 +102,33 @@ console.log('Opened websocket.'); sendHello(websocket, rom_array, savestate_array); }; - websocket.addEventListener('message', (e) => { - const buffer = e.data; - let packet_u8 = new Uint8Array(buffer); - const id = byteArrayToU64BigEndian(packet_u8.slice(0, 8)); - packet_u8 = packet_u8.slice(8, packet_u8.length); - const size = byteArrayToU64BigEndian(packet_u8.slice(0, 8)); - const raw_data = packet_u8.slice(8, packet_u8.length); - switch (id) { - case PACKET_ID_SEND_FRAME: - handleSendFrame(raw_data); - break; - default: - console.log(`Received unknown packet ${id}`); - } - }); + websocket.addEventListener('message', onWebSocketPacket); }); }); }); + function onWebSocketPacket(event) { + const buffer = event.data; + let packet_u8 = new Uint8Array(buffer); + const id = byteArrayToU64BigEndian(packet_u8.slice(0, 8)); + packet_u8 = packet_u8.slice(8, packet_u8.length); + const size = byteArrayToU64BigEndian(packet_u8.slice(0, 8)); + const raw_data = packet_u8.slice(8, packet_u8.length); + packet_u8 = null; + switch (id) { + case PACKET_ID_SEND_FRAME: + handleSendFrame(raw_data); + break; + default: + console.log(`Received unknown packet ${id}`); + } + } + function handleSendFrame(raw_data) { + if (printing_frame) { + return; + } + printing_frame = true; let data = raw_data; const stride = byteArrayToU32BigEndian(data.slice(0, 4)); data = data.slice(4, data.length); @@ -136,7 +144,13 @@ } img_data_u8[i] = data[i]; } - ctx.putImageData(img_data, 0, 0); + data = null; + createImageBitmap(img_data).then(drawBitmap); + } + + function drawBitmap(bitmap) { + ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height); + printing_frame = false; } function byteArrayToU32BigEndian(input_array) {