Vite transition complete

client/package.json

@@ -14,13 +14,11 @@
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "ajv": "^8.12.0",
+    "date-fns": "^3.6.0",
     "fast-deep-equal": "^3.1.3",
     "http-proxy-middleware": "^2.0.3",
-    "moment": "^2.29.1",
-    "moment-timezone": "^0.5.34",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-moment": "^1.1.1",
     "react-movable": "^3.0.4",
     "react-moveable": "^0.31.1",
     "react-router-dom": "^6.14.1",

client/src/Chat.tsx

@@ -3,9 +3,8 @@ import Paper from "@mui/material/Paper";
 import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
 import ListItemText from "@mui/material/ListItemText";
-import Moment from "react-moment";
+import { formatDistanceToNow, formatDuration, intervalToDuration } from 'date-fns';
 import TextField from "@mui/material/TextField";
-import "moment-timezone";
 import equal from "fast-deep-equal";
 
 import "./Chat.css";
@@ -28,6 +27,12 @@ const Chat: React.FC = () => {
   const [scrollTime, setScrollTime] = useState<number>(0);
   const [chat, setChat] = useState<ChatMessage[]>([]);
   const [startTime, setStartTime] = useState<number>(0);
+  const [now, setNow] = useState<number>(Date.now());
+
+  useEffect(() => {
+    const timer = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(timer);
+  }, []);
 
   const { ws, name } = useContext(GlobalContext);
   const fields = useMemo(() => ["chat", "startTime"], []);
@@ -215,7 +220,7 @@ const Chat: React.FC = () => {
         <ListItemText
           primary={message}
           secondary={
-            item.color && <Moment fromNow trim date={item.date > Date.now() ? Date.now() : item.date} interval={1000} />
+            item.color && formatDistanceToNow(new Date(item.date > now ? now : item.date))
           }
         />
       </ListItem>
@@ -240,7 +245,13 @@ const Chat: React.FC = () => {
           startTime !== 0 && (
             <>
               Game duration:{" "}
-              <Moment tz={"Etc/GMT"} format="h:mm:ss" trim durationFromNow interval={1000} date={startTime} />
+              {(() => {
+                const duration = intervalToDuration({ start: new Date(startTime), end: new Date(now) });
+                const hours = duration.hours || 0;
+                const minutes = duration.minutes || 0;
+                const seconds = duration.seconds || 0;
+                return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+              })()}
             </>
           )
         }

client/src/Common.ts

@@ -15,8 +15,8 @@ function debounce<T extends (...args: any[]) => void>(fn: T, ms: number): T {
 // the client running in a container to talk to the server by docker service
 // name (e.g. http://peddlers-of-ketran:8930) while still working when run on
 // the host where PUBLIC_URL may be appropriate.
-const envApiBase = process.env.VITE_API_BASE;
-const publicBase = process.env.PUBLIC_URL || '';
+const envApiBase = import.meta.env.VITE_API_BASE;
+const publicBase = import.meta.env.BASE_URL || '';
 
 const base = envApiBase || publicBase;
 const assetsPath = `${publicBase}/assets`;

client/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />