From c7dcc717075b7e355e8d89746f5ce8ea436f91e2 Mon Sep 17 00:00:00 2001 From: Spencer Date: Tue, 5 May 2026 11:40:05 -0400 Subject: [PATCH] Add simple WebSocket multiplayer --- .gitignore | 2 +- README.md | 20 +++- game.js | 174 ++++++++++++++++++++++++++----- index.html | 5 +- package.json | 10 ++ server.js | 284 +++++++++++++++++++++++++++++++++++++++++++++++++++ styles.css | 33 +++++- 7 files changed, 495 insertions(+), 33 deletions(-) create mode 100644 package.json create mode 100644 server.js diff --git a/.gitignore b/.gitignore index 20d6b3d..efcace3 100644 --- a/.gitignore +++ b/.gitignore @@ -15,6 +15,7 @@ out/ # Logs *.log +server.log npm-debug.log* yarn-debug.log* yarn-error.log* @@ -23,4 +24,3 @@ pnpm-debug.log* # OS files .DS_Store Thumbs.db - diff --git a/README.md b/README.md index b3b6f43..ed21cfc 100644 --- a/README.md +++ b/README.md @@ -11,9 +11,23 @@ A notepad-playable browser game that combines Tic Tac Toe's line-making goal wit - First player to make `4 in a row` wins. - If the board fills with no winner, the game is a draw. -## Run +## Run Multiplayer -Open `index.html` in a browser. +```powershell +npm start +``` -No build step is required. +Then open `http://localhost:3000` in two browser windows. The first two connected players are paired automatically. +Set a different port with: + +```powershell +$env:PORT=4000; npm start +``` + +## Notes + +- No authentication or user accounts are required. +- The server keeps games in memory only. +- If an opponent closes their window, the remaining player sees a disconnect error and waits for a new player. +- No build step is required. diff --git a/game.js b/game.js index 5b286f1..4fac0e2 100644 --- a/game.js +++ b/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(); diff --git a/index.html b/index.html index f31248f..110eead 100644 --- a/index.html +++ b/index.html @@ -24,6 +24,8 @@
Trap enemy marks between your marks. First to four wins.
+
Connecting to matchmaker...
+
@@ -41,7 +43,7 @@

Rule

-

Place a mark on an empty cell. Any enemy marks trapped in a straight line between your marks are removed.

+

