now add live playing and adding more context of adding a live game of chess with deepseek and other player

index.html

@@ -85,17 +85,17 @@
                         ChessVision Pro ♟️
                     </h1>
                 </div>
-                <div class="flex items-center space-x-4">
-                    <button class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded-lg transition-colors flex items-center space-x-2">
-                        <i data-feather="refresh-cw"></i>
-                        <span>New Game</span>
-                    </button>
-                    <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg transition-colors flex items-center space-x-2">
-                        <i data-feather="settings"></i>
-                        <span>Settings</span>
-                    </button>
-                </div>
-            </div>
+    <div class="flex items-center space-x-4">
+        <button class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded-lg transition-colors flex items-center space-x-2">
+            <i data-feather="refresh-cw"></i>
+            <span>New Game</span>
+        </button>
+        <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg transition-colors flex items-center space-x-2">
+            <i data-feather="users"></i>
+            <span>Multiplayer</span>
+        </button>
+    </div>
+</div>
         </div>
     </header>
 
@@ -103,12 +103,37 @@
         <div class="grid lg:grid-cols-3 gap-8 items-start">
             <!-- Left Sidebar -->
             <div class="space-y-6">
+                <div class="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
+                    <h2 class="text-xl font-bold mb-4 flex items-center space-x-2">
+                        <i data-feather="users"></i>
+                        <span>Game Mode</span>
+                    </h2>
+                <div class="space-y-3">
+                    <button class="w-full bg-purple-600 hover:bg-purple-700 px-4 py-3 rounded-lg transition-colors flex items-center space-x-2 justify-center game-mode-btn" data-mode="ai">
+                        <i data-feather="cpu"></i>
+                        <span>Play vs AI (DeepSeek)</span>
+                    </button>
+                    <button class="w-full bg-indigo-600 hover:bg-indigo-700 px-4 py-3 rounded-lg transition-colors flex items-center space-x-2 justify-center game-mode-btn" data-mode="multiplayer">
+                        <i data-feather="users"></i>
+                        <span>Live Multiplayer</span>
+                    </button>
+                    <button class="w-full bg-gray-600 hover:bg-gray-700 px-4 py-3 rounded-lg transition-colors flex items-center space-x-2 justify-center game-mode-btn" data-mode="local">
+                        <i data-feather="user"></i>
+                        <span>Local Play</span>
+                    </button>
+                </div>
+            </div>
+
                 <div class="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
                     <h2 class="text-xl font-bold mb-4 flex items-center space-x-2">
                         <i data-feather="users"></i>
                         <span>Game Info</span>
                     </h2>
                     <div class="space-y-3">
+                        <div class="flex justify-between">
+                            <span class="text-gray-400">Mode:</span>
+                            <span class="font-semibold text-white" id="currentMode">Local Play</span>
+                        </div>
                         <div class="flex justify-between">
                             <span class="text-gray-400">Player:</span>
                             <span class="font-semibold text-white">White</span>
@@ -121,10 +146,13 @@
                             <span class="text-gray-400">Turn:</span>
                             <span class="font-semibold text-green-400">White to Move</span>
                         </div>
+                        <div class="flex justify-between" id="aiStatus" style="display: none;">
+                            <span class="text-gray-400">AI Status:</span>
+                            <span class="font-semibold text-yellow-400">Ready</span>
+                        </div>
                     </div>
                 </div>
-
-                <div class="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
+<div class="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
                     <h2 class="text-xl font-bold mb-4 flex items-center space-x-2">
                         <i data-feather="activity"></i>
                         <span>Statistics</span>
@@ -163,27 +191,64 @@
                     </button>
                 </div>
             </div>
-
             <!-- Right Sidebar -->
             <div class="space-y-6">
                 <div class="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
                     <h2 class="text-xl font-bold mb-4 flex items-center space-x-2">
                         <i data-feather="message-circle"></i>
-                        <span>Game Context</span>
+                        <span>Live Game Context</span>
                     </h2>
                     <div class="space-y-3 text-gray-300">
