From 88177f103820f306918f1d2f85acc2b20793dbc2 Mon Sep 17 00:00:00 2001
From: n4o847 <22975590+n4o847@users.noreply.github.com>
Date: Sat, 7 Oct 2023 18:29:00 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=87=E3=82=B6=E3=82=A4=E3=83=B3=E3=82=92?=
 =?UTF-8?q?=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ptcs/ptcs_ui/src/components/Railway.tsx |  8 +++++-
 ptcs/ptcs_ui/src/main.tsx               |  6 ++++-
 ptcs/ptcs_ui/src/pages/Home.tsx         | 36 ++++++++++++++++---------
 3 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/ptcs/ptcs_ui/src/components/Railway.tsx b/ptcs/ptcs_ui/src/components/Railway.tsx
index df4b325..ee3834f 100644
--- 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
index b5d8946..df04cd3 100644
--- 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
index 79ecbc9..cc5a07c 100644
--- 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>