Change frontend

gameboy-web/package.json

@@ -12,6 +12,8 @@
     "rsw": "rsw"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
     "@fontsource/roboto": "^5.0.8",
     "@mui/icons-material": "^5.15.2",
     "@mui/material": "^5.15.2",

gameboy-web/src/App.tsx

@@ -1,5 +1,7 @@
 import {useEffect, useState} from "react";
-import init, {load_boot_rom, CPU} from "gameboy-wasm";
+import init, {CPU} from "gameboy-wasm";
+import {Box, CircularProgress, Container} from "@mui/material";
+import ControlCenter from "./components/ControlCenter.tsx";
 
 
 function App() {
@@ -9,17 +11,41 @@ function App() {
     init().then(() => setReady(true))
   }, [])
 
-  const handleButton = () => {
+  const handlePlay = () => {
     const cpu = new CPU();
     const cpuAsJson = cpu.to_json();
     const memory = cpuAsJson.memory;
+    const register = cpuAsJson.register;
+    console.log("CPU", cpuAsJson)
+    console.log("Registers", register)
     console.log("Memory", memory)
   }
 
+  const LoadingCircle = () => {
+    return (
+        <Box sx={{
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)"
+        }}>
+          <CircularProgress/>
+        </Box>
+    )
+  }
+
+  const OnReady = () => {
+    return (
+        <>
+          <ControlCenter onPlay={handlePlay}/>
+        </>
+    )
+  }
+
   return (
-      <button disabled={!ready} onClick={() => handleButton()}>
-        Run
-      </button>
+      <Container>
+        {ready ? <OnReady/> : <LoadingCircle/>}
+      </Container>
   )
 }
 

gameboy-web/src/components/ControlCenter.tsx

@@ -0,0 +1,27 @@
+import {ToggleButton, ToggleButtonGroup} from "@mui/material";
+import {BugReport, PlayArrow, SkipNext} from "@mui/icons-material";
+
+export interface ControlCenterProps {
+  onPlay: () => void
+}
+
+const ControlCenter = (props: ControlCenterProps) => {
+  return (
+      <>
+        <ToggleButtonGroup
+        >
+          <ToggleButton value="play" onClick={() => props.onPlay()}>
+            <PlayArrow/>
+          </ToggleButton>
+          <ToggleButton value="debug">
+            <BugReport/>
+          </ToggleButton>
+          <ToggleButton value="next" disabled>
+            <SkipNext/>
+          </ToggleButton>
+        </ToggleButtonGroup>
+      </>
+  )
+}
+
+export default ControlCenter

gameboy-web/src/main.tsx

@@ -1,10 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
-import '@fontsource/roboto/300.css';
-import '@fontsource/roboto/400.css';
-import '@fontsource/roboto/500.css';
-import '@fontsource/roboto/700.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>