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
|
import { createBoard, playMove } from "./connect4.js";
function initGame(websocket) {
websocket.addEventListener("open", () => {
// Send an "init" event according to who is connecting.
const params = new URLSearchParams(window.location.search);
let event = { type: "init" };
if (params.has("join")) {
// Second player joins an existing game.
event.join = params.get("join");
} else if (params.has("watch")) {
// Spectator watches an existing game.
event.watch = params.get("watch");
} else {
// First player starts a new game.
}
websocket.send(JSON.stringify(event));
});
}
function showMessage(message) {
window.setTimeout(() => window.alert(message), 50);
}
function receiveMoves(board, websocket) {
websocket.addEventListener("message", ({ data }) => {
const event = JSON.parse(data);
switch (event.type) {
case "init":
// Create links for inviting the second player and spectators.
document.querySelector(".join").href = "?join=" + event.join;
document.querySelector(".watch").href = "?watch=" + event.watch;
break;
case "play":
// Update the UI with the move.
playMove(board, event.player, event.column, event.row);
break;
case "win":
showMessage(`Player ${event.player} wins!`);
// No further messages are expected; close the WebSocket connection.
websocket.close(1000);
break;
case "error":
showMessage(event.message);
break;
default:
throw new Error(`Unsupported event type: ${event.type}.`);
}
});
}
function sendMoves(board, websocket) {
// Don't send moves for a spectator watching a game.
const params = new URLSearchParams(window.location.search);
if (params.has("watch")) {
return;
}
// When clicking a column, send a "play" event for a move in that column.
board.addEventListener("click", ({ target }) => {
const column = target.dataset.column;
// Ignore clicks outside a column.
if (column === undefined) {
return;
}
const event = {
type: "play",
column: parseInt(column, 10),
};
websocket.send(JSON.stringify(event));
});
}
window.addEventListener("DOMContentLoaded", () => {
// Initialize the UI.
const board = document.querySelector(".board");
createBoard(board);
// Open the WebSocket connection and register event handlers.
const websocket = new WebSocket("ws://localhost:8001/");
initGame(websocket);
receiveMoves(board, websocket);
sendMoves(board, websocket);
});
|
