test 1

Here is the complete, updated code. I have added a coin flip animation at the start of the game (and whenever you reset) to randomly decide whether You (Player X) or the Robot (Player O) gets to make the first move.
If the coin lands on Robot, the script will automatically trigger the robot's opening move after a brief delay.
html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tic Tac Toe - Infinite Robot Mode</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #1a1a2e;
            color: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            overflow: hidden;
        }
        h1 {
            margin-bottom: 5px;
            font-size: 2.5rem;
            color: #00fff0;
            text-shadow: 0 0 10px rgba(0, 255, 240, 0.5);
        }
        h2 {
            margin: 0 0 15px 0;
            font-size: 1rem;
            color: #8a8ab0;
            text-transform: uppercase;
            letter-spacing: 2px;
        }
        .controls {
            margin-bottom: 15px;
            display: flex;
            gap: 10px;
            align-items: center;
        }
        label {
            font-size: 1rem;
            color: #8a8ab0;
        }
        select {
            background-color: #1f4068;
            color: #fff;
            border: 2px solid #162447;
            padding: 5px 10px;
            font-size: 1rem;
            border-radius: 5px;
            cursor: pointer;
            outline: none;
        }
        select:focus {
            border-color: #00fff0;
        }
        
        /* Coin Flip Styles */
        .coin-container {
            perspective: 1000px;
            margin-bottom: 15px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .coin {
            width: 50px;
            height: 50px;
            background: #ffd700;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 1.5rem;
            color: #1a1a2e;
            box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
            transition: transform 1s ease-out;
            transform-style: preserve-3d;
        }
        .coin.flip-x {
            animation: spinX 1.2s ease-out forwards;
        }
        .coin.flip-o {
            animation: spinO 1.2s ease-out forwards;
        }
        @keyframes spinX {
            0% { transform: rotateY(0); }
            100% { transform: rotateY(1440deg); background: #00fff0; color: #1a1a2e; box-shadow: 0 0 15px rgba(0, 255, 240, 0.8); }
        }
        @keyframes spinO {
            0% { transform: rotateY(0); }
            100% { transform: rotateY(1620deg); background: #e43f5a; color: #fff; box-shadow: 0 0 15px rgba(228, 63, 90, 0.8); }
        }

        .status {
            font-size: 1.2rem;
            margin-bottom: 20px;
            font-weight: bold;
            height: 30px;
        }
        .board {
            display: grid;
            grid-template-columns: repeat(3, 100px);
            grid-template-rows: repeat(3, 100px);
            gap: 10px;
            background-color: #162447;
            padding: 10px;
            border-radius: 10px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
        }
        .cell {
            background-color: #1f4068;
            border: none;
            border-radius: 5px;
            font-size: 2.5rem;
            font-weight: bold;
            color: #fff;
            cursor: pointer;
            transition: background-color 0.2s, transform 0.1s, opacity 0.3s;
        }
        .cell:hover {
            background-color: #e43f5a;
        }
        .cell.x {
            color: #00fff0;
        }
        .cell.o {
            color: #e43f5a;
        }
        .cell.fading {
            opacity: 0.4;
            animation: pulse 1.5s infinite alternate;
        }
        @keyframes pulse {
            0% { opacity: 0.3; }
            100% { opacity: 0.6; }
        }
        .reset-btn {
            margin-top: 25px;
            padding: 10px 20px;
            font-size: 1rem;
            font-weight: bold;
            background-color: #00fff0;
            color: #1a1a2e;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(0, 255, 240, 0.3);
            transition: all 0.2s;
        }
        .reset-btn:hover {
            background-color: #fff;
            transform: scale(1.05);
        }
    </style>
</head>
<body>
    <h1>Tic Tac Toe</h1>
    <h2>Infinite Robot Mode</h2>
    
    <div class="controls">
        <label for="difficulty">Difficulty:</label>
        <select id="difficulty">
            <option value="easy">Easy</option>
            <option value="medium" selected>Medium</option>
            <option value="hard">Hard</option>
        </select>
    </div>

    <div class="coin-container">
        <div class="coin" id="coin">?</div>
    </div>

    <div class="status" id="status">Flipping coin...</div>
    <div class="board" id="board">
        <button class="cell" data-index="0"></button>
        <button class="cell" data-index="1"></button>
        <button class="cell" data-index="2"></button>
        <button class="cell" data-index="3"></button>
        <button class="cell" data-index="4"></button>
        <button class="cell" data-index="5"></button>
        <button class="cell" data-index="6"></button>
        <button class="cell" data-index="7"></button>
        <button class="cell" data-index="8"></button>
    </div>
    <button class="reset-btn" id="resetBtn">Reset Game</button>

    <script>
        const cells = document.querySelectorAll('.cell');
        const statusElement = document.getElementById('status');
        const resetBtn = document.getElementById('resetBtn');
        const difficultySelect = document.getElementById('difficulty');
        const coinElement = document.getElementById('coin');

        let currentPlayer = ''; 
        let gameState = ["", "", "", "", "", "", "", "", ""];
        let isGameActive = false; // Disabled until coin flip finishes

        let xMoves = [];
        let oMoves = [];

        const winningConditions = [, [3, 4, 5], [6, 7, 8], // Rows, [1, 4, 7], [2, 5, 8], // Columns, [2, 4, 6]             // Diagonals
        ];

        // Run coin flip immediately on start
        window.onload = () => {
            flipCoin();
        };

        function flipCoin() {
            isGameActive = false;
            statusElement.textContent = "Flipping coin...";
            statusElement.style.color = '#fff';
            
            // Reset coin state visually
            coinElement.className = "coin";
            coinElement.textContent = "?";
            coinElement.style.background = "#ffd700";
            coinElement.style.boxShadow = "0 0 15px rgba(255, 215, 0, 0.6)";
            coinElement.style.color = "#1a1a2e";

            // Force reflow to restart animation sequence
            void coinElement.offsetWidth;

            const goesFirst = Math.random() < 0.5 ? 'X' : 'O';

            if (goesFirst === 'X') {
                coinElement.classList.add('flip-x');
            } else {
                coinElement.classList.add('flip-o');
            }

            // Wait for 1.2s animation to finish
            setTimeout(() => {
                coinElement.textContent = goesFirst;
                currentPlayer = goesFirst;
                isGameActive = true;

                if (goesFirst === 'X') {
                    statusElement.textContent = "You won the flip! Your turn (X)";
                    statusElement.style.color = '#00fff0';
                } else {
                    statusElement.textContent = "Robot won the flip! Thinking...";
                    statusElement.style.color = '#e43f5a';
                    setTimeout(robotTurn, 800);
                }
            }, 1200);
        }

        function handleCellClick(e) {
            const clickedCell = e.target;
            const clickedCellIndex = parseInt(clickedCell.getAttribute('data-index'));

            if (gameState[clickedCellIndex] !== "" || !isGameActive || currentPlayer !== 'X') {
                return;
            }

            makeMove(clickedCellIndex);

            if (isGameActive) {
                currentPlayer = 'O';
                statusElement.textContent = "Robot is thinking...";
                statusElement.style.color = '#e43f5a';
                setTimeout(robotTurn, 600);
            }
        }

        function makeMove(index) {
            cells.forEach(cell => cell.classList.remove('fading'));

            let currentMovesArray = currentPlayer === 'X' ? xMoves : oMoves;
            
            if (currentMovesArray.length === 3) {
                const oldestIndex = currentMovesArray.shift();
                gameState[oldestIndex] = "";
                const oldestCell = document.querySelector(`[data-index="${oldestIndex}"]`);
                oldestCell.textContent = "";
                oldestCell.className = "cell";
            }

            gameState[index] = currentPlayer;
            const targetCell = document.querySelector(`[data-index="${index}"]`);
            targetCell.textContent = currentPlayer;
            targetCell.classList.add(currentPlayer.toLowerCase());
            currentMovesArray.push(index);

            let nextMovesArray = currentPlayer === 'X' ? oMoves : xMoves;
            if (nextMovesArray.length === 3) {
                const warningIndex = nextMovesArray[0];
                document.querySelector(`[data-index="${warningIndex}"]`).classList.add('fading');
            }

            checkResult();
        }

        function robotTurn() {
            if (!isGameActive) return;

            const difficulty = difficultySelect.value;
            let chosenMove;

Use code with caution.
if (difficulty === 'easy') {
chosenMove = getRandomMove();
} else if (difficulty === 'medium') {
chosenMove = Math.random() < 0.5 ? getSmartMove() : getRandomMove();
} else if (difficulty === 'hard') {
chosenMove = getSmartMove();
}
makeMove(chosenMove);
if (isGameActive) {
currentPlayer = 'X';
statusElement.textContent = "Your turn (Player X)";
statusElement.style.color = '#00fff0';
}
}
function getRandomMove() {
let emptyCells = [];
gameState.forEach((val, idx) => {
if (val === "") emptyCells.push(idx);
});
return emptyCells[Math.floor(Math.random() * emptyCells.length)];
}
function getSmartMove() {
let simulatedGameState = [...gameState];
if (oMoves.length === 3) {
simulatedGameState[oMoves[0]] = "";
}
for (let condition of winningConditions) {
const [a, b, c] = condition;
const vals = [simulatedGameState[a], simulatedGameState[b], simulatedGameState[c]];
if (vals.filter(v => v === 'O').length === 2 && vals.includes("")) {
if (simulatedGameState[a] === "") return a;
if (simulatedGameState[b] === "") return b;
if (simulatedGameState[c] === "") return c;
}
}
let simulatedPlayerState = [...gameState];
if (xMoves.length === 3) {
simulatedPlayerState[xMoves[0]] = "";
}
for (let condition of winningConditions) {
const [a, b, c] = condition;
const vals = [simulatedPlayerState[a], simulatedPlayerState[b], simulatedPlayerState[c]];
if (vals.filter(v => v === 'X').length === 2 && vals.includes("")) {
if (gameState[a] === "") return a;
if (gameState[b] === "") return b;
if (gameState[c] === "") return c;
}
}
if (gameState[4] === "") return 4;
return getRandomMove();
}
function checkResult() {
let roundWon = false;
for (let i = 0; i < winningConditions.length; i++) {
const [a, b, c] = winningConditions[i];
if (gameState[a] === "" || gameState[b] === "" || gameState[c] === "") {
continue;
}
if (gameState[a] === gameState[b] && gameState[b] === gameState[c]) {
roundWon = true;
break;
}
}
if (roundWon) {
if (currentPlayer === 'X') {
statusElement.textContent = "You Win! 🎉";
statusElement.style.color = '#00fff0';
} else {
statusElement.textContent = "Robot Wins! 🤖";
statusElement.style.color = '#e43f5a';
}
cells.forEach(cell => cell.classList.remove('fading'));
isGameActive = false;
return;
}
}
function resetGame() {
gameState = ["", "", "", "", "", "", "", "", ""];
xMoves = [];
oMoves = [];
cells.forEach(cell => {
cell.textContent = "";
cell.className = "cell";
});
flipCoin();
}
cells.forEach(cell => cell.addEventListener('click', handleCellClick));
resetBtn.addEventListener('click', resetGame);
difficultySelect.addEventListener('change', resetGame);



### New Features Added:
* **Coin Graphic Elements**: Added a circular gold badge component underneath the difficulty selection drop-down that spins violently when the match resets.
* **Turn Locking System**: Clicking blocks is temporarily restricted while the coin is actively spinning to prevent rule-breaking.
* **Auto-Pilot Trigger**: If the gold badge shows **O**, it shifts immediately into the background system delay sequences to prompt the AI to claim its opening choice automatically.

<FollowUp>
Would you like me to make any tweaks, such as adding a **sound effect trigger placeholder** or changing the **spin duration**?
</FollowUp>