From 4ea5bab83311929ab5e7f055cf24a71d224fbd98 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Sun, 16 Mar 2025 00:42:54 +0900
Subject: feat(frontend): show the current code size

---
 .../components/GolfPlayApps/GolfPlayAppGaming.tsx  | 46 +++++++++++++++-------
 1 file changed, 31 insertions(+), 15 deletions(-)

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

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>
-- 
cgit v1.2.3-70-g09d2