-                        <p>Welcome to ChessVision Pro! This is a complete chess implementation featuring:</p>
-                        <ul class="list-disc list-inside space-y-1 ml-2">
-                            <li>64 interactive squares with alternating colors</li>
-                            <li>Full set of chess pieces with proper positioning</li>
-                            <li>Piece movement animations</li>
-                            <li>Game state tracking</li>
-                            <li>Move validation system</li>
-                        </ul>
+                    <div id="gameContext">
+                        <p><strong>🎯 Current Mode: Local Play</strong></p>
+                        <p class="text-sm">Play against yourself or with a friend on the same device.</p>
                     </div>
                 </div>
 
-                <div class="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
+                <div class="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700" id="aiPanel" style="display: none;">
+                    <h2 class="text-xl font-bold mb-4 flex items-center space-x-2">
+                            <i data-feather="cpu"></i>
+                            <span>DeepSeek AI</span>
+                        </h2>
+                        <div class="space-y-3">
+                            <div class="flex justify-between">
+                                <span class="text-gray-400">AI Level:</span>
+                                <select class="bg-gray-700 text-white rounded px-2 py-1" id="aiLevel">
+                                    <option value="beginner">Beginner</option>
+                                    <option value="intermediate" selected>Intermediate</option>
+                                    <option value="advanced">Advanced</option>
+                                    <option value="expert">Expert</option>
+                                </select>
+                            </div>
+                            <div class="flex justify-between">
+                                <span class="text-gray-400">Thinking:</span>
+                                <span class="font-semibold text-yellow-400" id="aiThinking">No</span>
+                            </div>
+                        </div>
+                    </div>
+
+                <div class="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700" id="multiplayerPanel" style="display: none;">
+                    <h2 class="text-xl font-bold mb-4 flex items-center space-x-2">
+                            <i data-feather="globe"></i>
+                            <span>Live Multiplayer</span>
+                        </h2>
+                        <div class="space-y-3">
+                            <button class="w-full bg-green-600 hover:bg-green-700 px-4 py-3 rounded-lg transition-colors flex items-center space-x-2 justify-center" id="createGameBtn">
+                                <i data-feather="plus"></i>
+                                <span>Create Game Room</span>
+                            </button>
+                            <div class="flex space-x-2">
+                                <input type="text" placeholder="Room ID" class="flex-1 bg-gray-700 text-white rounded px-3 py-2" id="roomIdInput">
+                                <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded transition-colors">
+                                    <i data-feather="log-in"></i>
+                                </button>
+                            </div>
+                            <div class="text-center text-sm text-gray-400" id="roomStatus">
+                                No active room
+                            </div>
+                        </div>
+                    </div>
+<div class="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
                     <h2 class="text-xl font-bold mb-4 flex items-center space-x-2">
                         <i data-feather="clock"></i>
                         <span>Move History</span>
@@ -237,11 +302,12 @@
             ['white-pawn', 'white-pawn', 'white-pawn', 'white-pawn', 'white-pawn', 'white-pawn', 'white-pawn', 'white-pawn'],
             ['white-rook', 'white-knight', 'white-bishop', 'white-queen', 'white-king', 'white-bishop', 'white-knight', 'white-rook']
         ];
-
         let selectedSquare = null;
         let currentTurn = 'white';
-
-        // Create chess board
+        let gameMode = 'local';
+        let gameRoom = null;
+        let isPlayerWhite = true;
+// Create chess board
         function createChessBoard() {
             const board = document.getElementById('chessBoard');
             board.innerHTML = '';
@@ -270,7 +336,6 @@
                 }
             }
         }
