| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Multiplayer Tic-Tac-Toe</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script> |
| <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: '#6366f1', |
| secondary: '#818cf8', |
| accent: '#a5b4fc', |
| dark: '#1e293b', |
| light: '#f1f5f9', |
| 'board-bg': '#ede9fe' |
| }, |
| fontFamily: { |
| sans: ['Nunito', 'sans-serif'] |
| }, |
| animation: { |
| 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', |
| 'bounce-slow': 'bounce 2s infinite' |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(-10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| .fade-in { |
| animation: fadeIn 0.5s ease-out forwards; |
| } |
| |
| .grid-cell:hover { |
| transform: scale(1.05); |
| transition: transform 0.3s ease; |
| } |
| |
| .winning-cell { |
| animation: pulse 2s infinite, bounce 1s infinite; |
| } |
| |
| #game-container { |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 15px 30px rgba(99, 102, 241, 0.1); |
| } |
| |
| .chip-animation { |
| position: absolute; |
| background-color: rgba(255, 255, 255, 0.6); |
| border-radius: 50%; |
| animation: expand 1s forwards; |
| opacity: 0; |
| } |
| |
| @keyframes expand { |
| 0% { transform: scale(0.1); opacity: 1; } |
| 100% { transform: scale(5); opacity: 0; } |
| } |
| |
| .status-banner { |
| transition: all 0.3s ease; |
| } |
| |
| .confetti { |
| position: absolute; |
| width: 10px; |
| height: 10px; |
| opacity: 0.7; |
| animation: fall 3s ease-in-out forwards; |
| } |
| |
| @keyframes fall { |
| 0% { transform: translateY(-10vh) rotate(0deg); opacity: 1; } |
| 100% { transform: translateY(100vh) rotate(360deg); opacity: 0; } |
| } |
| </style> |
| </head> |
| <body class="bg-gradient-to-br from-indigo-50 to-purple-100 min-h-screen flex flex-col items-center justify-center p-4 font-sans"> |
| <div id="game-container" class="w-full max-w-2xl bg-white rounded-2xl overflow-hidden fade-in"> |
| |
| <div class="bg-gradient-to-r from-primary to-secondary text-white py-5 px-6 text-center"> |
| <h1 class="text-3xl md:text-4xl font-bold flex items-center justify-center gap-2"> |
| <i class="fas fa-gamepad"></i> |
| <span>Multiplayer Tic-Tac-Toe</span> |
| </h1> |
| <p class="mt-2 opacity-90">Play against friends in real-time!</p> |
| </div> |
| |
| |
| <div id="lobby" class="p-6"> |
| <div class="text-center mb-8"> |
| <i class="fas fa-users text-6xl text-primary mb-4"></i> |
| <h2 class="text-2xl font-bold text-gray-800">Join or Create a Game</h2> |
| <p class="text-gray-600 mt-2">Share the Game ID with a friend to play together</p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
| |
| <div class="bg-light rounded-xl p-6 border border-accent"> |
| <div class="flex items-center gap-3 mb-4"> |
| <div class="bg-primary rounded-lg p-3"> |
| <i class="fas fa-plus-circle text-white text-xl"></i> |
| </div> |
| <h3 class="font-bold text-xl text-gray-800">Create New Game</h3> |
| </div> |
| <p class="text-gray-700 mb-4">Create a new game and invite a friend to play with you.</p> |
| <button id="create-game" class="w-full bg-primary hover:bg-primary/90 text-white py-3 rounded-lg font-semibold transition flex items-center justify-center gap-2"> |
| <i class="fas fa-chess-board"></i> Create Game |
| </button> |
| </div> |
| |
| |
| <div class="bg-light rounded-xl p-6 border border-accent"> |
| <div class="flex items-center gap-3 mb-4"> |
| <div class="bg-secondary rounded-lg p-3"> |
| <i class="fas fa-user-plus text-white text-xl"></i> |
| </div> |
| <h3 class="font-bold text-xl text-gray-800">Join Existing Game</h3> |
| </div> |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-gray-700 font-medium mb-2" for="game-id">Enter Game ID</label> |
| <input type="text" id="game-id" placeholder="Game ID" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent"> |
| </div> |
| <button id="join-game" class="w-full bg-secondary hover:bg-secondary/90 text-white py-3 rounded-lg font-semibold transition flex items-center justify-center gap-2"> |
| <i class="fas fa-sign-in-alt"></i> Join Game |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="game-id-display" class="hidden bg-light rounded-xl p-4 border border-accent"> |
| <div class="flex flex-col items-center text-center"> |
| <p class="font-bold text-lg text-gray-800 mb-2">Your Game ID:</p> |
| <div class="flex items-center gap-2"> |
| <p id="game-code" class="font-mono text-2xl font-bold bg-white py-2 px-6 rounded-lg border border-primary text-primary"></p> |
| <button id="copy-id" class="bg-accent text-primary p-2 rounded-lg hover:bg-accent/80 transition"> |
| <i class="fas fa-copy"></i> |
| </button> |
| </div> |
| <p class="text-gray-600 mt-3 flex items-center gap-2"> |
| <i class="fas fa-info-circle text-primary"></i> |
| <span>Share this code with your friend to join the game</span> |
| </p> |
| </div> |
| </div> |
| |
| |
| <div id="waiting-room" class="hidden mt-8 bg-board-bg rounded-xl p-8 text-center border border-accent"> |
| <div class="flex flex-col items-center"> |
| <div class="relative mb-6"> |
| <div class="w-24 h-24 rounded-full bg-accent flex items-center justify-center"> |
| <i class="fas fa-user-clock text-5xl text-primary"></i> |
| </div> |
| <div class="absolute -top-2 -right-2 w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center animate-bounce-slow"> |
| <span id="player-count">1</span> |
| </div> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Waiting for players...</h3> |
| <div class="w-full max-w-md bg-white rounded-lg p-4 mx-auto"> |
| <div class="flex items-center justify-center gap-4 mb-4"> |
| <div class="bg-primary/10 px-4 py-2 rounded-lg flex items-center gap-2"> |
| <i class="fas fa-user text-primary"></i> |
| <span id="player-name" class="font-semibold">You</span> |
| </div> |
| <span class="font-bold text-gray-600">vs</span> |
| <div class="bg-gray-100 px-4 py-2 rounded-lg flex items-center gap-2"> |
| <i class="fas fa-user-clock text-gray-500"></i> |
| <span class="text-gray-500">Waiting...</span> |
| </div> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> |
| <div class="bg-primary h-2.5 rounded-full w-1/3 animate-pulse-slow"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="game-section" class="hidden p-6"> |
| <div id="game-status" class="status-banner bg-gradient-to-r from-purple-600 to-indigo-700 text-white py-3 px-6 rounded-lg flex items-center justify-between mb-6"> |
| <div class="flex items-center gap-2"> |
| <i class="fas fa-info-circle"></i> |
| <span id="status-text">Your turn! (X)</span> |
| </div> |
| <div id="players"> |
| <span id="player-symbol" class="font-bold">X</span> |
| <span class="mx-1">|</span> |
| <span id="game-id-label"></span> |
| </div> |
| </div> |
| |
| |
| <div class="relative bg-board-bg rounded-2xl p-4 overflow-hidden"> |
| <div id="game-board" class="grid grid-cols-3 gap-4 max-w-lg mx-auto my-4"> |
| |
| </div> |
| |
| |
| <div id="game-over" class="hidden absolute inset-0 bg-black/80 flex items-center justify-center rounded-2xl"> |
| <div class="bg-white p-8 rounded-xl text-center"> |
| <h3 id="result-text" class="text-2xl font-bold mb-4">X Wins!</h3> |
| <div class="flex flex-wrap gap-3 justify-center"> |
| <button id="play-again" class="bg-primary hover:bg-primary/90 text-white py-3 px-6 rounded-lg font-semibold transition"> |
| <i class="fas fa-redo mr-2"></i> Play Again |
| </button> |
| <button id="new-game" class="bg-secondary hover:bg-secondary/90 text-white py-3 px-6 rounded-lg font-semibold transition"> |
| <i class="fas fa-plus mr-2"></i> New Game |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="flex flex-col sm:flex-row gap-4 mt-8"> |
| <div class="flex gap-2"> |
| <button id="copy-link" class="bg-light hover:bg-accent text-primary px-4 py-2 rounded-lg transition flex items-center gap-2"> |
| <i class="fas fa-link"></i> Copy Invite Link |
| </button> |
| <button id="leave-game" class="bg-light hover:bg-rose-500/10 text-rose-500 px-4 py-2 rounded-lg transition flex items-center gap-2"> |
| <i class="fas fa-sign-out-alt"></i> Leave Game |
| </button> |
| </div> |
| <div class="ml-auto flex gap-2"> |
| <div id="player-one" class="bg-light px-4 py-2 rounded-lg flex items-center gap-2"> |
| <i class="fas fa-user text-primary"></i> |
| <span>X: <span id="player-one-name">Player 1</span></span> |
| </div> |
| <div id="player-two" class="bg-light px-4 py-2 rounded-lg flex items-center gap-2"> |
| <i class="fas fa-user text-secondary"></i> |
| <span>O: <span id="player-two-name">Player 2</span></span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <footer class="mt-8 text-center text-gray-600"> |
| <p>Created with <i class="fas fa-heart text-red-500"></i> & Socket.io</p> |
| </footer> |
|
|
| <script> |
| |
| const lobbySection = document.getElementById('lobby'); |
| const gameSection = document.getElementById('game-section'); |
| const gameBoard = document.getElementById('game-board'); |
| const waitingRoom = document.getElementById('waiting-room'); |
| const gameIdDisplay = document.getElementById('game-id-display'); |
| const gameIdInput = document.getElementById('game-id'); |
| const gameIdLabel = document.getElementById('game-id-label'); |
| const gameOver = document.getElementById('game-over'); |
| const resultText = document.getElementById('result-text'); |
| const statusText = document.getElementById('status-text'); |
| const playerSymbol = document.getElementById('player-symbol'); |
| const playerOneName = document.getElementById('player-one-name'); |
| const playerTwoName = document.getElementById('player-two-name'); |
| const playerCount = document.getElementById('player-count'); |
| |
| |
| let gameId = null; |
| let player = null; |
| let isCurrentTurn = false; |
| let gameBoardState = Array(9).fill(null); |
| |
| |
| const socket = io("https://tic-tac-toe-socketio.adaptable.app/", { |
| transports: ['websocket'] |
| }); |
| |
| |
| document.getElementById('create-game').addEventListener('click', createGame); |
| document.getElementById('join-game').addEventListener('click', joinGame); |
| document.getElementById('copy-id').addEventListener('click', copyGameId); |
| document.getElementById('play-again').addEventListener('click', restartGame); |
| document.getElementById('new-game').addEventListener('click', resetGame); |
| document.getElementById('leave-game').addEventListener('click', leaveGame); |
| document.getElementById('copy-link').addEventListener('click', copyInviteLink); |
| |
| |
| socket.on('connect', () => { |
| console.log('Connected to server with socket id:', socket.id); |
| }); |
| |
| socket.on('gameCreated', (id) => { |
| gameId = id; |
| document.getElementById('game-code').textContent = id; |
| gameIdDisplay.classList.remove('hidden'); |
| waitingRoom.classList.remove('hidden'); |
| }); |
| |
| socket.on('playerJoined', (players) => { |
| playerCount.textContent = players.length; |
| if (players.length === 2) { |
| |
| setTimeout(() => { |
| lobbySection.classList.add('hidden'); |
| gameSection.classList.remove('hidden'); |
| waitingRoom.classList.add('hidden'); |
| }, 1000); |
| } |
| }); |
| |
| socket.on('playerLeft', (players) => { |
| playerCount.textContent = players.length; |
| }); |
| |
| socket.on('gameJoined', (gameData) => { |
| gameId = gameData.id; |
| player = gameData.players.find(p => p.id === socket.id); |
| |
| |
| playerOneName.textContent = gameData.players[0].name; |
| playerTwoName.textContent = gameData.players[1]?.name || 'Waiting...'; |
| playerCount.textContent = gameData.players.length; |
| |
| |
| if (player.id === gameData.players[0].id) { |
| playerSymbol.textContent = 'X'; |
| playerSymbol.classList.add('text-primary'); |
| } else if (player.id === gameData.players[1]?.id) { |
| playerSymbol.textContent = 'O'; |
| playerSymbol.classList.add('text-secondary'); |
| } |
| |
| |
| if (gameData.players.length === 2) { |
| lobbySection.classList.add('hidden'); |
| gameSection.classList.remove('hidden'); |
| waitingRoom.classList.add('hidden'); |
| updateBoard(gameData.board); |
| updateGameState(gameData); |
| } else { |
| |
| gameIdDisplay.classList.remove('hidden'); |
| waitingRoom.classList.remove('hidden'); |
| document.getElementById('game-code').textContent = gameId; |
| } |
| |
| gameIdLabel.textContent = `Game ID: ${gameId}`; |
| }); |
| |
| socket.on('updateBoard', (board) => { |
| updateBoard(board); |
| gameBoardState = board; |
| }); |
| |
| socket.on('updateGameState', (gameData) => { |
| updateGameState(gameData); |
| }); |
| |
| socket.on('gameOver', (result) => { |
| showGameResult(result); |
| createConfetti(); |
| }); |
| |
| socket.on('error', (message) => { |
| showNotification(message); |
| }); |
| |
| |
| function createGame() { |
| const playerName = `Player_${Math.floor(Math.random() * 1000)}`; |
| socket.emit('createGame', playerName); |
| } |
| |
| function joinGame() { |
| const id = gameIdInput.value.trim(); |
| if (!id) { |
| showNotification('Please enter a Game ID!'); |
| return; |
| } |
| |
| const playerName = `Player_${Math.floor(Math.random() * 1000)}`; |
| socket.emit('joinGame', { gameId: id, playerName }); |
| } |
| |
| function cellClick(index) { |
| if (isCurrentTurn && !gameBoardState[index]) { |
| const chipAnimation = document.createElement('div'); |
| chipAnimation.className = 'chip-animation'; |
| const cell = document.getElementById(`cell-${index}`); |
| cell.appendChild(chipAnimation); |
| |
| setTimeout(() => { |
| socket.emit('makeMove', { |
| gameId, |
| index, |
| symbol: player.symbol |
| }); |
| }, 300); |
| } |
| } |
| |
| function updateBoard(board) { |
| gameBoardState = [...board]; |
| gameBoard.innerHTML = ''; |
| |
| for (let i = 0; i < 9; i++) { |
| const cell = document.createElement('div'); |
| cell.id = `cell-${i}`; |
| cell.className = 'grid-cell aspect-square bg-white rounded-xl border-2 border-accent shadow-md flex items-center justify-center cursor-pointer hover:shadow-lg transition-all'; |
| cell.addEventListener('click', () => cellClick(i)); |
| |
| if (board[i]) { |
| const symbol = document.createElement('div'); |
| symbol.className = 'text-4xl font-bold'; |
| |
| if (board[i] === 'X') { |
| symbol.textContent = 'X'; |
| symbol.classList.add('text-primary'); |
| } else { |
| symbol.textContent = 'O'; |
| symbol.classList.add('text-secondary'); |
| } |
| |
| cell.appendChild(symbol); |
| } |
| |
| gameBoard.appendChild(cell); |
| } |
| } |
| |
| function updateGameState(gameData) { |
| isCurrentTurn = gameData.currentPlayerId === socket.id; |
| player = gameData.players.find(p => p.id === socket.id); |
| |
| |
| if (gameData.winner) { |
| if (gameData.winner === 'draw') { |
| statusText.textContent = "It's a draw!"; |
| } else if (gameData.winner === player.symbol) { |
| statusText.textContent = "You won!"; |
| } else { |
| statusText.textContent = "You lost!"; |
| } |
| } else { |
| if (isCurrentTurn) { |
| statusText.textContent = `Your turn! (${player.symbol})`; |
| document.getElementById('game-status').classList.remove('bg-gradient-to-r', 'from-purple-600', 'to-indigo-700'); |
| document.getElementById('game-status').classList.add('bg-gradient-to-r', 'from-blue-600', 'to-indigo-700'); |
| } else { |
| statusText.textContent = `Waiting for opponent...`; |
| document.getElementById('game-status').classList.remove('bg-gradient-to-r', 'from-blue-600', 'to-indigo-700'); |
| document.getElementById('game-status').classList.add('bg-gradient-to-r', 'from-purple-600', 'to-indigo-700'); |
| } |
| } |
| |
| |
| if (gameData.winningCombo) { |
| gameData.winningCombo.forEach(index => { |
| const cell = document.getElementById(`cell-${index}`); |
| cell.classList.add('winning-cell'); |
| }); |
| } |
| } |
| |
| function showGameResult(result) { |
| gameOver.classList.remove('hidden'); |
| |
| if (result.winner === 'draw') { |
| resultText.textContent = "Game ended in a draw!"; |
| resultText.className = "text-2xl font-bold text-gray-800"; |
| } else { |
| resultText.textContent = `${result.winner} wins the game!`; |
| resultText.className = `text-2xl font-bold ${result.winner === 'X' ? 'text-primary' : 'text-secondary'}`; |
| } |
| } |
| |
| function restartGame() { |
| socket.emit('restartGame', gameId); |
| gameOver.classList.add('hidden'); |
| |
| |
| const cells = document.querySelectorAll('.grid-cell'); |
| cells.forEach(cell => cell.classList.remove('winning-cell')); |
| } |
| |
| function resetGame() { |
| |
| lobbySection.classList.remove('hidden'); |
| gameSection.classList.add('hidden'); |
| gameOver.classList.add('hidden'); |
| gameIdDisplay.classList.add('hidden'); |
| waitingRoom.classList.add('hidden'); |
| |
| |
| gameId = null; |
| player = null; |
| isCurrentTurn = false; |
| gameBoardState = Array(9).fill(null); |
| |
| |
| document.getElementById('game-id').value = ''; |
| gameBoard.innerHTML = ''; |
| |
| |
| socket.emit('leaveGame', gameId); |
| } |
| |
| function leaveGame() { |
| socket.emit('leaveGame', gameId); |
| resetGame(); |
| } |
| |
| function copyGameId() { |
| navigator.clipboard.writeText(gameId) |
| .then(() => showNotification('Game ID copied to clipboard!')) |
| .catch(err => showNotification('Failed to copy: ' + err)); |
| } |
| |
| function copyInviteLink() { |
| const link = `${window.location.origin}/?game=${gameId}`; |
| navigator.clipboard.writeText(link) |
| .then(() => showNotification('Invite link copied to clipboard!')) |
| .catch(err => showNotification('Failed to copy: ' + err)); |
| } |
| |
| function showNotification(message) { |
| |
| const notification = document.createElement('div'); |
| notification.className = 'fixed bottom-5 right-5 bg-dark text-white px-4 py-3 rounded-lg shadow-lg transform transition-all duration-300'; |
| notification.innerHTML = ` |
| <div class="flex items-center gap-2"> |
| <i class="fas fa-info-circle"></i> |
| <span>${message}</span> |
| </div> |
| `; |
| |
| document.body.appendChild(notification); |
| |
| |
| setTimeout(() => { |
| notification.style.transform = 'translateX(100%)'; |
| setTimeout(() => { |
| document.body.removeChild(notification); |
| }, 300); |
| }, 3000); |
| } |
| |
| function createConfetti() { |
| const colors = ['#ef4444', '#f59e0b', '#10b981', '#3b82f6', '#8b5cf6', '#ec4899']; |
| const gameBoardRect = gameBoard.getBoundingClientRect(); |
| |
| for (let i = 0; i < 150; i++) { |
| const confetti = document.createElement('div'); |
| const colorIndex = Math.floor(Math.random() * colors.length); |
| |
| confetti.style.backgroundColor = colors[colorIndex]; |
| confetti.className = 'confetti'; |
| confetti.style.left = Math.random() * gameBoardRect.width + 'px'; |
| confetti.style.top = Math.random() * gameBoardRect.height + 'px'; |
| confetti.style.animationDuration = (Math.random() * 3 + 2) + 's'; |
| confetti.style.opacity = Math.random(); |
| confetti.style.width = Math.random() * 10 + 5 + 'px'; |
| confetti.style.height = confetti.style.width; |
| |
| gameBoard.appendChild(confetti); |
| |
| setTimeout(() => { |
| confetti.remove(); |
| }, 4000); |
| } |
| } |
| |
| |
| function initializeBoard() { |
| for (let i = 0; i < 9; i++) { |
| const cell = document.createElement('div'); |
| cell.id = `cell-${i}`; |
| cell.className = 'grid-cell aspect-square bg-white rounded-xl border-2 border-accent shadow-md flex items-center justify-center cursor-pointer hover:shadow-lg transition-all'; |
| cell.addEventListener('click', () => cellClick(i)); |
| gameBoard.appendChild(cell); |
| } |
| } |
| |
| initializeBoard(); |
| |
| |
| function checkUrlParams() { |
| const params = new URLSearchParams(window.location.search); |
| if (params.has('game')) { |
| const gameId = params.get('game'); |
| gameIdInput.value = gameId; |
| |
| showNotification("Game ID detected! Click Join Game to continue."); |
| } |
| } |
| |
| checkUrlParams(); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=LULDev/tictactoe" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
