From 8c7d882dfa67bcef37a4f39be6f1ca57f160b816 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Mon, 12 Aug 2024 00:32:06 +0900
Subject: feat(frontend): improve play page styling

---
 frontend/app/components/GolfPlayApp.client.tsx     |  8 +++
 .../components/GolfPlayApps/GolfPlayAppGaming.tsx  | 65 +++++++++++++---------
 frontend/app/routes/_index.tsx                     |  2 +-
 frontend/app/routes/dashboard.tsx                  |  4 +-
 frontend/app/routes/golf.$gameId.play.tsx          |  7 ++-
 frontend/app/tailwind.css                          |  6 ++
 6 files changed, 60 insertions(+), 32 deletions(-)

(limited to 'frontend')

diff --git a/frontend/app/components/GolfPlayApp.client.tsx b/frontend/app/components/GolfPlayApp.client.tsx
index 4aebd52..ef3a229 100644
--- a/frontend/app/components/GolfPlayApp.client.tsx
+++ b/frontend/app/components/GolfPlayApp.client.tsx
@@ -12,14 +12,17 @@ type GamePlayerMessageS2C = components["schemas"]["GamePlayerMessageS2C"];
 type GamePlayerMessageC2S = components["schemas"]["GamePlayerMessageC2S"];
 
 type Game = components["schemas"]["Game"];
