sergiotarxz
/
msgba-web
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Refactoring a little the mess of everything in page.tsx

This commit is contained in:
Sergiotarxz 2023-03-24 03:22:21 +01:00
parent 996099f11b
commit 6451aebe6e
6 changed files with 146 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
js-src/components/close-button.tsx Normal file
View File

@ -0,0 +1,12 @@
import * as React from 'react';
import {CLOSE_BUTTON_IMAGE} from '/constants';
export interface CloseButtonProps {
onClick: () => void;
};
export default function CloseButton({onClick}: CloseButtonProps) {
return (
<a onClick={onClick} href="#"><img src={CLOSE_BUTTON_IMAGE} alt="Close button, a common 'x'"/></a>
);
}

28
js-src/components/overlay-controls.tsx Normal file
View File

@ -0,0 +1,28 @@
import * as React from 'react';
import {HOME_BUTTON_IMAGE} from '/constants';
export interface OverlayControlsProps {
firstMenuElement: React.RefObject<HTMLAnchorElement>,
setHiddenMenu: (c: boolean) => void,
};
export default function OverlayControls({firstMenuElement, setHiddenMenu}: OverlayControlsProps) {
function showOverlayMenu() {
if (firstMenuElement.current == null) {
return;
}
firstMenuElement.current.focus();
setHiddenMenu(false);
}
return (
<div className="overlay">
<div className="vertical-padding">
</div>
<div className="controls">
<a ref={firstMenuElement} className="gear control" onClick={showOverlayMenu}>
<img src={HOME_BUTTON_IMAGE} alt="Go to menu. (House icon)"/>
</a>
</div>
</div>
);
}

48
js-src/components/overlay-menu.tsx Normal file
View File

@ -0,0 +1,48 @@
import * as React from 'react';
import CloseButton from '/components/close-button';
import {CLOSE_BUTTON_IMAGE} from '/constants';
export interface OverlayMenuProps {
hiddenMenu: boolean,
setHiddenMenu: (c: boolean) => void,
emulationStarted: boolean,
setHiddenFormSelectFiles: (c: boolean) => void,
};
interface Style {
[id: string]: string;
};
export default function OverlayMenu({hiddenMenu, setHiddenMenu, emulationStarted, setHiddenFormSelectFiles}: OverlayMenuProps) {
function exitMenu() {
setHiddenMenu(true);
}
function openSelectFilesMenu() {
setHiddenFormSelectFiles(false);
}
const styleSelectRom: Style = {};
if (emulationStarted) {
styleSelectRom.display = 'none';
}
const styleMenu: Style = {};
if (hiddenMenu) {
styleMenu.display = 'none';
}
return (
<div style={styleMenu} className="overlay-menu-div">
<div className="overlay-menu-div-header">
<CloseButton onClick={exitMenu}/>
</div>
<div className="overlay-menu">
<ul>
<li><a style={styleSelectRom} onClick={openSelectFilesMenu} href="#">Select rom</a></li>
<li><a href="#" onClick={exitMenu}>Exit</a></li>
</ul>
</div>
</div>
);
}

57
js-src/components/page.tsx
View File

