From d2667fd0fb0556b4b4c64e7198f230e84280aef3 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sun, 30 Jul 2023 18:11:16 -0400
Subject: [PATCH] added navigation to the UI

---
 src/Myrian/ui/MyrianRoot.tsx | 100 +++++++++++++++++++++++++++++++----
 src/Myrian/world.txt         |  30 -----------
 2 files changed, 90 insertions(+), 40 deletions(-)
 delete mode 100644 src/Myrian/world.txt

diff --git a/src/Myrian/ui/MyrianRoot.tsx b/src/Myrian/ui/MyrianRoot.tsx
index 873899a4c..665593254 100644
--- a/src/Myrian/ui/MyrianRoot.tsx
+++ b/src/Myrian/ui/MyrianRoot.tsx
@@ -8,9 +8,19 @@ import BatteryFullIcon from "@mui/icons-material/BatteryFull";
 import Battery20Icon from "@mui/icons-material/Battery20";
 import FavoriteIcon from "@mui/icons-material/Favorite";
 import LandscapeIcon from "@mui/icons-material/Landscape";
+import { IconButton } from "@mui/material";
+import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import KeyboardArrowLeftIcon from "@mui/icons-material/KeyboardArrowLeft";
+import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
 
-const iterator = (i: number): number[] => {
-  return Array(i).fill(0);
+import ZoomInMapIcon from "@mui/icons-material/ZoomInMap";
+import ZoomOutMapIcon from "@mui/icons-material/ZoomOutMap";
+
+const iterator = (i: number, offset = 0): number[] => {
+  return Array(i)
+    .fill(0)
+    .map((_, v) => v + offset);
 };
 
 interface ICellProps {
@@ -50,6 +60,8 @@ interface IProps {
 }
 
 export function MyrianRoot({ myrian }: IProps): React.ReactElement {
+  const [center, setCenter] = useState([myrian.world[0].length / 2, myrian.world.length / 2]);
+  const [size, setSize] = useState(11);
   const [, setRerender] = useState(false);
   const rerender = () => setRerender((old) => !old);
   useEffect(() => {
@@ -59,16 +71,84 @@ export function MyrianRoot({ myrian }: IProps): React.ReactElement {
 
   const sleeves = Object.fromEntries(myrian.sleeves.map((s) => [`${s.x}_${s.y}`, s]));
 
+  const move = (x: number, y: number) => () => {
+    setCenter((c) => [Math.max(Math.floor(size / 2), c[0] + x), Math.max(Math.floor(size / 2), c[1] + y)]);
+  };
+
+  const zoom = (size: number) => () => {
+    setSize((s) => s + size);
+  };
   return (
-    <Container maxWidth="lg" disableGutters sx={{ mx: 0 }}>
-      <Box sx={{ display: "flex", flexDirection: "column", m: 0, p: 0 }}>
-        {iterator(myrian.world.length).map((_, j) => (
-          <Box key={myrian.world[j].join("") + j} sx={{ display: "flex", flexDirection: "row" }}>
-            {iterator(myrian.world[j].length).map((_, i) => (
-              <Cell key={i + "" + j + "" + myrian.world[j][i]} tile={sleeves[`${i}_${j}`] ? "s" : myrian.world[j][i]} />
-            ))}
+    <Container maxWidth="lg" disableGutters sx={{ mx: 0, display: "flex", flexDirection: "column" }}>
+      <Box sx={{ display: "flex" }}>
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            m: 0,
+            p: 0,
+            borderColor: "white",
+            borderStyle: "solid",
+            borderWidth: "1px",
+          }}
+        >
+          {iterator(size, center[1] - Math.floor(size / 2)).map((j) => (
+            <Box key={myrian.world[j].join("") + j} sx={{ display: "flex", flexDirection: "row" }}>
+              {iterator(size, center[0] - Math.floor(size / 2)).map((i) => (
+                <Cell
+                  key={i + "" + j + "" + myrian.world[j][i]}
+                  tile={sleeves[`${i}_${j}`] ? "s" : myrian.world[j][i]}
+                />
+              ))}
+            </Box>
+          ))}
+        </Box>
+      </Box>
+
+      <Box sx={{ display: "flex" }}>
+        <Box sx={{ display: "flex", flexDirection: "column" }}>
+          <Box sx={{ display: "flex" }}>
+            <Box sx={{ width: "40px", height: "40px" }} />
+            <Box sx={{ width: "40px", height: "40px" }}>
+              <IconButton onClick={move(0, -1)}>
+                <KeyboardArrowUpIcon />
+              </IconButton>
+            </Box>
+            <Box sx={{ width: "40px", height: "40px" }} />
           </Box>
-        ))}
+          <Box sx={{ display: "flex" }}>
+            <Box sx={{ width: "40px", height: "40px" }}>
+              <IconButton onClick={move(-1, 0)}>
+                <KeyboardArrowLeftIcon />
+              </IconButton>
+            </Box>
+            <Box sx={{ width: "40px", height: "40px" }} />
+            <Box sx={{ width: "40px", height: "40px" }}>
+              <IconButton onClick={move(1, 0)}>
+                <KeyboardArrowRightIcon />
+              </IconButton>
+            </Box>
+          </Box>
+          <Box sx={{ display: "flex" }}>
+            <Box sx={{ width: "40px", height: "40px" }} />
+            <Box sx={{ width: "40px", height: "40px" }}>
+              <IconButton onClick={move(0, 1)}>
+                <KeyboardArrowDownIcon />
+              </IconButton>
+            </Box>
+            <Box sx={{ width: "40px", height: "40px" }} />
+          </Box>
+        </Box>
+
+        <Box>
+          <IconButton onClick={zoom(-2)}>
+            <ZoomInMapIcon />
+          </IconButton>
+
+          <IconButton onClick={zoom(2)}>
+            <ZoomOutMapIcon />
+          </IconButton>
+        </Box>
       </Box>
     </Container>
   );
diff --git a/src/Myrian/world.txt b/src/Myrian/world.txt
deleted file mode 100644
index 4baa940ba..000000000
--- a/src/Myrian/world.txt
+++ /dev/null
@@ -1,30 +0,0 @@
-                              
-                              
- mmmmmmm                      
-    mmmmmmmm                  
-           mmmmmmmmmmmm       
-            bbbb   mmmmm      
-                    mmmm      
-               c    mmmm      
-                    mmmm      
-        ddddd       mmmm      
-                              
-          mmmmmmmmmm          
-                 mmmmmmmm     
-   mmmmmmmm     mmmm          
-                              
-                              
-                              
-                              
-                              
-                              
-                              
-                              
-                              
-                              
-                              
-                              
-                              
-                              
-                              
-                              
\ No newline at end of file