From 17c1fbe0f8565f191a191138bebac7409512962e Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Sat, 15 Mar 2025 23:23:16 +0900
Subject: feat(frontend): improve left time display

---
 .../GolfWatchApps/GolfWatchAppGaming1v1.tsx         | 21 +++++++++------------
 .../GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx |  9 ++-------
 2 files changed, 11 insertions(+), 19 deletions(-)

(limited to 'frontend/app/components/GolfWatchApps')

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>
-- 
cgit v1.2.3-70-g09d2