Minor style updates of settings

rjct · Jan 25, 2024 · 30a1ab6 · 30a1ab6
1 parent f22fcf9
commit 30a1ab6
Show file tree

Hide file tree

Showing 7 changed files with 137 additions and 118 deletions.
diff --git a/src/components/sidePanel/RandomButton.tsx b/src/components/sidePanel/RandomButton.tsx
@@ -21,7 +21,11 @@ export function RandomButton(props: { onClick: (args: NewCityArgs) => void }) {
   };
 
   return (
-    <Button sx={{ mt: 2 }} loading={busy} onClick={handleRandomButtonClick}>
+    <Button
+      sx={{ flex: 1, mt: 2 }}
+      loading={busy}
+      onClick={handleRandomButtonClick}
+    >
       Random
     </Button>
   );

diff --git a/src/components/sidePanel/Settings.tsx b/src/components/sidePanel/Settings.tsx
@@ -49,98 +49,95 @@ export function Settings() {
   }, []);
 
   return (
-    <Box
-      sx={{
-        display: "grid",
-        gap: 2,
-        alignItems: "center",
-        flexWrap: "wrap",
-      }}
-    >
-      <FormControl>
-        <FormLabel>Seed</FormLabel>
-        <Seed
-          key={seed}
-          value={seed}
-          onChange={(seed) =>
-            handleChange({
-              seed,
-              gridSize,
-              perlinScale,
-              perlinElevation,
-              blockSize,
-            })
-          }
-        />
-      </FormControl>
+    <>
+      <Box className={"settings"}>
+        <FormControl>
+          <FormLabel>Seed</FormLabel>
+          <Seed
+            key={seed}
+            value={seed}
+            onChange={(seed) =>
+              handleChange({
+                seed,
+                gridSize,
+                perlinScale,
+                perlinElevation,
+                blockSize,
+              })
+            }
+          />
+        </FormControl>
 
-      <FormControl>
-        <FormLabel>City size</FormLabel>
-        <GridSize
-          key={gridSize.width}
-          value={gridSize}
-          onChange={(gridSize) =>
-            handleChange({
-              seed,
-              gridSize,
-              perlinScale,
-              perlinElevation,
-              blockSize,
-            })
-          }
-        />
-      </FormControl>
+        <FormControl>
+          <FormLabel>City size</FormLabel>
+          <GridSize
+            key={gridSize.width}
+            value={gridSize}
+            onChange={(gridSize) =>
+              handleChange({
+                seed,
+                gridSize,
+                perlinScale,
+                perlinElevation,
+                blockSize,
+              })
+            }
+          />
+        </FormControl>
 
-      <FormControl>
-        <FormLabel>Perlin scale</FormLabel>
-        <PerlinScale
-          value={perlinScale}
-          onChange={(perlinScale) =>
-            handleChange({
-              seed,
-              gridSize,
-              perlinScale,
-              perlinElevation,
-              blockSize,
-            })
-          }
-        />
-      </FormControl>
+        <FormControl>
+          <FormLabel>Perlin scale</FormLabel>
+          <PerlinScale
+            value={perlinScale}
+            onChange={(perlinScale) =>
+              handleChange({
+                seed,
+                gridSize,
+                perlinScale,
+                perlinElevation,
+                blockSize,
+              })
+            }
+          />
+        </FormControl>
 
-      <FormControl>
-        <FormLabel>Perlin elevation</FormLabel>
+        <FormControl>
+          <FormLabel>Perlin elevation</FormLabel>
 
-        <PerlinElevation
-          value={perlinElevation}
-          onChange={(perlinElevation) =>
-            handleChange({
-              seed,
-              gridSize,
-              perlinScale,
-              perlinElevation,
-              blockSize,
-            })
-          }
-        />
-      </FormControl>
+          <PerlinElevation
+            value={perlinElevation}
+            onChange={(perlinElevation) =>
+              handleChange({
+                seed,
+                gridSize,
+                perlinScale,
+                perlinElevation,
+                blockSize,
+              })
+            }
+          />
+        </FormControl>
 
-      <FormControl>
-        <FormLabel>Block size</FormLabel>
-        <BlockSize
-          value={blockSize}
-          onChange={(blockSize) =>
-            handleChange({
-              seed,
-              gridSize,
-              perlinScale,
-              perlinElevation,
-              blockSize,
-            })
-          }
-        />
-      </FormControl>
+        <FormControl>
+          <FormLabel>Block size</FormLabel>
+          <BlockSize
+            value={blockSize}
+            onChange={(blockSize) =>
+              handleChange({
+                seed,
+                gridSize,
+                perlinScale,
+                perlinElevation,
+                blockSize,
+              })
+            }
+          />
+        </FormControl>
+      </Box>
 
-      <RandomButton onClick={(args) => handleChange(args)} />
-    </Box>
+      <Box sx={{ display: "flex" }}>
+        <RandomButton onClick={(args) => handleChange(args)} />
+      </Box>
+    </>
   );
 }
