Force interaction to start

website/src/App.tsx

@@ -25,6 +25,23 @@ const ActionButton = styled.button`
 const AppContainer = styled.main`
   height: calc(100vh - 20px);
   padding: 10px;
+  display: flex;
+`;
+
+const StartButtonWrapper = styled.button`
+  margin: auto;
+  font-size: 5em;
+  padding: 1em;
+  text-transform: uppercase;
+  background-color: black;
+  color: white;
+  border: none;
+  border-radius: 0.5em;
+
+  &:hover {
+    background-color: #222;
+    cursor: pointer;
+  }
 `;
 
 function App() {
@@ -50,6 +67,8 @@ function App() {
 
   useAvoidItchIoScrolling();
 
+  const [isPlaying, setIsPlaying] = useState(false);
+
   return (
     <AppContainer>
       {showBindings && (
@@ -63,13 +82,17 @@ function App() {
           restart={() => mgbaRef.current?.restart()}
         />
       )}
-      <Mgba
-        ref={mgbaRef}
-        gameUrl="/game.gba"
-        volume={volume}
-        controls={bindings.Actual}
-        paused={paused}
-      />
+      {isPlaying ? (
+        <Mgba
+          ref={mgbaRef}
+          gameUrl="/game.gba"
+          volume={volume}
+          controls={bindings.Actual}
+          paused={paused}
+        />
+      ) : (
+        <StartButton onClick={() => setIsPlaying(true)} />
+      )}
     </AppContainer>
   );
 }
@@ -101,11 +124,7 @@ function BindingsWindow({
           min="0"
           max="1"
           step="0.05"
-          onChange={(e) => {
-            console.log("e.target.value", e.target.value);
-            console.log("volume", volume);
-            setVolume(Number(e.target.value));
-          }}
+          onChange={(e) => setVolume(Number(e.target.value))}
         />
       </VolumeLabel>
       <BindingsControl
@@ -119,4 +138,10 @@ function BindingsWindow({
   );
 }
 
+function StartButton({ onClick }: { onClick: () => void }) {
+  return (
+    <StartButtonWrapper onClick={onClick}>Press to start</StartButtonWrapper>
+  );
+}
+
 export default App;

website/src/mgba.tsx

@@ -56,6 +56,8 @@ export const Mgba = forwardRef<MgbaHandle, MgbaProps>(
         const gamePath = `${MGBA_ROM_DIRECTORY}/${gameUrl}`;
         mgbaModule.current.FS.writeFile(gamePath, new Uint8Array(gameData));
         mgbaModule.current.loadGame(gamePath);
+        mgbaModule.current.setVolume(0.1); // for some reason you have to do this or you get no sound
+        console.log(mgbaModule.current.getVolume());
         setGameLoaded(true);
       })();
     }, [state, gameUrl]);
@@ -63,7 +65,7 @@ export const Mgba = forwardRef<MgbaHandle, MgbaProps>(
     // init mgba
     useEffect(() => {
       (async () => {
-        if (canvas === null) return;
+        if (canvas.current === null) return;
         if (state !== MgbaState.Uninitialised) return;
 
         setState(MgbaState.Initialising);
@@ -111,7 +113,9 @@ export const Mgba = forwardRef<MgbaHandle, MgbaProps>(
 
     useEffect(() => {
       if (!gameLoaded) return;
+      console.log("before", mgbaModule.current.getVolume());
       mgbaModule.current.setVolume(volume ?? 1.0);
+      console.log("after", mgbaModule.current.getVolume());
     }, [gameLoaded, volume]);
 
     useEffect(() => {