Fixed reset, blockContainerPage needed to be reinitialized, renamed image textareas ids to sdprompt- in template

scripts.js

@@ -877,53 +877,78 @@ document.addEventListener("DOMContentLoaded", function() {
     }
 
     function handleReset() {
-        console.log('Reset button clicked');
+    console.log('Reset button clicked');
+    
+    // Collect all blocks from all pages
+    const allBlocks = [];
+    const pages = document.querySelectorAll('.page');
+    
+    pages.forEach(page => {
+        console.log(`Processing page with ID: ${page.getAttribute('data-page-id')}`);
         
-        // Collect all blocks from all pages
-        const allBlocks = [];
-        const pages = document.querySelectorAll('.page');
-        pages.forEach(page => {
-            const blocksOnPage = page.querySelectorAll('[data-block-id]');
-            blocksOnPage.forEach(block => {
-                const blockId = block.getAttribute('data-block-id');
-                allBlocks.push({
-                    id: blockId,
-                    innerHTML: block.innerHTML
-                });
-                block.remove();
-                console.log(`Removed block with ID: ${blockId} from page ID: ${page.getAttribute('data-page-id')}`);
+        const blocksOnPage = page.querySelectorAll('[data-block-id]');
+        
+        blocksOnPage.forEach(block => {
+            const blockId = block.getAttribute('data-block-id');
+            allBlocks.push({
+                id: blockId,
+                innerHTML: block.innerHTML
             });
+            block.remove();
+            console.log(`Removed block with ID: ${blockId} from page ID: ${page.getAttribute('data-page-id')}`);
         });
+    });
+
+    // Log blocks collected
+    console.log('All blocks collected:', allBlocks);
+
+    // Clear all pages
+    pages.forEach(page => {
+        console.log(`Removing page with ID: ${page.getAttribute('data-page-id')}`);
+        page.remove();
+    });
+
+    // Clear blockContainer before reinserting blocks
+    console.log('Clearing blockContainer...');
+    blockContainer.innerHTML = '';
 
-        // Clear all pages
-        pages.forEach(page => page.remove());
+    // Check and create blockContainerPage if it doesn't exist
+    let blockContainerPage = document.getElementById('block-page');
+    if (!blockContainerPage) {
+        blockContainerPage = document.createElement('div');
+        blockContainerPage.classList.add('page');
+        blockContainerPage.setAttribute('id', 'block-page');
+        blockContainer.appendChild(blockContainerPage);
+        console.log('Created new blockContainerPage');
+    } else {
+        console.log('blockContainerPage already exists');
+    }
 
-        // Clear blockContainer before reinserting blocks
-        blockContainer.innerHTML = '';
+    // Reassign blockContainerPage to the newly created block-page element
+    
+    console.log('blockContainerPage reassigned to:', blockContainerPage);
 
-        // Reinsert blocks back into the blockContainer in their original order
+    // Reinsert blocks back into the blockContainer in their original order
+    initialPositions.forEach(pos => {
+        const blockData = allBlocks.find(block => block.id === pos.id);
         
-        if (!blockContainerPage) {
-            blockContainerPage = document.createElement('div');
-            blockContainerPage.classList.add('page');
-            blockContainerPage.setAttribute('id', 'block-page');
-            blockContainer.appendChild(blockContainerPage);
+        if (blockData) {
+            console.log(`Reinserting block with ID: ${blockData.id} into blockContainerPage`);
+            reinsertBlock(blockContainerPage, blockData.id, blockData.innerHTML);
+            sortBlocksById();
+        } else {
+            console.log(`Block with ID: ${pos.id} not found in collected blocks.`);
         }
-        // Reassign blockContainerPage to the newly created block-page element
-        blockContainerPage = document.getElementById('block-page');
-
-        initialPositions.forEach(pos => {
-            const blockData = allBlocks.find(block => block.id === pos.id);
-            if (blockData) {
-                reinsertBlock(blockContainerPage, blockData.id, blockData.innerHTML);
-                sortBlocksById();
-            }
-        });
-        addPage();
+    });
+
+    // Add a new page after reset
+    addPage();
+    console.log('Added new page after reset.');
+
+    console.log('Reset complete, all blocks moved back to block-container');
+    initializeTextareaResizing();
+}
 
-        console.log('Reset complete, all blocks moved back to block-container');
-        initializeTextareaResizing();
-    }
 
     addPageButton.addEventListener('click', addPage);
     removePageButton.addEventListener('click', removePage);

template_update.html

@@ -9,7 +9,7 @@
     </div>
     
     <div class="block-item" data-block-id="1" data-page-id="block-container" draggable="true">
-        <textarea class="image-textarea" id="user-storefront-prompt-1" hx-post="/update-stats" hx-trigger="change" hx-target="#user-sd-prompt" hx-swap="outerHTML" title="Storefront image description" style="height: 80px;">A highly detailed fantasy painting of a curious sentient potted plant in a vibrant gear shop. The plant has phosphorescent leaves and delicate, intricate roots. The shop is filled with glowing flora, magical tools, and adventure gear. The background shows enchanted trees intertwined with the walls and ceiling.</textarea>
+        <textarea class="image-textarea" id="sdprompt-1" hx-post="/update-stats" hx-trigger="change" hx-target="#user-sd-prompt" hx-swap="outerHTML" title="Storefront image description" style="height: 80px;">A highly detailed fantasy painting of a curious sentient potted plant in a vibrant gear shop. The plant has phosphorescent leaves and delicate, intricate roots. The shop is filled with glowing flora, magical tools, and adventure gear. The background shows enchanted trees intertwined with the walls and ceiling.</textarea>
         <button class="generate-image-button" data-block-id="1">Generate Image</button>
         <img id="generated-image-1" alt="" style="display: none; cursor: pointer;">
     </div>
@@ -75,7 +75,7 @@
     </div>
     
     <div class="block-item" data-block-id="3" data-page-id="block-container" draggable="true">
-        <textarea class="image-textarea" id="user-storefront-prompt-3" hx-post="/update-stats" hx-trigger="change" hx-target="#user-sd-prompt" hx-swap="outerHTML" title="Storefront image description" style="height: 48px;">A highly detailed fantasy drawing of a sentient potted plant with glowing tendrils, set in an enchanting gear shop filled with vibrant flora and a myriad of magical items.</textarea>
+        <textarea class="image-textarea" id="sdprompt-3" hx-post="/update-stats" hx-trigger="change" hx-target="#user-sd-prompt" hx-swap="outerHTML" title="Storefront image description" style="height: 48px;">A highly detailed fantasy drawing of a sentient potted plant with glowing tendrils, set in an enchanting gear shop filled with vibrant flora and a myriad of magical items.</textarea>
         <button class="generate-image-button" data-block-id="3">Generate Image</button>
         <img id="generated-image-3" alt="" style="display: none; cursor: pointer;">
     </div>
@@ -124,7 +124,7 @@
     </div>
 
     <div class="block-item" data-block-id="5" data-page-id="block-container" draggable="true">
-        <textarea class=""image-textarea"" id="user-storefront-prompt-5" hx-post="/update-stats" hx-trigger="change" hx-target="#user-sd-prompt" hx-swap="outerHTML" title="Storefront image description" style="height: 49px;">A highly detailed fantasy image of a half-elf shopkeeper with forest-green eyes and flower-adorned hair, set in a magical gear shop filled with glowing plants and enchanted equipment.</textarea>
+        <textarea class="image-textarea" id="sdprompt-5" hx-post="/update-stats" hx-trigger="change" hx-target="#user-sd-prompt" hx-swap="outerHTML" title="Storefront image description" style="height: 49px;">A highly detailed fantasy image of a half-elf shopkeeper with forest-green eyes and flower-adorned hair, set in a magical gear shop filled with glowing plants and enchanted equipment.</textarea>
         <button class="generate-image-button" data-block-id="5">Generate Image</button>
         <img id="generated-image-5" alt="" style="display: none; cursor: pointer;">
     </div>