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
|
import { useState, useEffect } from 'react';
import useWebSocket, { ReadyState } from 'react-use-websocket';
import { useDebouncedCallback } from 'use-debounce';
import Connecting from './apps/Connecting.jsx';
import Waiting from './apps/Waiting.jsx';
import Starting from './apps/Starting.jsx';
import Gaming from './apps/Gaming.jsx';
import Finished from './apps/Finished.jsx';
import Failed from './apps/Failed.jsx';
import { GAME_STATE_CONNECTING, GAME_STATE_WAITING, GAME_STATE_STARTING, GAME_STATE_GAMING, GAME_STATE_FINISHED, GAME_STATE_FAILED } from './GameState.js';
export default ({ gameId, team }) => {
// const socketUrl = `wss://t.nil.ninja/iosdc/2024/sock/golf/${gameId}/${team}/`;
const socketUrl = `ws://localhost:8002/sock/golf/${gameId}/${team}/`;
const { sendJsonMessage, lastJsonMessage, readyState } = useWebSocket(socketUrl);
const [gameState, setGameState] = useState(GAME_STATE_CONNECTING);
const [problem, setProblem] = useState(null);
// in seconds
const [timeLeft, setTimeLeft] = useState(null);
useEffect(() => {
if (gameState === GAME_STATE_STARTING && timeLeft !== null) {
const timer = setInterval(() => {
setTimeLeft(prevTime => {
if (prevTime <= 1) {
clearInterval(timer);
setGameState(GAME_STATE_GAMING);
return 0;
}
return prevTime - 1;
});
}, 1000);
return () => clearInterval(timer);
}
}, [gameState]);
const [score, setScore] = useState(null);
const [result, setResult] = useState(null);
const onCodeChange = useDebouncedCallback((data) => {
sendJsonMessage({ type: 'code', data });
}, 1000);
useEffect(() => {
if (readyState === ReadyState.UNINSTANTIATED) {
setGameState(GAME_STATE_FAILED);
} else if (readyState === ReadyState.CLOSING || readyState === ReadyState.CLOSED) {
if (gameState !== GAME_STATE_FINISHED) {
setGameState(GAME_STATE_FAILED);
}
} else if (readyState === ReadyState.CONNECTING) {
setGameState(GAME_STATE_CONNECTING);
} else if (readyState === ReadyState.OPEN) {
if (lastJsonMessage !== null) {
if (lastJsonMessage.type === 'prepare') {
const { problem } = lastJsonMessage.data;
setProblem(problem);
sendJsonMessage({ type: 'ready', data: {} });
} else if (lastJsonMessage.type === 'start') {
const { startTime } = lastJsonMessage.data;
const startTimeMs = Date.parse(startTime);
setTimeLeft(Math.max(0, Math.floor((startTimeMs - Date.now()) / 1000)));
setGameState(GAME_STATE_STARTING);
} else if (lastJsonMessage.type === 'finish') {
const result = lastJsonMessage.data;
setResult(result);
setGameState(GAME_STATE_FINISHED);
} else if (lastJsonMessage.type === 'score') {
const { score } = lastJsonMessage.data;
setScore(score);
} else {
setGameState(GAME_STATE_FAILED);
}
} else {
setGameState(GAME_STATE_WAITING);
sendJsonMessage({ type: 'connect', data: {} });
}
}
}, [readyState, lastJsonMessage]);
return (
<div>
<h1>Game #{gameId} (team #{team})</h1>
<div>
{ gameState === GAME_STATE_CONNECTING ? (<Connecting gameId={gameId} team={team} />)
: gameState === GAME_STATE_WAITING ? (<Waiting gameId={gameId} team={team} />)
: gameState === GAME_STATE_STARTING ? (<Starting gameId={gameId} team={team} timeLeft={timeLeft} />)
: gameState === GAME_STATE_GAMING ? (<Gaming gameId={gameId} team={team} problem={problem} score={score} onCodeChange={onCodeChange} />)
: gameState === GAME_STATE_FINISHED ? (<Finished gameId={gameId} team={team} result={result} />)
: (<Failed />) }
</div>
</div>
);
};
|