-
         // Handle square clicks
         function handleSquareClick(event) {
             const square = event.currentTarget;
@@ -278,6 +343,10 @@
             const col = parseInt(square.dataset.col);
             const piece = square.querySelector('.piece');
 
+            // Check if it's player's turn based on game mode
+            if (gameMode === 'ai' && currentTurn === 'black') return;
+            if (gameMode === 'multiplayer' && ((isPlayerWhite && currentTurn === 'black') || (!isPlayerWhite && currentTurn === 'white'))) return;
+
             // If no piece selected and clicked on own piece
             if (!selectedSquare && piece && piece.dataset.color === currentTurn) {
                 selectSquare(square);
@@ -301,10 +370,14 @@
 
                 // Attempt to move piece
                 movePiece(selectedSquare, square);
+                
+                // If playing against AI and it's AI's turn
+                if (gameMode === 'ai' && currentTurn === 'black') {
+                    setTimeout(makeAIMove, 1000);
+                }
             }
         }
-
-        // Select square
+// Select square
         function selectSquare(square) {
             deselectSquare(); // Clear any previous selection
             selectedSquare = square;
@@ -370,7 +443,6 @@
                 square.classList.remove('possible-move');
             });
         }
-
         // Move piece
         function movePiece(fromSquare, toSquare) {
             const piece = fromSquare.querySelector('.piece');
@@ -387,12 +459,152 @@
                     currentTurn = currentTurn === 'white' ? 'black' : 'white';
                     updateTurnDisplay();
                     
+                    // If multiplayer, send move to server
+                    if (gameMode === 'multiplayer' && gameRoom) {
+                sendMoveToServer(fromSquare, toSquare);
+            }
+                    
                     deselectSquare();
                 }, 150);
             }
         }
 
