diff options
Diffstat (limited to 'frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx')
| -rw-r--r-- | frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx | 46 |
1 files changed, 31 insertions, 15 deletions
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> |