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