Spaces:

TheDrakosfire
/

StoreGenerator

Sleeping

App Files Files Community

drakosfire commited on Aug 16

Commit

f1cc591

•

2 Parent(s): 9cb5d54 ac9f06d

Merge branch 'main' of github.com:Drakosfire/StoreGenerator

Browse files

Files changed (6) hide show

app.py +0 -0
scripts.js +129 -59
storeUI.css +36 -15
storeUI.html +16 -12
store_helper.py +13 -8
template_update.html +3 -3

app.py CHANGED Viewed

File without changes

scripts.js CHANGED Viewed

@@ -6,6 +6,7 @@ document.addEventListener("DOMContentLoaded", function() {
     const pageContainer = document.getElementById('pages');
     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');
@@ -124,7 +125,37 @@ document.addEventListener("DOMContentLoaded", function() {
             document.querySelector('.toggle-text-block-button').textContent = 'Hide All Image Descriptions';
         }
     }
     window.printPageContainer = function(newTab) {
         var pageContainer = document.getElementById('brewRenderer');
@@ -147,9 +178,6 @@ document.addEventListener("DOMContentLoaded", function() {
                             .page {
                                 page-break-before: auto;
-                                page-break-after: avoid;
-                                page-break-inside: avoid;
                             }
                             .columnWrapper {
                                 overflow: visible;
@@ -159,7 +187,11 @@ document.addEventListener("DOMContentLoaded", function() {
                     </style>
                 </head>
                 <body>
-                    ${pageContainer.innerHTML}
                 </body>
                 </html>
             `;
@@ -289,10 +321,10 @@ document.addEventListener("DOMContentLoaded", function() {
     storeInitialPositions();
-    function adjustTextareaHeight(el) {
         if (el.scrollHeight > 16){
             el.style.height = 'auto';
-            el.style.height = (el.scrollHeight) + 'px';
         }
     }
@@ -304,10 +336,18 @@ document.addEventListener("DOMContentLoaded", function() {
             'properties-textarea',
             'string-stat-textarea',
             'string-action-description-textarea',
-            'image-textarea'
         ];
         classes.forEach(className => {
             console.log('Initializing textareas for class:', className);
             console.log(document.querySelectorAll(`.${className}`));
             const textareas = document.querySelectorAll(`.${className}`);
@@ -315,7 +355,7 @@ document.addEventListener("DOMContentLoaded", function() {
                 console.log('Textarea found:', textarea);
                 // Adjust height on page load
-                adjustTextareaHeight(textarea);
                 // Adjust height on input
                 textarea.addEventListener('input', function() {
                     adjustTextareaHeight(textarea);
@@ -460,7 +500,7 @@ document.addEventListener("DOMContentLoaded", function() {
     function handleDragStart(e) {
         lockTextareas();
-        const target = e.target.closest('.block-item, .block-content');
         if (!target) {
             console.error('Drag started for an element without a valid target');
             return;
@@ -496,7 +536,7 @@ document.addEventListener("DOMContentLoaded", function() {
     }
     function handleDragEnd(e) {
-        const target = e.target.closest('.block-item, .block-content');
         if (target) {
             target.style.opacity = '1'; // Reset the opacity
             const blockId = target.getAttribute('data-block-id');
@@ -540,7 +580,7 @@ document.addEventListener("DOMContentLoaded", function() {
             targetPage.classList.add('highlight-page'); // Add highlight class for pages
             }
-        const targetBlock = e.target.closest('.block-item, .block-content');
         if (targetBlock) {
             const bounding = targetBlock.getBoundingClientRect();
             const offset = e.clientY - bounding.top;
@@ -557,7 +597,7 @@ document.addEventListener("DOMContentLoaded", function() {
     function handleDrop(e) {
         e.preventDefault();
         // Ensure we are not dropping into a textarea or another block
-        if (e.target.classList.contains('block-item', 'block-content', 'description-textarea') || e.target.tagName === 'TEXTAREA') {
             console.log('Cannot drop block inside another block or textarea');
             return;
         }
@@ -580,7 +620,7 @@ document.addEventListener("DOMContentLoaded", function() {
             }
             const newBlockContent = document.createElement('div');
-            newBlockContent.classList.add('block-content');
             newBlockContent.innerHTML = originalBlock.innerHTML; // Transfer inner content only
             // Add necessary attributes and event listeners
@@ -591,7 +631,7 @@ document.addEventListener("DOMContentLoaded", function() {
             newBlockContent.addEventListener('dragstart', handleDragStart);
             newBlockContent.addEventListener('dragend', handleDragEnd);
-            const target = e.target.closest('.block-item, .block-content');
             let targetColumn = 1;
             if (target) {
                 const bounding = target.getBoundingClientRect();
@@ -666,7 +706,7 @@ document.addEventListener("DOMContentLoaded", function() {
          // Function to get the height of a column by index
         function getColumnHeights(pageElement) {
             const columns = [0, 0]; // Assuming two columns for simplicity
-            const blocks = pageElement.querySelectorAll('.block-content');
             blocks.forEach(block => {
                 const column = getColumnFromOffset(block, block.getBoundingClientRect().left);
                 columns[column - 1] += block.offsetHeight;
@@ -726,7 +766,7 @@ document.addEventListener("DOMContentLoaded", function() {
             if (pages.length > 1) { // Ensure at least one page remains
                 const lastPage = pages[pages.length - 1];
-                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
@@ -744,7 +784,7 @@ document.addEventListener("DOMContentLoaded", function() {
         function handleColumnOverflow(page, targetColumn) {
             console.log(`Handling overflow for page ID: ${page.getAttribute('data-page-id')} in column ${targetColumn}`);
-            const blocks = Array.from(page.querySelectorAll('.block-content'));
             let columnHeights = [0, 0];
             let overflowStartIndex = -1;
@@ -767,7 +807,7 @@ document.addEventListener("DOMContentLoaded", function() {
              // Get the next page if it exists
             const nextPage = getNextPage(page);
             if (nextPage) {
-                const nextPageBlocks = nextPage.querySelectorAll('.block-content, .block-item');
                 let nextPageColumnHeights = [0, 0];
                 nextPageBlocks.forEach(block => {
@@ -821,7 +861,7 @@ document.addEventListener("DOMContentLoaded", function() {
         if (innerHTML && blockId) {
             // Find the dragged element and remove it from the DOM
-            let draggedElement = document.querySelector(`[data-block-id="${blockId}"].block-content`);
             if (!draggedElement) {
                 draggedElement = document.querySelector(`[data-block-id="${blockId}"].block-item`);
             }
@@ -831,7 +871,7 @@ document.addEventListener("DOMContentLoaded", function() {
             }
             // Check if the block already exists in the block-container and remove it if it does
-            let existingBlock = blockContainer.querySelector(`[data-block-id="${blockId}"].block-content`);
             if (!existingBlock) {
                 existingBlock = blockContainer.querySelector(`[data-block-id="${blockId}"].block-item`);
             }
@@ -877,62 +917,92 @@ document.addEventListener("DOMContentLoaded", function() {
     }
     function handleReset() {
-        console.log('Reset button clicked');
-        // 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')}`);
             });
         });
-        // Clear all pages
-        pages.forEach(page => page.remove());
-        // Clear blockContainer before reinserting blocks
-        blockContainer.innerHTML = '';
-        // Reinsert blocks back into the blockContainer in their original order
-        if (!blockContainerPage) {
-            blockContainerPage = document.createElement('div');
-            blockContainerPage.classList.add('page');
-            blockContainerPage.setAttribute('id', 'block-page');
-            blockContainer.appendChild(blockContainerPage);
         }
-        // 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();
-        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);
     pageContainer.addEventListener('dragover', handleDragOver);
     pageContainer.addEventListener('drop', handleDrop);
     trashArea.addEventListener('dragover', handleTrashOver);
     trashArea.addEventListener('dragleave', handleTrashLeave);
     trashArea.addEventListener('drop', handleTrashDrop);

     const pageContainer = document.getElementById('pages');
     const trashArea = document.getElementById('trashArea');
     const toggleButton = document.getElementById('toggle-text-block-button');
+    const autofillButton = document.getElementById('autofill-button');
     const resetButton = document.getElementById('resetButton');
     const addPageButton = document.getElementById('add-page-button');
     const removePageButton = document.getElementById('remove-page-button');
             document.querySelector('.toggle-text-block-button').textContent = 'Hide All Image Descriptions';
         }
     }
