From 4b28b1eb8ee6177a8009b89ac2200b3b753bc5b1 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Fri, 21 Mar 2025 10:55:10 +0900
Subject: feat(frontend): support mobile layout

---
 frontend/app/components/Gaming/LeftTime.tsx        |  2 +-
 frontend/app/components/GolfPlayApp.tsx            |  2 +-
 .../components/GolfPlayApps/GolfPlayAppGaming.tsx  |  7 +++--
 .../GolfWatchApps/GolfWatchAppGaming1v1.tsx        | 34 ++++++++++++++--------
 frontend/app/components/ThreeColumnLayout.tsx      |  2 +-
 frontend/app/components/TitledColumn.tsx           |  5 ++--
 frontend/app/components/TwoColumnLayout.tsx        |  2 +-
 7 files changed, 34 insertions(+), 20 deletions(-)

(limited to 'frontend/app')

diff --git a/frontend/app/components/Gaming/LeftTime.tsx b/frontend/app/components/Gaming/LeftTime.tsx
index a31c6b2..5013c76 100644
--- a/frontend/app/components/Gaming/LeftTime.tsx
+++ b/frontend/app/components/Gaming/LeftTime.tsx
@@ -22,5 +22,5 @@ export default function LeftTime({ sec }: Props) {
 		leftTime = `${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
 	}
 
-	return <div className="text-3xl">{leftTime}</div>;
+	return <div className="text-2xl md:text-3xl">{leftTime}</div>;
 }
diff --git a/frontend/app/components/GolfPlayApp.tsx b/frontend/app/components/GolfPlayApp.tsx
index 71b40ce..25b81af 100644
--- a/frontend/app/components/GolfPlayApp.tsx
+++ b/frontend/app/components/GolfPlayApp.tsx
@@ -55,8 +55,8 @@ export default function GolfPlayApp({ game, player, initialGameState }: Props) {
 	};
 
 	const onCodeChange = useDebouncedCallback(async (code: string) => {
-		console.log("player:c2s:code");
 		if (game.game_type === "1v1") {
+			console.log("player:c2s:code");
 			await apiClient.postGamePlayCode(game.game_id, code);
 		}
 	}, 1000);
diff --git a/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx b/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx
index b9b3159..b40f3c3 100644
--- a/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx
+++ b/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx
@@ -65,8 +65,10 @@ export default function GolfPlayAppGaming({
 				</div>
 				<Link to={"/dashboard"}>
 					<div className="flex gap-6 items-center font-bold">
-						<div className="text-6xl">{score}</div>
-						<div className="text-4xl">{playerProfile.displayName}</div>
+						<div className="text-2xl md:text-6xl">{score}</div>
+						<div className="hidden md:block text-4xl">
+							{playerProfile.displayName}
+						</div>
 						{playerProfile.iconPath && (
 							<UserIcon
 								iconPath={playerProfile.iconPath}
@@ -98,6 +100,7 @@ export default function GolfPlayAppGaming({
 							defaultValue={initialCode}
 							onChange={handleTextChange}
 							className="grow resize-none h-full w-full p-2 bg-gray-50 rounded-lg border border-gray-300 focus:outline-hidden focus:ring-2 focus:ring-gray-400 transition duration-300"
+							rows={10}
 						/>
 					</BorderedContainer>
 				</TitledColumn>
diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx
index ce12dca..a17b301 100644
--- a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx
+++ b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx
@@ -66,18 +66,20 @@ export default function GolfWatchAppGaming1v1({
 	return (
 		<div className="min-h-screen bg-gray-100 flex flex-col">
 			<div className={`text-white ${topBg} grid grid-cols-3 px-4 py-2`}>
-				<div className="font-bold flex justify-between my-auto">
+				<div className="font-bold flex gap-4 justify-start md:justify-between items-center my-auto">
 					<div className="flex gap-6 items-center">
-						{playerProfileA?.iconPath && (
+						{playerProfileB?.iconPath && (
 							<UserIcon
-								iconPath={playerProfileA.iconPath}
-								displayName={playerProfileA.displayName}
+								iconPath={playerProfileB.iconPath}
+								displayName={playerProfileB.displayName}
 								className="w-12 h-12 my-auto"
 							/>
 						)}
-						<div className="text-4xl">{playerProfileA?.displayName}</div>
+						<div className="hidden md:block text-4xl">
+							{playerProfileB?.displayName}
+						</div>
 					</div>
-					<div className="text-6xl">{scoreA}</div>
+					<div className="text-2xl md:text-6xl">{scoreB}</div>
 				</div>
 				<div className="font-bold text-center">
 					<div className="text-gray-100">{gameDisplayName}</div>
@@ -93,10 +95,12 @@ export default function GolfWatchAppGaming1v1({
 						<LeftTime sec={leftTimeSeconds} />
 					)}
 				</div>
-				<div className="font-bold flex justify-between my-auto">
-					<div className="text-6xl">{scoreB}</div>
+				<div className="font-bold flex gap-4 justify-end md:justify-between items-center my-auto">
+					<div className="text-2xl md:text-6xl">{scoreB}</div>
 					<div className="flex gap-6 items-center text-end">
-						<div className="text-4xl">{playerProfileB?.displayName}</div>
+						<div className="hidden md:block text-4xl">
+							{playerProfileB?.displayName}
+						</div>
 						{playerProfileB?.iconPath && (
 							<UserIcon
 								iconPath={playerProfileB.iconPath}
@@ -114,21 +118,27 @@ export default function GolfWatchAppGaming1v1({
 				bgB="bg-purple-400"
 			/>
 			<ThreeColumnLayout>
-				<TitledColumn title={<SubmitStatusLabel status={statusA} />}>
+				<TitledColumn
+					title={<SubmitStatusLabel status={statusA} />}
+					className="order-2 md:order-1"
+				>
 					<FoldableBorderedContainerWithCaption
 						caption={`コードサイズ: ${codeSizeA}`}
 					>
 						<CodeBlock code={codeA} language="php" />
 					</FoldableBorderedContainerWithCaption>
 				</TitledColumn>
-				<TitledColumn title={problemTitle}>
+				<TitledColumn title={problemTitle} className="order-1 md:order-2">
 					<ProblemColumnContent
 						description={problemDescription}
 						sampleCode={sampleCode}
 					/>
 					<RankingTable />
 				</TitledColumn>
-				<TitledColumn title={<SubmitStatusLabel status={statusB} />}>
+				<TitledColumn
+					title={<SubmitStatusLabel status={statusB} />}
+					className="order-3"
+				>
 					<FoldableBorderedContainerWithCaption
 						caption={`コードサイズ: ${codeSizeB}`}
 					>
diff --git a/frontend/app/components/ThreeColumnLayout.tsx b/frontend/app/components/ThreeColumnLayout.tsx
index 42533b7..d2a5ba5 100644
--- a/frontend/app/components/ThreeColumnLayout.tsx
+++ b/frontend/app/components/ThreeColumnLayout.tsx
@@ -6,7 +6,7 @@ type Props = {
 
 export default function ThreeColumnLayout({ children }: Props) {
 	return (
-		<div className="grow grid grid-cols-3 divide-x divide-gray-300">
+		<div className="grow grid grid-cols-1 md:grid-cols-3 md:divide-x divide-gray-300">
 			{children}
 		</div>
 	);
diff --git a/frontend/app/components/TitledColumn.tsx b/frontend/app/components/TitledColumn.tsx
index 4272ad4..a26271b 100644
--- a/frontend/app/components/TitledColumn.tsx
+++ b/frontend/app/components/TitledColumn.tsx
@@ -3,11 +3,12 @@ import React from "react";
 type Props = {
 	children: React.ReactNode;
 	title: React.ReactNode;
+	className?: string;
 };
 
-export default function TitledColumn({ children, title }: Props) {
+export default function TitledColumn({ children, title, className }: Props) {
 	return (
-		<div className="p-4 flex flex-col gap-4">
+		<div className={`p-4 flex flex-col gap-4 ${className}`}>
 			<div className="text-center text-xl font-bold">{title}</div>
 			{children}
 		</div>
diff --git a/frontend/app/components/TwoColumnLayout.tsx b/frontend/app/components/TwoColumnLayout.tsx
index 980bf4d..68eab32 100644
--- a/frontend/app/components/TwoColumnLayout.tsx
+++ b/frontend/app/components/TwoColumnLayout.tsx
@@ -6,7 +6,7 @@ type Props = {
 
 export default function TwoColumnLayout({ children }: Props) {
 	return (
-		<div className="grow grid grid-cols-2 divide-x divide-gray-300">
+		<div className="grow grid grid-cols-1 md:grid-cols-2 md:divide-x divide-gray-300">
 			{children}
 		</div>
 	);
-- 
cgit v1.2.3-70-g09d2