From 909ef91eb46334fa59602c02ab85afc209382e61 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Sun, 18 Aug 2024 01:20:19 +0900
Subject: feat(frontend): show problem in watch page

---
 .../GolfWatchApps/GolfWatchAppGaming.tsx           | 29 +++++++++++++---------
 1 file changed, 17 insertions(+), 12 deletions(-)

(limited to 'frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx')

diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx
index d17c2dc..abdc855 100644
--- a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx
+++ b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx
@@ -1,4 +1,5 @@
 import { PlayerInfo } from "../../models/PlayerInfo";
+import BorderedContainer from "../BorderedContainer";
 import CodeBlock from "../Gaming/CodeBlock";
 import ScoreBar from "../Gaming/ScoreBar";
 import SubmitResult from "../Gaming/SubmitResult";
@@ -19,6 +20,8 @@ export default function GolfWatchAppGaming({
 	leftTimeSeconds,
 	playerInfoA,
 	playerInfoB,
+	problemTitle,
+	problemDescription,
 }: Props) {
 	const leftTime = (() => {
 		const k = gameDurationSeconds + leftTimeSeconds;
@@ -81,19 +84,21 @@ export default function GolfWatchAppGaming({
 				bgA="bg-orange-400"
 				bgB="bg-purple-400"
 			/>
-			<div className="grow grid grid-cols-10 p-4 gap-4">
-				<div className="col-span-3">
-					<CodeBlock code={playerInfoA.code ?? ""} />
-				</div>
-				<div className="col-span-2">
-					<SubmitResult result={playerInfoA.submitResult} />
-				</div>
-				<div className="col-span-2">
-					<SubmitResult result={playerInfoB.submitResult} />
-				</div>
-				<div className="col-span-3">
-					<CodeBlock code={playerInfoB.code ?? ""} />
+			<div className="grow grid grid-cols-3 p-4 gap-4">
+				<CodeBlock code={playerInfoA.code ?? ""} />
+				<div className="flex flex-col gap-4 justify-between">
+					<div className="grid grid-cols-2 gap-4">
+						<SubmitResult result={playerInfoA.submitResult} />
+						<SubmitResult result={playerInfoB.submitResult} />
+					</div>
+					<div>
+						<div className="mb-2 text-center text-xl font-bold">
+							{problemTitle}
+						</div>
+						<BorderedContainer>{problemDescription}</BorderedContainer>
+					</div>
 				</div>
+				<CodeBlock code={playerInfoB.code ?? ""} />
 			</div>
 		</div>
 	);
-- 
cgit v1.2.3-70-g09d2