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
|
import { createBoard, playMove } from "./connect4.js";
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 "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) {
// 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/");
receiveMoves(board, websocket);
sendMoves(board, websocket);
});
|
