Spaces:

jeevav62
/

anycoder-2e46baeb

Running

App Files Files Community

jeevav62 commited on 10 days ago

Commit

721b5f8

verified ·

1 Parent(s): 8c62d5d

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +639 -19

index.html CHANGED Viewed

@@ -1,19 +1,639 @@
-<!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>Neon Tic Tac Toe</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-color: #121212;
+            --card-bg: #1e1e1e;
+            --text-color: #e0e0e0;
+            --accent-x: #00f2ff; /* Cyan */
+            --accent-o: #ff0055; /* Neon Red */
+            --accent-draw: #ffd700; /* Gold */
+            --grid-gap: 15px;
+            --cell-size: 100px;
+        }
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+        body {
+            font-family: 'Outfit', sans-serif;
+            background-color: var(--bg-color);
+            color: var(--text-color);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            min-height: 100vh;
+            overflow-x: hidden;
+        }
+        /* --- Header --- */
+        header {
+            position: absolute;
+            top: 20px;
+            text-align: center;
+            width: 100%;
+        }
+        h1 {
+            font-weight: 700;
+            letter-spacing: 2px;
+            text-transform: uppercase;
+            font-size: 2rem;
+            background: linear-gradient(45deg, var(--accent-x), var(--accent-o));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            margin-bottom: 10px;
+        }
+        .anycoder-link {
+            font-size: 0.8rem;
+            color: #666;
+            text-decoration: none;
+            border-bottom: 1px solid transparent;
+            transition: 0.3s;
+        }
+        .anycoder-link:hover {
+            color: var(--accent-x);
+            border-bottom: 1px solid var(--accent-x);
+        }
+        /* --- Containers --- */
+        .container {
+            width: 100%;
+            max-width: 500px;
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        /* --- Setup Screen --- */
+        #setup-screen {
+            background: var(--card-bg);
+            padding: 40px;
+            border-radius: 20px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+            text-align: center;
+            width: 100%;
+            animation: fadeIn 0.5s ease-out;
+        }
+        .input-group {
+            margin-bottom: 20px;
+            text-align: left;
+        }
+        label {
+            display: block;
+            font-size: 0.9rem;
+            margin-bottom: 8px;
+            color: #aaa;
+        }
+        input {
+            width: 100%;
+            padding: 12px 15px;
+            background: #2a2a2a;
+            border: 2px solid transparent;
+            border-radius: 8px;
+            color: white;
+            font-family: 'Outfit', sans-serif;
+            font-size: 1rem;
+            transition: 0.3s;
+            outline: none;
+        }
+        input:focus {
+            border-color: var(--accent-x);
+        }
+        .btn {
+            background: linear-gradient(90deg, var(--accent-x), #00c2ff);
+            color: #000;
+            border: none;
+            padding: 12px 30px;
+            font-size: 1rem;
+            font-weight: 700;
+            border-radius: 50px;
+            cursor: pointer;
+            transition: transform 0.2s, box-shadow 0.2s;
+            width: 100%;
+            margin-top: 10px;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        .btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(0, 242, 255, 0.4);
+        }
+        .btn-secondary {
+            background: transparent;
+            border: 1px solid #444;
+            color: #aaa;
+            margin-top: 10px;
+        }
+        .btn-secondary:hover {
+            background: #333;
+            color: white;
+            box-shadow: none;
+        }
+        /* --- Game Screen --- */
+        #game-screen {
+            display: none; /* Hidden by default */
+            width: 100%;
+            flex-direction: column;
+            align-items: center;
+            animation: slideUp 0.5s ease-out;
+        }
+        /* Scoreboard */
+        .scoreboard {
+            display: flex;
+            justify-content: space-between;
+            width: 100%;
+            margin-bottom: 30px;
+            background: var(--card-bg);
+            padding: 15px;
+            border-radius: 15px;
+            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
+        }
+        .player-score {
+            text-align: center;
+            flex: 1;
+        }
+        .player-score h3 {
+            font-size: 0.9rem;
+            color: #888;
+            margin-bottom: 5px;
+        }
+        .score-num {
+            font-size: 1.5rem;
+            font-weight: 700;
+        }
+        .p-x .score-num { color: var(--accent-x); }
+        .p-o .score-num { color: var(--accent-o); }
+        .p-d .score-num { color: var(--accent-draw); }
+        .active-turn {
+            background: rgba(255,255,255,0.05);
+            border-radius: 10px;
+        }
+        .turn-indicator {
+            margin-bottom: 20px;
+            font-size: 1.2rem;
+            font-weight: 500;
+        }
+        .turn-text span {
+            font-weight: 700;
+        }
+        /* The Grid */
+        .board {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: var(--grid-gap);
+            margin-bottom: 30px;
+        }
+        .cell {
+            width: var(--cell-size);
+            height: var(--cell-size);
+            background: var(--card-bg);
+            border-radius: 15px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 3rem;
+            font-weight: 700;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.2);
+        }
+        .cell:hover:not(.taken) {
+            background: #2a2a2a;
+            transform: scale(1.02);
+        }
+        .cell.x { color: var(--accent-x); text-shadow: 0 0 10px rgba(0, 242, 255, 0.5); }
+        .cell.o { color: var(--accent-o); text-shadow: 0 0 10px rgba(255, 0, 85, 0.5); }
+        /* Animations */
+        @keyframes pop {
+            0% { transform: scale(0); }
+            80% { transform: scale(1.1); }
+            100% { transform: scale(1); }
+        }
+        .cell.animate {
+            animation: pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+        @keyframes slideUp {
+            from { transform: translateY(50px); opacity: 0; }
+            to { transform: translateY(0); opacity: 1; }
+        }
+        /* Game Over Modal */
+        .modal {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: 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;
+            backdrop-filter: blur(5px);
+        }
+        .modal.show {
+            opacity: 1;
+            pointer-events: all;
+        }
+        .modal-content {
+            background: var(--card-bg);
+            padding: 40px;
+            border-radius: 20px;
+            text-align: center;
+            transform: scale(0.8);
+            transition: transform 0.3s;
+            border: 1px solid #333;
+        }
+        .modal.show .modal-content {
+            transform: scale(1);
+        }
+        .modal h2 {
+            font-size: 2rem;
+            margin-bottom: 10px;
+        }
+        .modal p {
+            margin-bottom: 30px;
+            color: #aaa;
+        }
+        /* Responsive adjustments */
+        @media (max-width: 400px) {
+            :root {
+                --cell-size: 80px;
+                --grid-gap: 10px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <h1>Tic Tac Toe</h1>
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">Built with anycoder</a>
+    </header>
+    <div class="container">
+        <!-- SETUP SCREEN -->
+        <div id="setup-screen">
+            <h2 style="margin-bottom: 25px;">Enter Players</h2>
+            <div class="input-group">
+                <label for="p1-name">Player X Name</label>
+                <input type="text" id="p1-name" placeholder="Player X" maxlength="12">
+            </div>
+            <div class="input-group">
+                <label for="p2-name">Player O Name</label>
+                <input type="text" id="p2-name" placeholder="Player O" maxlength="12">
+            </div>
+            <button class="btn" onclick="startGame()">Start Game</button>
+            <button class="btn btn-secondary" onclick="resetHistory()">Reset History</button>
+        </div>
+        <!-- GAME SCREEN -->
+        <div id="game-screen">
+            <!-- Scoreboard -->
+            <div class="scoreboard">
+                <div class="player-score p-x" id="score-x-container">
+                    <h3 id="p1-display">Player X</h3>
+                    <div class="score-num" id="score-wins-x">0</div>
+                    <div style="font-size: 0.7rem; color: #666;">Wins</div>
+                </div>
+                <div class="player-score p-d">
+                    <h3>DRAWS</h3>
+                    <div class="score-num" id="score-draws">0</div>
+                </div>
+                <div class="player-score p-o" id="score-o-container">
+                    <h3 id="p2-display">Player O</h3>
+                    <div class="score-num" id="score-wins-o">0</div>
+                    <div style="font-size: 0.7rem; color: #666;">Wins</div>
+                </div>
+            </div>
+            <div class="turn-indicator">
+                <div class="turn-text">Current Turn: <span id="current-turn-text" style="color: var(--accent-x)">Player X</span></div>
+            </div>
+            <div class="board" id="board">
+                <!-- Cells generated by JS -->
+            </div>
+            <button class="btn btn-secondary" style="width: auto; padding: 10px 20px;" onclick="quitGame()">Quit Game</button>
+        </div>
+    </div>
+    <!-- RESULT MODAL -->
+    <div id="result-modal" class="modal">
+        <div class="modal-content">
+            <h2 id="modal-title">Winner!</h2>
+            <p id="modal-message">Player X Wins!</p>
+            <button class="btn" onclick="nextRound()">Next Round</button>
+            <button class="btn btn-secondary" onclick="quitGame()">Main Menu</button>
+        </div>
+    </div>
+    <script>
+        // Game State
+        let currentPlayer = 'X';
+        let gameActive = false;
+        let gameState = ["", "", "", "", "", "", "", "", ""];
+        let player1Name = "Player X";
+        let player2Name = "Player O";
+        // Stats Storage
+        let stats = {
+            'default_X': { wins: 0, losses: 0 },
+            'default_O': { wins: 0, losses: 0 },
+            'draws': 0
+        };
+        // DOM Elements
+        const setupScreen = document.getElementById('setup-screen');
+        const gameScreen = document.getElementById('game-screen');
+        const boardElement = document.getElementById('board');
+        const modal = document.getElementById('result-modal');
+        // Winning Combinations
+        const winningConditions = [
+            [0, 1, 2], [3, 4, 5], [6, 7, 8], // Rows
+            [0, 3, 6], [1, 4, 7], [2, 5, 8], // Columns
+            [0, 4, 8], [2, 4, 6]             // Diagonals
+        ];
+        // Initialize
+        loadStats();
+        createBoard();
+        function createBoard() {
+            boardElement.innerHTML = "";
+            for (let i = 0; i < 9; i++) {
+                const cell = document.createElement('div');
+                cell.classList.add('cell');
+                cell.setAttribute('data-index', i);
+                cell.addEventListener('click', handleCellClick);
+                boardElement.appendChild(cell);
+            }
+        }
+        function startGame() {
+            const p1Input = document.getElementById('p1-name').value.trim();
+            const p2Input = document.getElementById('p2-name').value.trim();
+            player1Name = p1Input ? p1Input : "Player X";
+            player2Name = p2Input ? p2Input : "Player O";
+            // Save custom names to local storage keys for persistence
+            // Simplify keys for this demo: using fixed keys for X and O positions
+            // In a real app, you'd map IDs to names.
+            // Here we just reset the current session stats.
+            setupScreen.style.display = 'none';
+            gameScreen.style.display = 'flex';
+            updateScoreboardUI();
+            handlePlayerTurnChange();
+            gameActive = true;
+            currentPlayer = 'X';
+        }
+        function handleCellClick(clickedCellEvent) {
+            const clickedCell = clickedCellEvent.target;
+            const clickedCellIndex = parseInt(clickedCell.getAttribute('data-index'));
+            if (gameState[clickedCellIndex] !== "" || !gameActive) {
+                return;
+            }
+            handleCellPlayed(clickedCell, clickedCellIndex);
+            handleResultValidation();
+        }
+        function handleCellPlayed(clickedCell, clickedCellIndex) {
+            gameState[clickedCellIndex] = currentPlayer;
+            clickedCell.innerHTML = currentPlayer;
+            clickedCell.classList.add('taken');
+            clickedCell.classList.add(currentPlayer.toLowerCase());
+            // Add pop animation
+            clickedCell.classList.add('animate');
+            setTimeout(() => clickedCell.classList.remove('animate'), 300);
+        }
+        function handleResultValidation() {
+            let roundWon = false;
+            for (let i = 0; i <= 7; i++) {
+                const winCondition = winningConditions[i];
+                let a = gameState[winCondition[0]];
+                let b = gameState[winCondition[1]];
+                let c = gameState[winCondition[2]];
+                if (a === '' || b === '' || c === '') {
+                    continue;
+                }
+                if (a === b && b === c) {
+                    roundWon = true;
+                    break;
+                }
+            }
+            if (roundWon) {
+                endGame(false); // false means not a draw
+                return;
+            }
+            let roundDraw = !gameState.includes("");
+            if (roundDraw) {
+                endGame(true); // true means draw
+                return;
+            }
+            handlePlayerTurnChange();
+        }
+        function handlePlayerTurnChange() {
+            currentPlayer = currentPlayer === "X" ? "O" : "X";
+            const turnText = document.getElementById('current-turn-text');
+            turnText.innerText = currentPlayer === 'X' ? player1Name : player2Name;
+            turnText.style.color = currentPlayer === 'X' ? 'var(--accent-x)' : 'var(--accent-o)';
+            // Highlight active player in scoreboard
+            if(currentPlayer === 'X') {
+                document.getElementById('score-x-container').classList.add('active-turn');
+                document.getElementById('score-o-container').classList.remove('active-turn');
+            } else {
+                document.getElementById('score-x-container').classList.remove('active-turn');
+                document.getElementById('score-o-container').classList.add('active-turn');
+            }
+        }
+        function endGame(isDraw) {
+            gameActive = false;
+            const modalTitle = document.getElementById('modal-title');
+            const modalMsg = document.getElementById('modal-message');
+            // Update Stats Logic
+            if (isDraw) {
+                stats['draws']++;
+                modalTitle.innerText = "Draw!";
+                modalTitle.style.color = "var(--accent-draw)";
+                modalMsg.innerText = `It's a tie between ${player1Name} and ${player2Name}`;
+            } else {
+                if (currentPlayer === 'X') {
+                    stats['p1_wins'] = (stats['p1_wins'] || 0) + 1;
+                    // p1 losses implies p2 wins
+                    stats['p2_losses'] = (stats['p2_losses'] || 0) + 1;
+                } else {
+                    stats['p2_wins'] = (stats['p2_wins'] || 0) + 1;
+                    stats['p1_losses'] = (stats['p1_losses'] || 0) + 1;
+                }
+                const winnerName = currentPlayer === 'X' ? player1Name : player2Name;
+                modalTitle.innerText = "Winner!";
+                modalTitle.style.color = currentPlayer === 'X' ? "var(--accent-x)" : "var(--accent-o)";
+                modalMsg.innerText = `${winnerName} takes the round!`;
+            }
+            saveStats();
+            updateScoreboardUI();
+            // Show Modal
+            setTimeout(() => {
+                modal.classList.add('show');
+            }, 500);
+        }
+        function nextRound() {
+            modal.classList.remove('show');
+            gameState = ["", "", "", "", "", "", "", "", ""];
+            gameActive = true;
+            currentPlayer = 'X';
+            // Reset board UI
+            document.querySelectorAll('.cell').forEach(cell => {
+                cell.innerHTML = "";
+                cell.classList.remove('x', 'o', 'taken');
+            });
+            handlePlayerTurnChange();
+        }
+        function quitGame() {
+            modal.classList.remove('show');
+            gameScreen.style.display = 'none';
+            setupScreen.style.display = 'block';
+            // Reset Board
+            gameState = ["", "", "", "", "", "", "", "", ""];
+            document.querySelectorAll('.cell').forEach(cell => {
+                cell.innerHTML = "";
+                cell.classList.remove('x', 'o', 'taken');
+            });
+        }
+        // --- Stats Management ---
+        function updateScoreboardUI() {
+            // Update Names
+            document.getElementById('p1-display').innerText = player1Name;
+            document.getElementById('p2-display').innerText = player2Name;
+            // Update Counts
+            // We are tracking wins generally in this session based on who was X or O
+            // For a persistent history across name changes, we usually use IDs,
+            // but here we just show "X Wins" and "O Wins" based on the current session logic
+            // or if we want history to persist by name, we need to store an object.
+            // Let's implement session specific tracking
+            let xWins = stats[`x_session_${player1Name}`] || 0;
+            let oWins = stats[`o_session_${player2Name}`] || 0;
+            // Actually, let's just use the global counters for simplicity in this single file:
+            // Wins for whoever played X in this specific setup
+            document.getElementById('score-wins-x').innerText = stats['p1_wins'] || 0;
+            document.getElementById('score-wins-o').innerText = stats['p2_wins'] || 0;
+            document.getElementById('score-draws').innerText = stats['draws'] || 0;
+        }
+        function saveStats() {
+            localStorage.setItem('ttt_stats', JSON.stringify(stats));
+        }
+        function loadStats() {
+            const saved = localStorage.getItem('ttt_stats');
+            if (saved) {
+                stats = JSON.parse(saved);
+            }
+        }
+        function resetHistory() {
+            if(confirm("Are you sure you want to clear all game history?")) {
+                stats = {
+                    'p1_wins': 0, 'p1_losses': 0,
+                    'p2_wins': 0, 'p2_losses': 0,
+                    'draws': 0
+                };
+                saveStats();
+                alert("History reset!");
+            }
+        }
+    </script>
+</body>
+</html>