added addPage and removePage function, eventlistener and buttons, remove checks for blocks on page and gives an error popup

scripts.js

@@ -7,6 +7,8 @@ document.addEventListener("DOMContentLoaded", function() {
     const trashArea = document.getElementById('trashArea');
     const toggleButton = document.getElementById('toggle-text-block-button');
     const resetButton = document.getElementById('resetButton');
+    const addPageButton = document.getElementById('add-page-button');
+    const removePageButton = document.getElementById('remove-page-button');
     let currentPage = pageContainer.querySelector('.block.monster.frame.wide');
     const modal = document.getElementById('imageModal');
     const modalImg = document.getElementById('modalImage');
@@ -302,6 +304,7 @@ document.addEventListener("DOMContentLoaded", function() {
             'properties-textarea',
             'string-stat-textarea',
             'string-action-description-textarea',
+            'image-textarea'
         ];
 
         classes.forEach(className => {
@@ -387,11 +390,11 @@ document.addEventListener("DOMContentLoaded", function() {
 
     // Function to generate image
     function generateImage(blockId) {
-        const sdPromptElement = document.getElementById(`user-storefront-prompt-${blockId}`);
+        const sdPromptElement = document.getElementById(`sdprompt-${blockId}`);
         const imageElement = document.getElementById(`generated-image-${blockId}`);
         
         if (!sdPromptElement) {
-            console.error('Element with ID user-storefront-prompt not found');
+            console.error('Element with ID sdprompt not found');
             return;
         }
 
@@ -720,11 +723,20 @@ document.addEventListener("DOMContentLoaded", function() {
 
         function removePage() {
             const pages = pageContainer.querySelectorAll('.page');
-        
+            
             if (pages.length > 1) { // Ensure at least one page remains
                 const lastPage = pages[pages.length - 1];
-                pageContainer.removeChild(lastPage);
-                console.log(`Page removed with ID: ${lastPage.id}`);
+                const blocks = lastPage.querySelectorAll('.block-content'); // Check for blocks inside the last page
+        
+                if (blocks.length > 0) {
+                    // If blocks are present, block the removal and display a warning
+                    console.log(`Cannot remove page with ID: ${lastPage.id} because it contains ${blocks.length} block(s).`);
+                    alert(`Cannot remove this page because it contains ${blocks.length} block(s). Please remove the blocks first.`);
+                } else {
+                    // If no blocks are present, allow removal
+                    pageContainer.removeChild(lastPage);
+                    console.log(`Page removed with ID: ${lastPage.id}`);
+                }
             } else {
                 console.log('Cannot remove the last page.');
             }
@@ -912,7 +924,9 @@ document.addEventListener("DOMContentLoaded", function() {
         console.log('Reset complete, all blocks moved back to block-container');
         initializeTextareaResizing();
     }
-    
+
+    addPageButton.addEventListener('click', addPage);
+    removePageButton.addEventListener('click', removePage);
     toggleButton.addEventListener('click', toggleAllTextBlocks);
     blockContainer.addEventListener('dragover', handleDragOver);
     blockContainer.addEventListener('drop', handleDrop);

storeUI.html

@@ -30,6 +30,8 @@
                     title="As much or as little description as you want to provide. You can provide specific employees, inventory etc">A very standard gear store run by a fae potted plant named Gorgeous</textarea>
                     <button id="submitDescription">Submit</button>
                     <button id="toggle-text-block-button">Toggle Image Descriptions</button>
+                    <button id="add-page-button">Add New Page</button>
+                    <button id="remove-page-button">Remove Last Page</button>
                     <button id="resetButton">Reset</button>
                     <button id="printButton">Open Tab to print</button>
             <div class="brewRenderer" id="brewRenderer">

template_update.html

@@ -75,7 +75,7 @@
     </div>
     
     <div class="block-item" data-block-id="3" data-page-id="block-container" draggable="true">
-        <textarea class="string-action-description-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="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>
         <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="string-action-description-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="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>
         <button class="generate-image-button" data-block-id="5">Generate Image</button>
         <img id="generated-image-5" alt="" style="display: none; cursor: pointer;">
     </div>