Spaces:

HenzHosting
/

Esteams

Running

File size: 9,104 Bytes

8aeb522

<!DOCTYPE html>
<html lang="en">

<!-- Mirrored from es-teams-database2025.onrender.com/ttt-multi.html by HTTrack Website Copier/3.x [XR&CO'2017], Fri, 14 Feb 2025 22:35:19 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><!-- /Added by HTTrack -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tic-Tac-Toe</title>
    <script src="../external.html?link=https://cdn.tailwindcss.com/"></script>
    <style>
        body {
            background: linear-gradient(135deg, #1a1a1a, #3a3a3a);
            color: white;
            font-family: Arial, sans-serif;
            text-align: center;
        }

        .game-board {
            display: grid;
            grid-template-columns: repeat(3, 100px);
            grid-template-rows: repeat(3, 100px);
            gap: 5px;
            margin: 20px auto;
        }

        .cell {
            width: 100px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            font-weight: bold;
            border: 2px solid white;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .win {
            background-color: rgba(0, 255, 0, 0.5);
            animation: flash 0.5s alternate infinite;
        }

        @keyframes flash {
            from { background-color: rgba(0, 255, 0, 0.5); }
            to { background-color: rgba(0, 255, 0, 0.8); }
        }

        .countdown {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 5rem;
            font-weight: bold;
            opacity: 1;
            animation: fadeout 3s linear forwards;
        }

        @keyframes fadeout {
            0% { opacity: 1; }
            100% { opacity: 0; visibility: hidden; }
        }

        .moving-text {
            position: absolute;
            top: 10px;
            white-space: nowrap;
            font-size: 1.5rem;
            font-weight: bold;
            animation: moveLeft 10s linear infinite;
        }

        @keyframes moveLeft {
            from { left: 100%; }
            to { left: -100%; }
        }

        .clock {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 1.2rem;
            font-weight: bold;
        }

        .input-container {
            margin-top: 20px;
        }

        .input-field {
            background-color: #1e3a8a; /* Blue background */
            color: white;
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 5px;
            border: 2px solid #2563eb;
            font-size: 1rem;
        }

        .start-button {
            background-color: #2563eb;
            color: white;
            padding: 10px 20px;
            font-size: 1.2rem;
            border-radius: 5px;
            cursor: pointer;
        }

        .game-board-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .game-board {
            margin-bottom: 20px;
        }

        .input-container {
            margin-top: 20px;
        }
    </style>
</head>
<body class="flex flex-col items-center justify-center min-h-screen">

    <!-- Back Arrow -->
    <div class="absolute top-2 left-2">
        <button onclick="location.href='games-2.html'" class="text-white text-2xl">⬅</button>
    </div>

    <!-- Moving Text -->
    <div class="moving-text text-yellow-500">𝗘𝗦 𝗧𝗘𝗔𝗠𝗦 𝗧𝗜𝗖𝗧𝗔𝗖𝗧𝗢𝗘</div>

    <!-- Clock -->
    <div class="clock" id="clock"></div>

    <!-- Player Info Input -->
    <div class="input-container">
        <input id="player1" class="input-field" type="text" placeholder="Enter Player 1 Name" />
        <input id="player2" class="input-field" type="text" placeholder="Enter Player 2 Name" />
        <button class="start-button" onclick="startGame()">Start Game</button>
    </div>

    <!-- Countdown Before Start -->
    <div id="countdown" class="countdown text-red-500"></div>

    <!-- Game Info -->
    <div id="player-info" class="text-xl mt-4"></div>

    <!-- Game Board -->
    <div class="game-board-container">
        <div class="game-board">
            <div class="cell" onclick="makeMove(0)"></div>
            <div class="cell" onclick="makeMove(1)"></div>
            <div class="cell" onclick="makeMove(2)"></div>
            <div class="cell" onclick="makeMove(3)"></div>
            <div class="cell" onclick="makeMove(4)"></div>
            <div class="cell" onclick="makeMove(5)"></div>
            <div class="cell" onclick="makeMove(6)"></div>
            <div class="cell" onclick="makeMove(7)"></div>
            <div class="cell" onclick="makeMove(8)"></div>
        </div>
    </div>

    <script>
        let gameActive = false;
        let board = Array(9).fill("");
        let player1, player2, currentPlayer, currentSymbol;

        function startGame() {
            const name1 = document.getElementById("player1").value.trim();
            const name2 = document.getElementById("player2").value.trim();
            
            if (!name1 || !name2) {
                alert("Please enter both player names.");
                return;
            }

            // Store player names in localStorage
            localStorage.setItem("player1", name1);
            localStorage.setItem("player2", name2);

            document.getElementById("countdown").textContent = "3";
            setTimeout(() => document.getElementById("countdown").textContent = "2", 1000);
            setTimeout(() => document.getElementById("countdown").textContent = "1", 2000);
            setTimeout(() => {
                document.getElementById("countdown").style.display = "none";
                gameActive = true;
                board.fill("");
                
                // Retrieve player names from localStorage
                player1 = localStorage.getItem("player1");
                player2 = localStorage.getItem("player2");
                
                // Randomly assign X or O
                let players = [player1, player2];
                currentPlayer = players[Math.random() < 0.5 ? 0 : 1]; // Randomly select the first player
                currentSymbol = currentPlayer === players[0] ? "X" : "O"; // Assign X or O based on the selection

                updateBoard();
                document.getElementById("player-info").textContent = `${currentPlayer} plays as ${currentSymbol}`;
            }, 3000);
        }

        function makeMove(index) {
            if (!gameActive || board[index]) return;
            board[index] = currentSymbol;
            updateBoard();
            if (!checkWin()) {
                currentPlayer = currentPlayer === player1 ? player2 : player1; // Switch player turn
                currentSymbol = currentSymbol === "X" ? "O" : "X"; // Switch symbol
                document.getElementById("player-info").textContent = `${currentPlayer} plays as ${currentSymbol}`;
            }
        }

        function updateBoard() {
            document.querySelectorAll(".cell").forEach((cell, i) => {
                cell.textContent = board[i];
                cell.style.color = board[i] === "X" ? "blue" : board[i] === "O" ? "red" : "white";
            });
        }

        function checkWin() {
            for (let pattern of [[0,1,2], [3,4,5], [6,7,8], [0,3,6], [1,4,7], [2,5,8], [0,4,8], [2,4,6]]) {
                let [a, b, c] = pattern;
                if (board[a] && board[a] === board[b] && board[a] === board[c]) {
                    document.getElementById("player-info").textContent = `${board[a]} Wins!`;
                    pattern.forEach(i => document.querySelectorAll(".cell")[i].classList.add("win"));
                    gameActive = false;
                    setTimeout(() => {
                        // Remove the "win" class after 2 seconds to stop flashing
                        pattern.forEach(i => document.querySelectorAll(".cell")[i].classList.remove("win"));
                        startGame(); // Restart the game
                    }, 2000);
                    return true;
                }
            }
            if (!board.includes("")) {
                document.getElementById("player-info").textContent = "It's a Draw!";
                gameActive = false;
                setTimeout(startGame, 2000);
            }
            return false;
        }

        function updateClock() {
            document.getElementById("clock").textContent = new Date().toLocaleTimeString();
            setTimeout(updateClock, 1000);
        }

        updateClock();
    </script>

</body>

<!-- Mirrored from es-teams-database2025.onrender.com/ttt-multi.html by HTTrack Website Copier/3.x [XR&CO'2017], Fri, 14 Feb 2025 22:35:19 GMT -->
</html>