Reworking the front, the code is a mess right now, but commiting to

avoid losing changes.

js-src/components/center-element.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 export interface CenterElementProps {
     hidden?: boolean | undefined,
     children?: React.ReactNode,
+    full?: boolean | undefined;
 }
 
 type IHash = { 
@@ -16,7 +17,11 @@ export default function CenterElement(props: CenterElementProps) {
 	hidden = false;
     }
     styles["display"] = hidden ? 'none' : '';
+    let fullClassName = '';
+    if (props.full !== undefined && props.full) {
+        fullClassName = 'full-height';
+    }
     return (
-        <div style={styles} className="center-content">{props.children}</div>
+        <div style={styles} className={`center-content ${fullClassName}`}>{props.children}</div>
     );
 }

js-src/components/page.tsx

@@ -21,6 +21,7 @@ export interface handleClickStartEmulationButtonObjectArgs {
 };
 
 function handleClickStartEmulationButton({e, inputRom, inputSaveState, setHiddenFormSelectFiles, canvas, printingFrame, setPrintingFrame}: handleClickStartEmulationButtonObjectArgs) {
+    e.preventDefault();
     if (canvas == null) {
         alert('Canvas does not exists?');
         return;
@@ -49,7 +50,7 @@ function handleClickStartEmulationButton({e, inputRom, inputSaveState, setHidden
             setHiddenFormSelectFiles((c: boolean) => true);
             const rom_array = new Uint8Array(rom_buffer);
             const savestate_array = new Uint8Array(savestate_buffer);
-            const websocket = new WebSocket(`ws://localhost:3000/ws`);
+            const websocket = new WebSocket(`ws://${window.location.host}/ws`);
             websocket.binaryType = 'arraybuffer';
             websocket.onclose = (message) => {
                 setHiddenFormSelectFiles(c => false);
@@ -180,20 +181,45 @@ export default function Page() {
             printingFrame: printingFrame,
         });
     };
+    const [hiddenMenu, setHiddenMenu] = React.useState<boolean>(true);
+    let firstMenuElement = React.useRef<HTMLAnchorElement>(null);
     return (
         <div>
-            <CenterElement>
-                <h2>msGBA Online Emulator for GBA.</h2>
-            </CenterElement>
-            <CenterElement>
-                    <CanvasGBAEmulator canvasRef={canvasRef}/>
-            </CenterElement>
-            <CenterElement hidden={hiddenFormSelectFiles}>
-                <FormSelectFiles refInputRom={refInputRom}
-		    refInputSaveState={refInputSaveState}
-		    onStartEmulation={onStartEmulation}/>
-            </CenterElement>
-
+            <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">
+                <ul>
+                    <li><a href="#" onClick={(e: React.MouseEvent<HTMLElement>) => setHiddenMenu(true)}>Exit</a></li>
+                    <li><a href="#" onClick={(e: React.MouseEvent<HTMLElement>) => setHiddenMenu(true)}>Exit</a></li>
+                </ul>
+            </div>
+            <div style={{display: 'none'}} className="menu-select-files">
+                <CenterElement>
+                    <FormSelectFiles refInputRom={refInputRom}
+                        refInputSaveState={refInputSaveState}
+                        onStartEmulation={(e: React.MouseEvent<HTMLInputElement>) => {
+                            setHiddenMenu(true);
+                            onStartEmulation(e)
+                        }}/>
+                </CenterElement>
+            </div>
+            <div>
+                <CenterElement full={true}>
+                        <CanvasGBAEmulator canvasRef={canvasRef}/>
+                </CenterElement>
+            </div>
         </div>
     );
 }
@@ -226,7 +252,7 @@ function useScreenDimensions() {
 function fillBlack(canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D) {
     ctx.beginPath();
     ctx.rect(0, 0, canvas.width, canvas.height);
-    ctx.fillStyle = 'black';
+    ctx.fillStyle = '#0E0E10';
     ctx.fill();
 }
 
@@ -240,7 +266,7 @@ function calculateSizeEmulator(screenDimensions: EmulatorDimensions): EmulatorDi
         return {};
     }
     const width = screenDimensions.width;
-    const height = screenDimensions.height * 0.75;
+    const height = screenDimensions.height;
     const emulatorDimensions: EmulatorDimensions = {};
     if (width < MIN_WIDTH || height < MIN_HEIGHT) {
         return {
@@ -248,8 +274,8 @@ function calculateSizeEmulator(screenDimensions: EmulatorDimensions): EmulatorDi
             height: MIN_HEIGHT,
         };
     }
-    const ratioWidth = Math.floor(width / MIN_WIDTH);
-    const ratioHeight = Math.floor(height / MIN_HEIGHT);
+    const ratioWidth = width / MIN_WIDTH;
+    const ratioHeight = height / MIN_HEIGHT;
     if (ratioWidth < ratioHeight) {
         emulatorDimensions.width = MIN_WIDTH * ratioWidth;
         emulatorDimensions.height = MIN_HEIGHT * ratioWidth;

public/css/styles.css

@@ -1,4 +1,7 @@
 body {
+    background: #0E0E10;
+    color: #F5F5F5;
+    margin: 0;
     min-height: 100vh;
 }
 
@@ -10,8 +13,95 @@ body
 .center-content {
     display: flex;
     justify-content: center;
+    align-items: center;
+}
+
+.full-height {
 }
 form label, form input {
     display: block;
 }
 
+.overlay {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 2;
+    cursor: pointer;
+}
+
+.menu-select-files {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    background: #343434;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 4;
+    cursor: pointer;
+}
+
+.overlay-menu {
+    background: #343434;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 30px;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 3;
+    cursor: pointer;
+}
+
+.overlay-menu li {
+    list-style: none;
+}
+
+.overlay-menu a {
+    color: white;
+    text-decoration: none;
+}
+
+.overlay-menu li a:hover,.overlay-menu li a:focus {
+    color: grey;
+}
+
+.overlay > div.vertical-padding {
+    height: 50%;
+}
+
+.overlay > div.controls {
+    position: relative;
+    height: 50%;
+}
+
+.overlay > div.controls > a.gear img {
+    width: 70%;
+}
+.overlay > div.controls > a.gear {
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, 0);
+    width: 60px;
+    height: 60px;
+    display: flex;
+    justify-content: center;
+    border-radius: 50%;
+}
+.overlay > div.controls > a.control {
+    position: absolute;
+    background: #343434;
+    border: none;
+    opacity: 75%;
+}

public/index.html

@@ -2,6 +2,7 @@
 <html>
     <head>
 	<link rel="stylesheet" href="/css/styles.css"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
     </head>
     <body>
 	<script src="/js/bundle.js"></script>