From 797386845a6788fc5fafc16663d4891e1dc8a720 Mon Sep 17 00:00:00 2001 From: Sergiotarxz Date: Sun, 2 Apr 2023 21:38:58 +0200 Subject: [PATCH] Adding wss --- js-src/components/page.tsx | 7 ++++++- public/js/bundle.js | 2 +- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/js-src/components/page.tsx b/js-src/components/page.tsx index 9d399c0..252e1f9 100644 --- a/js-src/components/page.tsx +++ b/js-src/components/page.tsx @@ -144,7 +144,12 @@ export default function Page (): JSX.Element { savestateFile.arrayBuffer().then((savestateBuffer) => { const romArray = new Uint8Array(romBuffer) const savestateArray = new Uint8Array(savestateBuffer) - const webSocket = new WebSocket(`ws://${window.location.host}/ws`) + const locationProtocol = window.location.protocol + if (locationProtocol == null) { + return + } + const protocol = locationProtocol.match(/https:/) != null ? 'wss' : 'ws' + const webSocket = new WebSocket(`${protocol}://${window.location.host}/ws`) setWebSocket(webSocket) webSocket.binaryType = 'arraybuffer' webSocket.onclose = (message) => { diff --git a/public/js/bundle.js b/public/js/bundle.js index bd0423e..ac84fc8 100644 --- a/public/js/bundle.js +++ b/public/js/bundle.js @@ -156,7 +156,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac \************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ Page)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _msgba_components_center_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @msgba/components/center-element */ \"./js-src/components/center-element.tsx\");\n/* harmony import */ var _msgba_components_canvas_gba_emulator__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @msgba/components/canvas-gba-emulator */ \"./js-src/components/canvas-gba-emulator.tsx\");\n/* harmony import */ var _msgba_components_overlay_controls__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @msgba/components/overlay-controls */ \"./js-src/components/overlay-controls.tsx\");\n/* harmony import */ var _msgba_components_overlay_menu__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @msgba/components/overlay-menu */ \"./js-src/components/overlay-menu.tsx\");\n/* harmony import */ var _msgba_components_overlay_select_files__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @msgba/components/overlay-select-files */ \"./js-src/components/overlay-select-files.tsx\");\n/* harmony import */ var _msgba_packet__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @msgba/packet */ \"./js-src/packet.ts\");\n/* harmony import */ var _msgba_endian__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @msgba/endian */ \"./js-src/endian.ts\");\n/* harmony import */ var _msgba_constants__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @msgba/constants */ \"./js-src/constants.ts\");\n\n\n\n\n\n\n\n\n\nfunction onWebSocketPacket(event, canvas, ctx, isGBC, setIsGBC, onSaveResponseLambdas) {\n const buffer = event.data;\n let packetU8 = new Uint8Array(buffer);\n const id = _msgba_endian__WEBPACK_IMPORTED_MODULE_7__[\"default\"].byteArrayToU64BigEndian(packetU8.slice(0, 8));\n packetU8 = packetU8.slice(8, packetU8.length);\n const size = _msgba_endian__WEBPACK_IMPORTED_MODULE_7__[\"default\"].byteArrayToU64BigEndian(packetU8.slice(0, 8));\n console.log(size);\n const rawData = packetU8.slice(8, Number(size) + 8);\n console.log(rawData.length);\n packetU8 = null;\n handlePacket(id, rawData, canvas, setIsGBC, onSaveResponseLambdas).catch((error) => {\n console.log('Error handling packet', error);\n });\n}\nasync function handlePacket(id, rawData, canvas, setIsGBC, onSaveResponseLambdas) {\n switch (id) {\n case _msgba_constants__WEBPACK_IMPORTED_MODULE_8__.PACKET_ID_SEND_FRAME:\n (0,_msgba_packet__WEBPACK_IMPORTED_MODULE_6__.handleSendFrame)(rawData, canvas, setIsGBC);\n break;\n case _msgba_constants__WEBPACK_IMPORTED_MODULE_8__.PACKET_ID_SAVE_RESPONSE:\n (0,_msgba_packet__WEBPACK_IMPORTED_MODULE_6__.handleSaveResponse)(rawData, canvas, onSaveResponseLambdas);\n break;\n default:\n throw new Error(`Received unknown packet ${id}`);\n }\n}\nfunction Page() {\n const [isGBC, setIsGBC] = react__WEBPACK_IMPORTED_MODULE_0__.useState(false);\n const screenDimensions = useScreenDimensions(isGBC);\n const emulatorDimensions = calculateSizeEmulator(screenDimensions, isGBC);\n const canvasRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n function resizeCanvas() {\n const canvas = canvasRef.current;\n if (canvas == null) {\n return;\n }\n if (emulatorDimensions.width === undefined || emulatorDimensions.height === undefined) {\n return;\n }\n canvas.width = emulatorDimensions.width;\n canvas.height = emulatorDimensions.height;\n const ctx = canvas.getContext('2d');\n if (ctx == null) {\n return;\n }\n fillBlack(canvas, ctx);\n }\n const [hiddenFormSelectFiles, setHiddenFormSelectFiles] = react__WEBPACK_IMPORTED_MODULE_0__.useState(true);\n react__WEBPACK_IMPORTED_MODULE_0__.useEffect(resizeCanvas, [emulatorDimensions]);\n const refInputRom = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n const refInputSaveState = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n const [emulationStarted, setEmulationStarted] = react__WEBPACK_IMPORTED_MODULE_0__.useState(false);\n const [hiddenMenu, setHiddenMenu] = react__WEBPACK_IMPORTED_MODULE_0__.useState(true);\n const [webSocket, setWebSocket] = react__WEBPACK_IMPORTED_MODULE_0__.useState(null);\n const [onSaveResponseLambdas] = react__WEBPACK_IMPORTED_MODULE_0__.useState(new Map());\n const controlsRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n react__WEBPACK_IMPORTED_MODULE_0__.useEffect(() => {\n console.log('Focusing the main screen');\n setTimeout(() => {\n if (!hiddenFormSelectFiles) {\n if (refInputRom.current != null) {\n refInputRom.current.focus();\n }\n return;\n }\n if (!hiddenMenu) {\n if (firstMenuElement.current != null) {\n firstMenuElement.current.focus();\n }\n return;\n }\n if (controlsRef.current != null && hiddenMenu) {\n controlsRef.current.focus();\n }\n }, 100);\n }, [hiddenMenu, hiddenFormSelectFiles]);\n function handleClickStartEmulationButton(e) {\n e.preventDefault();\n if (canvasRef.current == null) {\n alert('Canvas does not exists?');\n return;\n }\n const ctx = canvasRef.current.getContext('2d');\n if (ctx == null) {\n alert('Unable to create canvas context, doing nothing');\n return;\n }\n const inputRom = refInputRom.current;\n const inputSaveState = refInputSaveState.current;\n if (inputRom == null || inputSaveState == null || inputRom.files == null || inputSaveState.files == null) {\n alert('Unable to read the files ');\n return;\n }\n if (inputRom.files.length === 0) {\n alert('There is no rom still');\n return;\n }\n if (inputSaveState.files.length === 0) {\n alert('There is no savestate still');\n return;\n }\n const romFile = inputRom.files[0];\n const savestateFile = inputSaveState.files[0];\n romFile.arrayBuffer().then((romBuffer) => {\n savestateFile.arrayBuffer().then((savestateBuffer) => {\n const romArray = new Uint8Array(romBuffer);\n const savestateArray = new Uint8Array(savestateBuffer);\n const webSocket = new WebSocket(`ws://${window.location.host}/ws`);\n setWebSocket(webSocket);\n webSocket.binaryType = 'arraybuffer';\n webSocket.onclose = (message) => {\n setEmulationStarted(false);\n console.log('Closing websocket.');\n setWebSocket(null);\n };\n webSocket.onopen = () => {\n console.log('Opened websocket.');\n setEmulationStarted(true);\n (0,_msgba_packet__WEBPACK_IMPORTED_MODULE_6__.sendHello)(webSocket, romArray, savestateArray);\n setHiddenMenu(true);\n setHiddenFormSelectFiles(true);\n };\n webSocket.addEventListener('message', (event) => {\n onWebSocketPacket(event, canvasRef.current, ctx, isGBC, setIsGBC, onSaveResponseLambdas);\n });\n }).catch((c) => {\n console.log('Unable to convert file to array_buffer');\n });\n }).catch((c) => {\n console.log('Unable to convert file to array_buffer');\n });\n }\n const onStartEmulation = (e) => {\n handleClickStartEmulationButton(e);\n };\n const firstMenuElement = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n const screenRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n const [isFullscreen, setIsFullscreen] = react__WEBPACK_IMPORTED_MODULE_0__.useState(false);\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: screenRef },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_msgba_components_overlay_controls__WEBPACK_IMPORTED_MODULE_3__[\"default\"], { controlsRef: controlsRef, firstMenuElement: firstMenuElement, setHiddenMenu: setHiddenMenu, webSocket: webSocket }),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_msgba_components_overlay_menu__WEBPACK_IMPORTED_MODULE_4__[\"default\"], { hiddenMenu: hiddenMenu, setHiddenMenu: setHiddenMenu, emulationStarted: emulationStarted, setHiddenFormSelectFiles: setHiddenFormSelectFiles, screenRef: screenRef, isFullscreen: isFullscreen, setIsFullscreen: setIsFullscreen, firstMenuElement: firstMenuElement, websocket: webSocket, onSaveResponseLambdas: onSaveResponseLambdas }),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_msgba_components_overlay_select_files__WEBPACK_IMPORTED_MODULE_5__[\"default\"], { hiddenFormSelectFiles: hiddenFormSelectFiles, setHiddenFormSelectFiles: setHiddenFormSelectFiles, refInputRom: refInputRom, refInputSaveState: refInputSaveState, onStartEmulation: onStartEmulation }),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", null,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_msgba_components_center_element__WEBPACK_IMPORTED_MODULE_1__[\"default\"], { full: true },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_msgba_components_canvas_gba_emulator__WEBPACK_IMPORTED_MODULE_2__[\"default\"], { canvasRef: canvasRef })))));\n}\nfunction getScreenDimensions() {\n return {\n width: document.body.clientWidth,\n height: document.body.clientHeight\n };\n}\nfunction useScreenDimensions(isGBC) {\n const [screenDimensions, setScreenDimensions] = react__WEBPACK_IMPORTED_MODULE_0__.useState(getScreenDimensions());\n react__WEBPACK_IMPORTED_MODULE_0__.useEffect(() => {\n function onResize() {\n setScreenDimensions(getScreenDimensions());\n }\n window.addEventListener('resize', onResize);\n return () => {\n window.removeEventListener('resize', onResize);\n };\n }, [isGBC]);\n return screenDimensions;\n}\nfunction fillBlack(canvas, ctx) {\n ctx.beginPath();\n ctx.rect(0, 0, canvas.width, canvas.height);\n ctx.fillStyle = '#0E0E10';\n ctx.fill();\n}\n;\nfunction calculateSizeEmulator(screenDimensions, isGBC) {\n if (screenDimensions.width === undefined || screenDimensions.height === undefined) {\n console.error(screenDimensions, 'screenDimensions has undefined fields');\n return {};\n }\n const width = screenDimensions.width;\n const height = screenDimensions.height;\n const emulatorDimensions = {};\n const minWidth = !isGBC ? _msgba_constants__WEBPACK_IMPORTED_MODULE_8__.MIN_WIDTH_GBA : _msgba_constants__WEBPACK_IMPORTED_MODULE_8__.MIN_WIDTH_GBC;\n const minHeight = !isGBC ? _msgba_constants__WEBPACK_IMPORTED_MODULE_8__.MIN_HEIGHT_GBA : _msgba_constants__WEBPACK_IMPORTED_MODULE_8__.MIN_HEIGHT_GBC;\n if (width < minWidth || height < minHeight) {\n return {\n width: minWidth,\n height: minHeight\n };\n }\n const ratioWidth = width / minWidth;\n const ratioHeight = height / minHeight;\n if (ratioWidth < ratioHeight) {\n emulatorDimensions.width = minWidth * ratioWidth;\n emulatorDimensions.height = minHeight * ratioWidth;\n }\n else {\n emulatorDimensions.height = minHeight * ratioHeight;\n emulatorDimensions.width = minWidth * ratioHeight;\n }\n return emulatorDimensions;\n}\n\n\n//# sourceURL=webpack://MSGBA-Web/./js-src/components/page.tsx?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ Page)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _msgba_components_center_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @msgba/components/center-element */ \"./js-src/components/center-element.tsx\");\n/* harmony import */ var _msgba_components_canvas_gba_emulator__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @msgba/components/canvas-gba-emulator */ \"./js-src/components/canvas-gba-emulator.tsx\");\n/* harmony import */ var _msgba_components_overlay_controls__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @msgba/components/overlay-controls */ \"./js-src/components/overlay-controls.tsx\");\n/* harmony import */ var _msgba_components_overlay_menu__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @msgba/components/overlay-menu */ \"./js-src/components/overlay-menu.tsx\");\n/* harmony import */ var _msgba_components_overlay_select_files__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @msgba/components/overlay-select-files */ \"./js-src/components/overlay-select-files.tsx\");\n/* harmony import */ var _msgba_packet__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @msgba/packet */ \"./js-src/packet.ts\");\n/* harmony import */ var _msgba_endian__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @msgba/endian */ \"./js-src/endian.ts\");\n/* harmony import */ var _msgba_constants__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @msgba/constants */ \"./js-src/constants.ts\");\n\n\n\n\n\n\n\n\n\nfunction onWebSocketPacket(event, canvas, ctx, isGBC, setIsGBC, onSaveResponseLambdas) {\n const buffer = event.data;\n let packetU8 = new Uint8Array(buffer);\n const id = _msgba_endian__WEBPACK_IMPORTED_MODULE_7__[\"default\"].byteArrayToU64BigEndian(packetU8.slice(0, 8));\n packetU8 = packetU8.slice(8, packetU8.length);\n const size = _msgba_endian__WEBPACK_IMPORTED_MODULE_7__[\"default\"].byteArrayToU64BigEndian(packetU8.slice(0, 8));\n console.log(size);\n const rawData = packetU8.slice(8, Number(size) + 8);\n console.log(rawData.length);\n packetU8 = null;\n handlePacket(id, rawData, canvas, setIsGBC, onSaveResponseLambdas).catch((error) => {\n console.log('Error handling packet', error);\n });\n}\nasync function handlePacket(id, rawData, canvas, setIsGBC, onSaveResponseLambdas) {\n switch (id) {\n case _msgba_constants__WEBPACK_IMPORTED_MODULE_8__.PACKET_ID_SEND_FRAME:\n (0,_msgba_packet__WEBPACK_IMPORTED_MODULE_6__.handleSendFrame)(rawData, canvas, setIsGBC);\n break;\n case _msgba_constants__WEBPACK_IMPORTED_MODULE_8__.PACKET_ID_SAVE_RESPONSE:\n (0,_msgba_packet__WEBPACK_IMPORTED_MODULE_6__.handleSaveResponse)(rawData, canvas, onSaveResponseLambdas);\n break;\n default:\n throw new Error(`Received unknown packet ${id}`);\n }\n}\nfunction Page() {\n const [isGBC, setIsGBC] = react__WEBPACK_IMPORTED_MODULE_0__.useState(false);\n const screenDimensions = useScreenDimensions(isGBC);\n const emulatorDimensions = calculateSizeEmulator(screenDimensions, isGBC);\n const canvasRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n function resizeCanvas() {\n const canvas = canvasRef.current;\n if (canvas == null) {\n return;\n }\n if (emulatorDimensions.width === undefined || emulatorDimensions.height === undefined) {\n return;\n }\n canvas.width = emulatorDimensions.width;\n canvas.height = emulatorDimensions.height;\n const ctx = canvas.getContext('2d');\n if (ctx == null) {\n return;\n }\n fillBlack(canvas, ctx);\n }\n const [hiddenFormSelectFiles, setHiddenFormSelectFiles] = react__WEBPACK_IMPORTED_MODULE_0__.useState(true);\n react__WEBPACK_IMPORTED_MODULE_0__.useEffect(resizeCanvas, [emulatorDimensions]);\n const refInputRom = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n const refInputSaveState = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n const [emulationStarted, setEmulationStarted] = react__WEBPACK_IMPORTED_MODULE_0__.useState(false);\n const [hiddenMenu, setHiddenMenu] = react__WEBPACK_IMPORTED_MODULE_0__.useState(true);\n const [webSocket, setWebSocket] = react__WEBPACK_IMPORTED_MODULE_0__.useState(null);\n const [onSaveResponseLambdas] = react__WEBPACK_IMPORTED_MODULE_0__.useState(new Map());\n const controlsRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n react__WEBPACK_IMPORTED_MODULE_0__.useEffect(() => {\n console.log('Focusing the main screen');\n setTimeout(() => {\n if (!hiddenFormSelectFiles) {\n if (refInputRom.current != null) {\n refInputRom.current.focus();\n }\n return;\n }\n if (!hiddenMenu) {\n if (firstMenuElement.current != null) {\n firstMenuElement.current.focus();\n }\n return;\n }\n if (controlsRef.current != null && hiddenMenu) {\n controlsRef.current.focus();\n }\n }, 100);\n }, [hiddenMenu, hiddenFormSelectFiles]);\n function handleClickStartEmulationButton(e) {\n e.preventDefault();\n if (canvasRef.current == null) {\n alert('Canvas does not exists?');\n return;\n }\n const ctx = canvasRef.current.getContext('2d');\n if (ctx == null) {\n alert('Unable to create canvas context, doing nothing');\n return;\n }\n const inputRom = refInputRom.current;\n const inputSaveState = refInputSaveState.current;\n if (inputRom == null || inputSaveState == null || inputRom.files == null || inputSaveState.files == null) {\n alert('Unable to read the files ');\n return;\n }\n if (inputRom.files.length === 0) {\n alert('There is no rom still');\n return;\n }\n if (inputSaveState.files.length === 0) {\n alert('There is no savestate still');\n return;\n }\n const romFile = inputRom.files[0];\n const savestateFile = inputSaveState.files[0];\n romFile.arrayBuffer().then((romBuffer) => {\n savestateFile.arrayBuffer().then((savestateBuffer) => {\n const romArray = new Uint8Array(romBuffer);\n const savestateArray = new Uint8Array(savestateBuffer);\n const locationProtocol = window.location.protocol;\n if (locationProtocol == null) {\n return;\n }\n const protocol = locationProtocol.match(/https:/) != null ? 'wss' : 'ws';\n const webSocket = new WebSocket(`${protocol}://${window.location.host}/ws`);\n setWebSocket(webSocket);\n webSocket.binaryType = 'arraybuffer';\n webSocket.onclose = (message) => {\n setEmulationStarted(false);\n console.log('Closing websocket.');\n setWebSocket(null);\n };\n webSocket.onopen = () => {\n console.log('Opened websocket.');\n setEmulationStarted(true);\n (0,_msgba_packet__WEBPACK_IMPORTED_MODULE_6__.sendHello)(webSocket, romArray, savestateArray);\n setHiddenMenu(true);\n setHiddenFormSelectFiles(true);\n };\n webSocket.addEventListener('message', (event) => {\n onWebSocketPacket(event, canvasRef.current, ctx, isGBC, setIsGBC, onSaveResponseLambdas);\n });\n }).catch((c) => {\n console.log('Unable to convert file to array_buffer');\n });\n }).catch((c) => {\n console.log('Unable to convert file to array_buffer');\n });\n }\n const onStartEmulation = (e) => {\n handleClickStartEmulationButton(e);\n };\n const firstMenuElement = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n const screenRef = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n const [isFullscreen, setIsFullscreen] = react__WEBPACK_IMPORTED_MODULE_0__.useState(false);\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { ref: screenRef },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_msgba_components_overlay_controls__WEBPACK_IMPORTED_MODULE_3__[\"default\"], { controlsRef: controlsRef, firstMenuElement: firstMenuElement, setHiddenMenu: setHiddenMenu, webSocket: webSocket }),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_msgba_components_overlay_menu__WEBPACK_IMPORTED_MODULE_4__[\"default\"], { hiddenMenu: hiddenMenu, setHiddenMenu: setHiddenMenu, emulationStarted: emulationStarted, setHiddenFormSelectFiles: setHiddenFormSelectFiles, screenRef: screenRef, isFullscreen: isFullscreen, setIsFullscreen: setIsFullscreen, firstMenuElement: firstMenuElement, websocket: webSocket, onSaveResponseLambdas: onSaveResponseLambdas }),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_msgba_components_overlay_select_files__WEBPACK_IMPORTED_MODULE_5__[\"default\"], { hiddenFormSelectFiles: hiddenFormSelectFiles, setHiddenFormSelectFiles: setHiddenFormSelectFiles, refInputRom: refInputRom, refInputSaveState: refInputSaveState, onStartEmulation: onStartEmulation }),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", null,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_msgba_components_center_element__WEBPACK_IMPORTED_MODULE_1__[\"default\"], { full: true },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_msgba_components_canvas_gba_emulator__WEBPACK_IMPORTED_MODULE_2__[\"default\"], { canvasRef: canvasRef })))));\n}\nfunction getScreenDimensions() {\n return {\n width: document.body.clientWidth,\n height: document.body.clientHeight\n };\n}\nfunction useScreenDimensions(isGBC) {\n const [screenDimensions, setScreenDimensions] = react__WEBPACK_IMPORTED_MODULE_0__.useState(getScreenDimensions());\n react__WEBPACK_IMPORTED_MODULE_0__.useEffect(() => {\n function onResize() {\n setScreenDimensions(getScreenDimensions());\n }\n window.addEventListener('resize', onResize);\n return () => {\n window.removeEventListener('resize', onResize);\n };\n }, [isGBC]);\n return screenDimensions;\n}\nfunction fillBlack(canvas, ctx) {\n ctx.beginPath();\n ctx.rect(0, 0, canvas.width, canvas.height);\n ctx.fillStyle = '#0E0E10';\n ctx.fill();\n}\n;\nfunction calculateSizeEmulator(screenDimensions, isGBC) {\n if (screenDimensions.width === undefined || screenDimensions.height === undefined) {\n console.error(screenDimensions, 'screenDimensions has undefined fields');\n return {};\n }\n const width = screenDimensions.width;\n const height = screenDimensions.height;\n const emulatorDimensions = {};\n const minWidth = !isGBC ? _msgba_constants__WEBPACK_IMPORTED_MODULE_8__.MIN_WIDTH_GBA : _msgba_constants__WEBPACK_IMPORTED_MODULE_8__.MIN_WIDTH_GBC;\n const minHeight = !isGBC ? _msgba_constants__WEBPACK_IMPORTED_MODULE_8__.MIN_HEIGHT_GBA : _msgba_constants__WEBPACK_IMPORTED_MODULE_8__.MIN_HEIGHT_GBC;\n if (width < minWidth || height < minHeight) {\n return {\n width: minWidth,\n height: minHeight\n };\n }\n const ratioWidth = width / minWidth;\n const ratioHeight = height / minHeight;\n if (ratioWidth < ratioHeight) {\n emulatorDimensions.width = minWidth * ratioWidth;\n emulatorDimensions.height = minHeight * ratioWidth;\n }\n else {\n emulatorDimensions.height = minHeight * ratioHeight;\n emulatorDimensions.width = minWidth * ratioHeight;\n }\n return emulatorDimensions;\n}\n\n\n//# sourceURL=webpack://MSGBA-Web/./js-src/components/page.tsx?"); /***/ }),