+type User = components["schemas"]["User"];
 
 type GameState = "connecting" | "waiting" | "starting" | "gaming" | "finished";
 
 export default function GolfPlayApp({
 	game,
+	player,
 	sockToken,
 }: {
 	game: Game;
+	player: User;
 	sockToken: string;
 }) {
 	const socketUrl =
@@ -83,6 +86,9 @@ export default function GolfPlayApp({
 	}, 1000);
 
 	const onCodeSubmit = useDebouncedCallback((code: string) => {
+		if (code === "") {
+			return;
+		}
 		console.log("player:c2s:submit");
 		sendJsonMessage({
 			type: "player:c2s:submit",
@@ -171,6 +177,8 @@ export default function GolfPlayApp({
 	} else if (gameState === "gaming") {
 		return (
 			<GolfPlayAppGaming
+				gameDisplayName={game.display_name}
+				playerDisplayName={player.display_name}
 				problemTitle={game.problem.title}
 				problemDescription={game.problem.description}
 				onCodeChange={onCodeChange}
diff --git a/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx b/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx
index 31927a5..03acf5a 100644
--- a/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx
+++ b/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx
@@ -1,6 +1,11 @@
+import { Link } from "@remix-run/react";
 import React, { useRef } from "react";
+import SubmitButton from "../../components/SubmitButton";
+import BorderedContainer from "../BorderedContainer";
 
 type Props = {
+	gameDisplayName: string;
+	playerDisplayName: string;
 	problemTitle: string;
 	problemDescription: string;
 	onCodeChange: (code: string) => void;
@@ -10,6 +15,8 @@ type Props = {
 };
 
 export default function GolfPlayAppGaming({
+	gameDisplayName,
+	playerDisplayName,
 	problemTitle,
 	problemDescription,
 	onCodeChange,
@@ -30,34 +37,40 @@ export default function GolfPlayAppGaming({
 	};
 
 	return (
-		<div className="min-h-screen flex">
-			<div className="mx-auto flex min-h-full flex-grow">
-				<div className="flex w-1/2 flex-col justify-between p-4">
-					<div>
-						<div className="mb-2 text-xl font-bold">{problemTitle}</div>
-						<div className="text-gray-700">{problemDescription}</div>
-					</div>
-					<div className="mb-4 mt-auto">
-						<div className="mb-2">
-							<div className="font-semibold text-green-500">
-								Score: {currentScore ?? "-"} ({lastExecStatus ?? "-"})
-							</div>
-						</div>
-						<button
-							onClick={handleSubmitButtonClick}
-							className="focus:shadow-outline rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700 focus:outline-none"
-						>
-							Submit
-						</button>
+		<div className="min-h-screen bg-gray-100 flex flex-col">
+			<div className="text-white bg-iosdc-japan flex flex-row justify-between px-4 py-2">
+				<div className="font-bold">
+					<div className="text-gray-100">{gameDisplayName}</div>
+					<div className="text-2xl">03:21</div>
+				</div>
+				<div>
+					<Link to={"/dashboard"} className="font-bold text-xl">
+						{playerDisplayName}
+					</Link>
+				</div>
+			</div>
+			<div className="grow grid grid-cols-3 divide-x divide-gray-300">
+				<div className="p-4">
+					<div className="mb-2 text-xl font-bold">{problemTitle}</div>
+					<div className="p-2">
+						<BorderedContainer>
+							<div className="text-gray-700">{problemDescription}</div>
+						</BorderedContainer>
 					</div>
 				</div>
-				<div className="w-1/2 p-4 flex">
-					<div className="flex-grow">
-						<textarea
-							ref={textareaRef}
-							onChange={handleTextChange}
-							className="h-full w-full rounded-lg border border-gray-300 p-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
-						></textarea>
+				<div className="p-4">
+					<textarea
+						ref={textareaRef}
+						onChange={handleTextChange}
+						className="resize-none h-full w-full rounded-lg border border-gray-300 p-2 focus:outline-none focus:ring-2 focus:ring-gray-400 transition duration-300"
+					></textarea>
+				</div>
+				<div className="p-4">
+					<SubmitButton onClick={handleSubmitButtonClick}>提出</SubmitButton>
+					<div className="mb-2 mt-auto">
+						<div className="font-semibold text-green-500">
+							Score: {currentScore ?? "-"} ({lastExecStatus ?? "-"})
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/frontend/app/routes/_index.tsx b/frontend/app/routes/_index.tsx
index 9be594f..24fff9f 100644
--- a/frontend/app/routes/_index.tsx
+++ b/frontend/app/routes/_index.tsx
@@ -22,7 +22,7 @@ export default function Index() {
 				className="w-24 h-24"
 			/>
 			<div className="text-center">
-				<div className="font-bold text-transparent bg-clip-text bg-gradient-to-r from-orange-400 via-pink-500 to-purple-400 flex flex-col gap-y-2">
+				<div className="font-bold text-transparent bg-clip-text bg-iosdc-japan flex flex-col gap-y-2">
 					<div className="text-3xl">iOSDC Japan 2024</div>
 					<div className="text-6xl">Swift Code Battle</div>
 				</div>
diff --git a/frontend/app/routes/dashboard.tsx b/frontend/app/routes/dashboard.tsx
index 4c751d9..99c64f2 100644
--- a/frontend/app/routes/dashboard.tsx
+++ b/frontend/app/routes/dashboard.tsx
@@ -31,8 +31,8 @@ export default function Dashboard() {
 
 	return (
 		<div className="p-6 bg-gray-100 min-h-screen flex flex-col items-center">
-			<h1 className="text-2xl font-bold mb-4 text-gray-800">
-				<span>{user.display_name}</span>
+			<h1 className="text-2xl font-bold mb-4">
+				<span className="text-gray-800">{user.display_name}</span>
 				<span className="text-gray-500 ml-2">@{user.username}</span>
 			</h1>
 			<h2 className="text-xl font-semibold mb-4 text-gray-700">試合</h2>
diff --git a/frontend/app/routes/golf.$gameId.play.tsx b/frontend/app/routes/golf.$gameId.play.tsx
index 3712df2..ea1b8fd 100644
--- a/frontend/app/routes/golf.$gameId.play.tsx
+++ b/frontend/app/routes/golf.$gameId.play.tsx
@@ -15,7 +15,7 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => [
 ];
 
 export async function loader({ params, request }: LoaderFunctionArgs) {
-	const { token } = await ensureUserLoggedIn(request);
+	const { token, user } = await ensureUserLoggedIn(request);
 
 	const fetchGame = async () => {
 		return (await apiGetGame(token, Number(params.gameId))).game;
@@ -27,16 +27,17 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
 	const [game, sockToken] = await Promise.all([fetchGame(), fetchSockToken()]);
 	return {
 		game,
+		player: user,
 		sockToken,
 	};
 }
 
 export default function GolfPlay() {
-	const { game, sockToken } = useLoaderData<typeof loader>();
+	const { game, player, sockToken } = useLoaderData<typeof loader>();
 
 	return (
 		<ClientOnly fallback={<GolfPlayAppConnecting />}>
-			{() => <GolfPlayApp game={game} sockToken={sockToken} />}
+			{() => <GolfPlayApp game={game} player={player} sockToken={sockToken} />}
 		</ClientOnly>
 	);
 }
diff --git a/frontend/app/tailwind.css b/frontend/app/tailwind.css
index b5c61c9..6d3faee 100644
--- a/frontend/app/tailwind.css
+++ b/frontend/app/tailwind.css
@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer components {
+  .bg-iosdc-japan {
+    @apply bg-gradient-to-r from-orange-400 via-pink-500 to-purple-400;
+  }
+}
-- 
cgit v1.2.3-70-g09d2