script.js

document.addEventListener('DOMContentLoaded', () => {
    const questions = [
        "Given the choice of anyone in the world, whom would your character want as a dinner guest?",
        "Would your character like to be famous? In what way?",
        "Before making a phone call, does your character ever rehearse what they're going to say? Why?",
        "What would constitute a perfect day for your character?",
        "When did your character last sing to themself? To someone else?",
        "If your character were able to live to the age of 90 and retain either the mind or body of a 30-year-old for the last 60 years of their life, which would they choose?",
        "Does your character have a secret hunch about how they will die?",
        "Name three things your character and their current partner (or future partner) appear to have in common.",
        "For what in their life does your character feel most grateful?",
        "If your character could change anything about the way they were raised, what would it be?",
        "Take four minutes and tell your character's life story in as much detail as possible.",
        "If your character could wake up tomorrow having gained any one quality or ability, what would it be?",
        "If a crystal ball could tell your character the truth about themself, their life, the future, or anything else, what would they want to know?",
        "Is there something that your character has dreamed of doing for a long time? Why haven't they done it?",
        "What is the greatest accomplishment of your character's life?",
        "What does your character most value in a friendship?",
        "What is your character's most treasured memory?",
        "What is your character's most terrible memory?",
        "If your character knew that in one year they would die suddenly, would they change anything about the way they are now living? Why?",
        "What does friendship mean to your character?",
        "What roles do love and affection play in your character's life?",
        "Alternate sharing something your character considers a positive characteristic of themselves. Share a total of five items.",
        "How close and warm is your character's family? Do they feel their childhood was happier than most other people's?",
        "How does your character feel about their relationship with their mother?",
        "Make three true 'we' statements each about your character. For instance, 'We are both in this room feeling...'",
        "Complete this sentence for your character: 'I wish I had someone with whom I could share...'",
        "If your character were going to become a close friend with someone, what is important for that person to know?",
        "Tell what your character likes about the other; be honest this time, saying things that they might not say to someone they've just met.",
        "Share with the other an embarrassing moment in your character's life.",
        "When did your character last cry in front of another person? By themself?",
        "Tell what your character already likes about the other.",
        "What, if anything, is too serious to be joked about for your character?",
        "If your character were to die this evening with no opportunity to communicate with anyone, what would they most regret not having told someone? Why haven't they told them yet?",
        "Your character's house, containing everything they own, catches fire. After saving their loved ones and pets, they have time to safely make a final dash to save any one item. What would it be? Why?",
        "Of all the people in your character's family, whose death would they find most disturbing? Why?",
        "Share a personal problem your character has and ask the other's advice on how they might handle it."
    ];

    const homeScreen = document.getElementById('home-screen');
    const questionScreen = document.getElementById('question-screen');
    const resultScreen = document.getElementById('result-screen');
    const questionText = document.getElementById('question-text');
    const answerInput = document.getElementById('answer-input');
    const progressText = document.getElementById('progress');
    const progressBar = document.getElementById('progress-bar');
    const profileSummary = document.getElementById('profile-summary');
    
    const startBtn = document.getElementById('start-btn');
    const prevBtn = document.getElementById('prev-btn');
    const nextBtn = document.getElementById('next-btn');
    const homeBtn = document.getElementById('home-btn');
    const resetBtn = document.getElementById('reset-btn');
    const restartBtn = document.getElementById('restart-btn');
    
    let currentQuestion = 0;
    const answers = Array(questions.length).fill('');
    
    function showHomeScreen() {
        homeScreen.classList.remove('hidden');
        questionScreen.classList.add('hidden');
        resultScreen.classList.add('hidden');
        currentQuestion = 0;
    }
    
    function showQuestionScreen() {
        homeScreen.classList.add('hidden');
        questionScreen.classList.remove('hidden');
        resultScreen.classList.add('hidden');
        updateQuestion();
    }
    
    function showResultScreen() {
        homeScreen.classList.add('hidden');
        questionScreen.classList.add('hidden');
        resultScreen.classList.remove('hidden');
        generateProfile();
    }
    
    function updateQuestion() {
        questionText.textContent = questions[currentQuestion];
        answerInput.value = answers[currentQuestion];
        progressText.textContent = `Question ${currentQuestion + 1}/${questions.length}`;
        progressBar.style.width = `${((currentQuestion + 1) / questions.length) * 100}%`;
        
        prevBtn.disabled = currentQuestion === 0;
    }
    
    function saveAnswer() {
        answers[currentQuestion] = answerInput.value;
    }
    async function generateProfile() {
        let profileHTML = `
            <h3 class="text-xl font-semibold text-gray-800 mb-4">Character Insights</h3>
            <div id="ai-loading" class="text-center py-8">
                <div class="inline-flex items-center space-x-2 text-indigo-600">
                    <i data-feather="loader" class="animate-spin"></i>
                    <span>Analyzing character profile with AI...</span>
                </div>
            </div>
        `;
        profileSummary.innerHTML = profileHTML;
        feather.replace();

        try {
            // Get all answered questions and answers
            const qaPairs = questions.map((q, i) => ({
                question: q,
                answer: answers[i] || "Not answered"
            })).filter(item => item.answer.trim() !== "");

            // Call AI API to enhance the profile
            const response = await fetch('https://api.openai.com/v1/chat/completions', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer YOUR_OPENAI_API_KEY`
                },
                body: JSON.stringify({
                    model: "gpt-4",
                    messages: [{
                        role: "system",
                        content: "You are a creative writing assistant that helps develop rich fictional character profiles. Analyze the provided Q&A pairs and generate a comprehensive character profile with personality traits, background story, motivations, and relationships. Make it detailed and interesting."
                    }, {
                        role: "user",
                        content: `Create a detailed character profile based on these responses to Arthur Aron's 36 questions:\n\n${
                            qaPairs.map(qa => `Q: ${qa.question}\nA: ${qa.answer}`).join('\n\n')
                        }`
                    }],
                    temperature: 0.7,
                    max_tokens: 1500
                })
            });

            const data = await response.json();
            const aiProfile = data.choices[0].message.content;

            profileHTML = `
                <div class="space-y-6">
                    <h3 class="text-xl font-semibold text-gray-800">AI-Generated Character Profile</h3>
                    <div class="bg-indigo-50 p-6 rounded-lg">
                        <div class="prose max-w-none">${aiProfile.replace(/\n/g, '<br>')}</div>
                    </div>
                    
                    <h4 class="text-lg font-medium text-gray-800 mt-8">Original Responses</h4>
                    <ul class="space-y-4">
            `;
            
            qaPairs.forEach(qa => {
                profileHTML += `
                    <li class="border-l-4 border-indigo-500 pl-4 py-2">
                        <h4 class="font-medium text-gray-800">${qa.question}</h4>
                        <p class="text-gray-600 mt-1">${qa.answer}</p>
                    </li>
                `;
            });
            
            profileHTML += `</ul></div>`;
            profileSummary.innerHTML = profileHTML;
        } catch (error) {
            console.error("AI Error:", error);
            profileSummary.innerHTML = `
                <div class="bg-red-50 border-l-4 border-red-500 p-4">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i data-feather="alert-triangle" class="h-5 w-5 text-red-500"></i>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm text-red-700">
                                Failed to generate AI-enhanced profile. Showing basic responses instead.
                            </p>
                        </div>
                    </div>
                </div>
                ${profileHTML}
            `;
            feather.replace();
        }
    }
startBtn.addEventListener('click', () => {
        currentQuestion = 0;
        showQuestionScreen();
    });
    
    prevBtn.addEventListener('click', () => {
        saveAnswer();
        currentQuestion--;
        updateQuestion();
    });
    
    nextBtn.addEventListener('click', () => {
        saveAnswer();
        
        if (currentQuestion < questions.length - 1) {
            currentQuestion++;
            updateQuestion();
        } else {
            showResultScreen();
        }
    });
    
    homeBtn.addEventListener('click', showHomeScreen);
    
    resetBtn.addEventListener('click', () => {
        if (confirm('Are you sure you want to reset all answers?')) {
            answers.fill('');
            answerInput.value = '';
            currentQuestion = 0;
            updateQuestion();
        }
    });
    restartBtn.addEventListener('click', () => {
        answers.fill('');
        showHomeScreen();
    });

    document.getElementById('download-btn')?.addEventListener('click', () => {
        const element = document.createElement('a');
        const text = document.getElementById('profile-summary').innerText;
        element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
        element.setAttribute('download', 'character-profile.txt');
        element.style.display = 'none';
        document.body.appendChild(element);
        element.click();
        document.body.removeChild(element);
    });
// Initialize
    showHomeScreen();
});