デザインを調整

plarailers · Oct 7, 2023 · 88177f1 · 88177f1
1 parent 8ad846c
commit 88177f1
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 14 deletions.
diff --git a/ptcs/ptcs_ui/src/components/Railway.tsx b/ptcs/ptcs_ui/src/components/Railway.tsx
@@ -5,15 +5,21 @@ import { Train } from "./Train";
 import { Junction } from "./Junction";
 import { useContext } from "react";
 import { Stop } from "./Stop";
+import { useMantineTheme } from "@mantine/core";
 
 export const Railway: React.FC<React.PropsWithChildren> = ({ children }) => {
+  const theme = useMantineTheme();
   const railwayUI = useContext(RailwayUIContext);
 
   if (!railwayUI) return null;
 
   return (
     <svg width="100%" viewBox={`0 0 ${railwayUI.width} ${railwayUI.height}`}>
-      <rect width={railwayUI.width} height={railwayUI.height} fill="#222222" />
+      <rect
+        width={railwayUI.width}
+        height={railwayUI.height}
+        fill={theme.colors.dark[7]}
+      />
       {Object.entries(railwayUI.platforms).map(([id, platform]) => (
         <Platform key={id} position={platform.position} />
       ))}

diff --git a/ptcs/ptcs_ui/src/main.tsx b/ptcs/ptcs_ui/src/main.tsx
@@ -13,7 +13,11 @@ const router = createHashRouter([
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
-    <MantineProvider withGlobalStyles withNormalizeCSS>
+    <MantineProvider
+      withGlobalStyles
+      withNormalizeCSS
+      theme={{ colorScheme: "dark" }}
+    >
       <RouterProvider router={router} />
     </MantineProvider>
   </React.StrictMode>

diff --git a/ptcs/ptcs_ui/src/pages/Home.tsx b/ptcs/ptcs_ui/src/pages/Home.tsx
@@ -1,4 +1,10 @@
-import { Code, Container, DEFAULT_THEME, Grid, Stack } from "@mantine/core";
+import {
+  Code,
+  Container,
+  DEFAULT_THEME,
+  Stack,
+  useMantineTheme,
+} from "@mantine/core";
 import { DefaultService, RailwayState } from "ptcs_client";
 import { Layout } from "../components/Layout";
 import { useEffect, useState } from "react";
@@ -103,19 +109,21 @@ const ui: RailwayUI = {
 };
 
 export const Home: React.FC = () => {
+  const theme = useMantineTheme();
   const [railwayState, setRailwayState] = useState<RailwayState | null>(null);
-  const [time, setTime] = useState<Date>();
+  const [time, setTime] = useState(() => new Date());
 
   useEffect(() => {
     DefaultService.getState().then((state) => {
+      setTime(new Date());
       setRailwayState(state);
     });
   }, []);
 
   useEffect(() => {
     const interval = setInterval(() => {
-      setTime(new Date());
       DefaultService.getState().then((state) => {
+        setTime(new Date());
         setRailwayState(state);
       });
     }, 500);
@@ -129,16 +137,20 @@ export const Home: React.FC = () => {
       <RailwayUIContext.Provider value={ui}>
         <Layout>
           <Container>
-            <Stack>
-              {time?.toLocaleString()}
-              <Railway />
+            <Stack px={60}>
+              <Railway>
+                <text
+                  x={10}
+                  y={20}
+                  fontSize={12}
+                  fontFamily={theme.fontFamilyMonospace}
+                  fill={theme.white}
+                >
+                  {time.toLocaleString()}
+                </text>
+              </Railway>
               <Debugger />
-              <Grid>
-                <Grid.Col span={6}>
-                  <Code block>{JSON.stringify(railwayState, null, 4)}</Code>
-                </Grid.Col>
-                <Grid.Col span={6}></Grid.Col>
-              </Grid>
+              <Code block>{JSON.stringify(railwayState, null, 4)}</Code>
             </Stack>
           </Container>
         </Layout>