1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
|
import { useAtomValue } from "jotai";
import React, { useRef } from "react";
import { Link } from "react-router";
import SubmitButton from "../../components/SubmitButton";
import {
gamingLeftTimeSecondsAtom,
scoreAtom,
statusAtom,
} from "../../states/play";
import type { PlayerProfile } from "../../types/PlayerProfile";
import Problem from "../Gaming/Problem";
import SubmitResult from "../Gaming/SubmitResult";
import UserIcon from "../UserIcon";
type Props = {
gameDisplayName: string;
playerProfile: PlayerProfile;
problemTitle: string;
problemDescription: string;
sampleCode: string;
initialCode: string;
onCodeChange: (code: string) => void;
onCodeSubmit: (code: string) => void;
};
export default function GolfPlayAppGaming({
gameDisplayName,
playerProfile,
problemTitle,
problemDescription,
sampleCode,
initialCode,
onCodeChange,
onCodeSubmit,
}: Props) {
const leftTimeSeconds = useAtomValue(gamingLeftTimeSecondsAtom)!;
const score = useAtomValue(scoreAtom);
const status = useAtomValue(statusAtom);
const textareaRef = useRef<HTMLTextAreaElement>(null);
const handleTextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
onCodeChange(e.target.value);
};
const handleSubmitButtonClick = () => {
if (textareaRef.current) {
onCodeSubmit(textareaRef.current.value);
}
};
const leftTime = (() => {
const m = Math.floor(leftTimeSeconds / 60);
const s = leftTimeSeconds % 60;
return `${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
})();
return (
<div className="min-h-screen bg-gray-100 flex flex-col">
<div className="text-white bg-sky-600 flex flex-row justify-between px-4 py-2">
<div className="font-bold">
<div className="text-gray-100">{gameDisplayName}</div>
<div className="text-2xl">{leftTime}</div>
</div>
<Link to={"/dashboard"}>
<div className="flex gap-4 my-auto font-bold">
<div className="text-6xl">{score}</div>
<div className="text-end">
<div className="text-gray-100">Player 1</div>
<div className="text-2xl">{playerProfile.displayName}</div>
</div>
{playerProfile.iconPath && (
<UserIcon
iconPath={playerProfile.iconPath}
displayName={playerProfile.displayName}
className="w-12 h-12 my-auto"
/>
)}
</div>
</Link>
</div>
<div className="grow grid grid-cols-3 divide-x divide-gray-300">
<Problem
title={problemTitle}
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={
<SubmitButton onClick={handleSubmitButtonClick}>
提出
</SubmitButton>
}
/>
</div>
</div>
</div>
);
}
|
