script.js

/**
 * ASKING - Interactive philosophical dialogue experience
 */

const lines = [
    { text: "WHAT DO WE DO", font: "alliance" },
    { text: "NOTHING", font: "maven" },
    { text: "DO WE WANT A BETTER WORLD", font: "alliance" },
    { text: "YES", font: "maven" },
    { text: "WHY", font: "alliance" },
    { text: "MORALS.", font: "maven" },
    { text: "RUN LIKE YOU ARE NOT THE SAME.", font: "anton" }
];

// DOM elements
const btn = document.getElementById('btn');
const container = document.getElementById('container');
const flash = document.getElementById('flash');
const whiteFlash = document.getElementById('whiteFlash');

// State
let idx = 0;

/**
 * Initialize event listeners
 */
function init() {
    btn.addEventListener('click', handleButtonClick);
}

/**
 * Handle button click to start the sequence
 */
function handleButtonClick() {
    container.classList.add('hidden');
    showNext();
}

/**
 * Flash the screen white briefly
 */
function flashWhite() {
    whiteFlash.classList.add('on');
    setTimeout(() => {
        whiteFlash.classList.remove('on');
    }, 80);
}

/**
 * Display the next line of dialogue
 */
function showNext() {
    // Check if we've displayed all lines
    if (idx >= lines.length) {
        resetSequence();
        return;
    }

    // Flash white before showing text
    flashWhite();

    // Wait for flash, then display text
    setTimeout(() => {
        const line = lines[idx];
        const fontClass = 'font-' + line.font;
        flash.innerHTML = '<span class="line ' + fontClass + '">' + line.text + '</span>';
        flash.classList.add('show');

        // Calculate display duration based on text length
        const duration = line.text.length > 20 ? 700 : 500;

        // Remove text and continue to next line
        setTimeout(() => {
            flash.classList.remove('show');
            flash.innerHTML = '';
            idx++;
            setTimeout(showNext, 100);
        }, duration);
    }, 120);
}

/**
 * Reset sequence to allow replay
 */
function resetSequence() {
    idx = 0;
    // Optional: Show container again or keep it hidden
    // container.classList.remove('hidden');
}

// Start the app
document.addEventListener('DOMContentLoaded', init);