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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
|
import { useAtomValue } from "jotai";
import {
calcCodeSize,
checkGameResultKind,
gameStateKindAtom,
gamingLeftTimeSecondsAtom,
latestGameStatesAtom,
} from "../../states/watch";
import type { PlayerProfile } from "../../types/PlayerProfile";
import type { SupportedLanguage } from "../../types/SupportedLanguage";
import FoldableBorderedContainerWithCaption from "../FoldableBorderedContainerWithCaption";
import CodeBlock from "../Gaming/CodeBlock";
import LeftTime from "../Gaming/LeftTime";
import ProblemColumnContent from "../Gaming/ProblemColumnContent";
import RankingTable from "../Gaming/RankingTable";
import Score from "../Gaming/Score";
import ScoreBar from "../Gaming/ScoreBar";
import SubmitStatusLabel from "../SubmitStatusLabel";
import ThreeColumnLayout from "../ThreeColumnLayout";
import TitledColumn from "../TitledColumn";
import UserIcon from "../UserIcon";
type Props = {
gameDisplayName: string;
playerProfileA: PlayerProfile | null;
playerProfileB: PlayerProfile | null;
problemTitle: string;
problemDescription: string;
problemLanguage: SupportedLanguage;
sampleCode: string;
};
export default function GolfWatchAppGaming1v1({
gameDisplayName,
playerProfileA,
playerProfileB,
problemTitle,
problemDescription,
problemLanguage,
sampleCode,
}: Props) {
const gameStateKind = useAtomValue(gameStateKindAtom);
const leftTimeSeconds = useAtomValue(gamingLeftTimeSecondsAtom)!;
const latestGameStates = useAtomValue(latestGameStatesAtom);
const stateA =
playerProfileA && (latestGameStates[`${playerProfileA.id}`] ?? null);
const codeA = stateA?.code ?? "";
const scoreA = stateA?.score ?? null;
const statusA = stateA?.status ?? "none";
const stateB =
playerProfileB && (latestGameStates[`${playerProfileB.id}`] ?? null);
const codeB = stateB?.code ?? "";
const scoreB = stateB?.score ?? null;
const statusB = stateB?.status ?? "none";
const codeSizeA = calcCodeSize(codeA, problemLanguage);
const codeSizeB = calcCodeSize(codeB, problemLanguage);
const gameResultKind = checkGameResultKind(gameStateKind, stateA, stateB);
const topBg = gameResultKind
? gameResultKind === "winA"
? "bg-orange-400"
: gameResultKind === "winB"
? "bg-purple-400"
: "bg-sky-600"
: "bg-sky-600";
return (
<div className="min-h-screen bg-gray-100 flex flex-col">
<div className={`text-white ${topBg} grid grid-cols-3 px-4 py-2`}>
<div className="font-bold flex gap-4 justify-start md:justify-between items-center my-auto">
<div className="flex gap-6 items-center">
{playerProfileA?.iconPath && (
<UserIcon
iconPath={playerProfileA.iconPath}
displayName={playerProfileA.displayName}
className="w-12 h-12 my-auto"
/>
)}
<div className="hidden md:block text-4xl">
{playerProfileA?.displayName}
</div>
</div>
<div className="text-2xl md:text-6xl">
<Score status={statusA} score={scoreA} />
</div>
</div>
<div className="font-bold text-center">
<div className="text-gray-100">{gameDisplayName}</div>
{gameResultKind ? (
<div className="text-3xl">
{gameResultKind === "winA"
? `勝者 ${playerProfileA!.displayName}`
: gameResultKind === "winB"
? `勝者 ${playerProfileB!.displayName}`
: "引き分け"}
</div>
) : (
<LeftTime sec={leftTimeSeconds} />
)}
</div>
<div className="font-bold flex gap-4 justify-end md:justify-between items-center my-auto">
<div className="text-2xl md:text-6xl">
<Score status={statusB} score={scoreB} />
</div>
<div className="flex gap-6 items-center text-end">
<div className="hidden md:block text-4xl">
{playerProfileB?.displayName}
</div>
{playerProfileB?.iconPath && (
<UserIcon
iconPath={playerProfileB.iconPath}
displayName={playerProfileB.displayName}
className="w-12 h-12 my-auto"
/>
)}
</div>
</div>
</div>
<ScoreBar
scoreA={scoreA}
scoreB={scoreB}
bgA="bg-orange-400"
bgB="bg-purple-400"
/>
<ThreeColumnLayout>
<TitledColumn
title={<SubmitStatusLabel status={statusA} />}
className="order-2 md:order-1"
>
<FoldableBorderedContainerWithCaption
caption={`コードサイズ: ${codeSizeA}`}
>
<CodeBlock code={codeA} language={problemLanguage} />
</FoldableBorderedContainerWithCaption>
</TitledColumn>
<TitledColumn title={problemTitle} className="order-1 md:order-2">
<ProblemColumnContent
description={problemDescription}
language={problemLanguage}
sampleCode={sampleCode}
/>
<RankingTable problemLanguage={problemLanguage} />
</TitledColumn>
<TitledColumn
title={<SubmitStatusLabel status={statusB} />}
className="order-3"
>
<FoldableBorderedContainerWithCaption
caption={`コードサイズ: ${codeSizeB}`}
>
<CodeBlock code={codeB} language={problemLanguage} />
</FoldableBorderedContainerWithCaption>
</TitledColumn>
</ThreeColumnLayout>
</div>
);
}
|
