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 @@
+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.