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
|
import { useState, useEffect } from "react";
import useWebSocket, { ReadyState } from "react-use-websocket";
import Connecting from "./apps/Connecting.jsx";
import Waiting from "./apps/Waiting.jsx";
import Gaming from "./apps/Gaming.jsx";
import Failed from "./apps/Failed.jsx";
import type { WatchState } from "./WatchState.js";
type Props = {
gameId: number;
};
type WebSocketMessage =
| { type: "connect" }
| { type: "prepare"; data: { problem: string } }
| { type: "ready" }
| { type: "start"; data: { startTime: string } }
| {
type: "finish";
data: { yourScore: number | null; opponentScore: number | null };
}
| { type: "score"; data: { score: number } }
| { type: "code"; data: { code: string } }
| {
type: "watch";
data: {
problem: string;
scoreA: number | null;
codeA: string;
scoreB: number | null;
codeB: string;
};
};
export default function App({ gameId }: Props) {
// const socketUrl = `wss://t.nil.ninja/iosdc/2024/sock/golf/${gameId}/watch/`;
const socketUrl = `ws://localhost:8002/sock/golf/${gameId}/watch/`;
const { lastJsonMessage, readyState } =
useWebSocket<WebSocketMessage>(socketUrl);
const [watchState, setWatchState] = useState<WatchState>("connecting");
const [problem, setProblem] = useState<string | null>(null);
const [scoreA, setScoreA] = useState<number | null>(null);
const [codeA, setCodeA] = useState<string | null>(null);
const [scoreB, setScoreB] = useState<number | null>(null);
const [codeB, setCodeB] = useState<string | null>(null);
useEffect(() => {
if (readyState === ReadyState.UNINSTANTIATED) {
setWatchState("failed");
} else if (
readyState === ReadyState.CLOSING ||
readyState === ReadyState.CLOSED
) {
if (watchState !== "finished") {
setWatchState("failed");
}
} else if (readyState === ReadyState.CONNECTING) {
setWatchState("connecting");
} else if (readyState === ReadyState.OPEN) {
if (lastJsonMessage !== null) {
if (lastJsonMessage.type === "watch") {
const {
problem,
scoreA: scoreA_,
codeA: codeA_,
scoreB: scoreB_,
codeB: codeB_,
} = lastJsonMessage.data;
setProblem(problem);
setScoreA(scoreA_);
setCodeA(codeA_);
setScoreB(scoreB_);
setCodeB(codeB_);
setWatchState("gaming");
} else {
setWatchState("failed");
}
} else {
setWatchState("waiting");
}
}
}, [readyState, lastJsonMessage]);
return (
<div>
<h1>Game #{gameId} watching</h1>
<div>
{watchState === "connecting" ? (
<Connecting gameId={gameId} />
) : watchState === "waiting" ? (
<Waiting gameId={gameId} />
) : watchState === "gaming" || watchState === "finished" ? (
<Gaming
gameId={gameId}
problem={problem}
scoreA={scoreA}
codeA={codeA}
scoreB={scoreB}
codeB={codeB}
/>
) : (
<Failed gameId={gameId} />
)}
</div>
</div>
);
}
|
