From 35d1be206c6be675d92839cfa209fceb5d1b6db9 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Sat, 15 Mar 2025 21:10:51 +0900
Subject: feat(frontend): show sample code in watch page

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

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

diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx
index ec18bbc..d9ee800 100644
--- a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx
+++ b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx
@@ -4,8 +4,8 @@ import {
 	latestGameStatesAtom,
 } from "../../states/watch";
 import type { PlayerProfile } from "../../types/PlayerProfile";
-import BorderedContainer from "../BorderedContainer";
 import CodeBlock from "../Gaming/CodeBlock";
+import Problem from "../Gaming/Problem";
 import ScoreBar from "../Gaming/ScoreBar";
 import SubmitResult from "../Gaming/SubmitResult";
 import UserIcon from "../UserIcon";
@@ -16,6 +16,7 @@ type Props = {
 	playerProfileB: PlayerProfile;
 	problemTitle: string;
 	problemDescription: string;
+	sampleCode: string;
 	gameResult: "winA" | "winB" | "draw" | null;
 };
 
@@ -25,6 +26,7 @@ export default function GolfWatchAppGaming1v1({
 	playerProfileB,
 	problemTitle,
 	problemDescription,
+	sampleCode,
 	gameResult,
 }: Props) {
 	const leftTimeSeconds = useAtomValue(gamingLeftTimeSecondsAtom)!;
@@ -114,16 +116,11 @@ export default function GolfWatchAppGaming1v1({
 						<SubmitResult status={statusA} />
 						<SubmitResult status={statusB} />
 					</div>
-					<div>
-						<div className="mb-2 text-center text-xl font-bold">
-							{problemTitle}
-						</div>
-						<BorderedContainer>
-							<pre className="text-gray-700 whitespace-pre-wrap break-words">
-								{problemDescription}
-							</pre>
-						</BorderedContainer>
-					</div>
+					<Problem
+						title={problemTitle}
+						description={problemDescription}
+						sampleCode={sampleCode}
+					/>
 				</div>
 				<CodeBlock code={codeB} language="php" />
 			</div>
diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx
index 758c589..b382850 100644
--- a/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx
+++ b/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx
@@ -1,7 +1,7 @@
 import { useAtomValue } from "jotai";
 import type { components } from "../../api/schema";
 import { gamingLeftTimeSecondsAtom } from "../../states/watch";
-import BorderedContainer from "../BorderedContainer";
+import Problem from "../Gaming/Problem";
 import UserLabel from "../UserLabel";
 
 type RankingEntry = components["schemas"]["RankingEntry"];
@@ -11,6 +11,7 @@ type Props = {
 	ranking: RankingEntry[];
 	problemTitle: string;
 	problemDescription: string;
+	sampleCode: string;
 	gameResult: "winA" | "winB" | "draw" | null;
 };
 
@@ -19,6 +20,7 @@ export default function GolfWatchAppGamingMultiplayer({
 	ranking,
 	problemTitle,
 	problemDescription,
+	sampleCode,
 	gameResult,
 }: Props) {
 	const leftTimeSeconds = useAtomValue(gamingLeftTimeSecondsAtom)!;
@@ -48,18 +50,11 @@ export default function GolfWatchAppGamingMultiplayer({
 				<div className="font-bold flex justify-between my-auto"></div>
 			</div>
 			<div className="grow grid grid-cols-2 p-4 gap-4">
-				<div className="flex flex-col gap-4">
-					<div>
-						<div className="mb-2 text-center text-xl font-bold">
-							{problemTitle}
-						</div>
-						<BorderedContainer>
-							<pre className="text-gray-700 whitespace-pre-wrap break-words">
-								{problemDescription}
-							</pre>
-						</BorderedContainer>
-					</div>
-				</div>
+				<Problem
+					title={problemTitle}
+					description={problemDescription}
+					sampleCode={sampleCode}
+				/>
 				<div>
 					<table className="min-w-full divide-y divide-gray-200">
 						<thead className="bg-gray-50">
-- 
cgit v1.2.3-70-g09d2