script.js

// Game State
let randomNumber;
let attempts = 0;
let bestScore = localStorage.getItem('guessGameBest') || '-';
let gameOver = false;

// DOM Elements
const guessInput = document.getElementById('guess-input');
const guessBtn = document.getElementById('guess-btn');
const resetBtn = document.getElementById('reset-btn');
const message = document.getElementById('message');
const attemptsDisplay = document.getElementById('attempts');
const bestScoreDisplay = document.getElementById('best-score');
const canvas = document.getElementById('confetti');
const ctx = canvas.getContext('2d');

// Initialize Game
function init() {
    randomNumber = Math.floor(Math.random() * 100) + 1;
    attempts = 0;
    gameOver = false;
    
    attemptsDisplay.textContent = '0';
    bestScoreDisplay.textContent = bestScore;
    message.textContent = 'Start guessing...';
    message.className = 'msg';
    
    guessInput.value = '';
    guessInput.disabled = false;
    guessBtn.disabled = false;
    guessBtn.style.display = 'block';
    resetBtn.style.display = 'none';
    
    guessInput.focus();
    
    // Clear confetti
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

// Handle Guess
function makeGuess() {
    if (gameOver) return;
    
    const guess = parseInt(guessInput.value);
    
    if (isNaN(guess) || guess < 1 || guess > 100) {
        showMessage('Please enter a number between 1 and 100', 'low');
        return;
    }
    
    attempts++;
    attemptsDisplay.textContent = attempts;
    
    if (guess === randomNumber) {
        winGame();
    } else if (guess < randomNumber) {
        showMessage('My number is greater than your input ⬆️', 'low');
    } else {
        showMessage('My number is less than your input ⬇️', 'high');
    }
    
    guessInput.value = '';
    guessInput.focus();
}

function showMessage(text, type) {
    message.textContent = text;
    message.className = `msg ${type}`;
    
    // Simple shake effect
    message.parentElement.classList.remove('shake');
    void message.parentElement.offsetWidth; // Trigger reflow
    message.parentElement.classList.add('shake');
}

function winGame() {
    gameOver = true;
    message.textContent = `🎉 Correct! It was ${randomNumber}`;
    message.className = 'msg win';
    
    guessInput.disabled = true;
    guessBtn.style.display = 'none';
    resetBtn.style.display = 'block';
    
    // Update Best Score
    if (bestScore === '-' || attempts < parseInt(bestScore)) {
        bestScore = attempts;
        localStorage.setItem('guessGameBest', bestScore);
        bestScoreDisplay.textContent = bestScore;
    }
    
    startConfetti();
}

// Event Listeners
guessBtn.addEventListener('click', makeGuess);

guessInput.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
        makeGuess();
    }
});

resetBtn.addEventListener('click', init);

// Confetti Logic
let particles = [];
function startConfetti() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    
    for (let i = 0; i < 100; i++) {
        particles.push({
            x: Math.random() * canvas.width,
            y: Math.random() * canvas.height - canvas.height,
            size: Math.random() * 8 + 4,
            color: `hsl(${Math.random() * 360}, 70%, 60%)`,
            speed: Math.random() * 3 + 2,
            angle: Math.random() * 6.28
        });
    }
    
    function update() {
        if (!gameOver) return;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        particles.forEach(p => {
            p.y += p.speed;
            p.x += Math.sin(p.angle) * 2;
            p.angle += 0.1;
            
            ctx.fillStyle = p.color;
            ctx.fillRect(p.x, p.y, p.size, p.size);
            
            if (p.y > canvas.height) {
                p.y = -20;
                p.x = Math.random() * canvas.width;
            }
        });
        
        requestAnimationFrame(update);
    }
    
    update();
}

window.addEventListener('resize', () => {
    if (gameOver) {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    }
});

// Start the game
init();