онлайн шахматы челеове против человека, ии проитив человека и ии против ии

README.md

@@ -1,10 +1,13 @@
 ---
-title: Chessfusion Royale
-emoji: 🌖
+title: ChessFusion Royale ♟️🔥
 colorFrom: blue
-colorTo: yellow
+colorTo: purple
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,40 @@
+class CustomFooter extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .footer {
+                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                }
+            </style>
+            <footer class="footer text-white py-8">
+                <div class="container mx-auto px-4">
+                    <div class="flex flex-col md:flex-row justify-between items-center">
+                        <div class="mb-4 md:mb-0">
+                            <h2 class="text-xl font-bold flex items-center">
+                                <i data-feather="chess" class="mr-2"></i>
+                                ChessFusion Royale
+                            </h2>
+                            <p class="text-sm opacity-80 mt-1">The ultimate chess experience</p>
+                        </div>
+                        <div class="flex space-x-4">
+                            <a href="#" class="hover:text-yellow-200">
+                                <i data-feather="github"></i>
+                            </a>
+                            <a href="#" class="hover:text-yellow-200">
+                                <i data-feather="twitter"></i>
+                            </a>
+                            <a href="#" class="hover:text-yellow-200">
+                                <i data-feather="mail"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="border-t border-white border-opacity-20 mt-6 pt-6 text-sm text-center md:text-left">
+                        <p>© ${new Date().getFullYear()} ChessFusion Royale. All rights reserved.</p>
+                    </div>
+                </div>
+            </footer>
+        `;
+    }
+}
+customElements.define('custom-footer', CustomFooter);

components/game-mode-card.js

@@ -0,0 +1,40 @@
+class GameModeCard extends HTMLElement {
+    connectedCallback() {
+        const title = this.getAttribute('title') || '';
+        const description = this.getAttribute('description') || '';
+        const icon = this.getAttribute('icon') || 'help-circle';
+        const bgColor = this.getAttribute('bg-color') || 'bg-gray-500';
+        const href = this.getAttribute('href') || '#';
+        
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .card {
+                    transition: all 0.3s ease;
+                }
+                .card:hover {
+                    transform: translateY(-5px);
+                    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+                }
+            </style>
+            <a href="${href}" class="block">
+                <div class="card bg-white rounded-xl shadow-md overflow-hidden h-full">
+                    <div class="${bgColor} p-6 flex justify-center">
+                        <i data-feather="${icon}" class="text-white w-12 h-12"></i>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-semibold text-gray-800 mb-2">${title}</h3>
+                        <p class="text-gray-600">${description}</p>
+                        <div class="mt-4">
+                            <span class="inline-flex items-center text-${bgColor.split('-')[1]}-600 font-medium">
+                                Play now
+                                <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </a>
+        `;
+    }
+}
+customElements.define('custom-game-mode-card', GameModeCard);

components/navbar.js