-        // Update turn display
+        // Make AI move (simulated)
+        function makeAIMove() {
+            if (gameMode !== 'ai' || currentTurn !== 'black') return;
+            
+            // Show AI thinking status
+            document.getElementById('aiThinking').textContent = 'Yes';
+            
+            setTimeout(() => {
+                // Find all possible moves for black pieces
+                const blackPieces = document.querySelectorAll('.piece[data-color="black"]');
+                const possibleMoves = [];
+                
+                blackPieces.forEach(piece => {
+                    const square = piece.parentElement;
+                    const row = parseInt(square.dataset.row);
+                    const col = parseInt(square.dataset.col);
+                    
+                    // Simple AI logic - move random piece to random valid position
+                    const pieceType = piece.dataset.type;
+                    let moves = [];
+                    
+                    if (pieceType === 'pawn') {
+                        moves.push({ row: row + 1, col: col });
+                        moves.push({ row: row + 1, col: col - 1 });
+                        moves.push({ row: row + 1, col: col + 1 });
+                    } else if (pieceType === 'knight') {
+                        moves.push({ row: row - 2, col: col - 1 });
+                        moves.push({ row: row - 2, col: col + 1 });
+                        moves.push({ row: row - 1, col: col - 2 });
+                        moves.push({ row: row - 1, col: col + 2 });
+                        moves.push({ row: row + 1, col: col - 2 });
+                        moves.push({ row: row + 1, col: col + 2 });
+                        moves.push({ row: row + 2, col: col - 1 });
+                        moves.push({ row: row + 2, col: col + 1 });
+                    }
+                    
+                    // Filter valid moves
+                    moves = moves.filter(move => 
+                        move.row >= 0 && move.row < 8 && move.col >= 0 && move.col < 8
+                    );
+                    
+                    moves.forEach(move => {
+                        const targetSquare = document.querySelector(`[data-row="${move.row}"][data-col="${move.col}"]');
+                        if (targetSquare && (!targetSquare.querySelector('.piece') || targetSquare.querySelector('.piece[data-color="white"]'))) {
+                            possibleMoves.push({ from: square, to: targetSquare });
+                        }
+                    });
+                });
+                
+                // Make a random move if available
+                if (possibleMoves.length > 0) {
+                    const randomMove = possibleMoves[Math.floor(Math.random() * possibleMoves.length)];
+                    movePiece(randomMove.from, randomMove.to);
+                }
+                
+                document.getElementById('aiThinking').textContent = 'No';
+            }, 1500);
+        }
+
+        // Game mode selection
+        function setGameMode(mode) {
+            gameMode = mode;
+            document.getElementById('currentMode').textContent = 
+                mode === 'ai' ? 'AI (DeepSeek)' : 
+                mode === 'multiplayer' ? 'Live Multiplayer' : 'Local Play';
+            
+            // Update UI based on mode
+            document.getElementById('aiStatus').style.display = mode === 'ai' ? 'flex' : 'none';
+            document.getElementById('aiPanel').style.display = mode === 'ai' ? 'block' : 'none';
+            document.getElementById('multiplayerPanel').style.display = mode === 'multiplayer' ? 'block' : 'none';
+            
+            // Update game context
+            const context = document.getElementById('gameContext');
+            if (mode === 'ai') {
+                context.innerHTML = `
+                    <p><strong>🤖 Playing vs AI</strong></p>
+                    <p class="text-sm">Challenge DeepSeek AI with adjustable difficulty levels.</p>
+                    <ul class="list-disc list-inside space-y-1 ml-2 text-sm">
+                        <li>Smart move prediction</li>
+                        <li>Multiple difficulty levels</li>
+                        <li>Real-time analysis</li>
+                    </ul>
+                `;
+            } else if (mode === 'multiplayer') {
+                context.innerHTML = `
+                    <p><strong>🌐 Live Multiplayer</strong></p>
+                    <p class="text-sm">Play against real opponents worldwide in real-time.</p>
+                    <ul class="list-disc list-inside space-y-1 ml-2 text-sm">
+                        <li>Real-time game synchronization</li>
+                        <li>Chat with opponents</li>
+                        <li>Elo rating system</li>
+                    </ul>
+                `;
+            } else {
+                context.innerHTML = `
+                    <p><strong>🎯 Current Mode: Local Play</strong></p>
+                    <p class="text-sm">Play against yourself or with a friend on the same device.</p>
+                `;
+            }
+            
+            // Reset game state for new mode
+            createChessBoard();
+            currentTurn = 'white';
+            updateTurnDisplay();
+        }
+
+        // Send move to multiplayer server (simulated)
+        function sendMoveToServer(fromSquare, toSquare) {
+            console.log('Sending move to server:', {
+                from: { row: fromSquare.dataset.row, col: fromSquare.dataset.col },
+                to: { row: toSquare.dataset.row, col: toSquare.dataset.col }
+            });
+            
+            // Simulate server response
+            setTimeout(() => {
+                document.getElementById('roomStatus').textContent = 'Move sent to opponent';
+            }, 500);
+        }
+
+        // Initialize game mode buttons
+        function initGameModes() {
+            document.querySelectorAll('.game-mode-btn').forEach(btn => {
+                btn.addEventListener('click', () => {
+                    setGameMode(btn.dataset.mode);
+                });
+            });
+            
+            // Multiplayer buttons
+            document.getElementById('createGameBtn').addEventListener('click', () => {
+                const roomId = Math.random().toString(36).substring(2, 8).toUpperCase();
+                document.getElementById('roomIdInput').value = roomId;
+                gameRoom = roomId;
+                document.getElementById('roomStatus').textContent = `Room created: ${roomId}`;
+            });
+        }
+// Update turn display
         function updateTurnDisplay() {
             const turnElements = document.querySelectorAll('[class*="turn"]');
             turnElements.forEach(el => {
@@ -401,12 +613,20 @@
                 el.classList.add(currentTurn === 'white' ? 'text-green-400' : 'text-blue-400');
             });
         }
-
         // Initialize the board
         document.addEventListener('DOMContentLoaded', () => {
             createChessBoard();
+            initGameModes();
             feather.replace();
         });
-    </script>
+
+        // Add multiplayer functionality
+        document.getElementById('createGameBtn').addEventListener('click', function() {
+            const roomId = Math.random().toString(36).substring(2, 8).toUpperCase();
+            document.getElementById('roomIdInput').value = roomId;
+            gameRoom = roomId;
+            document.getElementById('roomStatus').textContent = `Room created: ${roomId}`;
+        });
+</script>
 </body>
 </html>