Spaces:

Sasanou
/

undefined

Running

App Files Files Community

Sasanou commited on Sep 30, 2025

Commit

420beb6

verified ·

1 Parent(s): 583757b

Use icon as paws

Browse files

Files changed (2) hide show

README.md +9 -5
index.html +572 -18

README.md CHANGED Viewed

@@ -1,10 +1,14 @@
 ---
-title: Undefined
-emoji: 📈
-colorFrom: blue
-colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: undefined
+colorFrom: green
+colorTo: green
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,573 @@
-<!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>ChessMaster Pro</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <style>
+        .chess-square {
+            position: relative;
+            width: 100%;
+            padding-bottom: 100%;
+        }
+        .chess-piece {
+            position: absolute;
+            width: 80%;
+            height: 80%;
+            top: 10%;
+            left: 10%;
+            background-size: contain;
+            background-repeat: no-repeat;
+            background-position: center;
+            cursor: pointer;
+            transition: transform 0.2s ease;
+            z-index: 10;
+        }
+        .chess-piece.dragging {
+            z-index: 20;
+            transform: scale(1.1);
+        }
+        .legal-move {
+            position: absolute;
+            width: 30%;
+            height: 30%;
+            border-radius: 50%;
+            background-color: rgba(0, 255, 0, 0.3);
+            top: 35%;
+            left: 35%;
+            z-index: 5;
+        }
+        .selected {
+            background-color: rgba(255, 215, 0, 0.3) !important;
+        }
+        .check {
+            background-color: rgba(255, 0, 0, 0.3) !important;
+        }
+        .captured-piece {
+            width: 30px;
+            height: 30px;
+            background-size: contain;
+            background-repeat: no-repeat;
+            background-position: center;
+            margin: 2px;
+        }
+        @media (max-width: 768px) {
+            .captured-piece {
+                width: 20px;
+                height: 20px;
+            }
+        }
+        .promotion-modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.7);
+            z-index: 100;
+            justify-content: center;
+            align-items: center;
+        }
+        .promotion-options {
+            display: flex;
+            background-color: #2d3748;
+            padding: 20px;
+            border-radius: 10px;
+        }
+        .promotion-piece {
+            width: 60px;
+            height: 60px;
+            margin: 10px;
+            background-size: contain;
+            background-repeat: no-repeat;
+            background-position: center;
+            cursor: pointer;
+            transition: transform 0.2s;
+        }
+        .promotion-piece:hover {
+            transform: scale(1.1);
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-white min-h-screen flex flex-col">
+    <header class="bg-indigo-900 py-4 px-6 shadow-lg">
+        <div class="container mx-auto flex justify-between items-center">
+            <h1 class="text-2xl md:text-3xl font-bold flex items-center">
+                <i data-feather="shield" class="mr-2"></i> ChessMaster Pro
+            </h1>
+            <div class="flex space-x-4">
+                <button id="resetBtn" class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-lg flex items-center">
+                    <i data-feather="refresh-cw" class="mr-2"></i> Reset
+                </button>
+                <button id="undoBtn" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg flex items-center">
+                    <i data-feather="corner-up-left" class="mr-2"></i> Undo
+                </button>
+            </div>
+        </div>
+    </header>
+    <main class="flex-grow container mx-auto px-4 py-8 flex flex-col md:flex-row items-center md:items-start justify-center gap-8">
+        <!-- Game info section -->
+        <div class="w-full md:w-1/4 bg-gray-800 p-6 rounded-lg shadow-lg">
+            <div class="mb-6">
+                <h2 class="text-xl font-semibold mb-2">Game Status</h2>
+                <div id="gameStatus" class="bg-gray-700 p-3 rounded">White's turn</div>
+            </div>
+            <div class="mb-6">
+                <h2 class="text-xl font-semibold mb-2">Captured Pieces</h2>
+                <div class="bg-gray-700 p-3 rounded">
+                    <h3 class="font-medium mb-1">White captured:</h3>
+                    <div id="whiteCaptured" class="flex flex-wrap"></div>
+                    <h3 class="font-medium mt-3 mb-1">Black captured:</h3>
+                    <div id="blackCaptured" class="flex flex-wrap"></div>
+                </div>
+            </div>
+            <div>
+                <h2 class="text-xl font-semibold mb-2">Move History</h2>
+                <div id="moveHistory" class="bg-gray-700 p-3 rounded max-h-40 overflow-y-auto">
+                    <!-- Move history will be populated here -->
+                </div>
+            </div>
+        </div>
+        <!-- Chess board -->
+        <div class="w-full md:w-2/4 max-w-lg mx-auto">
+            <div class="bg-gray-800 p-4 rounded-lg shadow-lg">
+                <div id="chessBoard" class="grid grid-cols-8 aspect-square">
+                    <!-- Board will be generated by JavaScript -->
+                </div>
+            </div>
+        </div>
+        <!-- Controls and info -->
+        <div class="w-full md:w-1/4 bg-gray-800 p-6 rounded-lg shadow-lg">
+            <div class="mb-6">
+                <h2 class="text-xl font-semibold mb-2">Current Player</h2>
+                <div id="currentPlayer" class="bg-gray-700 p-3 rounded flex items-center">
+                    <div class="w-6 h-6 bg-white rounded-full mr-2"></div> White
+                </div>
+            </div>
+            <div class="mb-6">
+                <h2 class="text-xl font-semibold mb-2">Game Controls</h2>
+                <div class="space-y-2">
+                    <button id="flipBoardBtn" class="w-full bg-purple-600 hover:bg-purple-700 py-2 rounded flex items-center justify-center">
+                        <i data-feather="rotate-cw" class="mr-2"></i> Flip Board
+                    </button>
+                    <button id="hintBtn" class="w-full bg-green-600 hover:bg-green-700 py-2 rounded flex items-center justify-center">
+                        <i data-feather="help-circle" class="mr-2"></i> Show Hints
+                    </button>
+                </div>
+            </div>
+            <div>
+                <h2 class="text-xl font-semibold mb-2">Game Time</h2>
+                <div class="bg-gray-700 p-3 rounded">
+                    <div class="flex justify-between">
+                        <span>White:</span>
+                        <span id="whiteTime">10:00</span>
+                    </div>
+                    <div class="flex justify-between mt-2">
+                        <span>Black:</span>
+                        <span id="blackTime">10:00</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    <!-- Promotion modal -->
+    <div id="promotionModal" class="promotion-modal">
+        <div class="promotion-options">
+            <div class="promotion-piece" data-piece="q"></div>
+            <div class="promotion-piece" data-piece="r"></div>
+            <div class="promotion-piece" data-piece="b"></div>
+            <div class="promotion-piece" data-piece="n"></div>
+        </div>
+    </div>
+    <footer class="bg-indigo-900 py-4 text-center">
+        <p>ChessMaster Pro ♟️ - Play like a grandmaster!</p>
+    </footer>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            feather.replace();
+            // Chess game implementation
+            const chessBoard = document.getElementById('chessBoard');
+            const gameStatus = document.getElementById('gameStatus');
+            const currentPlayer = document.getElementById('currentPlayer');
+            const whiteCaptured = document.getElementById('whiteCaptured');
+            const blackCaptured = document.getElementById('blackCaptured');
+            const moveHistory = document.getElementById('moveHistory');
+            const resetBtn = document.getElementById('resetBtn');
+            const undoBtn = document.getElementById('undoBtn');
+            const flipBoardBtn = document.getElementById('flipBoardBtn');
+            const hintBtn = document.getElementById('hintBtn');
+            const promotionModal = document.getElementById('promotionModal');
+            let board = [];
+            let selectedPiece = null;
+            let legalMoves = [];
+            let isWhiteTurn = true;
+            let boardFlipped = false;
+            let moveHistoryList = [];
+            let capturedPieces = { white: [], black: [] };
+            // Initialize the chess board
+            function initializeBoard() {
+                board = [
+                    ['br', 'bn', 'bb', 'bq', 'bk', 'bb', 'bn', 'br'],
+                    ['bp', 'bp', 'bp', 'bp', 'bp', 'bp', 'bp', 'bp'],
+                    ['', '', '', '', '', '', '', ''],
+                    ['', '', '', '', '', '', '', ''],
+                    ['', '', '', '', '', '', '', ''],
+                    ['', '', '', '', '', '', '', ''],
+                    ['wp', 'wp', 'wp', 'wp', 'wp', 'wp', 'wp', 'wp'],
+                    ['wr', 'wn', 'wb', 'wq', 'wk', 'wb', 'wn', 'wr']
+                ];
+                renderBoard();
+                updateGameStatus();
+                updateCapturedPieces();
+                moveHistory.innerHTML = '';
+                moveHistoryList = [];
+                isWhiteTurn = true;
+                updateCurrentPlayerDisplay();
+            }
+            // Render the chess board
+            function renderBoard() {
+                chessBoard.innerHTML = '';
+                for (let row = 0; row < 8; row++) {
+                    for (let col = 0; col < 8; col++) {
+                        const displayRow = boardFlipped ? 7 - row : row;
+                        const displayCol = boardFlipped ? 7 - col : col;
+                        const square = document.createElement('div');
+                        square.className = `chess-square ${(displayRow + displayCol) % 2 === 0 ? 'bg-amber-100' : 'bg-amber-800'}`;
+                        square.dataset.row = row;
+                        square.dataset.col = col;
+                        const piece = board[row][col];
+                        if (piece) {
+                            const pieceElement = document.createElement('div');
+                            pieceElement.className = `chess-piece ${piece[0] === 'w' ? 'white-piece' : 'black-piece'}`;
+                            pieceElement.style.backgroundImage = `url('http://static.photos/chess/${piece[0] === 'w' ? 'white' : 'black'}/200x200/${piece[1]})`;
+                            pieceElement.dataset.piece = piece;
+                            square.appendChild(pieceElement);
+                        }
+                        square.addEventListener('click', handleSquareClick);
+                        chessBoard.appendChild(square);
+                    }
+                }
+            }
+            // Handle square click
+            function handleSquareClick(event) {
+                const square = event.target.closest('.chess-square');
+                if (!square) return;
+                const row = parseInt(square.dataset.row);
+                const col = parseInt(square.dataset.col);
+                const piece = board[row][col];
+                // If a piece is already selected
+                if (selectedPiece) {
+                    // Check if the clicked square is a legal move
+                    const isLegalMove = legalMoves.some(move =>
+                        move.toRow === row && move.toCol === col
+                    );
+                    if (isLegalMove) {
+                        movePiece(selectedPiece.row, selectedPiece.col, row, col);
+                        clearSelection();
+                    } else if (piece && piece[0] === (isWhiteTurn ? 'w' : 'b')) {
+                        // Select a different piece of the same color
+                        selectPiece(row, col);
+                    } else {
+                        // Clicked on an empty square or opponent's piece without a legal move
+                        clearSelection();
+                    }
+                } else if (piece && piece[0] === (isWhiteTurn ? 'w' : 'b')) {
+                    // Select a piece
+                    selectPiece(row, col);
+                }
+            }
+            // Select a piece
+            function selectPiece(row, col) {
+                clearSelection();
+                selectedPiece = { row, col, piece: board[row][col] };
+                highlightSquare(row, col, true);
+                // Calculate legal moves (simplified for this example)
+                legalMoves = calculateLegalMoves(row, col);
+                highlightLegalMoves(legalMoves);
+            }
+            // Clear selection
+            function clearSelection() {
+                if (selectedPiece) {
+                    highlightSquare(selectedPiece.row, selectedPiece.col, false);
+                }
+                selectedPiece = null;
+                legalMoves = [];
+                // Remove all legal move indicators
+                document.querySelectorAll('.legal-move').forEach(el => el.remove());
+            }
+            // Highlight a square
+            function highlightSquare(row, col, isSelected) {
+                const displayRow = boardFlipped ? 7 - row : row;
+                const displayCol = boardFlipped ? 7 - col : col;
+                const index = displayRow * 8 + displayCol;
+                const square = chessBoard.children[index];
+                if (isSelected) {
+                    square.classList.add('selected');
+                } else {
+                    square.classList.remove('selected');
+                }
+            }
+            // Highlight legal moves
+            function highlightLegalMoves(moves) {
+                moves.forEach(move => {
+                    const displayRow = boardFlipped ? 7 - move.toRow : move.toRow;
+                    const displayCol = boardFlipped ? 7 - move.toCol : move.toCol;
+                    const index = displayRow * 8 + displayCol;
+                    const square = chessBoard.children[index];
+                    const indicator = document.createElement('div');
+                    indicator.className = 'legal-move';
+                    square.appendChild(indicator);
+                });
+            }
+            // Calculate legal moves (simplified version)
+            function calculateLegalMoves(row, col) {
+                const piece = board[row][col];
+                const moves = [];
+                // This is a simplified version - a real implementation would be more complex
+                if (piece[1] === 'p') { // Pawn
+                    const direction = piece[0] === 'w' ? -1 : 1;
+                    // Move forward
+                    if (isInBounds(row + direction, col) && !board[row + direction][col]) {
+                        moves.push({ toRow: row + direction, toCol: col });
+                        // Initial double move
+                        if ((piece[0] === 'w' && row === 6) || (piece[0] === 'b' && row === 1)) {
+                            if (!board[row + 2 * direction][col]) {
+                                moves.push({ toRow: row + 2 * direction, toCol: col });
+                            }
+                        }
+                    }
+                    // Capture diagonally
+                    for (let offset of [-1, 1]) {
+                        if (isInBounds(row + direction, col + offset)) {
+                            const target = board[row + direction][col + offset];
+                            if (target && target[0] !== piece[0]) {
+                                moves.push({ toRow: row + direction, toCol: col + offset });
+                            }
+                        }
+                    }
+                }
+                // Add more piece movement logic here...
+                return moves;
+            }
+            // Check if coordinates are within bounds
+            function isInBounds(row, col) {
+                return row >= 0 && row < 8 && col >= 0 && col < 8;
+            }
+            // Move a piece
+            function movePiece(fromRow, fromCol, toRow, toCol) {
+                const piece = board[fromRow][fromCol];
+                const targetPiece = board[toRow][toCol];
+                // Handle capture
+                if (targetPiece) {
+                    capturedPieces[piece[0] === 'w' ? 'black' : 'white'].push(targetPiece);
+                    updateCapturedPieces();
+                }
+                // Handle pawn promotion (simplified)
+                if (piece[1] === 'p' && (toRow === 0 || toRow === 7)) {
+                    showPromotionModal(fromRow, fromCol, toRow, toCol);
+                    return;
+                }
+                // Execute the move
+                board[toRow][toCol] = piece;
+                board[fromRow][fromCol] = '';
+                // Add to move history
+                const moveNotation = getMoveNotation(fromRow, fromCol, toRow, toCol, targetPiece);
+                moveHistoryList.push(moveNotation);
+                updateMoveHistory();
+                // Switch turns
+                isWhiteTurn = !isWhiteTurn;
+                updateCurrentPlayerDisplay();
+                renderBoard();
+                updateGameStatus();
+            }
+            // Get algebraic notation for a move
+            function getMoveNotation(fromRow, fromCol, toRow, toCol, capturedPiece) {
+                const piece = board[fromRow][fromCol];
+                const pieceSymbol = piece[1] === 'p' ? '' : piece[1].toUpperCase();
+                const captureSymbol = capturedPiece ? 'x' : '';
+                const file = String.fromCharCode(97 + fromCol);
+                const rank = 8 - fromRow;
+                const toFile = String.fromCharCode(97 + toCol);
+                const toRank = 8 - toRow;
+                return `${isWhiteTurn ? 'White' : 'Black'}: ${pieceSymbol}${file}${rank}${captureSymbol}${toFile}${toRank}`;
+            }
+            // Update move history display
+            function updateMoveHistory() {
+                moveHistory.innerHTML = '';
+                moveHistoryList.forEach((move, index) => {
+                    const moveElement = document.createElement('div');
+                    moveElement.textContent = `${index + 1}. ${move}`;
+                    moveHistory.appendChild(moveElement);
+                });
+                // Scroll to bottom
+                moveHistory.scrollTop = moveHistory.scrollHeight;
+            }
+            // Update captured pieces display
+            function updateCapturedPieces() {
+                whiteCaptured.innerHTML = '';
+                blackCaptured.innerHTML = '';
+                capturedPieces.white.forEach(piece => {
+                    const pieceElement = document.createElement('div');
+                    pieceElement.className = 'captured-piece';
+                    pieceElement.style.backgroundImage = `url('http://static.photos/chess/white/200x200/${piece[1]})`;
+                    whiteCaptured.appendChild(pieceElement);
+                });
+                capturedPieces.black.forEach(piece => {
+                    const pieceElement = document.createElement('div');
+                    pieceElement.className = 'captured-piece';
+                    pieceElement.style.backgroundImage = `url('http://static.photos/chess/black/200x200/${piece[1]})`;
+                    blackCaptured.appendChild(pieceElement);
+                });
+            }
+            // Update game status display
+            function updateGameStatus() {
+                // Simplified status - a real implementation would check for check, checkmate, etc.
+                gameStatus.textContent = isWhiteTurn ? "White's turn" : "Black's turn";
+                gameStatus.className = 'bg-gray-700 p-3 rounded';
+            }
+            // Update current player display
+            function updateCurrentPlayerDisplay() {
+                currentPlayer.innerHTML = isWhiteTurn ?
+                    '<div class="w-6 h-6 bg-white rounded-full mr-2"></div> White' :
+                    '<div class="w-6 h-6 bg-black border border-white rounded-full mr-2"></div> Black';
+            }
+            // Show promotion modal
+            function showPromotionModal(fromRow, fromCol, toRow, toCol) {
+                promotionModal.style.display = 'flex';
+                // Set up promotion options
+                const color = board[fromRow][fromCol][0];
+                const options = document.querySelectorAll('.promotion-piece');
+                options.forEach(option => {
+                    const pieceType = option.dataset.piece;
+                    option.style.backgroundImage = `url('http://static.photos/chess/${color}/200x200/${pieceType})`;
+                    option.onclick = function() {
+                        // Promote the pawn
+                        board[toRow][toCol] = color + pieceType;
+                        board[fromRow][fromCol] = '';
+                        // Add to move history with promotion notation
+                        const moveNotation = getMoveNotation(fromRow, fromCol, toRow, toCol, null) + '=' + pieceType.toUpperCase();
+                        moveHistoryList.push(moveNotation);
+                        updateMoveHistory();
+                        // Switch turns
+                        isWhiteTurn = !isWhiteTurn;
+                        updateCurrentPlayerDisplay();
+                        renderBoard();
+                        updateGameStatus();
+                        // Hide modal
+                        promotionModal.style.display = 'none';
+                    };
+                });
+            }
+            // Event listeners
+            resetBtn.addEventListener('click', initializeBoard);
+            undoBtn.addEventListener('click', function() {
+                if (moveHistoryList.length > 0) {
+                    // Simplified undo - a real implementation would be more complex
+                    alert("Undo functionality would be implemented here!");
+                }
+            });
+            flipBoardBtn.addEventListener('click', function() {
+                boardFlipped = !boardFlipped;
+                renderBoard();
+            });
+            hintBtn.addEventListener('click', function() {
+                if (selectedPiece) {
+                    // Already showing hints
+                    return;
+                }
+                // Find a piece with legal moves
+                for (let row = 0; row < 8; row++) {
+                    for (let col = 0; col < 8; col++) {
+                        const piece = board[row][col];
+                        if (piece && piece[0] === (isWhiteTurn ? 'w' : 'b')) {
+                            const moves = calculateLegalMoves(row, col);
+                            if (moves.length > 0) {
+                                selectPiece(row, col);
+                                return;
+                            }
+                        }
+                    }
+                }
+            });
+            // Initialize the game
+            initializeBoard();
+        });
+    </script>
+</body>
 </html>