📝 Stage 15 Development Log

Primary Objectives

• NEW Build content customization tool with text area editors
• NEW Implement dual localStorage system (content vs. config)
• NEW Support multi-line movie title with \n formatting
• IMPROVED Refine green color range for technical credits (110-130 hue)
• IMPROVED Add live count displays for students and concepts

Step 1: Design Content Data Structure

Planning the Content Object

First, we defined what content should be customizable:

const contentStructure = {
    // Intro sequence (3 phrases before title)
    introPhrase1: "Tech Novice Tools",
    introPhrase2: "& Copilot",
    introPhrase3: "Present",
    
    // Main title (supports multi-line with \n)
    movieTitle: "Learning CS\\nwith AI",
    
    // Array of student names
    students: [
        "Alice Johnson",
        "Bob Smith",
        "Charlie Davis",
        "Diana Martinez",
        "Evan Wilson",
        "Fiona Brown"
    ],
    
    // Array of technical concepts
    concepts: [
        "Variables & Constants",
        "Functions & Methods",
        "Loops & Iteration",
        "Arrays & Lists",
        "Objects & Classes",
        "Conditionals & Logic",
        "Animation Frames",
        "Color Theory (HSB)",
        "Event Handling",
        "State Management",
        "Graphics Programming",
        "Audio Integration",
        "Data Persistence",
        "Configuration Systems",
        "Sequential Timing"
    ]
};

Step 2: Create Content Editor UI (customizeContent1.html)

Building the Editor Interface

1. Text Area Editors:

Created multi-line text areas for bulk editing:

<div class="editor-panel">
    <h3>📚 Student Names</h3>
    <p class="count-display">Total Students: <span id="studentCount">0</span></p>
    
    <textarea id="studentNamesEditor" class="name-input" rows="10" 
              placeholder="Enter student names, one per line..."></textarea>
    
    <div class="help-text">
        💡 Enter one name per line. Empty lines will be ignored.
    </div>
</div>

2. Intro Phrase Inputs:

Single-line inputs for the three intro phrases:

<input type="text" id="phrase1Input" class="name-input" 
       placeholder="First phrase (e.g., 'Tech Novice Tools')">
<input type="text" id="phrase2Input" class="name-input" 
       placeholder="Second phrase (e.g., '& Copilot')">
<input type="text" id="phrase3Input" class="name-input" 
       placeholder="Third phrase (e.g., 'Present')">

3. Movie Title with Multi-line Support:

<textarea id="movieTitleInput" class="name-input" rows="3" 
          placeholder="Movie title (use \n for line breaks)"></textarea>
<div class="help-text">
    💡 Use \n to create line breaks. Example: "Learning CS\nwith AI"
</div>

4. Action Buttons:

<button class="btn-custom btn-save" onclick="saveContent()">
    💾 Save Content
</button>
<button class="btn-custom btn-load" onclick="loadContent()">
    📂 Load Saved Content
</button>
<button class="btn-custom btn-reset" onclick="resetToDefaults()">
    🔄 Reset to Defaults
</button>

Step 3: Implement Content Parsing Logic

Converting Text Areas to Arrays

Student Names Parser:

function getStudentNames() {
    const editor = document.getElementById('studentNamesEditor');
    const text = editor.value;
    
    // Split by newlines, trim whitespace, filter empty lines
    const names = text
        .split('\n')
        .map(name => name.trim())
        .filter(name => name.length > 0);
    
    return names;
}

Technical Concepts Parser:

function getTechnicalConcepts() {
    const editor = document.getElementById('technicalConceptsEditor');
    const text = editor.value;
    
    const concepts = text
        .split('\n')
        .map(concept => concept.trim())
        .filter(concept => concept.length > 0);
    
    return concepts;
}

Live Count Updates:

function updateCounts() {
    const studentCount = getStudentNames().length;
    const conceptCount = getTechnicalConcepts().length;
    
    document.getElementById('studentCount').textContent = studentCount;
    document.getElementById('conceptCount').textContent = conceptCount;
}

// Update counts as user types
document.getElementById('studentNamesEditor')
    .addEventListener('input', updateCounts);
document.getElementById('technicalConceptsEditor')
    .addEventListener('input', updateCounts);

Step 4: Implement localStorage Save/Load

Dual Storage System

Save Content to localStorage:

function saveContent() {
    const content = {
        // Intro phrases
        introPhrase1: document.getElementById('phrase1Input').value.trim(),
        introPhrase2: document.getElementById('phrase2Input').value.trim(),
        introPhrase3: document.getElementById('phrase3Input').value.trim(),
        
        // Movie title (preserve \n as \\n for storage)
        movieTitle: document.getElementById('movieTitleInput').value.trim(),
        
        // Arrays
        students: getStudentNames(),
        concepts: getTechnicalConcepts()
    };
    
    try {
        localStorage.setItem('movieCreditsContent', JSON.stringify(content));
        showStatus('✅ Content saved successfully!', 'success');
        console.log('💾 Saved content:', content);
    } catch (error) {
        showStatus('❌ Error saving content: ' + error.message, 'error');
    }
}

Load Content from localStorage:

