script.js

const storyInput = document.getElementById('story');
const readButton = document.getElementById('readButton');
const speedSlider = document.getElementById('speedSlider');

let words = [], wordIndex = 0, wpm = 250, timerId = null;

readButton.addEventListener('click', () => {
    const text = storyInput.value.trim();
    if (!text) return alert('Please paste some text first.');

    words = text.split(/\s+/);
    wordIndex = 0;
    wpm = Number(speedSlider.value);

    const overlay = document.createElement('div');
    overlay.id = 'readerOverlay';
    overlay.innerHTML = `
    <button id="closeReader" aria-label="Close reader">×</button>
    <div id="wordDisplay"></div>
  `;
    document.body.appendChild(overlay);
    document.getElementById('closeReader').onclick = closeReader;
    document.addEventListener('keydown', handleKeydown);
    document.addEventListener('wheel', handleWheel, { passive: false });

    showWord();
    tick();
});

function showWord() {
    const display = document.getElementById('wordDisplay');
    if (wordIndex >= words.length) {
        display.textContent = 'Finished';
        setTimeout(closeReader, 3000);
        return;
    }
    display.textContent = words[wordIndex];
}

function tick() {
    clearTimeout(timerId);
    timerId = setTimeout(() => {
        wordIndex++;
        showWord();
        if (wordIndex < words.length) tick();
    }, 60000 / wpm);
}

function handleWheel(e) {
    e.preventDefault();
    wpm = Math.max(150, Math.min(wpm + (e.deltaY < 0 ? 25 : -25), 350));
    showWord();
    tick();
}

function handleKeydown(e) {
    if (e.key === 'Escape') closeReader();
}

function closeReader() {
    clearTimeout(timerId);
    document.getElementById('readerOverlay')?.remove();
    document.removeEventListener('keydown', handleKeydown);
    document.removeEventListener('wheel', handleWheel);
}