add time sync warning

src/api/endpoints/time.ts

@@ -0,0 +1,10 @@
+import client from "../client";
+
+export interface getServerInfoResponse {
+  datetime: string;
+}
+
+export async function getServerInfo(): Promise<getServerInfoResponse> {
+  const response = await client.get<getServerInfoResponse>(`/api/info`);
+  return response.data;
+}

src/utilities/time.ts

@@ -1,3 +1,5 @@
+import { getServerInfo } from "../api/endpoints/time";
+
 export const secondsToHHMMSS = (seconds: number): string => {
   return new Date(seconds).toISOString().slice(11, 19);
 };
@@ -14,3 +16,15 @@ export const datetimeToddmmHHMMSS = (datetime: string): string => {
   const date = new Date(datetime);
   return date.toLocaleDateString() + " " + date.toLocaleTimeString();
 };
+
+const maxDiffAllowedMiliseconds = 10 * 1000; // 10 seconds
+
+export const isLocalTimeSynchronized = async (): Promise<[boolean, number]> => {
+  const info = await getServerInfo();
+  const diff = Date.now() - new Date(info.datetime).getTime();
+  const absDiff = Math.abs(diff);
+
+  let isSynchronized = absDiff < maxDiffAllowedMiliseconds;
+
+  return [isSynchronized, diff];
+};

src/views/Login/components/TimeSynchronizationWarningDialog.tsx

@@ -0,0 +1,66 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  Stack,
+  useTheme,
+} from "@mui/material";
+import { FunctionComponent, useEffect, useState } from "react";
+import { TbClockX } from "react-icons/tb";
+import { isLocalTimeSynchronized } from "../../../utilities/time";
+
+interface TimeSynchronizationWarningDialogProps {}
+
+const TimeSynchronizationWarningDialog: FunctionComponent<
+  TimeSynchronizationWarningDialogProps
+> = () => {
+  const theme = useTheme();
+
+  const [showTimeWarning, setShowTimeWarning] = useState(false);
+  const [timeDifference, setTimeDifference] = useState<number | null>(null);
+
+  useEffect(() => {
+    (async () => {
+      const [isSynchronized, difference] = await isLocalTimeSynchronized();
+
+      setTimeDifference(difference);
+      setShowTimeWarning(!isSynchronized);
+    })();
+  }, []);
+
+  return (
+    <Dialog
+      open={showTimeWarning}
+      PaperProps={{
+        sx: {
+          maxWidth: "400px",
+        },
+      }}
+    >
+      <DialogContent>
+        <Stack alignItems="center" textAlign="center" spacing={2}>
+          <TbClockX size={96} color={theme.palette.error.dark} />
+
+          <p>Your local time is not synchronized with the server time.</p>
+
+          <p>
+            Your are {timeDifference && timeDifference > 0 ? "ahead" : "behind"}{" "}
+            by {timeDifference} ms.
+          </p>
+
+          <p>
+            Please make sure your system clock is synchronized to avoid any
+            problems.
+          </p>
+        </Stack>
+      </DialogContent>
+
+      <DialogActions sx={{ justifyContent: "center" }}>
+        <Button onClick={() => setShowTimeWarning(false)}>Dismiss</Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default TimeSynchronizationWarningDialog;

src/views/Login/index.tsx

@@ -5,6 +5,7 @@ import ConfirmDialog from "../../components/ConfirmDialog";
 import BottomGamesCount from "./components/BottomGamesCount";
 import SoundMuteFab from "./components/SoundMuteFab";
 import ThemeModeFab from "./components/ThemeModeFab";
+import TimeSynchronizationWarningDialog from "./components/TimeSynchronizationWarningDialog";
 
 const LoginView: FunctionComponent = () => {
   return (
@@ -43,6 +44,8 @@ const LoginView: FunctionComponent = () => {
           onConfirm={() => {}}
         />
       </Container>
+
+      <TimeSynchronizationWarningDialog />
     </>
   );
 };