Open the game in two browser windows. The first two connected players are paired automatically.

    @@ -51,4 +53,3 @@ - diff --git a/package.json b/package.json new file mode 100644 index 0000000..1e3ba19 --- /dev/null +++ b/package.json @@ -0,0 +1,10 @@ +{ + "name": "tictactics", + "version": "0.1.0", + "private": true, + "description": "A notepad-playable capture tic tac toe browser game with simple WebSocket multiplayer.", + "scripts": { + "start": "node server.js" + } +} + diff --git a/server.js b/server.js new file mode 100644 index 0000000..19dd510 --- /dev/null +++ b/server.js @@ -0,0 +1,284 @@ +const crypto = require("crypto"); +const fs = require("fs"); +const http = require("http"); +const path = require("path"); + +const port = Number(process.env.PORT || 3000); +const root = __dirname; +const clients = new Map(); +const rooms = new Map(); +let waitingClientId = ""; +let nextClientId = 1; +let nextRoomId = 1; + +const mimeTypes = { + ".html": "text/html; charset=utf-8", + ".css": "text/css; charset=utf-8", + ".js": "text/javascript; charset=utf-8", + ".json": "application/json; charset=utf-8", + ".svg": "image/svg+xml", + ".ico": "image/x-icon", +}; + +const server = http.createServer((request, response) => { + const requestUrl = new URL(request.url, `http://${request.headers.host}`); + const pathname = requestUrl.pathname === "/" ? "/index.html" : requestUrl.pathname; + const filePath = path.normalize(path.join(root, pathname)); + + if (!filePath.startsWith(root)) { + response.writeHead(403); + response.end("Forbidden"); + return; + } + + fs.readFile(filePath, (error, content) => { + if (error) { + response.writeHead(404); + response.end("Not found"); + return; + } + + const type = mimeTypes[path.extname(filePath)] || "application/octet-stream"; + response.writeHead(200, { "Content-Type": type }); + response.end(content); + }); +}); + +server.on("upgrade", (request, socket) => { + if (request.url !== "/ws") { + socket.destroy(); + return; + } + + const key = request.headers["sec-websocket-key"]; + if (!key) { + socket.destroy(); + return; + } + + const accept = crypto + .createHash("sha1") + .update(`${key}258EAFA5-E914-47DA-95CA-C5AB0DC85B11`) + .digest("base64"); + + socket.write([ + "HTTP/1.1 101 Switching Protocols", + "Upgrade: websocket", + "Connection: Upgrade", + `Sec-WebSocket-Accept: ${accept}`, + "", + "", + ].join("\r\n")); + + addClient(socket); +}); + +function addClient(socket) { + const id = String(nextClientId); + nextClientId += 1; + + const client = { id, socket, roomId: "", player: "" }; + clients.set(id, client); + + socket.on("data", (buffer) => handleSocketData(client, buffer)); + socket.on("close", () => removeClient(client)); + socket.on("error", () => removeClient(client)); + + if (waitingClientId && clients.has(waitingClientId)) { + pairClients(clients.get(waitingClientId), client); + waitingClientId = ""; + return; + } + + waitingClientId = id; + send(client, { type: "waiting" }); +} + +function pairClients(xClient, oClient) { + const roomId = String(nextRoomId); + nextRoomId += 1; + + xClient.roomId = roomId; + xClient.player = "X"; + oClient.roomId = roomId; + oClient.player = "O"; + + rooms.set(roomId, { id: roomId, players: [xClient.id, oClient.id] }); + + send(xClient, { type: "paired", player: "X", roomId }); + send(oClient, { type: "paired", player: "O", roomId }); +} + +function handleSocketData(client, buffer) { + const opcode = buffer[0] & 0x0f; + if (opcode === 0x8) { + client.socket.write(Buffer.from([0x88, 0x00])); + client.socket.end(); + removeClient(client); + return; + } + + if (opcode === 0x9) { + client.socket.write(Buffer.from([0x8a, 0x00])); + return; + } + + const message = decodeFrame(buffer); + if (!message) { + return; + } + + let payload; + try { + payload = JSON.parse(message); + } catch { + send(client, { type: "error", message: "Invalid message." }); + return; + } + + if (!client.roomId || payload.roomId !== client.roomId) { + send(client, { type: "error", message: "You are not currently paired." }); + return; + } + + if (payload.type === "move") { + if (payload.player !== client.player) { + send(client, { type: "error", message: "Move rejected for wrong player." }); + return; + } + + relayToOpponent(client, { + type: "move", + row: payload.row, + col: payload.col, + player: payload.player, + }); + return; + } + + if (payload.type === "reset") { + relayToOpponent(client, { type: "reset" }); + } +} + +function removeClient(client) { + if (!clients.has(client.id)) { + return; + } + + clients.delete(client.id); + + if (waitingClientId === client.id) { + waitingClientId = ""; + } + + if (!client.roomId) { + return; + } + + const room = rooms.get(client.roomId); + rooms.delete(client.roomId); + + if (!room) { + return; + } + + for (const playerId of room.players) { + if (playerId === client.id || !clients.has(playerId)) { + continue; + } + + const opponent = clients.get(playerId); + opponent.roomId = ""; + opponent.player = ""; + send(opponent, { + type: "opponent-left", + message: "Opponent disconnected. Waiting for a new player...", + }); + waitingClientId = opponent.id; + } +} + +function relayToOpponent(client, payload) { + const room = rooms.get(client.roomId); + if (!room) { + send(client, { type: "error", message: "Room no longer exists." }); + return; + } + + for (const playerId of room.players) { + if (playerId !== client.id && clients.has(playerId)) { + send(clients.get(playerId), payload); + } + } +} + +function send(client, payload) { + if (client.socket.destroyed) { + return; + } + + client.socket.write(encodeFrame(JSON.stringify(payload))); +} + +function decodeFrame(buffer) { + const firstByte = buffer[0]; + const opcode = firstByte & 0x0f; + const secondByte = buffer[1]; + const masked = (secondByte & 0x80) === 0x80; + let length = secondByte & 0x7f; + let offset = 2; + + if (length === 126) { + length = buffer.readUInt16BE(offset); + offset += 2; + } else if (length === 127) { + length = Number(buffer.readBigUInt64BE(offset)); + offset += 8; + } + + let mask; + if (masked) { + mask = buffer.subarray(offset, offset + 4); + offset += 4; + } + + const payload = buffer.subarray(offset, offset + length); + if (!masked) { + return payload.toString("utf8"); + } + + const decoded = Buffer.alloc(payload.length); + for (let index = 0; index < payload.length; index += 1) { + decoded[index] = payload[index] ^ mask[index % 4]; + } + + return decoded.toString("utf8"); +} + +function encodeFrame(message) { + const payload = Buffer.from(message); + const length = payload.length; + + if (length < 126) { + return Buffer.concat([Buffer.from([0x81, length]), payload]); + } + + if (length < 65536) { + const header = Buffer.alloc(4); + header[0] = 0x81; + header[1] = 126; + header.writeUInt16BE(length, 2); + return Buffer.concat([header, payload]); + } + + const header = Buffer.alloc(10); + header[0] = 0x81; + header[1] = 127; + header.writeBigUInt64BE(BigInt(length), 2); + return Buffer.concat([header, payload]); +} + +server.listen(port, () => { + console.log(`Tictactics multiplayer server running at http://localhost:${port}`); +}); diff --git a/styles.css b/styles.css index a4fc8ad..a0f64d4 100644 --- a/styles.css +++ b/styles.css @@ -96,6 +96,12 @@ h1 { transition: transform 150ms ease, background 150ms ease; } +.icon-button:disabled { + opacity: 0.45; + cursor: not-allowed; + transform: none; +} + .icon-button:hover { background: #eee6d6; transform: translateY(-1px); @@ -136,6 +142,32 @@ h1 { text-align: right; } +.network-status { + margin: 0 0 18px; + padding: 10px 12px; + border: 1px solid rgba(37, 37, 37, 0.14); + border-radius: 8px; + color: var(--muted); + background: var(--panel); + font-weight: 800; +} + +.network-status.paired { + color: #31592d; + background: #e5f3df; +} + +.network-status.waiting, +.network-status.connecting { + color: #665019; + background: #fff3c7; +} + +.network-status.error { + color: #8d2525; + background: #ffe1df; +} + .board { aspect-ratio: 1; width: min(100%, 620px); @@ -307,4 +339,3 @@ h1 { max-height: 180px; } } -