blob: bdd1ac35cfe2db351931694b43eca5373956cf6e (
plain)
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
110
111
112
113
114
115
116
117
118
119
120
|
import { PlayerInfo } from "../../models/PlayerInfo";
import { submitResultStatusToLabel } from "../../models/SubmitResult";
import ExecStatusIndicatorIcon from "../ExecStatusIndicatorIcon";
type Props = {
problem: string;
playerInfoA: PlayerInfo;
playerInfoB: PlayerInfo;
leftTimeSeconds: number;
};
export default function GolfWatchAppGaming({
problem,
playerInfoA,
playerInfoB,
leftTimeSeconds,
}: Props) {
const leftTime = (() => {
const m = Math.floor(leftTimeSeconds / 60);
const s = leftTimeSeconds % 60;
return `${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
})();
const scoreRatio = (() => {
const scoreA = playerInfoA.score ?? 0;
const scoreB = playerInfoB.score ?? 0;
const totalScore = scoreA + scoreB;
return totalScore === 0 ? 50 : (scoreB / totalScore) * 100;
})();
return (
<div className="grid h-full w-full grid-rows-[auto_auto_1fr_auto]">
<div className="grid grid-cols-[1fr_auto_1fr]">
<div className="grid justify-start bg-red-500 p-2 text-white">
{playerInfoA.displayName}
</div>
<div className="grid justify-center p-2">{leftTime}</div>
<div className="grid justify-end bg-blue-500 p-2 text-white">
{playerInfoB.displayName}
</div>
</div>
<div className="grid grid-cols-[auto_1fr_auto]">
<div className="grid justify-start bg-red-500 p-2 text-lg font-bold text-white">
{playerInfoA.score}
</div>
<div className="w-full bg-blue-500">
<div
className="h-full bg-red-500"
style={{ width: `${scoreRatio}%` }}
></div>
</div>
<div className="grid justify-end bg-blue-500 p-2 text-lg font-bold text-white">
{playerInfoB.score}
</div>
</div>
<div className="grid grid-cols-[3fr_2fr_3fr_2fr] p-2">
<div>
<pre>
<code>{playerInfoA.code}</code>
</pre>
</div>
<div>
<div>
{submitResultStatusToLabel(
playerInfoA.submitResult?.status ?? null,
)}
</div>
<div>
<ol>
{playerInfoA.submitResult?.execResults.map((result) => (
<li key={result.testcase_id ?? -1}>
<div>
<div>
<ExecStatusIndicatorIcon status={result.status} />{" "}
{result.label}
</div>
<div>
{result.stdout}
{result.stderr}
</div>
</div>
</li>
))}
</ol>
</div>
</div>
<div>
<pre>
<code>{playerInfoB.code}</code>
</pre>
</div>
<div>
<div>
{submitResultStatusToLabel(
playerInfoB.submitResult?.status ?? null,
)}
</div>
<div>
<ol>
{playerInfoB.submitResult?.execResults.map((result, idx) => (
<li key={idx}>
<div>
<div>
<ExecStatusIndicatorIcon status={result.status} />{" "}
{result.label}
</div>
<div>
{result.stdout}
{result.stderr}
</div>
</div>
</li>
))}
</ol>
</div>
</div>
</div>
<div className="grid justify-center p-2 bg-slate-300">{problem}</div>
</div>
);
}
|
