Adding the complete load of game flow with the new design.

js-src/components/page.tsx

@@ -165,7 +165,7 @@ export default function Page() {
         }
         fillBlack(canvas, ctx);        
     };
-    const [hiddenFormSelectFiles, setHiddenFormSelectFiles] = React.useState<boolean>(false);
+    const [hiddenFormSelectFiles, setHiddenFormSelectFiles] = React.useState<boolean>(true);
     const [printingFrame, setPrintingFrame] = React.useState<boolean>(false);
     React.useEffect(resizeCanvas, [emulatorDimensions]);
     const refInputRom = React.useRef<HTMLInputElement | null>(null);
@@ -182,6 +182,7 @@ export default function Page() {
         });
     };
     const [hiddenMenu, setHiddenMenu] = React.useState<boolean>(true);
+    const [emulationStarted, setEmulationStarted] = React.useState<boolean>(false);
     let firstMenuElement = React.useRef<HTMLAnchorElement>(null);
     return (
         <div>
@@ -205,19 +206,27 @@ export default function Page() {
                 </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>
-            <div style={{display: 'none'}} className="menu-select-files">
+            <div style={{display: hiddenFormSelectFiles?'none':''}} className="overlay-menu-select-files overlay-menu-div">
-                <CenterElement>
+                <div className="overlay-menu-div-header">
-                    <FormSelectFiles refInputRom={refInputRom}
+                    <a onClick={(e: React.MouseEvent<HTMLElement>) => setHiddenFormSelectFiles(true)} href="#"><img src="/img/close.png" alt="Close button, a common 'x'"/></a>
-                        refInputSaveState={refInputSaveState}
+                </div>
-                        onStartEmulation={(e: React.MouseEvent<HTMLInputElement>) => {
+                <div className="overlay-menu">
-                            setHiddenMenu(true);
+                    <CenterElement>
-                            onStartEmulation(e)
+                        <FormSelectFiles refInputRom={refInputRom}
-                        }}/>
+                            refInputSaveState={refInputSaveState}
-                </CenterElement>
+                            onStartEmulation={(e: React.MouseEvent<HTMLInputElement>) => {
+                                setHiddenFormSelectFiles(true);
+                                setHiddenMenu(true);
+                                setEmulationStarted(true);
+                                onStartEmulation(e)
+                            }}/>
+                    </CenterElement>
+                </div>
             </div>
             <div>
                 <CenterElement full={true}>

public/css/styles.css

@@ -34,19 +34,6 @@ form label, form input {
     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-div {
     background: #0E0E10;
     font-size: 30px;
@@ -131,3 +118,8 @@ form label, form input {
     border: none;
     opacity: 75%;
 }
+
+.overlay-menu-select-files {
+    z-index: 4;
+    font-size: 20px;
+}