feat(frontend): show the current code size

3 files changed, 37 insertions, 21 deletions

diff --git a/frontend/app/components/BorderedContainer.tsx b/frontend/app/components/BorderedContainer.tsx
index fe15c3b..d9b2fe8 100644
--- a/frontend/app/components/BorderedContainer.tsx
+++ b/frontend/app/components/BorderedContainer.tsx
@@ -2,11 +2,14 @@ import React from "react";
 
 type Props = {
 	children: React.ReactNode;
+	className?: string;
 };
 
-export default function BorderedContainer({ children }: Props) {
+export default function BorderedContainer({ children, className }: Props) {
 	return (
-		<div className="bg-white border-2 border-blue-600 rounded-xl p-4">
+		<div
+			className={`bg-white border-2 border-blue-600 rounded-xl p-4 ${className}`}
+		>
 			{children}
 		</div>
 	);
diff --git a/frontend/app/components/Gaming/SubmitResult.tsx b/frontend/app/components/Gaming/SubmitResult.tsx
index a78c79e..ea75b6b 100644
--- a/frontend/app/components/Gaming/SubmitResult.tsx
+++ b/frontend/app/components/Gaming/SubmitResult.tsx
@@ -1,17 +1,14 @@
-import React from "react";
 import type { components } from "../../api/schema";
 import SubmitStatusLabel from "../SubmitStatusLabel";
 
 type Props = {
 	status: components["schemas"]["ExecutionStatus"];
-	submitButton?: React.ReactNode;
 };
 
-export default function SubmitResult({ status, submitButton }: Props) {
+export default function SubmitResult({ status }: Props) {
 	return (
 		<div className="flex flex-col gap-2">
 			<div className="flex">
-				{submitButton}
 				<div className="grow font-bold text-xl text-center">
 					<SubmitStatusLabel status={status} />
 				</div>
diff --git a/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx b/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx
index 743588d..c9f9256 100644
--- a/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx
+++ b/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx
@@ -1,5 +1,5 @@
 import { useAtomValue } from "jotai";
-import React, { useRef } from "react";
+import React, { useRef, useState } from "react";
 import { Link } from "react-router";
 import SubmitButton from "../../components/SubmitButton";
 import {
@@ -11,8 +11,17 @@ import type { PlayerProfile } from "../../types/PlayerProfile";
 import LeftTime from "../Gaming/LeftTime";
 import Problem from "../Gaming/Problem";
 import SubmitResult from "../Gaming/SubmitResult";
+import BorderedContainer from "../BorderedContainer";
 import UserIcon from "../UserIcon";
 
+function calcCodeSize(code: string): number {
+	return code
+		.replace(/\s+/g, "")
+		.replace(/^<\?php/, "")
+		.replace(/^<\?/, "")
+		.replace(/\?>$/, "").length;
+}
+
 type Props = {
 	gameDisplayName: string;
 	playerProfile: PlayerProfile;
@@ -38,9 +47,11 @@ export default function GolfPlayAppGaming({
 	const score = useAtomValue(scoreAtom);
 	const status = useAtomValue(statusAtom);
 
+	const [codeSize, setCodeSize] = useState(calcCodeSize(initialCode));
 	const textareaRef = useRef<HTMLTextAreaElement>(null);
 
 	const handleTextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+		setCodeSize(calcCodeSize(e.target.value));
 		onCodeChange(e.target.value);
 	};
 
@@ -80,23 +91,28 @@ export default function GolfPlayAppGaming({
 					description={problemDescription}
 					sampleCode={sampleCode}
 				/>
-				<div className="p-4">
-					<textarea
-						ref={textareaRef}
-						defaultValue={initialCode}
-						onChange={handleTextChange}
-						className="resize-none h-full w-full rounded-lg border border-gray-300 p-2 focus:outline-hidden focus:ring-2 focus:ring-gray-400 transition duration-300"
-					/>
-				</div>
-				<div className="p-4">
-					<SubmitResult
-						status={status}
-						submitButton={
+				<div className="p-4 flex flex-col gap-4">
+					<div className="text-center text-xl font-bold">ソースコード</div>
+					<BorderedContainer className="grow flex flex-col gap-4">
+						<div className="flex flex-row gap-2 items-center">
+							<div className="grow font-semibold text-lg">
+								コードサイズ: {codeSize}
+							</div>
 							<SubmitButton onClick={handleSubmitButtonClick}>
 								提出
 							</SubmitButton>
-						}
-					/>
+						</div>
+						<textarea
+							ref={textareaRef}
+							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"
+						/>
+					</BorderedContainer>
+				</div>
+				<div className="p-4 flex flex-col gap-4">
+					<div className="text-center text-xl font-bold">提出結果</div>
+					<SubmitResult status={status} />
 				</div>
 			</div>
 		</div>