diff options
Diffstat (limited to 'frontend/app')
| -rw-r--r-- | frontend/app/components/BorderedContainer.tsx | 7 | ||||
| -rw-r--r-- | frontend/app/components/Gaming/SubmitResult.tsx | 5 | ||||
| -rw-r--r-- | frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx | 46 |
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> |