@@ -0,0 +1,38 @@
+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .navbar {
+                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                }
+                .nav-link:hover {
+                    transform: translateY(-2px);
+                }
+                .nav-link {
+                    transition: all 0.2s ease;
+                }
+            </style>
+            <nav class="navbar shadow-lg">
+                <div class="container mx-auto px-4 py-3">
+                    <div class="flex justify-between items-center">
+                        <a href="/" class="flex items-center space-x-2">
+                            <i data-feather="chess" class="text-white"></i>
+                            <span class="text-white text-xl font-bold">ChessFusion</span>
+                        </a>
+                        <div class="hidden md:flex space-x-6">
+                            <a href="/" class="nav-link text-white hover:text-yellow-200">Home</a>
+                            <a href="/human-vs-human.html" class="nav-link text-white hover:text-yellow-200">PvP</a>
+                            <a href="/ai-vs-human.html" class="nav-link text-white hover:text-yellow-200">vs AI</a>
+                            <a href="/ai-vs-ai.html" class="nav-link text-white hover:text-yellow-200">AI Battle</a>
+                        </div>
+                        <button class="md:hidden text-white focus:outline-none">
+                            <i data-feather="menu"></i>
+                        </button>
+                    </div>
+                </div>
+            </nav>
+        `;
+    }
+}
+customElements.define('custom-navbar', CustomNavbar);

human-vs-human.html

@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Human vs Human | ChessFusion Royale</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.2/chess.js"></script>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+</head>
+<body class="bg-gray-100 min-h-screen flex flex-col">
+    <custom-navbar></custom-navbar>
+
+    <main class="flex-grow container mx-auto px-4 py-8">
+        <div class="max-w-4xl mx-auto">
+            <div class="flex justify-between items-center mb-8">
+                <h1 class="text-3xl font-bold text-gray-800">Human vs Human</h1>
+                <div class="flex space-x-4">
+                    <button id="new-game-btn" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md flex items-center">
+                        <i data-feather="refresh-cw" class="mr-2"></i>
+                        New Game
+                    </button>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl shadow-lg p-6">
+                <div class="chess-board" id="chess-board"></div>
+                
+                <div class="mt-6 flex justify-between items-center">
+                    <div class="flex items-center">
+                        <div class="w-8 h-8 rounded-full bg-gray-800 mr-2"></div>
+                        <span class="font-medium">Black</span>
+                    </div>
+                    <div id="game-status" class="text-lg font-semibold">White's turn</div>
+                    <div class="flex items-center">
+                        <div class="w-8 h-8 rounded-full bg-white border border-gray-300 mr-2"></div>
+                        <span class="font-medium">White</span>
+                    </div>
+                </div>
+            </div>
+
+            <div class="mt-8 bg-white rounded-xl shadow-lg p-6">
+                <h2 class="text-xl font-semibold mb-4">Game History</h2>
+                <div id="move-history" class="bg-gray-50 p-4 rounded-md max-h-60 overflow-y-auto">
+                    <!-- Moves will be added here -->
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <script>
+        feather.replace();
+        
+        // Initialize chess game
+        document.addEventListener('DOMContentLoaded', () => {
+            const game = new Chess();
+            const boardElement = document.getElementById('chess-board');
+            const moveHistoryElement = document.getElementById('move-history');
+            const gameStatusElement = document.getElementById('game-status');
+            
+            // Render chess board
+            function renderBoard() {
+                boardElement.innerHTML = '';
+                
+                for (let i = 0; i < 8; i++) {
+                    for (let j = 0; j < 8; j++) {
+                        const square = document.createElement('div');
+                        square.className = `chess-square ${(i + j) % 2 === 0 ? 'light' : 'dark'}`;
+                        square.dataset.row = i;
+                        square.dataset.col = j;
+                        
+                        const piece = game.get(`${String.fromCharCode(97 + j)}${8 - i}`);
+                        if (piece) {
+                            const pieceElement = document.createElement('div');
+                            pieceElement.className = 'chess-piece';
+                            pieceElement.innerHTML = getPieceSymbol(piece);
+                            pieceElement.dataset.piece = piece.type;
+                            pieceElement.dataset.color = piece.color;
+                            square.appendChild(pieceElement);
+                        }
+                        
+                        boardElement.appendChild(square);
+                    }
+                }
+                
+                updateGameStatus();
+            }
+            
+            function getPieceSymbol(piece) {
+                const symbols = {
+                    'p': '♟', 'n': '♞', 'b': '♝', 'r': '♜', 'q': '♛', 'k': '♚',
+                    'P': '♙', 'N': '♘', 'B': '♗', 'R': '♖', 'Q': '♕', 'K': '♔'
+                };
+                return symbols[piece.type === 'k' || piece.type === 'K' ? piece.type : piece.type.toLowerCase()];
+            }
+            
+            function updateGameStatus() {
+                if (game.isCheckmate()) {
+                    gameStatusElement.textContent = `Checkmate! ${game.turn() === 'w' ? 'Black' : 'White'} wins!`;
+                } else if (game.isDraw()) {
+                    gameStatusElement.textContent = "Game ended in a draw";
+                } else if (game.isCheck()) {
+                    gameStatusElement.textContent = `${game.turn() === 'w' ? 'White' : 'Black'} is in check`;
+                } else {
+                    gameStatusElement.textContent = `${game.turn() === 'w' ? 'White' : 'Black'}'s turn`;
+                }
+            }
+            
+            function updateMoveHistory() {
+                moveHistoryElement.innerHTML = '';
+                const moves = game.history({ verbose: true });
+                
+                for (let i = 0; i < moves.length; i += 2) {
+                    const moveDiv = document.createElement('div');
+                    moveDiv.className = 'flex justify-between mb-1';
+                    
+                    const whiteMove = moves[i];
+                    moveDiv.innerHTML = `
+                        <span class="text-gray-700">${Math.floor(i/2) + 1}. ${whiteMove.san}</span>
+                        ${i + 1 < moves.length ? `<span class="text-gray-700">${moves[i+1].san}</span>` : ''}
+                    `;
+                    
+                    moveHistoryElement.appendChild(moveDiv);
+                }
+            }
+            
+            // Handle piece selection and movement
+            let selectedSquare = null;
+            
+            boardElement.addEventListener('click', (e) => {
+                const square = e.target.closest('.chess-square');
+                if (!square) return;
+                
+                const row = parseInt(square.dataset.row);
+                const col = parseInt(square.dataset.col);
+                const position = `${String.fromCharCode(97 + col)}${8 - row}`;
+                
+                const piece = game.get(position);
+                
+                // If no piece is selected and clicked square has a piece of current turn's color
+                if (!selectedSquare && piece && piece.color === game.turn()) {
+                    selectedSquare = position;
+                    square.classList.add('selected');
+                    return;
+                }
+                
+                // If a piece is already selected
+                if (selectedSquare) {
+                    // If clicking on the same piece, deselect it
+                    if (position === selectedSquare) {
+                        document.querySelector(`.chess-square[data-row="${row}"][data-col="${col}"]`).classList.remove('selected');
+                        selectedSquare = null;
+                        return;
+                    }
+                    
+                    // Try to make the move
+                    try {
+                        const move = game.move({
+                            from: selectedSquare
+</body>
+</html>

index.html

@@ -1,19 +1,60 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ChessFusion Royale | Online Chess Platform</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.2/chess.js"></script>
+    <script src="components/navbar.js"></script>
+    <script src="components/game-mode-card.js"></script>
+    <script src="components/footer.js"></script>
+</head>
+<body class="bg-gray-100 min-h-screen flex flex-col">
+    <custom-navbar></custom-navbar>
+
+    <main class="flex-grow container mx-auto px-4 py-8">
+        <section class="text-center mb-12">
+            <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">ChessFusion Royale</h1>
+            <p class="text-xl text-gray-600 max-w-2xl mx-auto">Play chess in any mode you like - Human vs Human, AI vs Human, or watch AI battle itself!</p>
+        </section>
+
+        <section class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
+            <custom-game-mode-card 
+                title="Human vs Human" 
+                description="Challenge a friend to a classic chess match"
+                icon="users"
+                bg-color="bg-blue-500"
+                href="/human-vs-human.html">
+            </custom-game-mode-card>
+
+            <custom-game-mode-card 
+                title="AI vs Human" 
+                description="Test your skills against our chess AI"
+                icon="cpu"
+                bg-color="bg-purple-500"
+                href="/ai-vs-human.html">
+            </custom-game-mode-card>
+
+            <custom-game-mode-card 
+                title="AI vs AI" 
+                description="Watch two chess engines battle it out"
+                icon="activity"
+                bg-color="bg-green-500"
+                href="/ai-vs-ai.html">
+            </custom-game-mode-card>
+        </section>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <script>
+        feather.replace();
+    </script>
+    <script src="script.js"></script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,25 @@
+// Shared utility functions
+function showToast(message, type = 'info') {
+    const toast = document.createElement('div');
+    toast.className = `fixed bottom-4 right-4 px-4 py-2 rounded-md shadow-lg text-white ${
+        type === 'error' ? 'bg-red-500' : 
+        type === 'success' ? 'bg-green-500' : 'bg-blue-500'
+    }`;
+    toast.textContent = message;
+    document.body.appendChild(toast);
+    
+    setTimeout(() => {
+        toast.remove();
+    }, 3000);
+}
+
+// Initialize chess game (will be extended in specific pages)
+function initChessGame(mode) {
+    console.log(`Initializing chess game in ${mode} mode`);
+    // Common initialization logic here
+}
+
+// Navigation helper
+document.addEventListener('DOMContentLoaded', () => {
+    // Any shared initialization logic
+});

style.css

@@ -1,28 +1,62 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', sans-serif;
+}
+
+.chess-board {
+    width: 100%;
+    max-width: 600px;
+    aspect-ratio: 1/1;
+    display: grid;
+    grid-template-columns: repeat(8, 1fr);
+    grid-template-rows: repeat(8, 1fr);
+    border: 2px solid #333;
+    margin: 0 auto;
+}
+
+.chess-square {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.chess-square.light {
+    background-color: #f0d9b5;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.chess-square.dark {
+    background-color: #b58863;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.chess-piece {
+    width: 80%;
+    height: 80%;
+    cursor: pointer;
+    transition: transform 0.2s;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.chess-piece:hover {
+    transform: scale(1.1);
 }
+
+.highlight {
+    position: absolute;
+    width: 30%;
+    height: 30%;
+    border-radius: 50%;
+    background-color: rgba(0, 255, 0, 0.4);
+}
+
+.move-highlight {
+    position: absolute;
+    width: 30%;
+    height: 30%;
+    border-radius: 50%;
+    background-color: rgba(0, 0, 255, 0.4);
+}
+
+.selected {
+    box-shadow: inset 0 0 10px rgba(255, 255, 0, 0.8);
+}