From 49975e7a4b69a20db90c362fd372b8db58c56ebc Mon Sep 17 00:00:00 2001 From: James Ketrenos Date: Sat, 27 Sep 2025 13:48:52 -0700 Subject: [PATCH] Vite transition complete --- client/package.json | 4 +--- client/src/Chat.tsx | 19 +++++++++++++++---- client/src/Common.ts | 4 ++-- client/src/vite-env.d.ts | 1 + 4 files changed, 19 insertions(+), 9 deletions(-) create mode 100644 client/src/vite-env.d.ts diff --git a/client/package.json b/client/package.json index e322111..4ad8a4e 100644 --- a/client/package.json +++ b/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", diff --git a/client/src/Chat.tsx b/client/src/Chat.tsx index eecb99f..fb34913 100644 --- a/client/src/Chat.tsx +++ b/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(0); const [chat, setChat] = useState([]); const [startTime, setStartTime] = useState(0); + const [now, setNow] = useState(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 = () => { Date.now() ? Date.now() : item.date} interval={1000} /> + item.color && formatDistanceToNow(new Date(item.date > now ? now : item.date)) } /> @@ -240,7 +245,13 @@ const Chat: React.FC = () => { startTime !== 0 && ( <> Game duration:{" "} - + {(() => { + 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')}`; + })()} ) } diff --git a/client/src/Common.ts b/client/src/Common.ts index 12a985d..546f7d9 100644 --- a/client/src/Common.ts +++ b/client/src/Common.ts @@ -15,8 +15,8 @@ function debounce 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`; diff --git a/client/src/vite-env.d.ts b/client/src/vite-env.d.ts new file mode 100644 index 0000000..151aa68 --- /dev/null +++ b/client/src/vite-env.d.ts @@ -0,0 +1 @@ +/// \ No newline at end of file