More refactor, making working focus() in first element of menu and adding example buttons.

js-src/components/overlay-controls.tsx

@@ -8,20 +8,24 @@ export interface OverlayControlsProps {
 
 export default function OverlayControls({firstMenuElement, setHiddenMenu}: OverlayControlsProps) {
     function showOverlayMenu() {
-        if (firstMenuElement.current == null) {
-            return;
-        }
-        firstMenuElement.current.focus();
         setHiddenMenu(false);
+        setTimeout(() => {
+            if (firstMenuElement.current == null) {
+                return;
+            }
+            firstMenuElement.current.focus();
+        }, 100);
     }
     return (
         <div className="overlay">
             <div className="vertical-padding">
             </div>
             <div className="controls">
-                <a ref={firstMenuElement} className="gear control" onClick={showOverlayMenu}>
+                <a href="#" className="gear control" onClick={showOverlayMenu}>
                     <img src={HOME_BUTTON_IMAGE} alt="Go to menu. (House icon)"/>
                 </a>
+                <a href="#" className="control-a control control-button">A</a>
+                <a href="#" className="control-b control control-button">B</a>
             </div>
         </div>
     );

js-src/components/overlay-menu.tsx

@@ -7,13 +7,19 @@ export interface OverlayMenuProps {
     setHiddenMenu: (c: boolean) => void,
     emulationStarted: boolean,
     setHiddenFormSelectFiles: (c: boolean) => void,
+    screenRef: React.RefObject<HTMLDivElement>;
+    isFullscreen: boolean;
+    setIsFullscreen: (c:boolean) => void;
+    firstMenuElement: React.RefObject<HTMLAnchorElement>,
 };
 
 interface Style {
     [id: string]: string;
 };
 
-export default function OverlayMenu({hiddenMenu, setHiddenMenu, emulationStarted, setHiddenFormSelectFiles}: OverlayMenuProps) {
+export default function OverlayMenu({hiddenMenu, setHiddenMenu, emulationStarted,
+        setHiddenFormSelectFiles, screenRef, isFullscreen, setIsFullscreen,
+        firstMenuElement}: OverlayMenuProps) {
     function exitMenu() {
         setHiddenMenu(true);
     }
@@ -22,6 +28,20 @@ export default function OverlayMenu({hiddenMenu, setHiddenMenu, emulationStarted
         setHiddenFormSelectFiles(false);
     }
 
+    function toggleFullscreen() {
+        if (isFullscreen) {
+            document.exitFullscreen();
+            setIsFullscreen(false);
+            return;
+        }
+
+        if (screenRef.current != null) {
+            screenRef.current.requestFullscreen().then(() => {
+                setIsFullscreen(true);
+            });
+        }
+    }
+
     const styleSelectRom: Style = {};
     if (emulationStarted) {
         styleSelectRom.display = 'none';
@@ -31,6 +51,10 @@ export default function OverlayMenu({hiddenMenu, setHiddenMenu, emulationStarted
     if (hiddenMenu) {
         styleMenu.display = 'none';
     }
+    let toggleFullscreenText: string = 'Set fullscreen';
+    if (isFullscreen) {
+        toggleFullscreenText = 'End fullscreen';
+    }
 
     return (
         <div style={styleMenu} className="overlay-menu-div">
@@ -39,7 +63,8 @@ export default function OverlayMenu({hiddenMenu, setHiddenMenu, emulationStarted
             </div>
             <div className="overlay-menu">
                 <ul>
-                    <li><a style={styleSelectRom} onClick={openSelectFilesMenu} href="#">Select rom</a></li>
+                    <li><a ref={firstMenuElement} style={styleSelectRom} onClick={openSelectFilesMenu} href="#">Select rom</a></li>
+                    <li><a onClick={toggleFullscreen} href="#">{toggleFullscreenText}</a></li>
                     <li><a href="#" onClick={exitMenu}>Exit</a></li>
                 </ul>
             </div>

js-src/components/overlay-select-files.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+
+import CloseButton from '/components/close-button';
+import CenterElement from '/components/center-element';
+import FormSelectFiles from '/components/form-select-files';
+
+export interface OverlaySelectFilesProps {
+    hiddenFormSelectFiles: boolean;
+    setHiddenFormSelectFiles: (c: boolean) => void;
+    refInputRom: React.RefObject<HTMLInputElement>;
+    refInputSaveState: React.RefObject<HTMLInputElement>;
+    onStartEmulation: (e: React.MouseEvent<HTMLInputElement>) => void;
+};
+
+interface Style {
+    [id: string]: string;
+};
+
+export default function OverlaySelectFiles({hiddenFormSelectFiles, setHiddenFormSelectFiles, refInputRom, refInputSaveState, onStartEmulation}:OverlaySelectFilesProps) {
+    const styleOverlay: Style = {};
+    if (hiddenFormSelectFiles) {
+        styleOverlay.display = 'none';
+    }
+    return (
+        <div style={styleOverlay} className="overlay-menu-select-files overlay-menu-div">
+            <div className="overlay-menu-div-header">
+                <CloseButton onClick={() => setHiddenFormSelectFiles(true)}/>
+            </div>
+            <div className="overlay-menu">
+                <CenterElement>
+                    <FormSelectFiles refInputRom={refInputRom}
+                        refInputSaveState={refInputSaveState}
+                        onStartEmulation={onStartEmulation}/>
+                </CenterElement>
+            </div>
+        </div>
+    );
+}

js-src/components/page.tsx

@@ -5,6 +5,7 @@ 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 OverlaySelectFiles from '/components/overlay-select-files';
 import CloseButton from '/components/close-button';
 
 import Endian from '/endian';
@@ -194,25 +195,22 @@ export default function Page() {
             setHiddenFormSelectFiles: setHiddenFormSelectFiles,
         });
     };
-    let firstMenuElement = React.useRef<HTMLAnchorElement>(null);
+    const firstMenuElement = React.useRef<HTMLAnchorElement>(null);
+    const screenRef = React.useRef<HTMLDivElement>(null);
+    const [isFullscreen, setIsFullscreen] = React.useState<boolean>(false);
     return (
-        <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">
-                    <CloseButton onClick={() => setHiddenFormSelectFiles(true)}/>
-                </div>
-                <div className="overlay-menu">
-                    <CenterElement>
-                        <FormSelectFiles refInputRom={refInputRom}
-                            refInputSaveState={refInputSaveState}
-                            onStartEmulation={(e: React.MouseEvent<HTMLInputElement>) => {
-                                onStartEmulation(e)
-                            }}/>
-                    </CenterElement>
-                </div>
-            </div>
+        <div ref={screenRef}>
+            <OverlayControls firstMenuElement={firstMenuElement}
+                setHiddenMenu={setHiddenMenu}/>
+            <OverlayMenu hiddenMenu={hiddenMenu}
+                setHiddenMenu={setHiddenMenu} emulationStarted={emulationStarted}
+                setHiddenFormSelectFiles={setHiddenFormSelectFiles} screenRef={screenRef}
+                isFullscreen={isFullscreen} setIsFullscreen={setIsFullscreen}
+                firstMenuElement={firstMenuElement}/>
+            <OverlaySelectFiles hiddenFormSelectFiles={hiddenFormSelectFiles}
+                setHiddenFormSelectFiles={setHiddenFormSelectFiles}
+                refInputRom={refInputRom} refInputSaveState={refInputSaveState}
+                onStartEmulation={onStartEmulation}/>
             <div>
                 <CenterElement full={true}>
                         <CanvasGBAEmulator canvasRef={canvasRef}/>

public/css/styles.css

@@ -90,6 +90,30 @@ form label, form input {
     color: grey;
 }
 
+.control-button {
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, 0);
+    width: 40px;
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    border-radius: 50%;
+    color: grey;
+    text-decoration: none;
+    line-height: 40px;
+    font-size: 35px;
+}
+
+.control-a {
+    top: 50%;
+    left: 90%;
+}
+
+.control-b {
+    top: 60%;
+    left: 75%;
+}
 .overlay > div.vertical-padding {
     height: 50%;
 }