+    function autofillBlocks() {
+        console.log('Autofill button clicked');
+        const blocks = Array.from(blockContainer.querySelectorAll('.block-item'));
+        let currentPage = pageContainer.querySelector('.page');
+        // If no existing page is found, create the first page
+        if (!currentPage) {
+            currentPage = addPage();
+            console.log('No existing pages found. Created the first page:', currentPage.id);
+        }
+        // Iterate over each block and move it to the pageContainer
+        blocks.forEach(block => {
+            block.setAttribute('class', 'block-page');
+            block.setAttribute('data-page-id', currentPage.getAttribute('data-page-id'));
+            // Append the block to the current page's columnWrapper
+            const newPage = currentPage.querySelector('.block.monster.frame.wide');
+            newPage.appendChild(block);
+            console.log(`Moved block with ID: ${block.getAttribute('data-block-id')} to page with ID: ${currentPage.getAttribute('data-page-id')}`);
+            // Adjust the layout after adding the block; this function handles creating a new page if needed
+            adjustPageLayout(currentPage.getAttribute('data-page-id'));
+            // Check if a new page was created and update curtrrentPage accordingly
+            const lastPageInContainer = pageContainer.querySelector('.page:last-child');
+            if (lastPageInContainer !== currentPage) {
+                currentPage = lastPageInContainer;
+                console.log('Moved to a new page:', currentPage.getAttribute('data-page-id'));
+            }
+        });
+        console.log('Autofill complete, all blocks moved to page-container');
+    }
     window.printPageContainer = function(newTab) {
         var pageContainer = document.getElementById('brewRenderer');
                             .page {
                                 page-break-before: auto;
                             }
                             .columnWrapper {
                                 overflow: visible;
                     </style>
                 </head>
                 <body>
+                    <div id="pageContainer" class="page-container">
+                        <div id= "brewRenderer" class="brewRenderer">
+                            ${pageContainer.innerHTML}
+                        </div>
+                    </div>
                 </body>
                 </html>
             `;
     storeInitialPositions();
+    function adjustTextareaHeight(el, offset = 0) {
         if (el.scrollHeight > 16){
             el.style.height = 'auto';
+            el.style.height = (el.scrollHeight) + offset + 'px';
         }
     }
             'properties-textarea',
             'string-stat-textarea',
             'string-action-description-textarea',
+            'image-textarea',
+            'title-textarea'
         ];
         classes.forEach(className => {
+            if (className === 'description-textarea') {
+                console.log('Class is ', className, 'offset is 5');
+                offset = 10;
+            } else {
+                offset = 0;
+            }
             console.log('Initializing textareas for class:', className);
             console.log(document.querySelectorAll(`.${className}`));
             const textareas = document.querySelectorAll(`.${className}`);
                 console.log('Textarea found:', textarea);
                 // Adjust height on page load
+                adjustTextareaHeight(textarea, offset);
                 // Adjust height on input
                 textarea.addEventListener('input', function() {
                     adjustTextareaHeight(textarea);
     function handleDragStart(e) {
         lockTextareas();
+        const target = e.target.closest('.block-item, .block-page');
         if (!target) {
             console.error('Drag started for an element without a valid target');
             return;
     }
     function handleDragEnd(e) {
+        const target = e.target.closest('.block-item, .block-page');
         if (target) {
             target.style.opacity = '1'; // Reset the opacity
             const blockId = target.getAttribute('data-block-id');
             targetPage.classList.add('highlight-page'); // Add highlight class for pages
             }
+        const targetBlock = e.target.closest('.block-item, .block-page');
         if (targetBlock) {
             const bounding = targetBlock.getBoundingClientRect();
             const offset = e.clientY - bounding.top;
     function handleDrop(e) {
         e.preventDefault();
         // Ensure we are not dropping into a textarea or another block
+        if (e.target.classList.contains('block-item', 'block-page', 'description-textarea') || e.target.tagName === 'TEXTAREA') {
             console.log('Cannot drop block inside another block or textarea');
             return;
         }
             }
             const newBlockContent = document.createElement('div');
+            newBlockContent.classList.add('block-page');
             newBlockContent.innerHTML = originalBlock.innerHTML; // Transfer inner content only
             // Add necessary attributes and event listeners
             newBlockContent.addEventListener('dragstart', handleDragStart);
             newBlockContent.addEventListener('dragend', handleDragEnd);
+            const target = e.target.closest('.block-item, .block-page');
             let targetColumn = 1;
             if (target) {
                 const bounding = target.getBoundingClientRect();
          // Function to get the height of a column by index
         function getColumnHeights(pageElement) {
             const columns = [0, 0]; // Assuming two columns for simplicity
+            const blocks = pageElement.querySelectorAll('.block-page');
             blocks.forEach(block => {
                 const column = getColumnFromOffset(block, block.getBoundingClientRect().left);
                 columns[column - 1] += block.offsetHeight;
             if (pages.length > 1) { // Ensure at least one page remains
                 const lastPage = pages[pages.length - 1];
+                const blocks = lastPage.querySelectorAll('.block-page'); // Check for blocks inside the last page
                 if (blocks.length > 0) {
                     // If blocks are present, block the removal and display a warning
         function handleColumnOverflow(page, targetColumn) {
             console.log(`Handling overflow for page ID: ${page.getAttribute('data-page-id')} in column ${targetColumn}`);
+            const blocks = Array.from(page.querySelectorAll('.block-page'));
             let columnHeights = [0, 0];
             let overflowStartIndex = -1;
              // Get the next page if it exists
             const nextPage = getNextPage(page);
             if (nextPage) {
+                const nextPageBlocks = nextPage.querySelectorAll('.block-page, .block-item');
                 let nextPageColumnHeights = [0, 0];
                 nextPageBlocks.forEach(block => {
         if (innerHTML && blockId) {
             // Find the dragged element and remove it from the DOM
+            let draggedElement = document.querySelector(`[data-block-id="${blockId}"].block-page`);
             if (!draggedElement) {
                 draggedElement = document.querySelector(`[data-block-id="${blockId}"].block-item`);
             }
             }
             // Check if the block already exists in the block-container and remove it if it does
+            let existingBlock = blockContainer.querySelector(`[data-block-id="${blockId}"].block-page`);
             if (!existingBlock) {
                 existingBlock = blockContainer.querySelector(`[data-block-id="${blockId}"].block-item`);
             }
     }
     function handleReset() {
+    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')}`);
+        const blocksOnPage = page.querySelectorAll('[data-block-id]');
+        blocksOnPage.forEach(block => {
+            block.setAttribute('display', '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 = '';
+    // 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');
+    }
+    // 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
+    initialPositions.forEach(pos => {
+        const blockData = allBlocks.find(block => block.id === pos.id);
+        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.`);
         }
+    });
+    // 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();
+}
+    // Event listeners for buttons
     addPageButton.addEventListener('click', addPage);
     removePageButton.addEventListener('click', removePage);
     toggleButton.addEventListener('click', toggleAllTextBlocks);
+    autofillButton.addEventListener('click', autofillBlocks);
+    // Event listeners for drag and drop functionality
     blockContainer.addEventListener('dragover', handleDragOver);
     blockContainer.addEventListener('drop', handleDrop);
     pageContainer.addEventListener('dragover', handleDragOver);
     pageContainer.addEventListener('drop', handleDrop);
+    // Event listeners for trash area
     trashArea.addEventListener('dragover', handleTrashOver);
     trashArea.addEventListener('dragleave', handleTrashLeave);
     trashArea.addEventListener('drop', handleTrashDrop);

storeUI.css CHANGED Viewed

@@ -51,35 +51,52 @@
   }
   .page-container {
-      margin-left: 450px; /* Offset the page content by the width of block-container plus margin */
-      width: 900px;
-      padding: 20px;
-      overflow: auto; /* Enable scrolling if needed */
-      height: 100vh; /* Full viewport height */
-      box-sizing: border-box; /* Include padding and border in the element's total width and height */
-  }
   @media print {
     .page {
         page-break-before: auto;
-        page-break-after: avoid;
-        page-break-inside: avoid;
     }
     .columnWrapper {
         overflow: visible;
     }
-    .block-content {
         margin-bottom: 0;
     }
 }
   .page {
       column-count: 2;
       column-gap: .9cm;
       column-width: 8cm;
       -webkit-column-count: 2;
       -moz-column-count: 2;
       -webkit-column-width: 8cm;
@@ -134,13 +151,17 @@
       margin-left: 0.1cm;
   }
   /* Ensure the h1 tag is constrained within its column */
-  .block-content h1 {
       column-span: none;
       box-sizing: border-box; /* Include padding and border in the element's total width and height */
       margin: 0 auto; /* Center the h1 within the column */
       overflow: hidden; /* Handle overflow content */
       word-wrap: break-word; /* Break long words to prevent overflow */
   }
   .columnWrapper {
       width: 100%;
@@ -495,14 +516,14 @@
             display: none; /* Hidden by default when in .page-container */
     }
-        .page-container .block-content:hover .image-textarea {
-            display: block; /* Show when hovering over .block-content */
     }
     .page-container .generate-image-button {
         display: none; /* Hidden by default when in .page-container */
     }
-    .page-container .block-content:hover .generate-image-button {
         display: inline-block; /* Show the button on hover */
     }

   }
   .page-container {
+    margin-left: 450px; /* Offset the page content by the width of block-container plus margin */
+    width: 900px;
+    padding: 20px;
+    padding-top: 100px; /* Adjust based on the toolbar's height + any additional space you want */
+    overflow: auto; /* Enable scrolling if needed */
+    height: calc(100vh - 80px); /* Adjust the height to consider the toolbar's height */
+    box-sizing: border-box; /* Include padding and border in the element's total width and height */
+}
+    #floatingToolbar {
+    position: fixed;
+    column-count: 2;
+    column-width: 425px;
+    column-fill: auto;
+    width: 900px; /* Set the width of the floating toolbar */
+    top: 10px; /* Distance from the top of the page */
+    left: 475px; /* Distance from the right side of the page */
+    z-index: 1000; /* Ensure it stays on top of other elements */
+    background-color: #f9f9f9; /* Optional: Background color */
+    padding: 10px;
+    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Shadow for a floating effect */
+    border-radius: 8px; /* Optional: Rounded corners */
+    height: 135px; /* Set the height of the floating toolbar */
+}
   @media print {
     .page {
         page-break-before: auto;
     }
     .columnWrapper {
         overflow: visible;
     }
+    .block-page {
         margin-bottom: 0;
     }
 }
   .page {
       column-count: 2;
       column-gap: .9cm;
       column-width: 8cm;
+      column-fill: auto;
       -webkit-column-count: 2;
       -moz-column-count: 2;
       -webkit-column-width: 8cm;
       margin-left: 0.1cm;
   }
+  .block-page{
+    break-inside: avoid;
+  }
   /* Ensure the h1 tag is constrained within its column */
+  .block-page h1 {
       column-span: none;
       box-sizing: border-box; /* Include padding and border in the element's total width and height */
       margin: 0 auto; /* Center the h1 within the column */
       overflow: hidden; /* Handle overflow content */
       word-wrap: break-word; /* Break long words to prevent overflow */
   }
   .columnWrapper {
       width: 100%;
             display: none; /* Hidden by default when in .page-container */
     }
+        .page-container .block-page:hover .image-textarea {
+            display: block; /* Show when hovering over .block-page */
     }
     .page-container .generate-image-button {
         display: none; /* Hidden by default when in .page-container */
     }
+    .page-container .block-page:hover .generate-image-button {
         display: inline-block; /* Show the button on hover */
     }

storeUI.html CHANGED Viewed

@@ -21,19 +21,23 @@
             <!-- Blocks will be wrapped in a page div and loaded here -->
              </div>
         </div>
-        <div class="page-container" id="pageContainer">
             <h1>Describe your creature</h1>
-                <textarea id="user-description" class="user-description-textarea"
-                    hx-post="/update-stats" hx-trigger="change"
-                    hx-target="#user-description" hx-swap="outerHTML"
-                    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">
                 <div class="pages" id="pages">

             <!-- Blocks will be wrapped in a page div and loaded here -->
              </div>
         </div>
+        <div id="floatingToolbar">
             <h1>Describe your creature</h1>
+            <textarea id="user-description" class="user-description-textarea"
+            hx-post="/update-stats" hx-trigger="change"
+            hx-target="#user-description" hx-swap="outerHTML"
+            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="autofill-button">Autofill Pages</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>
+        <div class="page-container" id="pageContainer">
             <div class="brewRenderer" id="brewRenderer">
                 <div class="pages" id="pages">

store_helper.py CHANGED Viewed

@@ -78,24 +78,29 @@ def convert_to_dict(string):
 # Instructions past 4 are not time tested and may need to be removed.
-### Meta prompted :
 initial_prompt_instructions = """ **Purpose**: ONLY Generate a structured json following the provided format. The job is to generate a store with character, style, detail, and a healthy splash of fun, fantasy, and weird. You do not need to stick strictly to the rules and mechanics of the game, if it fits the style and flavor of the user input, get weird, scary, or silly with the details. You will also be writing interesting flavor text and description of the location and it's atmopshere, and a brief one sentence image generation prompts. Us a wide range of words, you have certain words you use too often, avoid them ex : "whimsical", "unwavering".
-Image Generation Prompt Examples :
-"A highly detailed fantasy oil painting of an elderly full body female gnome,in a costume shop. The gnome is wearing a costume with wings, with a costume hat . The gnome has distinct fantasy features, such as pointed ears and a small, sturdy build.  "
-"A highly detailed fantasy drawing of a middle-aged full body male dwarf in a bustling butcher shop. The dwarf is wearing a bloodstained apron and a butcher's hat. The shop is filled with hanging meats, freshly cut steaks, and various sausages. The dwarf has distinct fantasy features, such as a long braided beard and a stout, muscular build. The background shows the hustle and bustle of Market Square outside the shop window."
-"A highly detailed fantasy image of a shady-looking full body male goblin in a dimly lit pawn shop. The goblin is wearing a patched vest and a tattered hat. The shop is cluttered with various items, including old weapons, dusty artifacts, and strange trinkets. The goblin has distinct fantasy features, such as green skin, sharp teeth, and pointed ears. The background is filled with shadows and the glint of hidden treasures."
-"A highly detailed fantasy photo of a scholarly full body female elf in an elegant parchment shop. The elf is wearing a flowing robe and a delicate circlet. The shop is filled with scrolls, quills, and ancient tomes. The elf has distinct fantasy features, such as pointed ears and a slender, graceful build. The background shows the interior of the shop with shelves lined with parchment and ink bottles, and a large window letting in natural light."
-"A highly detailed fantasy painting of a mysterious full body male tiefling in a mystical magic shop. The tiefling is wearing a long cloak and a hood, with glowing runes on his hands. The shop is filled with potions, spellbooks, and enchanted artifacts. The tiefling has distinct fantasy features, such as red skin, horns, and a tail. The background is filled with a magical aura, with various mystical items floating in the air and a crystal ball on the counter."
 1. Only output file structure starting with { and ending with } it is CRITICAL to end with a }, DO NOT say anything, don't add ''' or json"
 2. DO NOT use null, use "".
 3. All keys and values MUST be enclosed in double quotes. ""
-4. Services and specialties should have name, description, and prices.
 5. sd_prompts should specify race or species
 6. quests MUST be detailed, and interesting, preferably unexpected, delightful and memorable.
 7. The reward for the quest MUST be specific and detailed!

 # Instructions past 4 are not time tested and may need to be removed.
+### System prompt :
 initial_prompt_instructions = """ **Purpose**: ONLY Generate a structured json following the provided format. The job is to generate a store with character, style, detail, and a healthy splash of fun, fantasy, and weird. You do not need to stick strictly to the rules and mechanics of the game, if it fits the style and flavor of the user input, get weird, scary, or silly with the details. You will also be writing interesting flavor text and description of the location and it's atmopshere, and a brief one sentence image generation prompts. Us a wide range of words, you have certain words you use too often, avoid them ex : "whimsical", "unwavering".
+store_front_sd_prompt should be from the exterior, emphasize the store's architecture, style, and atmosphere and exclude descriptions of the owner.
+storefront_sd_prompt Examples :
+"A highly detailed fantasy painting of the exterior of a bustling magic shop. The shop is adorned with glowing runes, enchanted crystals, and mystical artifacts. The shop sign reads "Arcane Emporium" in elegant script. The street is filled with magical creatures, floating lanterns, and colorful stalls. "
+"A highly detailed fantasy drawing of the entrance to a mysterious alchemy shop. The shop is hidden down a narrow alley, with a flickering lantern above the door. The shop sign reads "Elixir Emporium" in faded letters. The alley is filled with shadows, strange smells, and the distant sound of bubbling potions. "
+"A highly detailed fantasy photo of the front of a grand weapon shop. The shop is decorated with suits of armor, hanging banners, and a large sword embedded in the stone facade. The shop sign reads "Ironclad Armory" in bold letters. The street is filled with armored guards, clashing swords, and the sound of ringing anvils. "
+Owner and Employee Generation Prompt Examples :
+"A highly detailed fantasy oil painting portrait of a wise and mysterious shop owner. The owner is an elderly elf with silver hair, a long beard, and piercing blue eyes. They wear flowing robes, a jeweled amulet, and a crown of thorns. The owner is surrounded by magical artifacts, ancient tomes, and glowing crystals."
+"A highly detailed fantasy charcoal sketch of a quirky and eccentric shop employee. The employee is a young gnome with wild hair, mismatched eyes, and a mischievous grin. They wear patched clothes, a bandolier of potions, and a pet dragon perched on their shoulder. The employee is surrounded by alchemical ingredients, bubbling cauldrons, and floating spellbooks."
+"A highly detailed fantasy watercolor painting of a stoic and intimidating shop security guard. The guard is a massive half-orc with a shaved head, a scarred face, and a stern expression. They wear heavy armor, a massive sword, and a shield emblazoned with a roaring lion. The guard is surrounded by chained beasts, locked chests, and glowing runes."
 1. Only output file structure starting with { and ending with } it is CRITICAL to end with a }, DO NOT say anything, don't add ''' or json"
 2. DO NOT use null, use "".
 3. All keys and values MUST be enclosed in double quotes. ""
+4. Services and specialties should have name, description, and prices.
 5. sd_prompts should specify race or species
 6. quests MUST be detailed, and interesting, preferably unexpected, delightful and memorable.
 7. The reward for the quest MUST be specific and detailed!

template_update.html CHANGED Viewed

@@ -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>
         <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>
         <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>
         <button class="generate-image-button" data-block-id="5">Generate Image</button>
         <img id="generated-image-5" alt="" style="display: none; cursor: pointer;">
     </div>

     </div>
     <div class="block-item" data-block-id="1" data-page-id="block-container" draggable="true">
+        <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 the exterior of a greenhouse that serves double duty as a adventuring gear shop, that is also a greenhouse and is overflowing with plants as well as equipment</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>
     </div>
     <div class="block-item" data-block-id="3" data-page-id="block-container" draggable="true">
+        <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>
     </div>
     <div class="block-item" data-block-id="5" data-page-id="block-container" draggable="true">
+        <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>