Memory Game

h1 {
        margin-bottom: 20px;
    }

    .instructions {
        max-width: 600px;
        margin-bottom: 20px;
        text-align: center;
        font-size: 1em;
        color: #555;
    }

    .game-board {
        display: grid;
        grid-template-columns: repeat(2, 100px);
        grid-gap: 10px;
    }

    .color-btn {
        width: 100px;
        height: 100px;
        border: none;
        border-radius: 10px;
        cursor: pointer;
        opacity: 0.8;
        transition: transform 0.2s, opacity 0.2s;
    }

    .color-btn:hover {
        opacity: 1;
    }

    .btn-red { background-color: red; }
    .btn-blue { background-color: blue; }
    .btn-green { background-color: green; }
    .btn-yellow { background-color: yellow; }

    .message {
        margin-top: 20px;
        font-size: 1.2em;
        font-weight: bold;
    }

    .timer, .score {
        margin-top: 10px;
        font-size: 1em;
        color: #333;
    }

    .start-btn {
        margin-top: 20px;
        padding: 10px 20px;
        font-size: 1em;
        background-color: #333;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

    .start-btn:hover {
        background-color: #555;
    }

<h1>Memory Game</h1>
<div class="instructions">
    Try to memorize the sequence of colors that lights up, then reproduce it by clicking the corresponding buttons.
    With each level, a new color will be added to the sequence. How far can you go?
</div>
<div class="game-board">
    <button class="color-btn btn-red" data-color="red"></button>
    <button class="color-btn btn-blue" data-color="blue"></button>
    <button class="color-btn btn-green" data-color="green"></button>
    <button class="color-btn btn-yellow" data-color="yellow"></button>
</div>
<div class="message">Press "Start" to play!</div>
<div class="timer">Time remaining: <span id="timer">--</span> seconds</div>
<div class="score">Score: <span id="score">0</span></div>
<button class="start-btn">Start</button>

const colorButtons = document.querySelectorAll('.color-btn');
    const message = document.querySelector('.message');
    const timerDisplay = document.getElementById('timer');
    const scoreDisplay = document.getElementById('score');
    const startButton = document.querySelector('.start-btn');
    let shareButtons = document.querySelector('.share-buttons');
    const hiddenScore = document.getElementById("hiddenScore");

    let sequence = [];
    let playerSequence = [];
    let level = 0;
    let score = 0;
    let timer;
    let timeLeft;

    function getRandomColor() {
        const colors = ['red', 'blue', 'green', 'yellow'];
        return colors[Math.floor(Math.random() * colors.length)];
    }

    function playSequence(callback) {
        let delay = 0;
        sequence.forEach((color, index) => {
            setTimeout(() => {
                const button = document.querySelector(`.btn-${color}`);
                button.style.transform = 'scale(1.2)';
                button.style.opacity = '1';
                setTimeout(() => {
                    button.style.transform = 'scale(1)';
                    button.style.opacity = '0.8';
                }, 500);
            }, delay);
            delay += 1000;
        });

        // Call the callback (e.g., to start the countdown) after the sequence has played
        setTimeout(callback, delay);
    }

    function nextLevel() {
        level++;
        score += 10; // Increment score by 10 points for each level
        scoreDisplay.textContent = score;
        hiddenScore.value = score; // Update hidden score field
        message.textContent = `Level ${level}`;
        playerSequence = [];
        sequence.push(getRandomColor());

        // Play the sequence, then start the countdown
        playSequence(() => {
            resetTimer(10); // Start the countdown after showing the sequence
        });
    }

    function handlePlayerInput(color) {
        // Visual effect on the clicked button
        const button = document.querySelector(`.btn-${color}`);
        button.style.transform = 'scale(1.2)';
        button.style.opacity = '1';
        setTimeout(() => {
            button.style.transform = 'scale(1)';
            button.style.opacity = '0.8';
        }, 200);

        playerSequence.push(color);
        const currentIndex = playerSequence.length - 1;

        if (playerSequence[currentIndex] !== sequence[currentIndex]) {
            endGame('You lost! Press "Start" to try again.');
            return;
        }

        if (playerSequence.length === sequence.length) {
            clearInterval(timer);
            setTimeout(nextLevel, 1000);
        }
    }

    function resetTimer(seconds) {
        clearInterval(timer);
        timeLeft = seconds;
        timerDisplay.textContent = timeLeft;
        timer = setInterval(() => {
            timeLeft--;
            timerDisplay.textContent = timeLeft;

            if (timeLeft <= 0) {
                clearInterval(timer);
                endGame('Time’s up! Press "Start" to try again.');
            }
        }, 1000);
    }

    function endGame(messageText) {
        message.textContent = messageText;
        clearInterval(timer);
        sequence = [];
        level = 0;
        timerDisplay.textContent = '--';
        shareButtons.style.display = 'flex'; // Show share buttons
    }

    // Add click events to the buttons
    colorButtons.forEach(button => {
        button.addEventListener('click', () => {
            const color = button.getAttribute('data-color');
            handlePlayerInput(color);
        });
    });

    startButton.addEventListener('click', () => {
        message.textContent = 'Get ready!';
        shareButtons = document.querySelector('.share-buttons');
        shareButtons.style.display = 'none'; // Hide share buttons when starting a new game
        score = 0; // Reset score here
        scoreDisplay.textContent = score;
        setTimeout(nextLevel, 1000);
    });