@ -3,6 +3,9 @@ import * as React from 'react';
import CenterElement from '/components/center-element';
import FormSelectFiles from '/components/form-select-files';
import CanvasGBAEmulator from '/components/canvas-gba-emulator';
import OverlayControls from '/components/overlay-controls';
import OverlayMenu from '/components/overlay-menu';
import CloseButton from '/components/close-button';
import Endian from '/endian';
@ -14,13 +17,17 @@ export interface handleClickStartEmulationButtonObjectArgs {
e: React.MouseEvent<HTMLInputElement>;
inputRom: HTMLInputElement | null;
inputSaveState: HTMLInputElement | null;
setHiddenFormSelectFiles: (c: setBooleanCallback) => void;
canvas: HTMLCanvasElement | null;
printingFrame: boolean;
setPrintingFrame: (c: setBooleanCallback) => void;
setEmulationStarted: (c: boolean) => void,
setHiddenMenu: (c: boolean) => void;
setHiddenFormSelectFiles: (c: boolean) => void;
};
function handleClickStartEmulationButton({e, inputRom, inputSaveState, setHiddenFormSelectFiles, canvas, printingFrame, setPrintingFrame}: handleClickStartEmulationButtonObjectArgs) {
function handleClickStartEmulationButton({e, inputRom, inputSaveState, canvas, printingFrame,
setPrintingFrame, setEmulationStarted, setHiddenMenu,
setHiddenFormSelectFiles}: handleClickStartEmulationButtonObjectArgs) {
e.preventDefault();
if (canvas == null) {
alert('Canvas does not exists?');
@ -47,18 +54,20 @@ function handleClickStartEmulationButton({e, inputRom, inputSaveState, setHidden
const savestate_file = inputSaveState.files[0];
rom_file.arrayBuffer().then((rom_buffer) => {
savestate_file.arrayBuffer().then((savestate_buffer) => {
setHiddenFormSelectFiles((c: boolean) => true);
const rom_array = new Uint8Array(rom_buffer);
const savestate_array = new Uint8Array(savestate_buffer);
const websocket = new WebSocket(`ws://${window.location.host}/ws`);
websocket.binaryType = 'arraybuffer';
websocket.onclose = (message) => {
setHiddenFormSelectFiles(c => false);
setEmulationStarted(false);
console.log('Closing websocket.');
}
websocket.onopen = () => {
console.log('Opened websocket.');
setEmulationStarted(true);
sendHello(websocket, rom_array, savestate_array);
setHiddenMenu(true);
setHiddenFormSelectFiles(true);
};
setPrintingFrame(c => false);
websocket.addEventListener('message', (event) => {
@ -170,59 +179,35 @@ export default function Page() {
React.useEffect(resizeCanvas, [emulatorDimensions]);
const refInputRom = React.useRef<HTMLInputElement | null>(null);
const refInputSaveState = React.useRef<HTMLInputElement | null>(null);
const [emulationStarted, setEmulationStarted] = React.useState<boolean>(false);
const [hiddenMenu, setHiddenMenu] = React.useState<boolean>(true);
const onStartEmulation = (e: React.MouseEvent<HTMLInputElement>) => {
handleClickStartEmulationButton({
e: e,
setHiddenFormSelectFiles: setHiddenFormSelectFiles,
setEmulationStarted: setEmulationStarted,
inputRom: refInputRom.current,
inputSaveState: refInputSaveState.current,
canvas: canvasRef.current,
setPrintingFrame: setPrintingFrame,
printingFrame: printingFrame,
setHiddenMenu: setHiddenMenu,
setHiddenFormSelectFiles: setHiddenFormSelectFiles,
});
};
const [hiddenMenu, setHiddenMenu] = React.useState<boolean>(true);
const [emulationStarted, setEmulationStarted] = React.useState<boolean>(false);
let firstMenuElement = React.useRef<HTMLAnchorElement>(null);
return (
<div>
<div className="overlay">
<div className="vertical-padding">
</div>
<div className="controls">
<a ref={firstMenuElement} className="gear control" onClick={(e: React.MouseEvent<HTMLElement>) => {
if (firstMenuElement.current == null) {
console.log('wtf?');
return;
}
firstMenuElement.current.focus();
setHiddenMenu(false);
}}><img src="/img/home.png" alt="Go to menu. (House icon)"/></a>
</div>
</div>
<div style={{display: (hiddenMenu ? 'none': '')}} className="overlay-menu-div">
<div className="overlay-menu-div-header">
<a onClick={(e: React.MouseEvent<HTMLElement>) => setHiddenMenu(true)} href="#"><img src="/img/close.png" alt="Close button, a common 'x'"/></a>
</div>
<div className="overlay-menu">
<ul>
<li><a style={{display: emulationStarted?'none':''}} onClick={(e: React.MouseEvent<HTMLElement>) => setHiddenFormSelectFiles(false)} href="#">Select rom</a></li>
<li><a href="#" onClick={(e: React.MouseEvent<HTMLElement>) => setHiddenMenu(true)}>Exit</a></li>
</ul>
</div>
</div>
<OverlayControls firstMenuElement={firstMenuElement} setHiddenMenu={setHiddenMenu}/>
<OverlayMenu hiddenMenu={hiddenMenu} setHiddenMenu={setHiddenMenu} emulationStarted={emulationStarted} setHiddenFormSelectFiles={setHiddenFormSelectFiles}/>
<div style={{display: hiddenFormSelectFiles?'none':''}} className="overlay-menu-select-files overlay-menu-div">
<div className="overlay-menu-div-header">
<a onClick={(e: React.MouseEvent<HTMLElement>) => setHiddenFormSelectFiles(true)} href="#"><img src="/img/close.png" alt="Close button, a common 'x'"/></a>
<CloseButton onClick={() => setHiddenFormSelectFiles(true)}/>
</div>
<div className="overlay-menu">
<CenterElement>
<FormSelectFiles refInputRom={refInputRom}
refInputSaveState={refInputSaveState}
onStartEmulation={(e: React.MouseEvent<HTMLInputElement>) => {
setHiddenFormSelectFiles(true);
setHiddenMenu(true);
setEmulationStarted(true);
onStartEmulation(e)
}}/>
</CenterElement>

10
js-src/constants.ts
View File

@ -2,14 +2,14 @@ export const MIN_WIDTH = 240;
export const MIN_HEIGHT = 160;
export const PACKET_ID_HELLO = 0n;
export const PACKET_ID_SEND_FRAME = 1n;
export const CLOSE_BUTTON_IMAGE: string = "/img/close.png";
export const HOME_BUTTON_IMAGE: string = "/img/home.png";
export default class Constants {
public static MIN_WIDTH: number = MIN_WIDTH;
public static MIN_HEIGHT: number = MIN_HEIGHT;
public static PACKET_ID_HELLO: bigint = PACKET_ID_HELLO;
public static PACKET_ID_SEND_FRAME: bigint = PACKET_ID_SEND_FRAME;
public static CLOSE_BUTTON_IMAGE: string = CLOSE_BUTTON_IMAGE;
public static HOME_BUTTON_IMAGE: string = HOME_BUTTON_IMAGE;
};
Constants.MIN_WIDTH = MIN_WIDTH;
Constants.MIN_HEIGHT = MIN_HEIGHT;
Constants.PACKET_ID_HELLO = PACKET_ID_HELLO;
Constants.PACKET_ID_SEND_FRAME = PACKET_ID_SEND_FRAME;

34
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long