app.js

/* =====================================================
   Number Guesser — app.js
   Full game logic with beautiful UI interactions
===================================================== */

// ─── State ───────────────────────────────────────────
let secretNumber = 0;
let maxNumber    = 100;
let attempts     = 0;
let guesses      = [];
let bestScore    = JSON.parse(localStorage.getItem('numGuesserBest')) || null;

// ─── Init ─────────────────────────────────────────────
window.addEventListener('DOMContentLoaded', () => {
    spawnParticles();
    updateBestScoreDisplay();

    // Allow Enter key everywhere
    document.getElementById('maxInput').addEventListener('keydown', e => {
        if (e.key === 'Enter') startGame();
    });
    document.getElementById('guessInput').addEventListener('keydown', e => {
        if (e.key === 'Enter') submitGuess();
    });
});

// ─── Background Particles ─────────────────────────────
function spawnParticles() {
    const container = document.getElementById('bgParticles');
    const colors    = ['#7c5af3', '#f35ab9', '#5ec8ff', '#3ef5a8', '#f5c23e'];
    const count     = 22;

    for (let i = 0; i < count; i++) {
        const p = document.createElement('div');
        p.classList.add('particle');

        const size     = Math.random() * 6 + 3;
        const color    = colors[Math.floor(Math.random() * colors.length)];
        const left     = Math.random() * 100;
        const delay    = Math.random() * 12;
        const duration = Math.random() * 10 + 8;

        p.style.cssText = `
            width: ${size}px;
            height: ${size}px;
            background: ${color};
            left: ${left}%;
            animation-duration: ${duration}s;
            animation-delay: ${delay}s;
            box-shadow: 0 0 ${size * 2}px ${color};
        `;
        container.appendChild(p);
    }
}

// ─── Best Score ───────────────────────────────────────
function updateBestScoreDisplay() {
    const display = document.getElementById('bestScoreDisplay');
    if (bestScore !== null) {
        display.style.display = 'block';
        document.getElementById('bestScoreVal').textContent = bestScore;
    } else {
        display.style.display = 'none';
    }
}

// ─── Screen Navigation ────────────────────────────────
function showScreen(id) {
    document.querySelectorAll('.screen').forEach(s => s.classList.add('hidden'));
    const target = document.getElementById(id);
    target.classList.remove('hidden');
    // Trigger re-animation
    const card = target.querySelector('.card');
    if (card) {
        card.style.animation = 'none';
        card.offsetHeight;   // reflow
        card.style.animation = '';
    }
}

// ─── Start Game ───────────────────────────────────────
function startGame() {
    const input = document.getElementById('maxInput');
    const val   = parseInt(input.value);

    if (!val || val < 2) {
        shakeElement(input);
        input.focus();
        return;
    }

    maxNumber    = val;
    secretNumber = Math.floor(Math.random() * maxNumber) + 1;
    attempts     = 0;
    guesses      = [];

    // Update game UI
    document.getElementById('maxDisplay').textContent  = maxNumber;
    document.getElementById('thermMax').textContent    = maxNumber;
    document.getElementById('attemptsCount').textContent = '0';
    document.getElementById('historyPills').innerHTML  = '';
    document.getElementById('guessInput').value        = '';

    resetThermometer();
    resetHintBanner();

    showScreen('gameScreen');
    setTimeout(() => document.getElementById('guessInput').focus(), 400);
}

// ─── Submit Guess ─────────────────────────────────────
function submitGuess() {
    const input   = document.getElementById('guessInput');
    const raw     = input.value.trim();
    const guess   = parseInt(raw);

    if (!raw || isNaN(guess) || guess < 1 || guess > maxNumber) {
        shakeElement(input);
        flashHint('⚠️', `Enter a number between 1 and ${maxNumber}`, 'neutral');
        return;
    }

    // Already guessed?
    if (guesses.includes(guess)) {
        shakeElement(input);
        flashHint('🔄', `You already tried ${guess}!`, 'neutral');
        input.value = '';
        return;
    }

    attempts++;
    guesses.push(guess);

    // Bump attempts counter
    const countEl = document.getElementById('attemptsCount');
    countEl.textContent = attempts;
    countEl.classList.remove('bump');
    countEl.offsetHeight;
    countEl.classList.add('bump');
    setTimeout(() => countEl.classList.remove('bump'), 400);

    // Add history pill
    addPill(guess, guess === secretNumber ? 'correct' : guess < secretNumber ? 'low' : 'high');

    input.value = '';
    input.focus();

    if (guess === secretNumber) {
        handleWin();
    } else if (guess < secretNumber) {
        const pct  = (guess / maxNumber) * 100;
        updateThermometer(pct);
        const diff = secretNumber - guess;
        const mag  = diff < 5 ? '🔥 Burning hot!' : diff < 15 ? '♨️ Getting warm…' : '🧊 Too low!';
        flashHint('⬆️', `${mag} Guess higher.`, 'too-low');
    } else {
        const pct  = (guess / maxNumber) * 100;
        updateThermometer(pct);
        const diff = guess - secretNumber;
        const mag  = diff < 5 ? '🔥 So close!' : diff < 15 ? '♨️ A little lower…' : '🧊 Too high!';
        flashHint('⬇️', `${mag} Guess lower.`, 'too-high');
    }
}

