import React, { useState } from 'react';
import { Mgba } from './mgba';

function App() {

  const [onGame, setOnGame] = useState(false);
  const [volume, setVolume] = useState(1.0);

  return (
    <div>
      {
        onGame && <><Mgba gameUrl="/game.gba" volume={volume} />
          <input type="range" value={volume} min="0" max="1" step="0.05" onChange={(e) => setVolume(Number(e.target.value))}></input></>
      }
      <button onClick={() => setOnGame(!onGame)}>{onGame ? "End Game" : "Start Game"}</button>
    </div>
  );
}

export default App;