feat(frontend): improve left time display

4 files changed, 39 insertions, 26 deletions

diff --git a/frontend/app/components/Gaming/LeftTime.tsx b/frontend/app/components/Gaming/LeftTime.tsx
new file mode 100644
index 0000000..a31c6b2
--- /dev/null
+++ b/frontend/app/components/Gaming/LeftTime.tsx
@@ -0,0 +1,26 @@
+type Props = {
+	sec: number;
+};
+
+export default function LeftTime({ sec }: Props) {
+	const s = sec % 60;
+	const m = Math.floor(sec / 60) % 60;
+	const h = Math.floor(sec / 3600) % 24;
+	const d = Math.floor(sec / 86400);
+
+	let leftTime = "";
+	if (d > 0 || h > 0) {
+		// 1d 2h 3m 4s
+		leftTime = [
+			d > 0 ? `${d}d` : "",
+			h > 0 ? `${h}h` : "",
+			m > 0 ? `${m}m` : "",
+			`${s}s`,
+		].join(" ");
+	} else {
+		// 03:04
+		leftTime = `${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
+	}
+
+	return <div className="text-3xl">{leftTime}</div>;
+}
diff --git a/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx b/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx
index 5c5e149..743588d 100644
--- a/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx
+++ b/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx
@@ -8,6 +8,7 @@ import {
 	statusAtom,
 } from "../../states/play";
 import type { PlayerProfile } from "../../types/PlayerProfile";
+import LeftTime from "../Gaming/LeftTime";
 import Problem from "../Gaming/Problem";
 import SubmitResult from "../Gaming/SubmitResult";
 import UserIcon from "../UserIcon";
@@ -49,18 +50,12 @@ export default function GolfPlayAppGaming({
 		}
 	};
 
-	const leftTime = (() => {
-		const m = Math.floor(leftTimeSeconds / 60);
-		const s = leftTimeSeconds % 60;
-		return `${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
-	})();
-
 	return (
 		<div className="min-h-screen bg-gray-100 flex flex-col">
 			<div className="text-white bg-sky-600 flex flex-row justify-between px-4 py-2">
 				<div className="font-bold">
 					<div className="text-gray-100">{gameDisplayName}</div>
-					<div className="text-2xl">{leftTime}</div>
+					<LeftTime sec={leftTimeSeconds} />
 				</div>
 				<Link to={"/dashboard"}>
 					<div className="flex gap-4 my-auto font-bold">
diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx
index d9ee800..8e2b565 100644
--- a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx
+++ b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx
@@ -5,6 +5,7 @@ import {
 } from "../../states/watch";
 import type { PlayerProfile } from "../../types/PlayerProfile";
 import CodeBlock from "../Gaming/CodeBlock";
+import LeftTime from "../Gaming/LeftTime";
 import Problem from "../Gaming/Problem";
 import ScoreBar from "../Gaming/ScoreBar";
 import SubmitResult from "../Gaming/SubmitResult";
@@ -41,12 +42,6 @@ export default function GolfWatchAppGaming1v1({
 	const scoreB = stateB?.score ?? null;
 	const statusB = stateB?.status ?? "none";
 
-	const leftTime = (() => {
-		const m = Math.floor(leftTimeSeconds / 60);
-		const s = leftTimeSeconds % 60;
-		return `${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
-	})();
-
 	const topBg = gameResult
 		? gameResult === "winA"
 			? "bg-orange-400"
@@ -76,15 +71,17 @@ export default function GolfWatchAppGaming1v1({
 				</div>
 				<div className="font-bold text-center">
 					<div className="text-gray-100">{gameDisplayName}</div>
-					<div className="text-3xl">
-						{gameResult
-							? gameResult === "winA"
+					{gameResult ? (
+						<div className="text-3xl">
+							{gameResult === "winA"
 								? `勝者 ${playerProfileA.displayName}`
 								: gameResult === "winB"
 									? `勝者 ${playerProfileB.displayName}`
-									: "引き分け"
-							: leftTime}
-					</div>
+									: "引き分け"}
+						</div>
+					) : (
+						<LeftTime sec={leftTimeSeconds} />
+					)}
 				</div>
 				<div className="font-bold flex justify-between my-auto">
 					<div className="text-6xl">{scoreB}</div>
diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx
index ff60641..1b91620 100644
--- a/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx
+++ b/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx
@@ -1,6 +1,7 @@
 import { useAtomValue } from "jotai";
 import type { components } from "../../api/schema";
 import { gamingLeftTimeSecondsAtom } from "../../states/watch";
+import LeftTime from "../Gaming/LeftTime";
 import Problem from "../Gaming/Problem";
 import UserLabel from "../UserLabel";
 
@@ -25,12 +26,6 @@ export default function GolfWatchAppGamingMultiplayer({
 }: Props) {
 	const leftTimeSeconds = useAtomValue(gamingLeftTimeSecondsAtom)!;
 
-	const leftTime = (() => {
-		const m = Math.floor(leftTimeSeconds / 60);
-		const s = leftTimeSeconds % 60;
-		return `${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
-	})();
-
 	const topBg = gameResult
 		? gameResult === "winA"
 			? "bg-orange-400"
@@ -45,7 +40,7 @@ export default function GolfWatchAppGamingMultiplayer({
 				<div className="font-bold flex justify-between my-auto"></div>
 				<div className="font-bold text-center">
 					<div className="text-gray-100">{gameDisplayName}</div>
-					<div className="text-3xl">{leftTime}</div>
+					<LeftTime sec={leftTimeSeconds} />
 				</div>
 				<div className="font-bold flex justify-between my-auto"></div>
 			</div>