Add simple WebSocket multiplayer

game.js

@@ -19,6 +19,7 @@ const resetButton = document.querySelector("#resetButton");
 const xCapturesElement = document.querySelector("#xCaptures");
 const oCapturesElement = document.querySelector("#oCaptures");
 const moveList = document.querySelector("#moveList");
+const networkStatus = document.querySelector("#networkStatus");
 
 let board;
 let currentPlayer;
@@ -26,6 +27,10 @@ let captures;
 let gameOver;
 let moveNumber;
 let winningCells;
+let socket;
+let localPlayer = "";
+let roomId = "";
+let multiplayerState = "connecting";
 
 function createBoard() {
   return Array.from({ length: size }, () => Array(size).fill(empty));
@@ -40,12 +45,80 @@ function setupGame() {
   winningCells = [];
   moveList.innerHTML = "";
   render();
-  setMessage("Trap enemy marks between your marks. First to four wins.");
+}
+
+function connectToServer() {
+  const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+  socket = new WebSocket(`${protocol}//${window.location.host}/ws`);
+  setMultiplayerState("connecting", "Connecting to matchmaker...");
+
+  socket.addEventListener("open", () => {
+    setMultiplayerState("waiting", "Connected. Waiting for another player...");
+  });
+
+  socket.addEventListener("message", (event) => {
+    const payload = JSON.parse(event.data);
+    handleServerMessage(payload);
+  });
+
+  socket.addEventListener("close", () => {
+    localPlayer = "";
+    roomId = "";
+    setMultiplayerState("error", "Connection closed. Refresh to reconnect.");
+    render();
+  });
+
+  socket.addEventListener("error", () => {
+    setMultiplayerState("error", "Could not reach the multiplayer server.");
+    render();
+  });
+}
+
+function handleServerMessage(payload) {
+  if (payload.type === "waiting") {
+    localPlayer = "";
+    roomId = "";
+    setupGame();
+    setMultiplayerState("waiting", "Waiting for another player...");
+    return;
+  }
+
+  if (payload.type === "paired") {
+    localPlayer = payload.player;
+    roomId = payload.roomId;
+    setupGame();
+    setMultiplayerState("paired", `You are ${localPlayer}. ${currentPlayer} plays first.`);
+    return;
+  }
+
+  if (payload.type === "move") {
+    applyMove(payload.row, payload.col, payload.player, "remote");
+    return;
+  }
+
+  if (payload.type === "reset") {
+    setupGame();
+    setMultiplayerState("paired", `Game reset. You are ${localPlayer}. ${currentPlayer} plays first.`);
+    return;
+  }
+
+  if (payload.type === "opponent-left") {
+    localPlayer = "";
+    roomId = "";
+    gameOver = true;
+    setMultiplayerState("error", payload.message || "Opponent disconnected. Waiting for a new player...");
+    render();
+    return;
+  }
+
+  if (payload.type === "error") {
+    setMultiplayerState("error", payload.message || "Multiplayer error.");
+    render();
+  }
 }
 
 function render() {
   boardElement.innerHTML = "";
-  boardElement.style.setProperty("--size", size);
 
   for (let row = 0; row < size; row += 1) {
     for (let col = 0; col < size; col += 1) {
@@ -56,7 +129,7 @@ function render() {
       cell.dataset.row = row;
       cell.dataset.col = col;
       cell.setAttribute("aria-label", cellLabel(row, col));
-      cell.disabled = gameOver || board[row][col] !== empty;
+      cell.disabled = !canPlayCell(row, col);
 
       if (winningCells.some(([winRow, winCol]) => winRow === row && winCol === col)) {
         cell.classList.add("winning");
@@ -69,7 +142,7 @@ function render() {
         cell.append(mark);
       }
 
-      cell.addEventListener("click", () => playMove(row, col));
+      cell.addEventListener("click", () => playLocalMove(row, col));
       boardElement.append(cell);
     }
   }
@@ -78,6 +151,14 @@ function render() {
   turnBadge.className = `turn-badge player-${currentPlayer.toLowerCase()}`;
   xCapturesElement.textContent = captures.X;
   oCapturesElement.textContent = captures.O;
+  resetButton.disabled = multiplayerState !== "paired";
+}
+
+function canPlayCell(row, col) {
+  return multiplayerState === "paired" &&
+    !gameOver &&
+    localPlayer === currentPlayer &&
+    board[row][col] === empty;
 }
 
 function cellLabel(row, col) {
@@ -86,41 +167,59 @@ function cellLabel(row, col) {
   return mark ? `${mark} at ${position}` : `Empty cell at ${position}`;
 }
 
-function playMove(row, col) {
-  if (gameOver || board[row][col] !== empty) {
+function playLocalMove(row, col) {
+  if (!canPlayCell(row, col)) {
     return;
   }
 
-  moveNumber += 1;
-  board[row][col] = currentPlayer;
-  const captured = captureFrom(row, col, currentPlayer);
-  captures[currentPlayer] += captured.length;
+  const applied = applyMove(row, col, localPlayer, "local");
+  if (!applied) {
+    return;
+  }
 
-  const win = findWin(currentPlayer);
-  addMove(row, col, captured.length);
+  sendToServer({ type: "move", roomId, row, col, player: localPlayer });
+}
+
+function applyMove(row, col, player, source) {
+  if (gameOver || player !== currentPlayer || board[row][col] !== empty) {
+    return false;
+  }
+
+  moveNumber += 1;
+  board[row][col] = player;
+  const captured = captureFrom(row, col, player);
+  captures[player] += captured.length;
+
+  const win = findWin(player);
+  addMove(row, col, player, captured.length);
 
   if (win.length > 0) {
     winningCells = win;
     gameOver = true;
-    setMessage(`${currentPlayer} wins with four in a row.`);
+    setMultiplayerState("paired", `${player} wins with four in a row.`);
     render();
-    return;
+    return true;
   }
 
   if (isDraw()) {
     gameOver = true;
-    setMessage("Draw. The board is full.");
+    setMultiplayerState("paired", "Draw. The board is full.");
     render();
-    return;
+    return true;
   }
 
-  currentPlayer = opponentOf(currentPlayer);
-  setMessage(captured.length > 0
-    ? `${opponentOf(currentPlayer)} captured ${captured.length}. ${currentPlayer} to play.`
-    : `${currentPlayer} to play.`
-  );
+  currentPlayer = opponentOf(player);
+  const captureMessage = captured.length > 0 ? `${player} captured ${captured.length}. ` : "";
+  const turnMessage = currentPlayer === localPlayer ? "Your turn." : `Waiting for ${currentPlayer}.`;
+  setMultiplayerState("paired", `${captureMessage}${turnMessage}`);
   render();
   flashCapturedCells(captured);
+
+  if (source === "remote" && currentPlayer === localPlayer) {
+    window.navigator.vibrate?.(40);
+  }
+
+  return true;
 }
 
 function captureFrom(row, col, player) {
@@ -200,17 +299,30 @@ function isInside(row, col) {
   return row >= 0 && row < size && col >= 0 && col < size;
 }
 
-function addMove(row, col, captureCount) {
+function addMove(row, col, player, captureCount) {
   const item = document.createElement("li");
   const captureText = captureCount === 0 ? "" : `, captured ${captureCount}`;
-  item.textContent = `${moveNumber}. ${currentPlayer} to ${row + 1},${col + 1}${captureText}`;
+  item.textContent = `${moveNumber}. ${player} to ${row + 1},${col + 1}${captureText}`;
   moveList.prepend(item);
 }
 
-function setMessage(text) {
+function setMultiplayerState(state, text) {
+  multiplayerState = state;
+  networkStatus.textContent = text;
+  networkStatus.className = `network-status ${state}`;
   messageElement.textContent = text;
 }
 
+function sendToServer(payload) {
+  if (!socket || socket.readyState !== WebSocket.OPEN) {
+    setMultiplayerState("error", "Connection lost. Refresh to reconnect.");
+    render();
+    return;
+  }
+
+  socket.send(JSON.stringify(payload));
+}
+
 function flashCapturedCells(captured) {
   for (const [row, col] of captured) {
     const cell = boardElement.querySelector(`[data-row="${row}"][data-col="${col}"]`);
@@ -223,6 +335,16 @@ function flashCapturedCells(captured) {
   }
 }
 
-resetButton.addEventListener("click", setupGame);
-setupGame();
+resetButton.addEventListener("click", () => {
+  if (multiplayerState !== "paired") {
+    return;
+  }
+
+  setupGame();
+  setMultiplayerState("paired", `Game reset. You are ${localPlayer}. ${currentPlayer} plays first.`);
+  sendToServer({ type: "reset", roomId });
+});
+
+setupGame();
+connectToServer();