beep

2026-06-26 20:32:33 -04:00
commit 48bf9edb65
146 changed files with 19805 additions and 0 deletions
@@ -0,0 +1,73 @@
+import { useContext, useState } from "react";
+import { Box, Fab, Collapse, Drawer } from "@mui/material";
+import DownIcon from "@mui/icons-material/KeyboardArrowDown";
+import UpIcon from "@mui/icons-material/KeyboardArrowUp";
+import PauseIcon from "@mui/icons-material/Pause";
+import PlayArrowIcon from "@mui/icons-material/PlayArrow";
+import RefreshIcon from "@mui/icons-material/Refresh";
+import SettingsIcon from "@mui/icons-material/Settings";
+import { Canvas, CANVAS_ID, Controls, GameContext } from "../../internal";
+import { ControlsContextProvider } from "../Controls/context";
+
+const GameScreen = () => {
+  const { grid, paused, togglePause } = useContext(GameContext);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [controlsOpen, setControlsOpen] = useState(false);
+  return (
+    <>
+      <Box
+        display="flex"
+        justifyContent="center"
+        alignItems="center"
+        minHeight="100vh"
+        pl={grid.config.cellSize / 6}
+      >
+        <Canvas canvasAttributes={{ id: CANVAS_ID }} />
+        <Fab
+          onClick={() => setMenuOpen(!menuOpen)}
+          sx={{ position: "absolute", bottom: 15, right: 15 }}
+        >
+          {menuOpen ? <DownIcon /> : <UpIcon />}
+        </Fab>
+        <Collapse in={menuOpen}>
+          <Fab
+            onClick={() => {
+              setControlsOpen(true);
+              setMenuOpen(false);
+            }}
+            sx={{ position: "absolute", bottom: 100, right: 15 }}
+          >
+            <SettingsIcon />
+          </Fab>
+          <Fab
+            onClick={() => {
+              togglePause();
+            }}
+            sx={{ position: "absolute", bottom: 185, right: 15 }}
+          >
+            {paused ? <PlayArrowIcon /> : <PauseIcon />}
+          </Fab>
+          <Fab
+            onClick={() => {
+              grid.reset();
+            }}
+            sx={{ position: "absolute", bottom: 270, right: 15 }}
+          >
+            <RefreshIcon />
+          </Fab>
+        </Collapse>
+      </Box>
+      <ControlsContextProvider>
+        <Drawer
+          anchor="bottom"
+          open={controlsOpen}
+          onClose={() => setControlsOpen(false)}
+        >
+          <Controls closeDrawer={() => setControlsOpen(false)} />
+        </Drawer>
+      </ControlsContextProvider>
+    </>
+  );
+};
+
+export default GameScreen;