app.js

/* =====================================================
   Simon Says — app.js
   Enhanced game logic with full UI interactions
===================================================== */

// ─── State ────────────────────────────────────────────
let gameSeq   = [];
let userSeq   = [];
let btns      = ['yellow', 'red', 'purple', 'green'];
let level     = 0;
let started   = false;
let accepting = false;  // true only when player can click

let bestScore = JSON.parse(localStorage.getItem('simonBest')) || 0;

// ─── DOM refs ─────────────────────────────────────────
const statusText     = document.getElementById('statusText');
const levelIndicator = document.getElementById('levelIndicator');
const levelNum       = document.getElementById('levelNum');
const hubIcon        = document.getElementById('hubIcon');
const hubLevel       = document.getElementById('hubLevel');
const hub            = document.querySelector('.hub');
const startBtn       = document.getElementById('startBtn');
const scoreStrip     = document.getElementById('scoreStrip');
const stripLevel     = document.getElementById('stripLevel');
const stripSeq       = document.getElementById('stripSeq');
const stripBest      = document.getElementById('stripBest');
const bestBadge      = document.getElementById('bestBadge');
const bestScoreEl    = document.getElementById('bestScore');

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

    // Keyboard start
    document.addEventListener('keypress', () => {
        if (!started) beginGame();
    });
});

// ─── Begin Game (called by button or keypress) ────────
function beginGame() {
    if (started) return;
    started   = true;
    level     = 0;
    gameSeq   = [];
    userSeq   = [];
    accepting = false;

    startBtn.style.display  = 'none';
    scoreStrip.style.display= 'flex';
    levelIndicator.style.display = 'flex';
    hub.classList.add('active');

    setStatus('Watch carefully…', 'active');
    updateScoreStrip();

    setTimeout(() => levelUp(), 600);
}

// ─── Level Up ─────────────────────────────────────────
function levelUp() {
    accepting = false;
    userSeq   = [];
    level++;

    // Update all level displays
    bumpText(levelNum, level);
    stripLevel.textContent = level;
    hubLevel.textContent   = `LVL ${level}`;
    hubIcon.textContent    = '👁️';
    setStatus('Watch the sequence…', 'active');
    updateScoreStrip();

    // Pick a new random button and add to sequence
    const randColor = btns[Math.floor(Math.random() * btns.length)];
    gameSeq.push(randColor);

    // Play the full sequence with staggered flashes
    playSequence();
}

// ─── Play sequence ────────────────────────────────────
function playSequence() {
    const delay   = Math.max(300, 650 - level * 25); // speed up over time
    const flashMs = Math.max(150, 400 - level * 15);

    gameSeq.forEach((color, i) => {
        setTimeout(() => {
            const btn = document.getElementById(color);
            btnFlash(btn, flashMs);
        }, i * (delay + 100));
    });

    // After sequence finishes, let user play
    const totalTime = gameSeq.length * (delay + 100) + flashMs + 200;
    setTimeout(() => {
        accepting  = true;
        hubIcon.textContent  = '✋';
        hubLevel.textContent = 'YOUR TURN';
        setStatus(`Your turn! Repeat ${gameSeq.length} step${gameSeq.length > 1 ? 's' : ''}.`, 'active');
    }, totalTime);
}

// ─── Button Flash (Simon showing) ────────────────────
function btnFlash(btn, duration = 350) {
    btn.classList.add('flash');
    setTimeout(() => btn.classList.remove('flash'), duration);
}

// ─── User Flash (player tapping) ─────────────────────
function userFlash(btn) {
    btn.classList.add('userFlash');
    setTimeout(() => btn.classList.remove('userFlash'), 200);
}

// ─── Handle button click ─────────────────────────────
function handleBtnClick(btn) {
    if (!started || !accepting) return;

    userFlash(btn);
    const userColor = btn.getAttribute('id');
    userSeq.push(userColor);

    // Update sequence counter
    bumpStrip(stripSeq, userSeq.length);

    checkAns(userSeq.length - 1);
}

// ─── Check Answer ────────────────────────────────────
function checkAns(idx) {
    if (userSeq[idx] !== gameSeq[idx]) {
        // Wrong!
        gameOver();
        return;
    }

    if (userSeq.length === gameSeq.length) {
        // Correct full sequence
        accepting = false;
        setStatus('✅ Correct! Get ready…', 'success');
        hubIcon.textContent  = '✅';
        hubLevel.textContent = 'NICE!';
        setTimeout(() => levelUp(), 1000);
    }
}

// ─── Game Over ───────────────────────────────────────
function gameOver() {
    accepting = false;

    // Flash body red
    document.body.classList.add('game-over-flash');
    setTimeout(() => document.body.classList.remove('game-over-flash'), 400);

    // Update best
    if (level > bestScore) {
        bestScore = level;
        localStorage.setItem('simonBest', JSON.stringify(bestScore));
        updateBestDisplay();
    }

    setStatus(`❌ Game Over! You reached Level ${level}. Press any key to restart.`, 'error');
    hubIcon.textContent  = '❌';
    hubLevel.textContent = `Score: ${level}`;
    hub.classList.remove('active');

    // Show start button again
    startBtn.textContent = '';
    startBtn.innerHTML   = '<span>Play Again 🔄</span><span class="btn-arrow">→</span>';
    startBtn.style.display = 'flex';

    reset();
}

// ─── Reset ───────────────────────────────────────────
function reset() {
    started   = false;
    accepting = false;
    gameSeq   = [];
    userSeq   = [];
    level     = 0;
}

// ─── Best Score ──────────────────────────────────────
function updateBestDisplay() {
    if (bestScore > 0) {
        bestBadge.style.display  = 'block';
        bestScoreEl.textContent  = bestScore;
        stripBest.textContent    = bestScore;
    } else {
        stripBest.textContent = '—';
    }
}

// ─── Score Strip ─────────────────────────────────────
function updateScoreStrip() {
    stripLevel.textContent = level;
    stripSeq.textContent   = gameSeq.length;
    stripBest.textContent  = bestScore > 0 ? bestScore : '—';
}

// ─── Status helper ───────────────────────────────────
function setStatus(text, type = '') {
    statusText.textContent = text;
    statusText.className   = `status-text ${type}`;
}

// ─── Bump animations ─────────────────────────────────
function bumpText(el, val) {
    el.textContent = val;
    el.classList.remove('bump');
    el.offsetHeight;
    el.classList.add('bump');
    setTimeout(() => el.classList.remove('bump'), 400);
}

function bumpStrip(el, val) {
    el.textContent = val;
    el.classList.remove('bump');
    el.offsetHeight;
    el.classList.add('bump');
    setTimeout(() => el.classList.remove('bump'), 350);
}