Spaces:

2O24dpower2024
/

connectfour

Running

App Files Files Community

2O24dpower2024 commited on Mar 28, 2025

Commit

9cffdfd

verified ·

1 Parent(s): 70845c2

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +661 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Connectfour
-emoji: 💻
-colorFrom: gray
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: connectfour
+emoji: 🐳
+colorFrom: blue
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,661 @@
-<!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>Connect Four Game</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        :root {
+            --primary-color: #3498db;
+            --player1-color: #e74c3c;
+            --player2-color: #f1c40f;
+            --empty-cell: #ecf0f1;
+            --board-color: #2980b9;
+            --text-color: #2c3e50;
+            --highlight-color: #2ecc71;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        body {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
+            color: var(--text-color);
+            padding: 20px;
+        }
+        .game-container {
+            width: 100%;
+            max-width: 600px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 25px;
+        }
+        .header {
+            text-align: center;
+            width: 100%;
+        }
+        .title {
+            font-size: 2.5rem;
+            margin-bottom: 10px;
+            color: var(--primary-color);
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+        }
+        .status {
+            font-size: 1.5rem;
+            font-weight: 500;
+            margin-bottom: 15px;
+            min-height: 30px;
+            transition: all 0.3s ease;
+        }
+        .game-board {
+            position: relative;
+            background-color: var(--board-color);
+            border-radius: 10px;
+            padding: 20px;
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+        }
+        .board {
+            display: grid;
+            grid-template-columns: repeat(7, 1fr);
+            grid-template-rows: repeat(6, 1fr);
+            gap: 10px;
+            perspective: 1000px;
+        }
+        .cell {
+            position: relative;
+            width: 60px;
+            height: 60px;
+            background-color: var(--empty-cell);
+            border-radius: 50%;
+            cursor: pointer;
+            transition: transform 0.3s ease, background-color 0.3s ease;
+            box-shadow: inset 0 5px 0 rgba(0, 0, 0, 0.1);
+        }
+        .cell::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            border-radius: 50%;
+            box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.2);
+            z-index: 1;
+        }
+        .cell:hover:empty {
+            transform: translateY(-5px);
+        }
+        .cell.player1 {
+            background-color: var(--player1-color);
+        }
+        .cell.player2 {
+            background-color: var(--player2-color);
+        }
+        .cell.winning {
+            animation: pulse 1s infinite;
+            box-shadow: 0 0 0 5px rgba(46, 204, 113, 0.5);
+        }
+        @keyframes pulse {
+            0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7); }
+            70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(46, 204, 113, 0); }
+            100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
+        }
+        .column-selector {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 10px;
+        }
+        .column-btn {
+            width: 60px;
+            height: 30px;
+            background-color: rgba(255, 255, 255, 0.3);
+            border: none;
+            border-radius: 5px 5px 0 0;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: white;
+            font-weight: bold;
+        }
+        .column-btn:hover {
+            background-color: rgba(255, 255, 255, 0.5);
+        }
+        .column-btn.active {
+            background-color: rgba(255, 255, 255, 0.7);
+        }
+        .players {
+            display: flex;
+            justify-content: space-around;
+            width: 100%;
+            margin-bottom: 20px;
+        }
+        .player {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            padding: 10px 20px;
+            border-radius: 10px;
+            transition: all 0.3s ease;
+        }
+        .player.active {
+            background-color: rgba(52, 152, 219, 0.2);
+            transform: scale(1.05);
+        }
+        .player-icon {
+            width: 30px;
+            height: 30px;
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: white;
+            font-weight: bold;
+        }
+        .controls {
+            display: flex;
+            gap: 15px;
+            margin-top: 20px;
+        }
+        .btn {
+            padding: 12px 24px;
+            border: none;
+            border-radius: 8px;
+            font-size: 1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .btn-primary {
+            background-color: var(--primary-color);
+            color: white;
+        }
+        .btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+        }
+        .btn:active {
+            transform: translateY(1px);
+        }
+        .modal {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.8);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 100;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.3s ease;
+        }
+        .modal.show {
+            opacity: 1;
+            pointer-events: all;
+        }
+        .modal-content {
+            background-color: white;
+            border-radius: 10px;
+            padding: 30px;
+            max-width: 400px;
+            width: 90%;
+            text-align: center;
+            transform: scale(0.8);
+            transition: transform 0.3s ease;
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+        }
+        .modal.show .modal-content {
+            transform: scale(1);
+        }
+        .modal h2 {
+            margin-bottom: 20px;
+            color: var(--primary-color);
+        }
+        .modal p {
+            margin-bottom: 30px;
+            font-size: 1.2rem;
+        }
+        .winner-icon {
+            font-size: 3rem;
+            margin-bottom: 20px;
+        }
+        .player1-icon {
+            color: var(--player1-color);
+        }
+        .player2-icon {
+            color: var(--player2-color);
+        }
+        .tie-icon {
+            color: var(--text-color);
+        }
+        @media (max-width: 600px) {
+            .cell {
+                width: 40px;
+                height: 40px;
+            }
+            .column-btn {
+                width: 40px;
+            }
+            .title {
+                font-size: 2rem;
+            }
+            .status {
+                font-size: 1.2rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="game-container">
+        <div class="header">
+            <h1 class="title">Connect Four</h1>
+            <div class="status" id="status">Player 1's Turn</div>
+        </div>
+        <div class="players">
+            <div class="player active" id="player1">
+                <div class="player-icon" style="background-color: var(--player1-color);">
+                    <i class="fas fa-user"></i>
+                </div>
+                <span>Player 1</span>
+            </div>
+            <div class="player" id="player2">
+                <div class="player-icon" style="background-color: var(--player2-color);">
+                    <i class="fas fa-user"></i>
+                </div>
+                <span>Player 2</span>
+            </div>
+        </div>
+        <div class="game-board">
+            <div class="column-selector" id="column-selector">
+                <!-- Column selectors will be added by JavaScript -->
+            </div>
+            <div class="board" id="board">
+                <!-- Cells will be added by JavaScript -->
+            </div>
+        </div>
+        <div class="controls">
+            <button class="btn btn-primary" id="restart-btn">
+                <i class="fas fa-redo"></i> Restart Game
+            </button>
+        </div>
+    </div>
+    <div class="modal" id="modal">
+        <div class="modal-content">
+            <div class="winner-icon" id="winner-icon">
+                <i class="fas fa-trophy"></i>
+            </div>
+            <h2 id="modal-title">Game Over</h2>
+            <p id="modal-text">Player 1 wins!</p>
+            <button class="btn btn-primary" id="play-again-btn">
+                <i class="fas fa-play"></i> Play Again
+            </button>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            // Game elements
+            const board = document.getElementById('board');
+            const columnSelector = document.getElementById('column-selector');
+            const statusDisplay = document.getElementById('status');
+            const player1Display = document.getElementById('player1');
+            const player2Display = document.getElementById('player2');
+            const modal = document.getElementById('modal');
+            const modalTitle = document.getElementById('modal-title');
+            const modalText = document.getElementById('modal-text');
+            const winnerIcon = document.getElementById('winner-icon');
+            // Buttons
+            const restartBtn = document.getElementById('restart-btn');
+            const playAgainBtn = document.getElementById('play-again-btn');
+            // Game variables
+            const ROWS = 6;
+            const COLS = 7;
+            let currentPlayer = 1;
+            let gameBoard = Array(ROWS).fill().map(() => Array(COLS).fill(0));
+            let gameActive = true;
+            let lastMoveRow = -1;
+            let lastMoveCol = -1;
+            // Create the game board
+            function createBoard() {
+                board.innerHTML = '';
+                columnSelector.innerHTML = '';
+                // Create column selection buttons
+                for (let col = 0; col < COLS; col++) {
+                    const colBtn = document.createElement('button');
+                    colBtn.classList.add('column-btn');
+                    colBtn.dataset.col = col;
+                    colBtn.innerHTML = `<i class="fas fa-arrow-down"></i>`;
+                    colBtn.addEventListener('click', () => makeMove(col));
+                    columnSelector.appendChild(colBtn);
+                }
+                // Create game cells
+                for (let row = 0; row < ROWS; row++) {
+                    for (let col = 0; col < COLS; col++) {
+                        const cell = document.createElement('div');
+                        cell.classList.add('cell');
+                        cell.dataset.row = row;
+                        cell.dataset.col = col;
+                        board.appendChild(cell);
+                    }
+                }
+            }
+            // Make a move in the specified column
+            function makeMove(col) {
+                if (!gameActive) return;
+                // Find the first empty row in the column
+                for (let row = ROWS - 1; row >= 0; row--) {
+                    if (gameBoard[row][col] === 0) {
+                        // Update game state
+                        gameBoard[row][col] = currentPlayer;
+                        lastMoveRow = row;
+                        lastMoveCol = col;
+                        // Update UI
+                        const cell = document.querySelector(`.cell[data-row="${row}"][data-col="${col}"]`);
+                        cell.classList.add(`player${currentPlayer}`);
+                        // Check for win or draw
+                        if (checkWin()) {
+                            endGame(`Player ${currentPlayer} wins!`);
+                            highlightWinningCells();
+                        } else if (isBoardFull()) {
+                            endGame("It's a draw!");
+                        } else {
+                            // Switch players
+                            currentPlayer = currentPlayer === 1 ? 2 : 1;
+                            updateStatus();
+                        }
+                        return;
+                    }
+                }
+            }
+            // Check if the last move resulted in a win
+            function checkWin() {
+                if (lastMoveRow === -1 || lastMoveCol === -1) return false;
+                const directions = [
+                    [0, 1],   // Horizontal
+                    [1, 0],   // Vertical
+                    [1, 1],   // Diagonal down-right
+                    [1, -1]   // Diagonal down-left
+                ];
+                for (const [dx, dy] of directions) {
+                    let count = 1;
+                    // Check in positive direction
+                    for (let i = 1; i < 4; i++) {
+                        const newRow = lastMoveRow + i * dx;
+                        const newCol = lastMoveCol + i * dy;
+                        if (newRow < 0 || newRow >= ROWS || newCol < 0 || newCol >= COLS) break;
+                        if (gameBoard[newRow][newCol] !== currentPlayer) break;
+                        count++;
+                    }
+                    // Check in negative direction
+                    for (let i = 1; i < 4; i++) {
+                        const newRow = lastMoveRow - i * dx;
+                        const newCol = lastMoveCol - i * dy;
+                        if (newRow < 0 || newRow >= ROWS || newCol < 0 || newCol >= COLS) break;
+                        if (gameBoard[newRow][newCol] !== currentPlayer) break;
+                        count++;
+                    }
+                    if (count >= 4) return true;
+                }
+                return false;
+            }
+            // Highlight the winning cells
+            function highlightWinningCells() {
+                const winningCells = findWinningCells();
+                if (!winningCells) return;
+                winningCells.forEach(([row, col]) => {
+                    const cell = document.querySelector(`.cell[data-row="${row}"][data-col="${col}"]`);
+                    cell.classList.add('winning');
+                });
+            }
+            // Find the winning cells (returns undefined if no win)
+            function findWinningCells() {
+                if (lastMoveRow === -1 || lastMoveCol === -1) return;
+                const directions = [
+                    [0, 1],   // Horizontal
+                    [1, 0],   // Vertical
+                    [1, 1],   // Diagonal down-right
+                    [1, -1]   // Diagonal down-left
+                ];
+                for (const [dx, dy] of directions) {
+                    let cells = [[lastMoveRow, lastMoveCol]];
+                    // Check in positive direction
+                    for (let i = 1; i < 4; i++) {
+                        const newRow = lastMoveRow + i * dx;
+                        const newCol = lastMoveCol + i * dy;
+                        if (newRow < 0 || newRow >= ROWS || newCol < 0 || newCol >= COLS) break;
+                        if (gameBoard[newRow][newCol] !== currentPlayer) break;
+                        cells.push([newRow, newCol]);
+                    }
+                    // Check in negative direction
+                    for (let i = 1; i < 4; i++) {
+                        const newRow = lastMoveRow - i * dx;
+                        const newCol = lastMoveCol - i * dy;
+                        if (newRow < 0 || newRow >= ROWS || newCol < 0 || newCol >= COLS) break;
+                        if (gameBoard[newRow][newCol] !== currentPlayer) break;
+                        cells.push([newRow, newCol]);
+                    }
+                    if (cells.length >= 4) {
+                        return cells.slice(0, 4); // Return first 4 cells in a row
+                    }
+                }
+                return;
+            }
+            // Check if the board is full (draw)
+            function isBoardFull() {
+                return gameBoard.every(row => row.every(cell => cell !== 0));
+            }
+            // End the game with the given message
+            function endGame(message) {
+                gameActive = false;
+                // Show modal
+                modalTitle.textContent = message.includes('wins') ? 'Winner!' : 'Game Over';
+                modalText.textContent = message;
+                // Set winner icon
+                if (message.includes('Player 1')) {
+                    winnerIcon.className = 'winner-icon player1-icon';
+                    winnerIcon.innerHTML = '<i class="fas fa-trophy"></i>';
+                } else if (message.includes('Player 2')) {
+                    winnerIcon.className = 'winner-icon player2-icon';
+                    winnerIcon.innerHTML = '<i class="fas fa-trophy"></i>';
+                } else {
+                    winnerIcon.className = 'winner-icon tie-icon';
+                    winnerIcon.innerHTML = '<i class="fas fa-handshake"></i>';
+                }
+                modal.classList.add('show');
+            }
+            // Update the game status display
+            function updateStatus() {
+                statusDisplay.textContent = `Player ${currentPlayer}'s Turn`;
+                // Update active player highlight
+                if (currentPlayer === 1) {
+                    player1Display.classList.add('active');
+                    player2Display.classList.remove('active');
+                } else {
+                    player1Display.classList.remove('active');
+                    player2Display.classList.add('active');
+                }
+            }
+            // Reset the game
+            function resetGame() {
+                gameBoard = Array(ROWS).fill().map(() => Array(COLS).fill(0));
+                currentPlayer = 1;
+                gameActive = true;
+                lastMoveRow = -1;
+                lastMoveCol = -1;
+                // Reset UI
+                document.querySelectorAll('.cell').forEach(cell => {
+                    cell.className = 'cell';
+                });
+                updateStatus();
+                modal.classList.remove('show');
+            }
+            // Event listeners
+            restartBtn.addEventListener('click', resetGame);
+            playAgainBtn.addEventListener('click', resetGame);
+            // Initialize the game
+            createBoard();
+            updateStatus();
+            // Keyboard controls
+            document.addEventListener('keydown', (e) => {
+                if (!gameActive) return;
+                // 1-7 keys for columns
+                if (e.key >= '1' && e.key <= '7') {
+                    const col = parseInt(e.key) - 1;
+                    if (col >= 0 && col < COLS) {
+                        makeMove(col);
+                    }
+                }
+                // Left/Right arrow keys for column selection
+                else if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+                    const colBtns = document.querySelectorAll('.column-btn');
+                    let currentCol = 0;
+                    // Find the currently selected column (if any)
+                    const activeBtn = document.querySelector('.column-btn.active');
+                    if (activeBtn) {
+                        currentCol = parseInt(activeBtn.dataset.col);
+                    }
+                    // Determine new selection
+                    let newCol = currentCol;
+                    if (e.key === 'ArrowLeft') {
+                        newCol = Math.max(0, currentCol - 1);
+                    } else if (e.key === 'ArrowRight') {
+                        newCol = Math.min(COLS - 1, currentCol + 1);
+                    }
+                    // Update selection
+                    colBtns.forEach(btn => btn.classList.remove('active'));
+                    colBtns[newCol].classList.add('active');
+                }
+                // Space or Enter to make move in selected column
+                else if (e.key === ' ' || e.key === 'Enter') {
+                    const activeBtn = document.querySelector('.column-btn.active');
+                    if (activeBtn) {
+                        makeMove(parseInt(activeBtn.dataset.col));
+                    }
+                }
+            });
+            // Hide selection highlight when clicking outside
+            document.addEventListener('click', (e) => {
+                if (!e.target.classList.contains('column-btn')) {
+                    document.querySelectorAll('.column-btn').forEach(btn => {
+                        btn.classList.remove('active');
+                    });
+                }
+            });
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: absolute; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">This website has been generated by <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
+</html>