From 8e157cc3ad39ad55cf5aac5aa3353ada916f490c Mon Sep 17 00:00:00 2001
From: Nik Afiq <nik.afiq98@ymail.com>
Date: Tue, 11 Nov 2025 23:10:31 +0900
Subject: [PATCH] Changed the timesync display to show seconds

---
 frontend/src/components/TimeSyncNotice.tsx | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/TimeSyncNotice.tsx b/frontend/src/components/TimeSyncNotice.tsx
index 9a8e8ff..e9cd815 100644
--- a/frontend/src/components/TimeSyncNotice.tsx
+++ b/frontend/src/components/TimeSyncNotice.tsx
@@ -1,9 +1,15 @@
 import { useEffect, useState } from "react";
 import { useTimeSkew } from "../hooks/useTimeSkew";
 
-function formatMs(ms: number) {
-    const sign = ms > 0 ? "+" : "";
-    return `${sign}${ms}ms`;
+function formatDelay(ms: number, withSign = true) {
+    const sign = withSign ? (ms > 0 ? "+" : ms < 0 ? "−" : "") : "";
+    const abs = Math.abs(ms);
+    if (abs >= 1000) {
+        const s = Math.floor(abs / 1000);
+        const rem = abs % 1000;
+        return `${sign}${s}s${rem ? ` ${rem}ms` : ""}`;
+    }
+    return `${sign}${abs}ms`;
 }
 
 export default function TimeSyncNotice({
@@ -33,11 +39,11 @@ export default function TimeSyncNotice({
 
     const ahead = skewMs > 0;
     const msgJa = ahead
-        ? `端末の時計が正確な時刻より ${formatMs(skewMs)} 進んでいます（往復遅延 ${rttMs ?? "-"}ms）`
-        : `端末の時計が正確な時刻より ${formatMs(-skewMs)} 遅れています（往復遅延 ${rttMs ?? "-"}ms）`;
+        ? `端末の時計が正確な時刻より ${formatDelay(skewMs)} 進んでいます（通信往復遅延 ${rttMs ?? "-"}ms）`
+        : `端末の時計が正確な時刻より ${formatDelay(-skewMs)} 遅れています（通信往復遅延 ${rttMs ?? "-"}ms）`;
     const msgEn = ahead
-        ? `Your device clock is ${formatMs(skewMs)} ahead of the correct time (RTT ${rttMs ?? "-"}ms).`
-        : `Your device clock is ${formatMs(-skewMs)} behind the correct time (RTT ${rttMs ?? "-"}ms).`;
+        ? `Your device clock is ${formatDelay(skewMs)} ahead of the correct time (RTT ${rttMs ?? "-"}ms).`
+        : `Your device clock is ${formatDelay(-skewMs)} behind the correct time (RTT ${rttMs ?? "-"}ms).`;
 
     const onClose = () => {
         setDismissed(true);