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
|
import { Link } from "@remix-run/react";
import React, { useRef } from "react";
import SubmitButton from "../../components/SubmitButton";
import type { PlayerInfo } from "../../models/PlayerInfo";
import BorderedContainer from "../BorderedContainer";
import SubmitResult from "../Gaming/SubmitResult";
type Props = {
gameDisplayName: string;
gameDurationSeconds: number;
leftTimeSeconds: number;
playerInfo: Omit<PlayerInfo, "code">;
problemTitle: string;
problemDescription: string;
onCodeChange: (code: string) => void;
onCodeSubmit: (code: string) => void;
};
export default function GolfPlayAppGaming({
gameDisplayName,
gameDurationSeconds,
leftTimeSeconds,
playerInfo,
problemTitle,
problemDescription,
onCodeChange,
onCodeSubmit,
}: Props) {
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 k = gameDurationSeconds + leftTimeSeconds;
const m = Math.floor(k / 60);
const s = k % 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-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">{leftTime}</div>
</div>
<Link to={"/dashboard"}>
<div className="flex gap-4 my-auto font-bold">
<div className="text-6xl">{playerInfo.score}</div>
<div className="text-end">
<div className="text-gray-100">Player 1</div>
<div className="text-2xl">{playerInfo.displayName}</div>
</div>
{playerInfo.iconPath && (
<img
src={
process.env.NODE_ENV === "development"
? `http://localhost:8002/iosdc-japan/2024/code-battle${playerInfo.iconPath}`
: `/iosdc-japan/2024/code-battle${playerInfo.iconPath}`
}
alt={`${playerInfo.displayName} のアイコン`}
className="w-12 h-12 rounded-full my-auto border-4 border-white"
/>
)}
</div>
</Link>
</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="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">
<SubmitResult
result={playerInfo.submitResult}
submitButton={
<SubmitButton onClick={handleSubmitButtonClick}>
提出
</SubmitButton>
}
/>
</div>
</div>
</div>
);
}
|