diff --git a/src/components/sidePanel/SidePanel.tsx b/src/components/sidePanel/SidePanel.tsx
@@ -3,7 +3,7 @@ import { MiniMap } from "./MiniMap";
 
 export function SidePanel() {
   return (
-    <div className={"settings"}>
+    <div className={"side-panel"}>
       <MiniMap />
       <Settings />
     </div>

diff --git a/src/components/sidePanel/controls/BlockSize.tsx b/src/components/sidePanel/controls/BlockSize.tsx
@@ -1,3 +1,4 @@
+import FormControl from "@mui/joy/FormControl/FormControl";
 import Slider from "@mui/joy/Slider";
 import React from "react";
 
@@ -21,16 +22,18 @@ export function BlockSize(props: {
   ];
 
   return (
-    <Slider
-      value={props.value}
-      marks={marks}
-      step={1}
-      min={2}
-      max={15}
-      onChange={(e) => {
-        props.onChange(Number((e.target as HTMLInputElement).value));
-      }}
-      valueLabelDisplay="auto"
-    />
+    <FormControl orientation={"horizontal"} sx={{ ml: 1.6, mr: 1.6 }}>
+      <Slider
+        value={props.value}
+        marks={marks}
+        step={1}
+        min={2}
+        max={15}
+        onChange={(e) => {
+          props.onChange(Number((e.target as HTMLInputElement).value));
+        }}
+        valueLabelDisplay="auto"
+      />
+    </FormControl>
   );
 }
diff --git a/src/components/sidePanel/controls/PerlinElevation.tsx b/src/components/sidePanel/controls/PerlinElevation.tsx
@@ -1,3 +1,4 @@
+import FormControl from "@mui/joy/FormControl/FormControl";
 import Slider from "@mui/joy/Slider";
 import React from "react";
 
@@ -21,16 +22,18 @@ export function PerlinElevation(props: {
   ];
 
   return (
-    <Slider
-      value={props.value}
-      step={1}
-      marks={marks}
-      min={0.5}
-      max={16}
-      valueLabelDisplay="auto"
-      onChange={(e) => {
-        props.onChange(Number((e.target as HTMLInputElement).value));
-      }}
-    />
+    <FormControl orientation={"horizontal"} sx={{ ml: 1.6, mr: 1.6 }}>
+      <Slider
+        value={props.value}
+        step={1}
+        marks={marks}
+        min={0.5}
+        max={16}
+        valueLabelDisplay="auto"
+        onChange={(e) => {
+          props.onChange(Number((e.target as HTMLInputElement).value));
+        }}
+      />
+    </FormControl>
   );
 }
diff --git a/src/components/sidePanel/controls/PerlinScale.tsx b/src/components/sidePanel/controls/PerlinScale.tsx
@@ -36,7 +36,7 @@ export function PerlinScale(props: {
 
   return (
     <>
-      <FormControl orientation={"horizontal"}>
+      <FormControl orientation={"horizontal"} sx={{ mr: 1.6 }}>
         <FormLabel>X</FormLabel>
         <Slider
           value={props.value.x}
@@ -49,7 +49,7 @@ export function PerlinScale(props: {
         />
       </FormControl>
 
-      <FormControl orientation={"horizontal"}>
+      <FormControl orientation={"horizontal"} sx={{ mr: 1.6 }}>
         <FormLabel>Y</FormLabel>
         <Slider
           value={props.value.y}

diff --git a/src/index.css b/src/index.css
@@ -20,7 +20,7 @@ body {
   justify-content: center;
 }
 
-.settings {
+.side-panel {
   position: absolute;
   top: var(--padding);
   right: var(--padding);
@@ -34,7 +34,20 @@ body {
 
   display: flex;
   flex-direction: column;
-  align-items: center;
+
+  max-height: calc(100vh - 60px);
+}
+
+.settings {
+  display: flex;
+  gap: var(--padding);
+
+  flex-direction: column;
+  flex: 1;
+  overflow: visible;
+  overflow-y: auto;
+  margin-top: var(--padding);
+  padding-bottom: var(--padding);
 }
 
 .game {
@@ -85,10 +98,9 @@ body {
   background-size: contain;
   width: 150px;
   height: 150px;
+  flex-shrink: 0;
   margin: -20px 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  align-self: center;
   transition: all 0.5s linear;
 }
 .mini-map[data-busy] {