Update static/js/script.js

static/js/script.js

@@ -1,4 +1,4 @@
-// InkBoard JavaScript - Main Application Logic
+// --- InkBoard JavaScript (Fixed) ---
 
 class InkBoard {
     constructor() {
@@ -10,30 +10,28 @@ class InkBoard {
     init() {
         this.setupEventListeners();
         this.loadGallery();
-        this.showSection('create');
+        this.showSection('create'); // Default
     }
 
     setupEventListeners() {
-        // Scene form submission
-        document.getElementById('scene-form').addEventListener('submit', (e) => {
+        document.getElementById('scene-form')?.addEventListener('submit', (e) => {
             e.preventDefault();
             this.generateContent();
         });
 
-        // Journal modal save button
-        document.getElementById('save-journal').addEventListener('click', () => {
+        document.getElementById('save-journal')?.addEventListener('click', () => {
             this.saveJournal();
         });
 
-        // Handle modal close
-        document.getElementById('journalModal').addEventListener('hidden.bs.modal', () => {
+        document.getElementById('journalModal')?.addEventListener('hidden.bs.modal', () => {
             this.currentCreationId = null;
             document.getElementById('journal-text').value = '';
         });
     }
 
     async generateContent() {
-        const sceneIdea = document.getElementById('scene-idea').value.trim();
+        const sceneIdeaInput = document.getElementById('scene-idea');
+        const sceneIdea = sceneIdeaInput?.value.trim();
 
         if (!sceneIdea) {
             this.showAlert('Please enter a scene idea', 'danger');
@@ -50,12 +48,9 @@ class InkBoard {
                 body: JSON.stringify({ scene_idea: sceneIdea })
             });
 
-            const contentType = response.headers.get("content-type");
-            if (!contentType || !contentType.includes("application/json")) {
-                const text = await response.text();
-                console.error("Non-JSON response:", text);
-                this.showAlert("Server error or you're not logged in", "danger");
-                return;
+            const contentType = response.headers.get('content-type') || '';
+            if (!contentType.includes('application/json')) {
+                throw new Error("Server didn't return JSON – are you logged in?");
             }
 
             const data = await response.json();
@@ -63,15 +58,15 @@ class InkBoard {
             if (data.success) {
                 this.displayResult(data);
                 this.loadGallery();
-                document.getElementById('scene-idea').value = '';
-                this.showAlert('Story and image generated successfully!', 'success');
+                sceneIdeaInput.value = '';
+                this.showAlert('✅ Story and image generated!', 'success');
             } else {
                 this.showAlert(data.error || 'Failed to generate content', 'danger');
             }
 
         } catch (error) {
             console.error('Error generating content:', error);
-            this.showAlert('Network error. Please try again.', 'danger');
+            this.showAlert('Network or server error. Please try again.', 'danger');
         } finally {
             this.showLoading(false);
             this.setButtonLoading(false);
@@ -83,70 +78,53 @@ class InkBoard {
 
         const imageSection = data.image_url ? `
             <div class="col-lg-6 mb-4">
-                <div class="image-container">
-                    <img src="${data.image_url}" alt="Generated Scene" class="img-fluid rounded shadow">
-                </div>
+                <img src="${data.image_url}" alt="Generated Scene" class="img-fluid rounded shadow">
             </div>` : '';
 
         const storyColClass = data.image_url ? 'col-lg-6' : 'col-12';
-
         const downloadButton = data.image_url ? `
             <button class="btn btn-outline-success btn-sm" onclick="inkBoard.downloadImage('${data.image_url}')">
-                <i class="fas fa-download me-1"></i>
-                Download Image
+                <i class="fas fa-download me-1"></i> Download Image
             </button>` : '';
 
-        const resultHTML = `
-            <div class="col-12 mb-5">
-                <div class="card shadow-lg border-0">
-                    <div class="card-body p-4">
-                        <h4 class="card-title text-center mb-4">
-                            <i class="fas fa-sparkles me-2"></i>
-                            Your Creation
-                        </h4>
-                        <div class="row">
-                            ${imageSection}
-                            <div class="${storyColClass}">
-                                <div class="story-container">
-                                    <h5 class="mb-3">
-                                        <i class="fas fa-book-open me-2"></i>
-                                        Your Story
-                                    </h5>
-                                    <p class="story-text">${data.story}</p>
-                                    <div class="mt-3">
-                                        <button class="btn btn-outline-primary btn-sm me-2" onclick="inkBoard.openJournal('${data.creation_id}')">
-                                            <i class="fas fa-journal-whills me-1"></i>
-                                            Add Journal Entry
-                                        </button>
-                                        ${downloadButton}
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
+        resultsSection.innerHTML = `
+            <div class="card shadow border-0 p-4">
+                <h4 class="mb-4">Your Creation</h4>
+                <div class="row">
+                    ${imageSection}
+                    <div class="${storyColClass}">
+                        <p>${data.story}</p>
+                        <button class="btn btn-outline-primary btn-sm me-2" onclick="inkBoard.openJournal('${data.creation_id}')">
+                            <i class="fas fa-journal-whills me-1"></i> Add Journal
+                        </button>
+                        ${downloadButton}
                     </div>
                 </div>
             </div>
         `;
-
-        resultsSection.innerHTML = resultHTML;
         resultsSection.scrollIntoView({ behavior: 'smooth' });
     }
 
     async loadGallery() {
         try {
             const response = await fetch('/get_creations');
+
+            const contentType = response.headers.get('content-type') || '';
+            if (!contentType.includes('application/json')) {
+                console.warn('Gallery load skipped — likely not logged in.');
+                return;
+            }
+
             const data = await response.json();
             const galleryGrid = document.getElementById('gallery-grid');
 
-            if (data.creations && data.creations.length > 0) {
-                const galleryHTML = data.creations.map(c => this.createGalleryItem(c)).join('');
-                galleryGrid.innerHTML = galleryHTML;
+            if (data.creations.length > 0) {
+                galleryGrid.innerHTML = data.creations.map(this.createGalleryItem).join('');
             } else {
                 galleryGrid.innerHTML = `
-                    <div class="col-12 text-center py-5">
-                        <i class="fas fa-palette fa-3x text-muted mb-3"></i>
-                        <h5 class="text-muted">No creations yet</h5>
-                        <p class="text-muted">Start by describing a scene above!</p>
+                    <div class="text-center py-5 text-muted">
+                        <h5>No creations yet</h5>
+                        <p>Start by describing a scene above!</p>
                     </div>`;
             }
         } catch (error) {
@@ -156,122 +134,72 @@ class InkBoard {
 
     createGalleryItem(creation) {
         const journalEntry = creation.journal_entry ? `
-            <div class="journal-entry">
-                <small class="text-muted">
-                    <i class="fas fa-journal-whills me-1"></i>
-                    Journal Entry:
-                </small>
-                <p class="mb-0 mt-1">${creation.journal_entry}</p>
-            </div>` : '';
-
-        const imageSection = creation.image_url ? 
-            `<img src="${creation.image_url}" alt="Scene: ${creation.scene_idea}" loading="lazy">` : '';
-
-        const downloadButton = creation.image_url ? 
-            `<button class="btn btn-outline-success btn-sm" onclick="inkBoard.downloadImage('${creation.image_url}')">
-                <i class="fas fa-download me-1"></i>
-                Download
-            </button>` : '';
+            <div class="mt-2"><strong>Journal:</strong> ${creation.journal_entry}</div>` : '';
 
         return `
-            <div class="gallery-item">
-                ${imageSection}
-                <div class="gallery-item-content">
-                    <div class="gallery-item-scene">
-                        <i class="fas fa-quote-left me-1"></i>
-                        ${creation.scene_idea}
-                    </div>
-                    <div class="gallery-item-story">
-                        ${creation.story}
-                    </div>
-                    ${journalEntry}
-                    <div class="gallery-item-actions">
-                        <button class="btn btn-outline-primary btn-sm" onclick="inkBoard.openJournal('${creation.id}', '${creation.journal_entry || ''}')">
-                            <i class="fas fa-journal-whills me-1"></i>
-                            ${creation.journal_entry ? 'Edit' : 'Add'} Journal
-                        </button>
-                        ${downloadButton}
-                    </div>
-                </div>
+            <div class="gallery-item card shadow-sm p-3 mb-3">
+                <h6>${creation.scene_idea}</h6>
+                <p>${creation.story}</p>
+                ${creation.image_url ? `<img src="${creation.image_url}" class="img-fluid">` : ''}
+                ${journalEntry}
+                <button class="btn btn-sm btn-outline-primary mt-2" onclick="inkBoard.openJournal('${creation.id}', '${creation.journal_entry || ''}')">
+                    ${creation.journal_entry ? 'Edit' : 'Add'} Journal
+                </button>
             </div>`;
     }
 
-    openJournal(creationId, existingText = '') {
-        this.currentCreationId = creationId;
-        document.getElementById('journal-text').value = existingText;
-
+    openJournal(id, text = '') {
+        this.currentCreationId = id;
+        document.getElementById('journal-text').value = text;
         const modal = new bootstrap.Modal(document.getElementById('journalModal'));
         modal.show();
     }
 
     async saveJournal() {
-        if (!this.currentCreationId) {
-            this.showAlert('No creation selected', 'danger');
-            return;
-        }
+        if (!this.currentCreationId) return;
 
-        const journalText = document.getElementById('journal-text').value.trim();
-
-        try {
-            const res = await fetch('/save_journal', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    creation_id: this.currentCreationId,
-                    journal_entry: journalText
-                })
-            });
-
-            const data = await res.json();
-
-            if (data.success) {
-                this.showAlert('Journal saved successfully!', 'success');
-                this.loadGallery();
-                const modal = bootstrap.Modal.getInstance(document.getElementById('journalModal'));
-                modal.hide();
-            } else {
-                this.showAlert('Failed to save journal.', 'danger');
-            }
-        } catch (error) {
-            console.error('Error saving journal:', error);
-            this.showAlert('Network error.', 'danger');
-        }
+        const text = document.getElementById('journal-text').value.trim();
+        await fetch('/save_journal', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ creation_id: this.currentCreationId, journal_entry: text })
+        });
+        this.loadGallery();
+        const modal = bootstrap.Modal.getInstance(document.getElementById('journalModal'));
+        modal.hide();
     }
 
-    downloadImage(url) {
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = 'inkboard-image.png';
-        document.body.appendChild(a);
-        a.click();
-        document.body.removeChild(a);
+    showLoading(state) {
+        const spinner = document.getElementById('loading-spinner');
+        if (spinner) spinner.style.display = state ? 'block' : 'none';
     }
 
-    showAlert(message, type = 'info') {
-        const alertBox = document.getElementById('alert-box');
-        alertBox.innerHTML = `
-            <div class="alert alert-${type} alert-dismissible fade show" role="alert">
-                ${message}
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-            </div>`;
+    setButtonLoading(state) {
+        const btn = document.querySelector('#scene-form button[type="submit"]');
+        if (btn) btn.disabled = state;
     }
 
-    showLoading(state) {
-        const loader = document.getElementById('loading-spinner');
-        loader.style.display = state ? 'block' : 'none';
+    showAlert(msg, type = 'info') {
+        const alertBox = document.getElementById('alert-box');
+        if (!alertBox) return;
+        alertBox.className = `alert alert-${type}`;
+        alertBox.innerText = msg;
+        alertBox.style.display = 'block';
+        setTimeout(() => alertBox.style.display = 'none', 5000);
     }
 
-    setButtonLoading(loading) {
-        const button = document.getElementById('generate-btn');
-        button.disabled = loading;
-        button.innerHTML = loading ? `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Generating...` : `Generate`;
+    showSection(name) {
+        this.currentSection = name;
     }
 
-    showSection(section) {
-        this.currentSection = section;
-        // Add logic here if needed for tab switching
+    downloadImage(url) {
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = 'inkboard_image.png';
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
     }
 }
 
-// Initialize
 const inkBoard = new InkBoard();