Update static/js/script.js

static/js/script.js

@@ -1,5 +1,3 @@
-// --- InkBoard JavaScript (Fixed) ---
-
 class InkBoard {
     constructor() {
         this.currentCreationId = null;
@@ -10,29 +8,28 @@ class InkBoard {
     init() {
         this.setupEventListeners();
         this.loadGallery();
-        this.showSection('create'); // Default
+        this.showSection('create');
     }
 
     setupEventListeners() {
-        document.getElementById('scene-form')?.addEventListener('submit', (e) => {
+        document.getElementById('scene-form').addEventListener('submit', (e) => {
             e.preventDefault();
             this.generateContent();
         });
 
-        document.getElementById('save-journal')?.addEventListener('click', () => {
+        document.getElementById('save-journal').addEventListener('click', () => {
             this.saveJournal();
         });
 
-        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 sceneIdeaInput = document.getElementById('scene-idea');
-        const sceneIdea = sceneIdeaInput?.value.trim();
-
+        const sceneIdea = document.getElementById('scene-idea').value.trim();
+        
         if (!sceneIdea) {
             this.showAlert('Please enter a scene idea', 'danger');
             return;
@@ -48,25 +45,20 @@ class InkBoard {
                 body: JSON.stringify({ scene_idea: sceneIdea })
             });
 
-            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();
 
             if (data.success) {
                 this.displayResult(data);
                 this.loadGallery();
-                sceneIdeaInput.value = '';
-                this.showAlert('✅ Story and image generated!', 'success');
+                document.getElementById('scene-idea').value = '';
+                this.showAlert('Story and image generated successfully!', 'success');
             } else {
                 this.showAlert(data.error || 'Failed to generate content', 'danger');
             }
 
         } catch (error) {
             console.error('Error generating content:', error);
-            this.showAlert('Network or server error. Please try again.', 'danger');
+            this.showAlert('Network error. Please try again.', 'danger');
         } finally {
             this.showLoading(false);
             this.setButtonLoading(false);
@@ -78,53 +70,62 @@ class InkBoard {
 
         const imageSection = data.image_url ? `
             <div class="col-lg-6 mb-4">
-                <img src="${data.image_url}" alt="Generated Scene" class="img-fluid rounded shadow">
+                <div class="image-container">
+                    <img src="${data.image_url}" alt="Generated Scene" class="img-fluid rounded shadow">
+                </div>
             </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
             </button>` : '';
 
-        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}
+        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>
                     </div>
                 </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.length > 0) {
-                galleryGrid.innerHTML = data.creations.map(this.createGalleryItem).join('');
+            if (data.creations && data.creations.length > 0) {
+                const galleryHTML = data.creations.map(creation => this.createGalleryItem(creation)).join('');
+                galleryGrid.innerHTML = galleryHTML;
             } else {
                 galleryGrid.innerHTML = `
-                    <div class="text-center py-5 text-muted">
-                        <h5>No creations yet</h5>
-                        <p>Start by describing a scene above!</p>
+                    <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>`;
             }
         } catch (error) {
@@ -134,72 +135,201 @@ class InkBoard {
 
     createGalleryItem(creation) {
         const journalEntry = creation.journal_entry ? `
-            <div class="mt-2"><strong>Journal:</strong> ${creation.journal_entry}</div>` : '';
+            <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>` : '';
 
         return `
-            <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 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>`;
     }
 
-    openJournal(id, text = '') {
-        this.currentCreationId = id;
-        document.getElementById('journal-text').value = text;
+    openJournal(creationId, existingText = '') {
+        this.currentCreationId = creationId;
+        document.getElementById('journal-text').value = existingText;
+
         const modal = new bootstrap.Modal(document.getElementById('journalModal'));
         modal.show();
     }
 
     async saveJournal() {
-        if (!this.currentCreationId) return;
+        if (!this.currentCreationId) {
+            this.showAlert('No creation selected', 'danger');
+            return;
+        }
 
-        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();
-    }
+        const journalText = document.getElementById('journal-text').value.trim();
 
-    showLoading(state) {
-        const spinner = document.getElementById('loading-spinner');
-        if (spinner) spinner.style.display = state ? 'block' : 'none';
-    }
+        try {
+            const response = await fetch('/save_journal', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    creation_id: this.currentCreationId,
+                    journal_entry: journalText
+                })
+            });
 
-    setButtonLoading(state) {
-        const btn = document.querySelector('#scene-form button[type="submit"]');
-        if (btn) btn.disabled = state;
-    }
+            const data = await response.json();
 
-    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);
-    }
+            if (data.success) {
+                this.showAlert('Journal entry saved!', 'success');
+                this.loadGallery();
 
-    showSection(name) {
-        this.currentSection = name;
+                const modal = bootstrap.Modal.getInstance(document.getElementById('journalModal'));
+                modal.hide();
+            } else {
+                this.showAlert(data.error || 'Failed to save journal', 'danger');
+            }
+        } catch (error) {
+            console.error('Error saving journal:', error);
+            this.showAlert('Network error. Please try again.', 'danger');
+        }
     }
 
-    downloadImage(url) {
+    downloadImage(imageUrl) {
         const link = document.createElement('a');
-        link.href = url;
-        link.download = 'inkboard_image.png';
+        link.href = imageUrl;
+        link.download = `inkboard-creation-${Date.now()}.png`;
+        link.target = '_blank';
         document.body.appendChild(link);
         link.click();
         document.body.removeChild(link);
+        this.showAlert('Image download started!', 'success');
+    }
+
+    showLoading(show) {
+        const loadingSection = document.getElementById('loading-section');
+        const resultsSection = document.getElementById('results-section');
+
+        if (show) {
+            loadingSection.classList.remove('d-none');
+            resultsSection.innerHTML = '';
+        } else {
+            loadingSection.classList.add('d-none');
+        }
+    }
+
+    setButtonLoading(loading) {
+        const btn = document.getElementById('generate-btn');
+        const btnText = btn.querySelector('.btn-text');
+        const spinner = btn.querySelector('.spinner-border');
+
+        if (loading) {
+            btn.classList.add('loading');
+            btn.disabled = true;
+            btnText.classList.add('d-none');
+            spinner.classList.remove('d-none');
+        } else {
+            btn.classList.remove('loading');
+            btn.disabled = false;
+            btnText.classList.remove('d-none');
+            spinner.classList.add('d-none');
+        }
+    }
+
+    showAlert(message, type) {
+        const existingAlert = document.querySelector('.alert');
+        if (existingAlert) existingAlert.remove();
+
+        const alert = document.createElement('div');
+        alert.className = `alert alert-${type} alert-dismissible fade show`;
+        alert.innerHTML = `${message}
+            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>`;
+
+        const main = document.querySelector('main');
+        main.insertBefore(alert, main.firstChild);
+
+        setTimeout(() => {
+            if (alert.parentNode) alert.remove();
+        }, 5000);
+    }
+
+    showSection(sectionName) {
+        document.querySelectorAll('.dashboard-section').forEach(section => {
+            section.classList.add('d-none');
+        });
+
+        document.querySelectorAll('.btn-nav').forEach(btn => {
+            btn.classList.remove('active');
+        });
+
+        const targetSection = document.getElementById(`${sectionName}-section`);
+        if (targetSection) targetSection.classList.remove('d-none');
+
+        const buttonSelectors = {
+            'create': 'Create Story',
+            'gallery': 'Gallery',
+            'journal': 'Journal'
+        };
+
+        document.querySelectorAll('.btn-nav').forEach(btn => {
+            if (btn.textContent.trim().includes(buttonSelectors[sectionName])) {
+                btn.classList.add('active');
+            }
+        });
+
+        this.currentSection = sectionName;
+
+        if (sectionName === 'gallery') {
+            this.loadGallery();
+        } else if (sectionName === 'journal') {
+            this.loadJournalEntries();
+        }
+    }
+
+    async loadJournalEntries() {
+        try {
+            const response = await fetch('/get_creations');
+            const data = await response.json();
+
+            const journalContainer = document.getElementById('journal-entries');
+            const entriesWithJournal = data.creations?.filter(creation => creation.journal_entry) || [];
+
+            if (entriesWithJournal.length > 0) {
+                const journalHTML = entriesWithJournal.map(creation => `
+                    <div class="journal-entry-card mb-3">
+                        <h5>${creation.scene_idea}</h5>
+                        <p>${creation.journal_entry}</p>
+                    </div>`).join('');
+                journalContainer.innerHTML = journalHTML;
+            } else {
+                journalContainer.innerHTML = `
+                    <div class="col-12 text-center py-5">
+                        <i class="fas fa-journal-whills fa-3x text-muted mb-3"></i>
+                        <h5 class="text-muted">No journal entries yet</h5>
+                    </div>`;
+            }
+        } catch (error) {
+            console.error('Error loading journal entries:', error);
+        }
     }
 }
 
+// Initialize
 const inkBoard = new InkBoard();