// ─── Win ──────────────────────────────────────────────
function handleWin() {
    const score = Math.max(1, Math.round(1000 / attempts));

    // Update best score
    if (bestScore === null || attempts < bestScore) {
        bestScore = attempts;
        localStorage.setItem('numGuesserBest', JSON.stringify(bestScore));
    }

    // Populate win screen
    document.getElementById('winNumber').textContent    = secretNumber;
    document.getElementById('finalAttempts').textContent = attempts;
    document.getElementById('finalScore').textContent   = score;
    document.getElementById('finalBest').textContent    = bestScore;

    launchConfetti();
    setTimeout(() => showScreen('winScreen'), 600);
}

// ─── Quit ─────────────────────────────────────────────
function quitGame() {
    showScreen('setupScreen');
    updateBestScoreDisplay();
}

// ─── Play Again ───────────────────────────────────────
function playAgain() {
    // Reuse same max
    startGame();
}

// ─── Go Home ──────────────────────────────────────────
function goHome() {
    showScreen('setupScreen');
    updateBestScoreDisplay();
}

// ─── Thermometer ─────────────────────────────────────
function updateThermometer(pct) {
    document.getElementById('thermFill').style.width   = `${pct}%`;
    document.getElementById('thermNeedle').style.left  = `${pct}%`;
}

function resetThermometer() {
    document.getElementById('thermFill').style.width  = '0%';
    document.getElementById('thermNeedle').style.left = '0%';
}

// ─── Hint Banner ─────────────────────────────────────
function flashHint(icon, text, type) {
    const banner = document.getElementById('hintBanner');
    banner.className = `hint-banner ${type}`;
    document.getElementById('hintIcon').textContent = icon;
    document.getElementById('hintText').textContent = text;
}

function resetHintBanner() {
    flashHint('🤔', 'Make your first guess!', 'neutral');
}

// ─── History Pills ────────────────────────────────────
function addPill(guess, type) {
    const container = document.getElementById('historyPills');
    const pill = document.createElement('span');
    pill.className = `pill ${type}`;
    pill.textContent = guess;
    container.appendChild(pill);
}

// ─── Shake Animation ─────────────────────────────────
function shakeElement(el) {
    el.classList.remove('shake');
    el.offsetHeight;
    el.classList.add('shake');
    setTimeout(() => el.classList.remove('shake'), 500);
}

// ─── Confetti ─────────────────────────────────────────
function launchConfetti() {
    const container = document.getElementById('confettiContainer');
    container.innerHTML = '';

    const colors = ['#7c5af3','#f35ab9','#5ec8ff','#3ef5a8','#f5c23e','#ff8c42','#ffffff'];
    const count  = 90;

    for (let i = 0; i < count; i++) {
        const piece = document.createElement('div');
        piece.classList.add('confetti-piece');

        const color    = colors[Math.floor(Math.random() * colors.length)];
        const left     = Math.random() * 100;
        const size     = Math.random() * 8 + 6;
        const duration = Math.random() * 2 + 1.5;
        const delay    = Math.random() * 0.8;
        const rotate   = Math.random() * 360;
        const isCircle = Math.random() > 0.5;

        piece.style.cssText = `
            left: ${left}%;
            width: ${size}px;
            height: ${size}px;
            background: ${color};
            border-radius: ${isCircle ? '50%' : '2px'};
            animation-duration: ${duration}s;
            animation-delay: ${delay}s;
            transform: rotate(${rotate}deg);
        `;
        container.appendChild(piece);
    }

    // Clean up after animation
    setTimeout(() => container.innerHTML = '', 4000);
}