From d198136df2c99202f34787c86d8edd2ff47b2599 Mon Sep 17 00:00:00 2001 From: Sergiotarxz Date: Fri, 24 Mar 2023 00:56:46 +0100 Subject: [PATCH] Adding menu with close options. --- js-src/components/page.tsx | 14 ++++++++----- public/css/styles.css | 42 ++++++++++++++++++++++++++++++------- public/img/close.png | Bin 0 -> 13251 bytes public/js/bundle.js | 2 +- 4 files changed, 44 insertions(+), 14 deletions(-) create mode 100644 public/img/close.png diff --git a/js-src/components/page.tsx b/js-src/components/page.tsx index a8c1385..f972c0c 100644 --- a/js-src/components/page.tsx +++ b/js-src/components/page.tsx @@ -199,11 +199,15 @@ export default function Page() { }}>Go to menu. (House icon) -
- +
+
+ ) => setHiddenMenu(true)} href="#">Close button, a common 'x' +
+
+ +
diff --git a/public/css/styles.css b/public/css/styles.css index 308f0f2..3468961 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -47,11 +47,8 @@ form label, form input { cursor: pointer; } -.overlay-menu { - background: #343434; - display: flex; - align-items: center; - justify-content: center; +.overlay-menu-div { + background: #0E0E10; font-size: 30px; position: fixed; width: 100%; @@ -64,16 +61,45 @@ form label, form input { cursor: pointer; } -.overlay-menu li { +.overlay-menu-div-header a { + margin-right: 3%; + margin-top: 1.5vh; + font-size: 10px; + width: 23px; + height: 23px; +} + +.overlay-menu-div-header a img { + width: 90%; + height: 90%; +} + +.overlay-menu-div-header { + display: flex; + background: #343434; + height: 5%; + display: flex; + justify-content: end; + align-items: start; +} +.overlay-menu { + justify-content: center; + align-items: center; + display: flex; + width: 100%; + height: 90%; +} + +.overlay-menu-div li { list-style: none; } -.overlay-menu a { +.overlay-menu-div a { color: white; text-decoration: none; } -.overlay-menu li a:hover,.overlay-menu li a:focus { +.overlay-menu-div li a:hover,.overlay-menu li a:focus { color: grey; } diff --git a/public/img/close.png b/public/img/close.png new file mode 100644 index 0000000000000000000000000000000000000000..f3f43b9d8a9fd6d49f2ddf3ec54fc5360bdfe966 GIT binary patch literal 13251 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�JoZ}b3fg!i_z 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 literal 0 HcmV?d00001 diff --git a/public/js/bundle.js b/public/js/bundle.js index e2a22fb..c5460ff 100644 --- a/public/js/bundle.js +++ b/public/js/bundle.js @@ -116,7 +116,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 _components_center_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../components/center-element */ \"./js-src/components/center-element.tsx\");\n/* harmony import */ var _components_form_select_files__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../components/form-select-files */ \"./js-src/components/form-select-files.tsx\");\n/* harmony import */ var _components_canvas_gba_emulator__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../components/canvas-gba-emulator */ \"./js-src/components/canvas-gba-emulator.tsx\");\n/* harmony import */ var _endian__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../endian */ \"./js-src/endian.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../constants */ \"./js-src/constants.ts\");\n\n\n\n\n\n\n;\nfunction handleClickStartEmulationButton({ e, inputRom, inputSaveState, setHiddenFormSelectFiles, canvas, printingFrame, setPrintingFrame }) {\n e.preventDefault();\n if (canvas == null) {\n alert('Canvas does not exists?');\n return;\n }\n const ctx = canvas.getContext('2d');\n if (ctx == null) {\n alert('Unable to create canvas context, doing nothing');\n return;\n }\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 rom_file = inputRom.files[0];\n const savestate_file = inputSaveState.files[0];\n rom_file.arrayBuffer().then((rom_buffer) => {\n savestate_file.arrayBuffer().then((savestate_buffer) => {\n setHiddenFormSelectFiles((c) => true);\n const rom_array = new Uint8Array(rom_buffer);\n const savestate_array = new Uint8Array(savestate_buffer);\n const websocket = new WebSocket(`ws://${window.location.host}/ws`);\n websocket.binaryType = 'arraybuffer';\n websocket.onclose = (message) => {\n setHiddenFormSelectFiles(c => false);\n console.log('Closing websocket.');\n };\n websocket.onopen = () => {\n console.log('Opened websocket.');\n sendHello(websocket, rom_array, savestate_array);\n };\n setPrintingFrame(c => false);\n websocket.addEventListener('message', (event) => {\n onWebSocketPacket(event, canvas, ctx, printingFrame, setPrintingFrame);\n });\n });\n });\n}\nfunction concatU8Array(array1, array2) {\n const final_array = new Uint8Array(array1.length + array2.length);\n final_array.set(array1);\n final_array.set(array2, array1.length);\n return final_array;\n}\nfunction sendPacket(websocket, id, raw_data) {\n const packet_u8 = concatU8Array(concatU8Array(_endian__WEBPACK_IMPORTED_MODULE_4__[\"default\"].u64ToByteArrayBigEndian(id), _endian__WEBPACK_IMPORTED_MODULE_4__[\"default\"].u64ToByteArrayBigEndian(BigInt(raw_data.length))), raw_data);\n const packet_buffer = packet_u8.buffer;\n console.log('Sending packet');\n websocket.send(packet_buffer);\n}\nfunction sendHello(websocket, rom_array, savestate_array) {\n console.log('Sending hello.');\n const length_rom = BigInt(rom_array.length);\n const length_savestate = BigInt(savestate_array.length);\n const raw_data = concatU8Array(concatU8Array(concatU8Array(_endian__WEBPACK_IMPORTED_MODULE_4__[\"default\"].u64ToByteArrayBigEndian(length_rom), rom_array), _endian__WEBPACK_IMPORTED_MODULE_4__[\"default\"].u64ToByteArrayBigEndian(length_savestate)), savestate_array);\n sendPacket(websocket, _constants__WEBPACK_IMPORTED_MODULE_5__.PACKET_ID_HELLO, raw_data);\n}\nfunction onWebSocketPacket(event, canvas, ctx, printingFrame, setPrintingFrame) {\n const buffer = event.data;\n let packet_u8 = new Uint8Array(buffer);\n const id = _endian__WEBPACK_IMPORTED_MODULE_4__[\"default\"].byteArrayToU64BigEndian(packet_u8.slice(0, 8));\n packet_u8 = packet_u8.slice(8, packet_u8.length);\n const size = _endian__WEBPACK_IMPORTED_MODULE_4__[\"default\"].byteArrayToU64BigEndian(packet_u8.slice(0, 8));\n const raw_data = packet_u8.slice(8, packet_u8.length);\n packet_u8 = null;\n switch (id) {\n case _constants__WEBPACK_IMPORTED_MODULE_5__.PACKET_ID_SEND_FRAME:\n handleSendFrame(raw_data, canvas, ctx, printingFrame, setPrintingFrame);\n break;\n default:\n console.log(`Received unknown packet ${id}`);\n }\n}\nfunction handleSendFrame(raw_data, canvas, ctx, printingFrame, setPrintingFrame) {\n if (printingFrame) {\n return;\n }\n setPrintingFrame(c => true);\n let data = raw_data;\n const stride = _endian__WEBPACK_IMPORTED_MODULE_4__[\"default\"].byteArrayToU32BigEndian(data.slice(0, 4));\n data = data.slice(4, data.length);\n const output_buffer_size = _endian__WEBPACK_IMPORTED_MODULE_4__[\"default\"].byteArrayToU64BigEndian(data.slice(0, 8));\n data = data.slice(8, data.length);\n const img_data = ctx.createImageData(_constants__WEBPACK_IMPORTED_MODULE_5__.MIN_WIDTH, _constants__WEBPACK_IMPORTED_MODULE_5__.MIN_HEIGHT);\n const img_data_u8 = new Uint8Array(img_data.data.buffer);\n for (let i = 0; i < data.length; i++) {\n if (i % 4 == 3) {\n img_data_u8[i] = 255;\n continue;\n }\n img_data_u8[i] = data[i];\n }\n data = null;\n createImageBitmap(img_data).then((bitmap) => drawBitmap(bitmap, canvas, ctx, printingFrame));\n}\nfunction drawBitmap(bitmap, canvas, ctx, printingFrame) {\n ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);\n printingFrame = false;\n}\nfunction Page() {\n const screenDimensions = useScreenDimensions();\n const emulatorDimensions = calculateSizeEmulator(screenDimensions);\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 ;\n const [hiddenFormSelectFiles, setHiddenFormSelectFiles] = react__WEBPACK_IMPORTED_MODULE_0__.useState(false);\n const [printingFrame, setPrintingFrame] = react__WEBPACK_IMPORTED_MODULE_0__.useState(false);\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 onStartEmulation = (e) => {\n handleClickStartEmulationButton({\n e: e,\n setHiddenFormSelectFiles: setHiddenFormSelectFiles,\n inputRom: refInputRom.current,\n inputSaveState: refInputSaveState.current,\n canvas: canvasRef.current,\n setPrintingFrame: setPrintingFrame,\n printingFrame: printingFrame,\n });\n };\n const [hiddenMenu, setHiddenMenu] = react__WEBPACK_IMPORTED_MODULE_0__.useState(true);\n let firstMenuElement = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", null,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"overlay\" },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"vertical-padding\" }),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"controls\" },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { ref: firstMenuElement, className: \"gear control\", onClick: (e) => {\n if (firstMenuElement.current == null) {\n console.log('wtf?');\n return;\n }\n firstMenuElement.current.focus();\n setHiddenMenu(false);\n } },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"img\", { src: \"/img/home.png\", alt: \"Go to menu. (House icon)\" })))),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { display: (hiddenMenu ? 'none' : '') }, className: \"overlay-menu\" },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"ul\", null,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"li\", null,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { href: \"#\", onClick: (e) => setHiddenMenu(true) }, \"Exit\")),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"li\", null,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { href: \"#\", onClick: (e) => setHiddenMenu(true) }, \"Exit\")))),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { display: 'none' }, className: \"menu-select-files\" },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_center_element__WEBPACK_IMPORTED_MODULE_1__[\"default\"], null,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_form_select_files__WEBPACK_IMPORTED_MODULE_2__[\"default\"], { refInputRom: refInputRom, refInputSaveState: refInputSaveState, onStartEmulation: (e) => {\n setHiddenMenu(true);\n onStartEmulation(e);\n } }))),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", null,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_center_element__WEBPACK_IMPORTED_MODULE_1__[\"default\"], { full: true },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_canvas_gba_emulator__WEBPACK_IMPORTED_MODULE_3__[\"default\"], { canvasRef: canvasRef })))));\n}\nfunction getScreenDimensions() {\n return {\n width: document.body.clientWidth,\n height: document.body.clientHeight\n };\n}\nfunction useScreenDimensions() {\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 }, []);\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) {\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 if (width < _constants__WEBPACK_IMPORTED_MODULE_5__.MIN_WIDTH || height < _constants__WEBPACK_IMPORTED_MODULE_5__.MIN_HEIGHT) {\n return {\n width: _constants__WEBPACK_IMPORTED_MODULE_5__.MIN_WIDTH,\n height: _constants__WEBPACK_IMPORTED_MODULE_5__.MIN_HEIGHT,\n };\n }\n const ratioWidth = width / _constants__WEBPACK_IMPORTED_MODULE_5__.MIN_WIDTH;\n const ratioHeight = height / _constants__WEBPACK_IMPORTED_MODULE_5__.MIN_HEIGHT;\n if (ratioWidth < ratioHeight) {\n emulatorDimensions.width = _constants__WEBPACK_IMPORTED_MODULE_5__.MIN_WIDTH * ratioWidth;\n emulatorDimensions.height = _constants__WEBPACK_IMPORTED_MODULE_5__.MIN_HEIGHT * ratioWidth;\n }\n else {\n emulatorDimensions.height = _constants__WEBPACK_IMPORTED_MODULE_5__.MIN_HEIGHT * ratioHeight;\n emulatorDimensions.width = _constants__WEBPACK_IMPORTED_MODULE_5__.MIN_WIDTH * 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 _components_center_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../components/center-element */ \"./js-src/components/center-element.tsx\");\n/* harmony import */ var _components_form_select_files__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../components/form-select-files */ \"./js-src/components/form-select-files.tsx\");\n/* harmony import */ var _components_canvas_gba_emulator__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../components/canvas-gba-emulator */ \"./js-src/components/canvas-gba-emulator.tsx\");\n/* harmony import */ var _endian__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../endian */ \"./js-src/endian.ts\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../constants */ \"./js-src/constants.ts\");\n\n\n\n\n\n\n;\nfunction handleClickStartEmulationButton({ e, inputRom, inputSaveState, setHiddenFormSelectFiles, canvas, printingFrame, setPrintingFrame }) {\n e.preventDefault();\n if (canvas == null) {\n alert('Canvas does not exists?');\n return;\n }\n const ctx = canvas.getContext('2d');\n if (ctx == null) {\n alert('Unable to create canvas context, doing nothing');\n return;\n }\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 rom_file = inputRom.files[0];\n const savestate_file = inputSaveState.files[0];\n rom_file.arrayBuffer().then((rom_buffer) => {\n savestate_file.arrayBuffer().then((savestate_buffer) => {\n setHiddenFormSelectFiles((c) => true);\n const rom_array = new Uint8Array(rom_buffer);\n const savestate_array = new Uint8Array(savestate_buffer);\n const websocket = new WebSocket(`ws://${window.location.host}/ws`);\n websocket.binaryType = 'arraybuffer';\n websocket.onclose = (message) => {\n setHiddenFormSelectFiles(c => false);\n console.log('Closing websocket.');\n };\n websocket.onopen = () => {\n console.log('Opened websocket.');\n sendHello(websocket, rom_array, savestate_array);\n };\n setPrintingFrame(c => false);\n websocket.addEventListener('message', (event) => {\n onWebSocketPacket(event, canvas, ctx, printingFrame, setPrintingFrame);\n });\n });\n });\n}\nfunction concatU8Array(array1, array2) {\n const final_array = new Uint8Array(array1.length + array2.length);\n final_array.set(array1);\n final_array.set(array2, array1.length);\n return final_array;\n}\nfunction sendPacket(websocket, id, raw_data) {\n const packet_u8 = concatU8Array(concatU8Array(_endian__WEBPACK_IMPORTED_MODULE_4__[\"default\"].u64ToByteArrayBigEndian(id), _endian__WEBPACK_IMPORTED_MODULE_4__[\"default\"].u64ToByteArrayBigEndian(BigInt(raw_data.length))), raw_data);\n const packet_buffer = packet_u8.buffer;\n console.log('Sending packet');\n websocket.send(packet_buffer);\n}\nfunction sendHello(websocket, rom_array, savestate_array) {\n console.log('Sending hello.');\n const length_rom = BigInt(rom_array.length);\n const length_savestate = BigInt(savestate_array.length);\n const raw_data = concatU8Array(concatU8Array(concatU8Array(_endian__WEBPACK_IMPORTED_MODULE_4__[\"default\"].u64ToByteArrayBigEndian(length_rom), rom_array), _endian__WEBPACK_IMPORTED_MODULE_4__[\"default\"].u64ToByteArrayBigEndian(length_savestate)), savestate_array);\n sendPacket(websocket, _constants__WEBPACK_IMPORTED_MODULE_5__.PACKET_ID_HELLO, raw_data);\n}\nfunction onWebSocketPacket(event, canvas, ctx, printingFrame, setPrintingFrame) {\n const buffer = event.data;\n let packet_u8 = new Uint8Array(buffer);\n const id = _endian__WEBPACK_IMPORTED_MODULE_4__[\"default\"].byteArrayToU64BigEndian(packet_u8.slice(0, 8));\n packet_u8 = packet_u8.slice(8, packet_u8.length);\n const size = _endian__WEBPACK_IMPORTED_MODULE_4__[\"default\"].byteArrayToU64BigEndian(packet_u8.slice(0, 8));\n const raw_data = packet_u8.slice(8, packet_u8.length);\n packet_u8 = null;\n switch (id) {\n case _constants__WEBPACK_IMPORTED_MODULE_5__.PACKET_ID_SEND_FRAME:\n handleSendFrame(raw_data, canvas, ctx, printingFrame, setPrintingFrame);\n break;\n default:\n console.log(`Received unknown packet ${id}`);\n }\n}\nfunction handleSendFrame(raw_data, canvas, ctx, printingFrame, setPrintingFrame) {\n if (printingFrame) {\n return;\n }\n setPrintingFrame(c => true);\n let data = raw_data;\n const stride = _endian__WEBPACK_IMPORTED_MODULE_4__[\"default\"].byteArrayToU32BigEndian(data.slice(0, 4));\n data = data.slice(4, data.length);\n const output_buffer_size = _endian__WEBPACK_IMPORTED_MODULE_4__[\"default\"].byteArrayToU64BigEndian(data.slice(0, 8));\n data = data.slice(8, data.length);\n const img_data = ctx.createImageData(_constants__WEBPACK_IMPORTED_MODULE_5__.MIN_WIDTH, _constants__WEBPACK_IMPORTED_MODULE_5__.MIN_HEIGHT);\n const img_data_u8 = new Uint8Array(img_data.data.buffer);\n for (let i = 0; i < data.length; i++) {\n if (i % 4 == 3) {\n img_data_u8[i] = 255;\n continue;\n }\n img_data_u8[i] = data[i];\n }\n data = null;\n createImageBitmap(img_data).then((bitmap) => drawBitmap(bitmap, canvas, ctx, printingFrame));\n}\nfunction drawBitmap(bitmap, canvas, ctx, printingFrame) {\n ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);\n printingFrame = false;\n}\nfunction Page() {\n const screenDimensions = useScreenDimensions();\n const emulatorDimensions = calculateSizeEmulator(screenDimensions);\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 ;\n const [hiddenFormSelectFiles, setHiddenFormSelectFiles] = react__WEBPACK_IMPORTED_MODULE_0__.useState(false);\n const [printingFrame, setPrintingFrame] = react__WEBPACK_IMPORTED_MODULE_0__.useState(false);\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 onStartEmulation = (e) => {\n handleClickStartEmulationButton({\n e: e,\n setHiddenFormSelectFiles: setHiddenFormSelectFiles,\n inputRom: refInputRom.current,\n inputSaveState: refInputSaveState.current,\n canvas: canvasRef.current,\n setPrintingFrame: setPrintingFrame,\n printingFrame: printingFrame,\n });\n };\n const [hiddenMenu, setHiddenMenu] = react__WEBPACK_IMPORTED_MODULE_0__.useState(true);\n let firstMenuElement = react__WEBPACK_IMPORTED_MODULE_0__.useRef(null);\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", null,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"overlay\" },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"vertical-padding\" }),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"controls\" },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { ref: firstMenuElement, className: \"gear control\", onClick: (e) => {\n if (firstMenuElement.current == null) {\n console.log('wtf?');\n return;\n }\n firstMenuElement.current.focus();\n setHiddenMenu(false);\n } },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"img\", { src: \"/img/home.png\", alt: \"Go to menu. (House icon)\" })))),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { display: (hiddenMenu ? 'none' : '') }, className: \"overlay-menu-div\" },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"overlay-menu-div-header\" },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { onClick: (e) => setHiddenMenu(true), href: \"#\" },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"img\", { src: \"/img/close.png\", alt: \"Close button, a common 'x'\" }))),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"overlay-menu\" },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"ul\", null,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"li\", null,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { href: \"#\", onClick: (e) => setHiddenMenu(true) }, \"Exit\"))))),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { style: { display: 'none' }, className: \"menu-select-files\" },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_center_element__WEBPACK_IMPORTED_MODULE_1__[\"default\"], null,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_form_select_files__WEBPACK_IMPORTED_MODULE_2__[\"default\"], { refInputRom: refInputRom, refInputSaveState: refInputSaveState, onStartEmulation: (e) => {\n setHiddenMenu(true);\n onStartEmulation(e);\n } }))),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", null,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_center_element__WEBPACK_IMPORTED_MODULE_1__[\"default\"], { full: true },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_canvas_gba_emulator__WEBPACK_IMPORTED_MODULE_3__[\"default\"], { canvasRef: canvasRef })))));\n}\nfunction getScreenDimensions() {\n return {\n width: document.body.clientWidth,\n height: document.body.clientHeight\n };\n}\nfunction useScreenDimensions() {\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 }, []);\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) {\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 if (width < _constants__WEBPACK_IMPORTED_MODULE_5__.MIN_WIDTH || height < _constants__WEBPACK_IMPORTED_MODULE_5__.MIN_HEIGHT) {\n return {\n width: _constants__WEBPACK_IMPORTED_MODULE_5__.MIN_WIDTH,\n height: _constants__WEBPACK_IMPORTED_MODULE_5__.MIN_HEIGHT,\n };\n }\n const ratioWidth = width / _constants__WEBPACK_IMPORTED_MODULE_5__.MIN_WIDTH;\n const ratioHeight = height / _constants__WEBPACK_IMPORTED_MODULE_5__.MIN_HEIGHT;\n if (ratioWidth < ratioHeight) {\n emulatorDimensions.width = _constants__WEBPACK_IMPORTED_MODULE_5__.MIN_WIDTH * ratioWidth;\n emulatorDimensions.height = _constants__WEBPACK_IMPORTED_MODULE_5__.MIN_HEIGHT * ratioWidth;\n }\n else {\n emulatorDimensions.height = _constants__WEBPACK_IMPORTED_MODULE_5__.MIN_HEIGHT * ratioHeight;\n emulatorDimensions.width = _constants__WEBPACK_IMPORTED_MODULE_5__.MIN_WIDTH * ratioHeight;\n }\n return emulatorDimensions;\n}\n\n\n//# sourceURL=webpack://MSGBA-Web/./js-src/components/page.tsx?"); /***/ }),