function loadContent() {
    try {
        const saved = localStorage.getItem('movieCreditsContent');
        if (!saved) {
            showStatus('ℹ️ No saved content found', 'info');
            return;
        }
        
        const content = JSON.parse(saved);
        
        // Populate intro phrases
        document.getElementById('phrase1Input').value = content.introPhrase1 || '';
        document.getElementById('phrase2Input').value = content.introPhrase2 || '';
        document.getElementById('phrase3Input').value = content.introPhrase3 || '';
        
        // Populate movie title
        document.getElementById('movieTitleInput').value = content.movieTitle || '';
        
        // Populate student names (join array with newlines)
        document.getElementById('studentNamesEditor').value = 
            (content.students || []).join('\n');
        
        // Populate technical concepts
        document.getElementById('technicalConceptsEditor').value = 
            (content.concepts || []).join('\n');
        
        updateCounts();
        showStatus('✅ Content loaded successfully!', 'success');
    } catch (error) {
        showStatus('❌ Error loading content: ' + error.message, 'error');
    }
}

Reset to Factory Defaults:

function resetToDefaults() {
    const defaults = {
        introPhrase1: "Tech Novice Tools",
        introPhrase2: "& Copilot",
        introPhrase3: "Present",
        movieTitle: "Learning CS\\nwith AI",
        students: [
            "Alice Johnson",
            "Bob Smith",
            "Charlie Davis",
            "Diana Martinez",
            "Evan Wilson",
            "Fiona Brown"
        ],
        concepts: [
            "Variables & Constants",
            "Functions & Methods",
            "Loops & Iteration",
            // ... (15 total concepts)
        ]
    };
    
    // Populate editor with defaults
    populateEditor(
        defaults.students,
        defaults.concepts,
        defaults.introPhrase1,
        defaults.introPhrase2,
        defaults.introPhrase3,
        defaults.movieTitle
    );
    
    showStatus('🔄 Reset to default content', 'info');
}

Step 5: Integrate Content into Simulator

Loading Custom Content in movieCreditsSim15.html

1. Load Both Configurations:

// *** STAGE 14: CONFIGURATION WITH LOCALSTORAGE ***
let savedConfig = null;
try {
    const saved = localStorage.getItem('movieCreditsConfig');
    if (saved) {
        savedConfig = JSON.parse(saved);
        console.log('📂 Loaded effects config:', savedConfig);
    }
} catch (error) {
    console.warn('⚠️ Error loading effects config:', error);
}

// *** STAGE 15: CONTENT CUSTOMIZATION ***
let savedContent = null;
try {
    const saved = localStorage.getItem('movieCreditsContent');
    if (saved) {
        savedContent = JSON.parse(saved);
        console.log('📂 Loaded custom content:', savedContent);
    }
} catch (error) {
    console.warn('⚠️ Error loading content:', error);
}

2. Apply Custom Intro Phrases:

// *** INTRO PHRASE TEXTS ***
// Stage 15: Can be customized via customizeContent utility
const INTRO_PHRASE_1 = savedContent?.introPhrase1 || "Tech Novice Tools";
const INTRO_PHRASE_2 = savedContent?.introPhrase2 || "& Copilot";
const INTRO_PHRASE_3 = savedContent?.introPhrase3 || "Present";

3. Apply Custom Movie Title:

// *** MOVIE TITLE ***
// Stage 15: Can be customized via customizeContent utility
// Convert stored \\n back to actual newline for p5.js text() function
const MOVIE_TITLE_TEXT = (savedContent?.movieTitle || "Learning CS\\nwith AI")
    .replace(/\\n/g, '\n');

4. Apply Custom Student Names:

// Default student names
const DEFAULT_STUDENTS = [
    "Alice Johnson",
    "Bob Smith",
    "Charlie Davis",
    "Diana Martinez",
    "Evan Wilson",
    "Fiona Brown"
];

// Use custom names if available, otherwise defaults
const studentNames = savedContent?.students || DEFAULT_STUDENTS;

5. Apply Custom Technical Concepts:

// Default technical concepts
const DEFAULT_CONCEPTS = [
    "Variables & Constants",
    "Functions & Methods",
    "Loops & Iteration",
    "Arrays & Lists",
    "Objects & Classes",
    "Conditionals & Logic",
    "Animation Frames",
    "Color Theory (HSB)",
    "Event Handling",
    "State Management",
    "Graphics Programming",
    "Audio Integration",
    "Data Persistence",
    "Configuration Systems",
    "Sequential Timing"
];

// Use custom concepts if available, otherwise defaults
const technicalConcepts = savedContent?.concepts || DEFAULT_CONCEPTS;

6. Generate Credits from Content:

// Generate student credits
for (let i = 0; i < studentNames.length; i++) {
    credits.push({
        name: studentNames[i],  // From custom content
        // ... other properties
    });
}

// Generate technical concept credits
for (let i = 0; i < technicalConcepts.length; i++) {
    credits.push({
        name: technicalConcepts[i],  // From custom content
        isTechnical: true,
        // ... other properties
    });
}

Step 6: Refine Green Color Range

Optimizing Technical Credit Colors

// OLD CODE (v14):
const GREEN_HUE_MIN = 100;  // Yellow-green
const GREEN_HUE_MAX = 140;  // Cyan-green

// NEW CODE (v15):
const GREEN_HUE_MIN = 110;  // Lime/grass green
const GREEN_HUE_MAX = 130;  // Forest green

Step 7: Update Navigation Links

Dual Customizer Access

Updated navigation across all files to include both customizers:

<nav class="navbar navbar-expand-lg">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">🎬 Movie Credits Simulator v15</a>
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link" href="movieCreditsSim15.html">🎬 Simulator</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="customizeContent1.html">📝 Content</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="customizeText3.html">⚙️ Effects</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="aboutMCreditsApp15.html">ℹ️ About</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

User Workflow:

1. 📝 Content: Edit what appears (names, concepts, title)
2. ⚙️ Effects: Design how it looks (fonts, colors, blur)
3. 🎬 Simulator: See the combined result in action