1 files changed, 45 insertions, 0 deletions
diff --git a/testing/web-platform/tests/tools/third_party/websockets/example/tutorial/start/connect4.js b/testing/web-platform/tests/tools/third_party/websockets/example/tutorial/start/connect4.js
new file mode 100644
index 0000000000..cb5eb9fa27
--- /dev/null
+++ b/testing/web-platform/tests/tools/third_party/websockets/example/tutorial/start/connect4.js
@@ -0,0 +1,45 @@
+const PLAYER1 = "red";
+
+const PLAYER2 = "yellow";
+
+function createBoard(board) {
+  // Inject stylesheet.
+  const linkElement = document.createElement("link");
+  linkElement.href = import.meta.url.replace(".js", ".css");
+  linkElement.rel = "stylesheet";
+  document.head.append(linkElement);
+  // Generate board.
+  for (let column = 0; column < 7; column++) {
+    const columnElement = document.createElement("div");
+    columnElement.className = "column";
+    columnElement.dataset.column = column;
+    for (let row = 0; row < 6; row++) {
+      const cellElement = document.createElement("div");
+      cellElement.className = "cell empty";
+      cellElement.dataset.column = column;
+      columnElement.append(cellElement);
+    }
+    board.append(columnElement);
+  }
+}
+
+function playMove(board, player, column, row) {
+  // Check values of arguments.
+  if (player !== PLAYER1 && player !== PLAYER2) {
+    throw new Error(`player must be ${PLAYER1} or ${PLAYER2}.`);
+  }
+  const columnElement = board.querySelectorAll(".column")[column];
+  if (columnElement === undefined) {
+    throw new RangeError("column must be between 0 and 6.");
+  }
+  const cellElement = columnElement.querySelectorAll(".cell")[row];
+  if (cellElement === undefined) {
+    throw new RangeError("row must be between 0 and 5.");
+  }
+  // Place checker in cell.
+  if (!cellElement.classList.replace("empty", player)) {
+    throw new Error("cell must be empty.");
+  }
+}
+
+export { PLAYER1, PLAYER2, createBoard, playMove };