Fixing merge conflicts

.dockerignore

@@ -0,0 +1,30 @@
+# Ignore Python bytecode files
+*.pyc
+__pycache__/
+
+# Ignore the Dockerfile and .dockerignore themselves (optional)
+Dockerfile
+.dockerignore
+
+# Ignore the environment file
+.env
+
+# Ignore test files
+Ebony, the Twisted Fairy_files
+galleries
+output
+app copy.py
+block_builder copy.py
+example_templates.py
+morogors_meaty_inventory.py
+morgors_meaty_marvels.py
+old app.py
+process_text.py
+README.md
+sd_generator copy.py
+sd_generator copy 2.py
+store_json_example.py
+storeUI copy.html
+template.html
+template.py
+utilites.py

.gitignore

@@ -0,0 +1,5 @@
+# Python Cache
+__pycache__/
+
+# Environment variables 
+.env

Dockerfile

@@ -0,0 +1,31 @@
+# Use an official Python runtime as a parent image
+FROM python:3.10-slim
+
+# Set up a new user named "user" with user ID 1000
+RUN useradd -m -u 1000 user
+
+# Switch to the "user" user
+USER user
+
+# Set home to the user's home directory
+ENV HOME=/home/user \
+	PATH=/home/user/.local/bin:$PATH
+
+# Set the working directory in the container
+WORKDIR $HOME/app
+
+# Copy the current directory contents into the container at $HOME/app setting the owner to the user
+COPY --chown=user . $HOME/app
+
+# Install any necessary dependencies specified in requirements.txt
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Expose port 5000 for the Flask app
+EXPOSE 7860
+
+# Define environment variable to ensure Flask runs the correct application
+ENV FLASK_APP=app.py
+ENV FLASK_ENV=production  
+
+# Command to run the Flask app
+CMD ["flask", "run", "--host=0.0.0.0", "--port=7860"]

README.md

@@ -1,10 +1,28 @@
+---
+title: Drakosfires Dungeons and Dragons Store Generator
+emoji: 🏪
+colorFrom: yellow
+colorTo: purple
+sdk: docker
+app_port: 7860
+---
+
 #Store Generator
 ## Another DnD Tool from Drakosfire
 
 This is a work in progress. I got about 80% of the way to rendering the the Chat GPT 4o generated store into a static html format. 
 When a friend suggested a different format choice. 3 weeks later I'm writing JavaScript because I've decided what I want is a drag and drop DnD Page formatting tool. 
 I've got the core functionality built in and am expanding blocks.
-Next will be finishing the core block structure based off of The_Mirage_Emporium.html as the static iteration. 
+Currently pages are pretty janky and am working to fix.
+Need more user feedback, loading bars. 
+
+Future additions :
+Gif of talking head for store keeper. 
+Use a generated script for rolepplay interaction. 
+Voiced output.
+Whisper sync to handle user voice input. 
+
+
 
 All css in /dependencies comes from the incredible folk at https://github.com/naturalcrit/homebrewery/ as does the original formatting and a whole lot of inspiration. 
 

app.py

@@ -1,11 +1,9 @@
 # this imports the code from files and modules
-from flask import Flask, request, jsonify
+from flask import Flask, request, jsonify, send_from_directory
 from flask_cors import CORS 
-import utilities as u
 import os
 import ctypes
 import store_helper as sh
-import process_text
 import block_builder
 import sd_generator as sd
 
@@ -15,14 +13,26 @@ M_MMAP_THRESHOLD = -3
 
 # Set malloc mmap threshold.
 libc.mallopt(M_MMAP_THRESHOLD, 2**20)
-# Ensure the directory exists
-
-
 
 # Initialize the Flask application
 app = Flask(__name__)
 os.makedirs('static/images', exist_ok=True)
 
+# Serve files from the 'dependencies' directory
+@app.route('/dependencies/<path:filename>')
+def custom_static(filename):
+    return send_from_directory('dependencies', filename)
+
+# Serve HTML files from the main directory
+@app.route('/<path:filename>')
+def serve_html(filename):
+    return send_from_directory('.', filename)
+
+# Default route for index
+@app.route('/')
+def index():
+    return send_from_directory('.', 'storeUI.html')  # Make sure this points to your main HTML file
+
 CORS(app)# Route to handle the incoming POST request with user description
 
 @app.route('/process-description', methods=['POST'])
@@ -57,5 +67,5 @@ def generate_image():
     except Exception as e:
         return jsonify({'error': str(e)}), 500
 
-if __name__ == '__main__':
-    app.run(debug=True)
+if __name__ == "__main__":
+    app.run(host="0.0.0.0", port=7860)

block_builder.py

@@ -1,8 +1,3 @@
-import re, fileinput, sys
-import utilities as u
-import os
-import ast
-
 # block_id is a global variable that is used to keep track of the current block id
 block_id = 0
 

requirements.txt

@@ -0,0 +1,4 @@
+flask
+flask-cors
+fal_client
+openai

scripts.js

@@ -0,0 +1,899 @@
+// Waits for DOM content to be fully loaded and assigns critical elements to variables.
+let initialPositions = [];
+document.addEventListener("DOMContentLoaded", function() {
+    const blockContainer = document.getElementById('blockContainer');
+    let blockContainerPage = document.getElementById('block-page');
+    const pageContainer = document.getElementById('pages');
+    const trashArea = document.getElementById('trashArea');
+    const resetButton = document.getElementById('resetButton');
+    let currentPage = pageContainer.querySelector('.block.monster.frame.wide');
+    const modal = document.getElementById('imageModal');
+    const modalImg = document.getElementById('modalImage');
+    const captionText = document.getElementById('caption');
+    const closeModal = document.getElementsByClassName('close')[0];
+    const MAX_COLUMN_HEIGHT = 847; 
+
+    if (!blockContainer || !pageContainer || !trashArea || !currentPage) {
+        console.error('Required elements are null');
+        return;
+    }
+    if (!modal) {
+        console.error('modal element not found');
+        return;
+    }
+    if (!modalImg) {
+        console.error('modalImg element not found');
+        return;
+    }
+    if (!captionText) {
+        console.error('captionText element not found');
+        return;
+    }
+    if (!closeModal) {
+        console.error('closeModal element not found');
+        return;
+    }
+    
+    // Event delegation for image clicks
+    blockContainer.addEventListener('click', function(event) {
+        console.log('Click detected in blockContainer:', event.target);
+        if (event.target.tagName === 'IMG' && event.target.id.startsWith('generated-image-')) {
+            console.log('Image clicked for modal display. Image ID:', event.target.id);
+            modal.style.display = 'block';
+            modalImg.src = event.target.src;
+            captionText.innerHTML = event.target.alt;
+        } else {
+            console.log('Clicked element is not an image or does not match ID pattern.');
+        }
+    });
+
+    // Function to close the modal
+    closeModal.onclick = function() {
+        modal.style.display = "none";
+    }
+
+    // Function to close the modal when clicking outside of the modal content
+    window.onclick = function(event) {
+        if (event.target == modal) {
+            modal.style.display = "none";
+        }
+    }
+
+    document.getElementById('submitDescription').addEventListener('click', function() {
+    const userInput = document.getElementById('user-description').value;
+    // Clear the block container before inserting new blocks
+    blockContainerPage.innerHTML = '';
+    // document.getElementById('add-page-button').addEventListener('click', addPage);
+    // document.getElementById('remove-page-button').addEventListener('click', removePage);
+
+    fetch('http://127.0.0.1:5000/process-description', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ user_input: userInput })
+    })
+    .then(response => response.json())
+    .then(data => {
+        console.log('Success:', data);
+        initialPositions.length = 0; // Clear the initialPositions array
+        insertHtmlBlocks(data.html_blocks);
+        const blocks = blockContainerPage.querySelectorAll('.block-item');
+        blocks.forEach(block => {
+            block.setAttribute('data-page-id', 'block-container');
+            block.setAttribute('draggable', true);
+            block.addEventListener('dragstart', handleDragStart);
+            block.addEventListener('dragend', handleDragEnd);
+        });
+        storeInitialPositions();
+    })
+    .catch((error) => {
+        console.error('Error:', error);
+    });
+    });
+
+    window.printPageContainer = function() {
+        var pageContainer = document.getElementById('brewRenderer');
+        if (pageContainer) {
+            var printWindow = window.open('', 'Print Preview', 'height=800,width=600');
+            // if (!printWindow) {
+            //     console.error('Failed to open print window.');
+            //     return;
+            // }
+
+            console.log('Page container content:', pageContainer.innerHTML);  // Debugging line
+            
+            printWindow.document.write(`
+                <!DOCTYPE html>
+                <html lang="en">
+                <head>
+                    <meta charset="UTF-8">
+                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+                    <link href="./dependencies/all.css" rel="stylesheet">
+                    <link href="./dependencies/css.css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css">
+                    <link href="./dependencies/bundle.css" rel="stylesheet">
+                    <link href="./dependencies/style.css" rel="stylesheet">
+                    <link href="./dependencies/5ePHBstyle.css" rel="stylesheet">
+                    <link href="./storeUI.css" rel="stylesheet">  
+                    <title>Print Preview - DnD Stat Block</title>
+                    <link rel="stylesheet" href="styles.css">
+                    <style>
+                        @media print {
+                            
+                            .page {
+                                page-break-before: auto;
+                                page-break-after: avoid;
+                                page-break-inside: avoid;
+                                
+                            }
+                            .columnWrapper {
+                                overflow: visible;
+                            }
+                            
+                        }
+                    </style>
+                </head>
+                <body>
+                    ${pageContainer.innerHTML}
+                </body>
+                </html>
+            `);
+    
+            // Wait for the content to be fully loaded before printing
+        printWindow.onload = function() {
+        printWindow.print();
+        printWindow.close(); // Close the print window after printing
+            };
+        } else {
+            console.error('Element with ID "pages" not found.');
+        }
+    };
+
+
+    // Store initial positions of the blocks
+    function storeInitialPositions() {
+        const blocks = blockContainer.querySelectorAll('.block-item');
+        blocks.forEach((block, index) => {
+            const blockId = block.getAttribute('data-block-id');
+            if (!blockId) {
+                console.error(`Block at index ${index} is missing data-block-id`);
+            }
+            initialPositions.push({
+                id: blockId,
+                index: index
+            });
+        });
+        console.log('Initial positions:', initialPositions);
+    }
+
+    function sortBlocksById() {
+        // Select all blocks inside the block-container
+        const blocks = Array.from(blockContainerPage.querySelectorAll('.block-item'));
+        console.log('Blocks in blockContainerPage:', blocks);
+    
+        // Sort the blocks based on their block-id attribute
+        blocks.sort((a, b) => {
+            const idA = parseInt(a.getAttribute('data-block-id'), 10);
+            const idB = parseInt(b.getAttribute('data-block-id'), 10);
+            return idA - idB; // Ascending order
+        });
+    
+        // Clear the block-container before re-appending the sorted blocks
+        blockContainerPage.innerHTML = '';
+    
+        // Re-append the blocks in the sorted order
+        blocks.forEach(block => blockContainerPage.appendChild(block));
+    
+        console.log('Blocks have been sorted and re-appended based on block-id');
+    }
+
+    function reinsertBlock(blockContainerPage, blockId, innerHTML) {
+        const originalPosition = initialPositions.find(pos => pos.id === blockId);
+        console.log('Original position:', originalPosition);
+    
+        if (originalPosition) {
+            const blocks = blockContainerPage.querySelectorAll('.block-item');
+            console.log('Blocks in blockContainerPage:', blocks);
+    
+            // Adding debugging output for index details
+            console.log(`Attempting to insert block with ID: ${blockId} at original index: ${originalPosition.index}`);
+    
+            const newBlock = document.createElement('div');
+            newBlock.classList.add('block-item');
+            newBlock.setAttribute('data-block-id', blockId);
+            newBlock.setAttribute('data-page-id', 'block-container');
+            newBlock.innerHTML = innerHTML;
+            newBlock.setAttribute('draggable', true);
+            newBlock.addEventListener('dragstart', handleDragStart);
+            newBlock.addEventListener('dragend', handleDragEnd);
+    
+            if (originalPosition.index < blocks.length) {
+                const referenceNode = blocks[originalPosition.index];
+    
+                // Debugging output to ensure the correct reference node is identified
+                console.log(`Reference node index: ${originalPosition.index}, Node:`, referenceNode);
+    
+                if (referenceNode && referenceNode.parentNode === blockContainerPage) {
+                    console.log(`Inserting before block at index: ${originalPosition.index}`);
+                    blockContainerPage.insertBefore(newBlock, referenceNode);
+                } else {
+                    console.warn('Reference node does not belong to blockContainerPage, appending to the end');
+                    blockContainerPage.appendChild(newBlock);
+                }
+            } else {
+                console.log('Original index exceeds current blocks, appending block to the end');
+                blockContainerPage.appendChild(newBlock);
+            }
+        } else {
+            console.warn('Original position not found, appending block to the end of blockContainerPage');
+            const newBlock = document.createElement('div');
+            newBlock.classList.add('block-item');
+            newBlock.setAttribute('data-block-id', blockId);
+            newBlock.setAttribute('data-page-id', 'block-container');
+            newBlock.innerHTML = innerHTML;
+            newBlock.setAttribute('draggable', true);
+            newBlock.addEventListener('dragstart', handleDragStart);
+            newBlock.addEventListener('dragend', handleDragEnd);
+    
+            blockContainerPage.appendChild(newBlock);
+        }
+    
+        console.log(`Restored block with ID: ${blockId}`);
+    }
+    
+    function insertHtmlBlocks(blocks) {
+        console.log('blockContainerPage = ', blockContainerPage)
+        console.log('List of blocks:', blocks);
+        const parser = new DOMParser();
+        
+        blocks.forEach(blockHtml => {
+            console.log('Original blockHtml:', blockHtml);
+            // Parse the HTML string
+            const doc = parser.parseFromString(blockHtml, 'text/html');
+            const block = doc.body.firstChild;
+            if (block) {
+                blockContainerPage.appendChild(block); // Append the parsed block to the container
+                console.log('Appended block:', block);
+            }
+        });
+        // console.log('Final state of blockContainer:', blockContainer.innerHTML);
+        initializeTextareaResizing();
+    }
+
+    storeInitialPositions();
+
+    function adjustTextareaHeight(el) {
+        if (el.scrollHeight > 16){
+            el.style.height = 'auto';
+            el.style.height = (el.scrollHeight) + 'px';
+        }
+    }
+
+    function initializeTextareaResizing() {
+        const classes = [
+            'description-textarea',
+            'user-description-textarea',
+            'heading-textarea',
+            'properties-textarea',
+            'string-stat-textarea',
+            'string-action-description-textarea',
+        ];
+
+        classes.forEach(className => {
+            const textareas = document.querySelectorAll(`.${className}`);
+            textareas.forEach(textarea => {                                            
+            
+                // Adjust height on page load
+                adjustTextareaHeight(textarea);
+                // Adjust height on input
+                textarea.addEventListener('input', function() {
+                    adjustTextareaHeight(textarea);
+                    console.log('Input event triggered for:', textarea.id); // Debugging line
+                });
+            });
+        });
+    }
+
+    // Initial run on page load
+    initializeTextareaResizing();
+
+    async function extractBlocks() {
+        try {
+            if (blockContainerPage.children.length > 0) {
+                console.log('Blocks already loaded, skipping fetch');
+                return;
+            }
+            
+            const response = await fetch('template_update.html');
+            if (!response.ok) {
+                throw new Error('Network response was not ok ' + response.statusText);
+            }
+            
+            const text = await response.text();
+            const parser = new DOMParser();
+            const doc = parser.parseFromString(text, 'text/html');
+            
+            // Selecting all elements with the 'block-item' class
+            const blocks = doc.querySelectorAll('.block-item');
+            
+            blocks.forEach((block, index) => {
+                const blockContent = block.innerHTML;
+                const blockItem = document.createElement('div');
+                blockItem.classList.add('block-item');
+                blockItem.innerHTML = blockContent;
+                
+                // Assigning unique block ID
+                const blockId = `block-${index}`;
+                blockItem.setAttribute('data-block-id', blockId);
+                
+                // Setting the page ID and other attributes
+                const pageId = 'block-container';
+                blockItem.setAttribute('data-page-id', pageId);
+                blockItem.setAttribute('draggable', true);
+                
+                // Add event listeners for drag and drop functionality
+                blockItem.addEventListener('dragstart', handleDragStart);
+                blockItem.addEventListener('dragend', handleDragEnd);
+                
+                console.log(`Loaded block with ID: ${blockId}`);
+                
+                // Append block to the container
+                blockContainerPage.appendChild(blockItem);
+            });
+            
+            // Store the initial positions of the blocks (if needed for drag and drop)
+            storeInitialPositions();
+            
+        } catch (error) {
+            console.error('Error fetching and parsing template_update.html:', error);
+        }
+    }
+    
+
+     blockContainer.addEventListener('click', function(event) {
+        if (event.target && event.target.classList.contains('generate-image-button')) {
+            const blockId = event.target.getAttribute('data-block-id');
+            generateImage(blockId);
+        }
+        });
+
+    // Function to generate image
+    function generateImage(blockId) {
+        const sdPromptElement = document.getElementById(`user-storefront-prompt-${blockId}`);
+        const imageElement = document.getElementById(`generated-image-${blockId}`);
+        
+        if (!sdPromptElement) {
+            console.error('Element with ID user-storefront-prompt not found');
+            return;
+        }
+
+        if (!imageElement) {
+            console.error('Element with ID generated-image not found');
+            return;
+        }
+
+        const sdPrompt = sdPromptElement.value;
+
+        fetch('/generate-image', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ sd_prompt: sdPrompt })
+        })
+        .then(response => response.json())
+        .then(data => {
+            console.log('Received data:', data);
+            imageElement.src = data.image_url;
+            imageElement.style.display = 'block';
+
+            // Log the image element's HTML structure
+            console.log('Updated imageElement HTML:', imageElement.outerHTML);
+        })
+        .catch((error) => {
+            console.error('Error:', error);
+        });
+            }
+
+    function lockTextareas() {
+        const textareas = document.querySelectorAll('textarea');
+        
+        textareas.forEach(textarea => {
+            textarea.setAttribute('disabled', true);
+        });
+        
+        const descriptionTextareas = document.querySelectorAll('.description-textarea');
+        
+        descriptionTextareas.forEach(descriptionTextarea => {
+            descriptionTextarea.removeAttribute('contenteditable');
+        });
+        
+        console.log('All textareas have been locked.');
+    }
+
+    function unlockTextareas() {
+        const textareas = document.querySelectorAll('textarea');
+        
+        textareas.forEach(textarea => {
+            textarea.removeAttribute('disabled');
+        });
+        
+        const descriptionTextareas = document.querySelectorAll('.description-textarea');
+        
+        descriptionTextareas.forEach(descriptionTextarea => {
+            descriptionTextarea.setAttribute('contenteditable', 'true');
+        });
+        
+        console.log('All textareas have been unlocked.');
+    }
+    
+    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;
+        }
+        const blockId = target.getAttribute('data-block-id');
+        const pageId = target.getAttribute('data-page-id');
+        if (!blockId) {
+            console.error('Drag started for an element without a data-block-id');
+            return;
+        }
+        if (!pageId) {
+            console.error('Drag started for an element without a data-page-id');
+            return;
+        }
+        
+        // Store the block ID and inner HTML in the data transfer object
+        const innerHTML = target.innerHTML;
+        e.dataTransfer.setData('block-id', blockId);
+        e.dataTransfer.setData('text/plain', innerHTML); // Store inner HTML
+        e.dataTransfer.setData('data-page-id', pageId); // Store original page ID
+        e.dataTransfer.effectAllowed = 'move';
+        target.style.opacity = '0.4';
+
+        // Create an invisible drag image
+        const dragImage = document.createElement('div');
+        dragImage.style.width = '1px';
+        dragImage.style.height = '1px';
+        dragImage.style.opacity = '0';
+        document.body.appendChild(dragImage);
+        e.dataTransfer.setDragImage(dragImage, 0, 0);
+
+        console.log(`Drag started for block ID: ${blockId} page ID: ${pageId}`);
+    }
+
+    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');
+            console.log(`Drag ended for block ID: ${blockId}`);
+        }
+
+        // Remove highlight classes from pages and blocks
+        document.querySelectorAll('.highlight-page').forEach(el => el.classList.remove('highlight-page'));
+        document.querySelectorAll('.highlight-block').forEach(el => el.classList.remove('highlight-block'));
+        document.querySelectorAll('.highlight-block-top').forEach(el => el.classList.remove('highlight-block-top'));
+        unlockTextareas()
+
+    }
+
+    function handleDragOver(e) {
+        e.preventDefault();
+        // Get the element currently under the cursor
+        const elementUnderCursor = document.elementFromPoint(e.clientX, e.clientY);
+
+        if (elementUnderCursor) {
+            // Check if the element is a block or textarea
+            if (elementUnderCursor.classList.contains('block-item')) {
+                console.log('Dragging over a block-item:', elementUnderCursor);
+                console.log('Block ID:', elementUnderCursor.getAttribute('data-block-id'));
+            } else if (elementUnderCursor.tagName === 'TEXTAREA') {
+                console.log('Dragging over a textarea:', elementUnderCursor);
+            } else {
+                // Log other elements if needed
+                console.log('Dragging over another element:', elementUnderCursor.tagName);
+            }
+        }  
+         // Check if the drop target is a TEXTAREA or any other non-droppable area
+        if (e.target.tagName === 'TEXTAREA' || e.target.closest('.block-item')) {
+            e.dataTransfer.dropEffect = 'none'; // Indicate that drop is not allowed
+            return;
+        }
+        e.dataTransfer.dropEffect = 'move'; // Indicate that drop is allowed
+
+        const targetPage = e.target.closest('.page');
+        if (targetPage) {
+            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;
+            if (offset > bounding.height / 2) {
+                targetBlock.classList.add('highlight-block');
+                targetBlock.classList.remove('highlight-block-top');
+            } else {
+                targetBlock.classList.add('highlight-block-top');
+                targetBlock.classList.remove('highlight-block');
+            }
+        }
+    }
+  
+    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;
+        }
+        const blockId = e.dataTransfer.getData('block-id');
+        const originalPageId = e.dataTransfer.getData('data-page-id');
+        const innerHTML = e.dataTransfer.getData('text/plain');
+        console.log(`Drop event for block ID: ${blockId} from page ID: ${originalPageId}`);
+        
+        if (blockId && originalPageId) {
+            const originalBlock = document.querySelector(`[data-block-id="${blockId}"]`);
+            const newPage = e.target.closest('.page');
+            console.log(`Over page ${newPage} from page ID: ${originalPageId}`);
+            const newPageId = newPage.getAttribute('data-page-id');
+            
+            // Ensure the original block exists before proceeding
+            if (!originalBlock || !newPage) {
+                console.error(`Block with ID ${blockId} on page ${originalPageId} not found`);
+                
+                return;
+            }
+
+            const newBlockContent = document.createElement('div');
+            newBlockContent.classList.add('block-content');
+            newBlockContent.innerHTML = originalBlock.innerHTML; // Transfer inner content only
+
+            // Add necessary attributes and event listeners
+            newBlockContent.setAttribute('data-block-id', blockId);
+            newBlockContent.setAttribute('data-page-id', newPageId);
+            console.log('newPageID:', newPageId);
+            newBlockContent.setAttribute('draggable', true);
+            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();
+                const offset = e.clientY - bounding.top;
+
+                console.log('Drop target found:', target);
+                console.log('Bounding rectangle:', bounding);
+                console.log('Offset from top:', offset);
+                console.log('Target height:', bounding.height);
+                console.log('Insert before or after decision point (height / 2):', bounding.height / 2);
+
+                targetColumn = getColumnFromOffset(target, offset);
+                if (offset > bounding.height / 2) {
+                    console.log('Inserting after the target');
+                    target.parentNode.insertBefore(newBlockContent, target.nextSibling);
+                   
+                } else {
+                    console.log('Inserting before the target');
+                    target.parentNode.insertBefore(newBlockContent, target);
+                    
+                }
+
+                // Remove highlight borders
+                target.style['border-bottom'] = '';
+                target.style['border-top'] = '';
+            } else {
+                console.log('No valid drop target found, appending to the end');
+                newPage.querySelector('.block.monster.frame.wide').appendChild(newBlockContent);
+                
+            }
+
+            // Remove the original block from the original container
+            originalBlock.parentNode.removeChild(originalBlock);
+
+            // Reset opacity of dragged element
+            newBlockContent.style.opacity = '1';
+            console.log(`Moved existing block with ID: ${blockId} to page ID: ${newPageId}`);
+            initializeTextareaResizing();
+            // Adjust layouts
+            if (originalPageId !== 'block-container') {
+                adjustPageLayout(originalPageId);
+            }
+            adjustPageLayout(newPageId, targetColumn);
+            } else {
+            console.log('No data transferred');
+        }
+        
+    }
+                    
+        function getColumnFromOffset(block, offset) {
+            const page = block.closest('.page');
+            if (!page) return 1;
+            const columnWrapper = page.querySelector('.columnWrapper');
+            const columnWrapperRect = columnWrapper.getBoundingClientRect();
+            const relativeOffset = offset - columnWrapperRect.left; // Calculate the offset relative to the column wrapper
+            const columnWidth = columnWrapper.clientWidth / 2; // Assuming two columns
+
+            // Log details for debugging
+            console.log('Block offset:', offset);
+            console.log('Relative offset:', relativeOffset);
+            
+            const columnNumber = Math.ceil(relativeOffset / columnWidth);
+
+            // Ensure the column number is within valid bounds (1 or 2)
+            const validColumnNumber = Math.min(Math.max(columnNumber, 1), 2);
+
+            
+            return validColumnNumber;
+        }
+
+
+         // 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;
+            });
+            return columns;
+        }
+        
+        function adjustPageLayout(pageId) {
+            const page = document.querySelector(`[data-page-id="${pageId}"]`);
+            if (!page) {
+                console.error(`Page with ID ${pageId} not found`);
+                return;
+            }
+
+            const columnHeights = getColumnHeights(page);
+            console.log(`Total height of columns in ${pageId}: ${columnHeights}`);
+
+            for (let i = 0; i < columnHeights.length; i++) {
+                if (columnHeights[i] > MAX_COLUMN_HEIGHT) {
+                    console.log(`Column ${i + 1} in ${pageId} exceeds max height, total height: ${columnHeights[i]}px`);
+                    handleColumnOverflow(page, i + 1);
+                }
+            }
+        }
+
+        let pageCounter = 1;
+        // Function to create new page
+        function addPage() {
+            const newPage = document.createElement('div');
+            newPage.classList.add('page');
+            newPage.setAttribute('data-page-id', `page-${pageCounter}`);
+            newPage.id = `page-${pageCounter}`;
+                            
+            const columnWrapper = document.createElement('div');
+            columnWrapper.classList.add('columnWrapper');
+
+            const newMonsterFrame = document.createElement('div');
+            newMonsterFrame.classList.add('block', 'monster', 'frame', 'wide');
+
+            columnWrapper.appendChild(newMonsterFrame);
+            newPage.appendChild(columnWrapper);
+            pageContainer.appendChild(newPage);
+
+            currentPage = newMonsterFrame;
+            console.log(`Created new page with ID: ${newPage.id}`);
+
+            // Add event listeners to the new currentPage
+            currentPage.addEventListener('dragover', handleDragOver);
+            currentPage.addEventListener('drop', handleDrop);
+
+            pageCounter++;
+            return newPage;
+        }
+
+        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}`);
+            } else {
+                console.log('Cannot remove the last page.');
+            }
+        }
+
+        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;
+
+            // Find the start index where overflow begins in the target column
+            blocks.forEach((block, index) => {
+                const column = getColumnFromOffset(block, block.getBoundingClientRect().left);
+                columnHeights[column - 1] += block.offsetHeight;
+                if (column === 2 && columnHeights[1] > MAX_COLUMN_HEIGHT && overflowStartIndex === -1) {
+                    overflowStartIndex = index;
+                }
+            });
+
+            // If no overflow, return early
+            if (overflowStartIndex === -1) {
+                return;
+            }
+            const overflowBlocks = blocks.slice(overflowStartIndex);
+            const overflowHeight = overflowBlocks.reduce((acc, block) => acc + block.offsetHeight, 0);
+
+             // 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 => {
+                    const column = getColumnFromOffset(block, block.getBoundingClientRect().left);
+                    nextPageColumnHeights[column - 1] += block.offsetHeight;
+                });
+
+                // Check if there's enough space in the target column of the next page
+                if (nextPageColumnHeights[targetColumn - 1] + overflowHeight <= MAX_COLUMN_HEIGHT) {
+                    const nextPageContainer = nextPage.querySelector('.block.monster.frame.wide');
+                    overflowBlocks.forEach(block => {
+                        nextPageContainer.appendChild(block);
+                        block.setAttribute('data-page-id', nextPage.getAttribute('data-page-id'));
+                    });
+                    return;
+                }
+            }
+
+            // Otherwise, create a new page and move the overflowing blocks there
+            const newPage = addPage();
+            if (!newPage) {
+                console.error('Failed to create a new page');
+                return;
+            }
+            const newMonsterFrame = newPage.querySelector('.block.monster.frame.wide');
+            if (!newMonsterFrame) {
+                console.error('New monster frame not found in the new page');
+                return;
+            }
+            
+            overflowBlocks.forEach(block => {
+                newMonsterFrame.appendChild(block);
+                block.setAttribute('data-page-id', newPage.getAttribute('data-page-id'));
+            });
+            console.log(`Moved overflowing blocks to new page with ID: ${newPage.getAttribute('data-page-id')}`);
+        }
+
+    // Utility function to get the next page element
+    function getNextPage(currentPage) {
+        const nextPageId = parseInt(currentPage.getAttribute('data-page-id').split('-')[1]) + 1;
+        return document.querySelector(`[data-page-id="page-${nextPageId}"]`);
+    }
+
+    // Handle the drop event on the trash area
+    function handleTrashDrop(e) {
+        e.preventDefault();
+        const innerHTML = e.dataTransfer.getData('text/plain');
+        const blockId = e.dataTransfer.getData('block-id');
+        console.log('Trash Drop event:', e);
+        console.log('Dragged block ID to trash:', blockId);
+
+        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`);
+            }
+            if (draggedElement && draggedElement.parentElement) {
+                draggedElement.parentElement.removeChild(draggedElement);
+                console.log(`Removed block with ID: ${blockId} from the page`);
+            }
+
+            // 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`);
+            }
+            if (existingBlock && existingBlock.parentElement) {
+                existingBlock.parentElement.removeChild(existingBlock);
+                console.log(`Removed duplicate block with ID: ${blockId} from block-container`);
+            }
+
+            // Ensure the block is appended to the page wrapper inside blockContainer
+            let blockContainerPage = blockContainer.querySelector('.page');
+            if (!blockContainerPage) {
+                blockContainerPage = document.createElement('div');
+                blockContainerPage.classList.add('page');
+                blockContainerPage.setAttribute('data-page-id', 'block-container');
+                blockContainer.appendChild(blockContainerPage);
+            }
+
+            // Reinsert the block using the refactored function
+        reinsertBlock(blockContainerPage, blockId, innerHTML);
+        sortBlocksById();
+            } else {
+                console.log('No data transferred');
+            }
+        // Remove the "over" class and reset the background image
+        trashArea.classList.remove('over');
+        trashArea.style.backgroundImage = "url('./closed-mimic-trashcan.png')";
+        
+        initializeTextareaResizing();
+    }
+
+    function handleTrashOver(e) {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'move';
+        trashArea.classList.add('over');
+        trashArea.style.backgroundImage = "url('./mimic_trashcan.png')";
+        console.log('Trash over event');
+    }
+
+    function handleTrashLeave(e) {
+        trashArea.classList.remove('over');
+        trashArea.style.backgroundImage = "url('./closed-mimic-trashcan.png')";
+        console.log('Trash leave event');
+    }
+
+    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();
+    }
+   
+
+    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);
+    resetButton.addEventListener('click', handleReset);
+    extractBlocks();
+});

storeUI.css

@@ -0,0 +1,537 @@
+:root {
+    --HB_Color_Background: #EEE5CE;
+    --HB_Color_Accent: #E0E5C1;
+    --HB_Color_HeaderUnderline: #C0AD6A;
+    --HB_Color_HorizontalRule: #9C2B1B;
+    --HB_Color_HeaderText: #58180D;
+    --HB_Color_MonsterStatBackground: #F2E5B5;
+    --HB_Color_CaptionText: #766649;
+    --HB_Color_WatercolorStain: #BBAD82;
+    --HB_Color_Footnotes: #C9AD6A;
+      }
+      input[type="text"], textarea {
+      width: auto;
+      padding: 8px;
+      margin: 5px 0;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      font-size: 14px;
+      background-color: #f9f9f9;
+      transition: background-color 0.3s ease, border-color 0.3s ease;
+  }
+  .grid-container {
+              display: grid;
+              grid-template-columns: 1fr 3fr; /* Two columns with the second column being three times as wide */
+              grid-gap: 20px;
+              padding: 20px;
+              height: 100vh;
+          }
+  .block-container {
+      position: fixed; /* Lock the block-container in place */
+      top: 20px; /* Distance from the top of the viewport */
+      left: 20px; /* Distance from the left of the viewport */
+      width: 450px; /* Set the width of the block-container */
+      height: calc(100vh - 40px); /* Full viewport height minus top and bottom padding */
+      overflow-y: auto; /* Enable vertical scrolling if needed */
+      border-right: 1px solid #ccc; /* Right border for visual separation */
+      padding-right: 20px; /* Padding inside the block-container */
+      box-sizing: border-box; /* Include padding and border in the element's total width and height */
+      background-color: #f9f9f9; /* Background color */
+      z-index: 1000; /* Ensure it is on top of other elements */
+  }
+  
+  .block-container .page {
+      column-count: 1;
+      padding: 0;
+      width: 425px;
+      height: auto; /* Allow the page to expand to fit content */
+      overflow: visible; /* Allow content to overflow if necessary */
+      page-break-before: auto;
+      page-break-after: auto;
+      
+  }
+  .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;
+      -moz-column-width: 8cm;
+      -webkit-column-gap: .9cm;
+      -moz-column-gap: .9cm;
+      position: relative;
+      z-index: 15;
+      box-sizing: border-box;
+      width: 215.9mm;
+      height: 279.4mm; /* Original height for print layout */
+      padding: 1.4cm 1.2cm 1.7cm;
+      overflow: hidden;
+      font-family: "BookInsanityRemake";
+      font-size: .34cm;
+      counter-increment: phb-page-numbers;
+      background-color: var(--HB_Color_Background);
+      background-image: url('./themes/assets/parchmentBackground.jpg');
+      text-rendering: optimizeLegibility;
+      page-break-before: always;
+      page-break-after: always;
+      contain: size;
+      
+  }
+  
+  .page .monster hr:last-of-type + * {
+    margin-top: .1cm;
+  }
+  .page * + h3 {
+    margin-top: .05cm;
+  }
+  .page * + h4 {
+    margin-top: .1cm;
+  }
+  .page h4 + * {
+    margin-top: .1cm;
+  }
+  .page dl + * {
+    margin-top: .1cm;
+  }
+  .page p + * {
+      margin-top: .1cm;
+  }
+  .page img {
+      width: 100%;
+      height: auto;
+      cursor: pointer;
+  }
+  .page .classTable.frame{
+        width: 95%;
+      margin-right:0.1cm;
+      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%;
+      column-gap: inherit;
+      max-height: 100%;
+      column-span: all;
+      columns: inherit;
+      height: 100%; /* Ensure it takes full height of the parent */
+      box-sizing: border-box; /* Ensures padding and border are included in the element's total width and height */
+  }
+   /* block-item styling */
+  .block-item {
+      border: 1px solid #ccc;
+      border-radius: 8px;
+      background-color: transparent;
+      padding: 15px;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+      transition: transform 0.3s;
+  }
+  .block-item:hover {
+    transform: translateY(-5px);
+    background-color: rgba(255, 255, 255, 0.5); /* Slightly visible background on hover */
+  }
+  
+  .block-item img {
+      width: 100%;
+      height: auto;
+      cursor: pointer;
+  }
+  
+   /* Modal styling */
+  .modal {
+      display: none; /* Hidden by default */
+      position: fixed; /* Stay in place */
+      z-index: 1001; /* Sit on top */
+      left: 0;
+      top: 0;
+      width: 100%; /* Full width */
+      height: 100%; /* Full height */
+      overflow: auto; /* Enable scroll if needed */
+      background-color: rgb(0,0,0); /* Fallback color */
+      background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
+      }
+  
+  .modal-content {
+      margin: auto;
+      display: block;
+      width: 80%;
+      max-width: 700px;
+      }
+  
+  .modal-content, #caption {
+      animation-name: zoom;
+      animation-duration: 0.6s;
+      }
+  
+  @keyframes zoom {
+      from {transform: scale(0)}
+      to {transform: scale(1)}
+      }
+  
+  .close {
+      position: absolute;
+      top: 15px;
+      right: 35px;
+      color: #f1f1f1;
+      font-size: 40px;
+      font-weight: bold;
+      transition: 0.3s;
+      }
+  
+  .close:hover,
+  .close:focus {
+      color: #bbb;
+      text-decoration: none;
+      cursor: pointer;
+      }
+  input[type="text"]:focus, textarea:focus {
+      background-color: #e9e9e9;
+      border-color: #aaa;
+      outline: none;
+  }
+  
+  /* Specific styles for different textboxes */
+  
+  .user-description-textarea {
+      width: 400px;
+      height: 40px; /* Adjust as needed for 3 lines */
+      resize: vertical;
+      background: none;
+      font-family: "ScalySansRemake";
+      font-weight: 800;
+      
+  }
+  /* Focus styles for description textbox */
+  .user-description-textarea:focus {
+      background-color: #e9e9e9;
+      border-color: #aaa;
+      outline: none;
+  }
+  
+  .heading-textarea {
+      width: 100%;
+      font-size: .458cm; /* Matches the font size of an h4 heading */
+      line-height: .7em;
+      font-weight: 800;
+      border: none;
+      background: none;
+      margin: 0;
+      padding: 0;
+      resize: none; /* Prevents the textarea from being resizable */
+      overflow: hidden; /* Prevents scrollbars */
+      outline: none; /* Removes the focus outline */
+      font-family: "MrEavesRemake"; /* Ensures font family is inherited */
+      color: var(--HB_Color_HeaderText)
+      
+  }
+  .title-textarea{
+      height:30px;
+      width: 100%;
+      margin-bottom: 5px;
+      column-span: all;
+      font-size: .89cm;
+      line-height: 1em;
+      font-family: "MrEavesRemake";
+      font-weight: 800;
+      color: var(--HB_Color_HeaderText);
+      border: 0;
+      font: inherit;
+      background: none;
+      padding: 0;
+      resize: none; /* Prevents the textarea from being resizable */
+      overflow: hidden; /* Prevents scrollbars */
+      outline: none; /* Removes the focus outline */
+  
+  }
+  
+  .subtitle-textarea{
+      height:20px;
+      width: 100%;
+      margin-bottom: 5px;
+      column-span: all;
+      font-size: .89cm;
+      line-height: 1em;
+      font-family: "MrEavesRemake";
+      font-weight: 800;
+      color: var(--HB_Color_HeaderText);
+      border: 0;
+      font: inherit;
+      background: none;
+      padding: 0;
+      resize: none; /* Prevents the textarea from being resizable */
+      overflow: hidden; /* Prevents scrollbars */
+      outline: none; /* Removes the focus outline */
+  
+  }
+  
+  div[contenteditable="true"]:focus {
+      background-color: #e9e9e9;
+      border-color: #aaa;
+      outline: none;
+  }
+  
+  div[contenteditable="true"] p::first-letter {
+    float: left;
+    padding-bottom: 2px;
+    padding-left: 40px;
+    margin-top: 0cm;
+    margin-bottom: -20px;
+    margin-left: -40px;
+    font-family: "SolberaImitationRemake";
+    font-size: 3.5cm;
+    line-height: 1em;
+    color: rgba(0, 0, 0, 0);
+    background-image: linear-gradient(-45deg, #322814, #998250, #322814);
+    -webkit-background-clip: text;
+    background-clip: text;
+    border: 0;
+  }
+  .properties-textarea {
+      width: 100%;
+      font-size: 12px;
+      font-weight: 400;
+      line-height: .7em;
+      margin-bottom: 0;
+      font-style: italic;
+      box-sizing: border-box;
+      border: 0;
+      font-family: "ScalySansRemake";
+      vertical-align: baseline;
+      margin: 0;
+      padding: 0;
+      overflow-wrap: break-word;
+      text-rendering: optimizeLegibility;
+      background: none;
+      resize: none; /* Prevents the textarea from being resizable */
+  
+  }
+  
+  .description-textarea {
+      width: 100%;
+      height: auto; 
+      font-size: .318cm;
+      font-weight: 400;
+      line-height: .9em;
+      margin-bottom: 0;
+      font-style: italic;
+      box-sizing: border-box;
+      border: 0;
+      font-family: "ScalySansSmallCapsRemake";
+      vertical-align: baseline;
+      margin: 0;
+      padding: 0;
+      overflow-wrap: break-word;
+      text-rendering: optimizeLegibility;
+      background: none;
+      resize: none; /* Prevents the textarea from being manually resizable */
+      overflow: hidden; /* Hide scrollbars */
+  }
+  
+  .red-integer-stat-textarea {
+      width: 20px;
+      height:13px;
+      font-size: .318cm;
+      font-weight: 400;
+      line-height: 1.2em;
+      margin-bottom: 0;
+      font-style: italic;
+      box-sizing: border-box;
+      border: 0;
+      font-family: "ScalySansSmallCapsRemake";
+      vertical-align: baseline;
+      margin: 0;
+      padding: 0;
+      overflow-wrap: break-word;
+      text-rendering: optimizeLegibility;
+      background: none;
+      resize: none; /* Prevents the textarea from being manually resizable */
+      overflow: hidden; /* Hide scrollbars */
+      color: var(--HB_Color_HeaderText);
+      white-space: pre-line;
+  }
+  
+  .integer-stat-textarea {
+      width: 20px;
+      height:13px;
+      font-size: .318cm;
+      font-weight: 400;
+      line-height: 1.2em;
+      margin-bottom: 0;
+      font-style: italic;
+      box-sizing: border-box;
+      border: 0;
+      font-family: "ScalySansRemake";
+      vertical-align: baseline;
+      margin: 0;
+      padding: 0;
+      overflow-wrap: break-word;
+      text-rendering: optimizeLegibility;
+      background: none;
+      resize: none; /* Prevents the textarea from being manually resizable */
+      overflow: hidden; /* Hide scrollbars */
+      white-space: pre-line;
+  }
+  
+  .string-stat-textarea {
+      width: 200px;
+      height:13px;
+      font-size: .318cm;
+      font-weight: 400;
+      line-height: 1.2em;
+      margin-bottom: 0;
+      font-style: italic;
+      box-sizing: border-box;
+      border: 0;
+      font-family: "ScalySansRemake";
+      vertical-align: baseline;
+      margin: 0;
+      padding: 0;
+      overflow-wrap: break-word;
+      text-rendering: optimizeLegibility;
+      background: none;
+      resize: none; /* Prevents the textarea from being manually resizable */
+      overflow: hidden; /* Hide scrollbars */
+      white-space: pre-wrap;
+  }
+  
+  .string-action-name-textarea {
+      width: 100%;
+      height:13px;
+      font-size: .318cm;
+      font-style: italic;
+      font-weight: bold;
+      line-height: 1.2em;
+      margin-bottom: 0;
+      font-style: italic;
+      box-sizing: border-box;
+      border: 0;
+      font-family: "ScalySansRemake";
+      vertical-align: baseline;
+      margin: 0;
+      padding: 0;
+      overflow-wrap: break-word;
+      text-rendering: optimizeLegibility;
+      background: none;
+      resize: none; /* Prevents the textarea from being manually resizable */
+      overflow: hidden; /* Hide scrollbars */
+      
+  }
+  
+  .string-action-description-textarea {
+      width: 100%;
+      height:16px;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 16px;
+      margin-bottom: 0;
+      box-sizing: border-box;
+      border: 0;
+      font-family: "ScalySansRemake";
+      vertical-align: baseline;
+      margin: 0;
+      padding: 0;
+      overflow-wrap: break-word;
+      text-rendering: optimizeLegibility;
+      background: none;
+      resize: none; /* Prevents the textarea from being manually resizable */
+      overflow: hidden; /* Hide scrollbars */
+  }
+  
+  .block.monster.frame.wide {
+      column-count: inherit;
+      min-height: 100px; /* Set an appropriate minimum height */
+      height: 859px; /* Allow height to expand automatically */
+      column-fill: auto;
+      overflow: hidden; /* Ensure content overflow is visible */
+      width: 100%; /* Ensure it takes the full width of the container */
+      
+  }
+  
+  .highlight-page {
+      outline: 2px dashed #2196F3; /* Blue dashed border */
+      background-color: rgba(33, 150, 243, 0.1); /* Light blue background */
+  }
+  
+  .highlight-block {
+      border-bottom: 2px solid #2196F3; /* Blue solid border */
+      background-color: rgba(33, 150, 243, 0.1); /* Light blue background */
+  }
+  
+  .highlight-block-top {
+      border-top: 2px solid #2196F3; /* Blue solid border at the top */
+      background-color: rgba(33, 150, 243, 0.1); /* Light blue background */
+  }
+  
+  .name-textbox {
+      width: 50px;
+      font-size: 1.5em;
+      padding: 10px;
+  }
+  
+  .stat-textbox {
+      width: 50px;
+      text-align: center;
+      font-size: 1em;
+      padding: 5px;
+  }
+  
+  .trash-area {
+      position: fixed;
+      bottom: 20px;
+      right: 20px;
+      width: 100px;
+      height: 100px;
+      
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      
+      cursor: pointer;
+      background-image: url('./closed-mimic-trashcan.png'); /* Adjust the path to your image file */
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center;
+  }
+  
+  .trash-area:hover {
+              background-image: url('./mimic_trashcan.png');
+          }
+  .trash-area.over {    
+      color: white;
+      background-image: url('./mimic_trashcan.png'); /* Example image change */
+  }
+  

storeUI.html

@@ -8,532 +8,12 @@
     <link href='./dependencies/bundle.css' rel='stylesheet' />
     <link href="./dependencies/style.css" rel='stylesheet' />
     <link href="./dependencies/5ePHBstyle.css" rel='stylesheet' />
+    <link href="./storeUI.css" rel='stylesheet' />  
     <title>DnD Stat Block</title>
     <link rel="stylesheet" href="styles.css">
     <script src="https://unpkg.com/[email protected]/dist/htmx.min.js"></script>
 </head>
-<style>
-    :root {
-  --HB_Color_Background: #EEE5CE;
-  --HB_Color_Accent: #E0E5C1;
-  --HB_Color_HeaderUnderline: #C0AD6A;
-  --HB_Color_HorizontalRule: #9C2B1B;
-  --HB_Color_HeaderText: #58180D;
-  --HB_Color_MonsterStatBackground: #F2E5B5;
-  --HB_Color_CaptionText: #766649;
-  --HB_Color_WatercolorStain: #BBAD82;
-  --HB_Color_Footnotes: #C9AD6A;
-    }
-    input[type="text"], textarea {
-    width: auto;
-    padding: 8px;
-    margin: 5px 0;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    font-size: 14px;
-    background-color: #f9f9f9;
-    transition: background-color 0.3s ease, border-color 0.3s ease;
-}
-.grid-container {
-            display: grid;
-            grid-template-columns: 1fr 3fr; /* Two columns with the second column being three times as wide */
-            grid-gap: 20px;
-            padding: 20px;
-            height: 100vh;
-        }
-.block-container {
-    position: fixed; /* Lock the block-container in place */
-    top: 20px; /* Distance from the top of the viewport */
-    left: 20px; /* Distance from the left of the viewport */
-    width: 450px; /* Set the width of the block-container */
-    height: calc(100vh - 40px); /* Full viewport height minus top and bottom padding */
-    overflow-y: auto; /* Enable vertical scrolling if needed */
-    border-right: 1px solid #ccc; /* Right border for visual separation */
-    padding-right: 20px; /* Padding inside the block-container */
-    box-sizing: border-box; /* Include padding and border in the element's total width and height */
-    background-color: #f9f9f9; /* Background color */
-    z-index: 1000; /* Ensure it is on top of other elements */
-}
 
-.block-container .page {
-    column-count: 1;
-    padding: 0;
-    width: 425px;
-    height: auto; /* Allow the page to expand to fit content */
-    overflow: visible; /* Allow content to overflow if necessary */
-    page-break-before: auto;
-    page-break-after: auto;
-    
-}
-.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 */
-}
-
-
-.page {
-    column-count: 2;
-    column-gap: .9cm;
-    column-width: 8cm;
-    -webkit-column-count: 2;
-    -moz-column-count: 2;
-    -webkit-column-width: 8cm;
-    -moz-column-width: 8cm;
-    -webkit-column-gap: .9cm;
-    -moz-column-gap: .9cm;
-    position: relative;
-    z-index: 15;
-    box-sizing: border-box;
-    width: 215.9mm;
-    height: 279.4mm; /* Original height for print layout */
-    padding: 1.4cm 1.9cm 1.7cm;
-    overflow: hidden;
-    font-family: "BookInsanityRemake";
-    font-size: .34cm;
-    counter-increment: phb-page-numbers;
-    background-color: var(--HB_Color_Background);
-    background-image: url('./themes/assets/parchmentBackground.jpg');
-    text-rendering: optimizeLegibility;
-    page-break-before: always;
-    page-break-after: always;
-    contain: size;
-}
-
-.page .monster hr:last-of-type + * {
-  margin-top: .1cm;
-}
-.page * + h3 {
-  margin-top: .05cm;
-}
-.page * + h4 {
-  margin-top: .1cm;
-}
-.page h4 + * {
-  margin-top: .1cm;
-}
-.page dl + * {
-  margin-top: .1cm;
-}
-.page p + * {
-    margin-top: .1cm;
-}
-.page img {
-    width: 100%;
-    height: auto;
-    cursor: pointer;
-}
-.page .classTable.frame{
-    margin-right:0.1cm;
-    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 {
-    column-gap: inherit;
-    max-height: 100%;
-    column-span: all;
-    columns: inherit;
-    height: 100%; /* Ensure it takes full height of the parent */
-    box-sizing: border-box; /* Ensures padding and border are included in the element's total width and height */
-}
- /* block-item styling */
-.block-item {
-    border: 1px solid #ccc;
-    border-radius: 8px;
-    background-color: transparent;
-    padding: 15px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    transition: transform 0.3s;
-}
-.block-item:hover {
-   /* transform: translateY(-5px);
-    background-color: rgba(255, 255, 255, 0.5); /* Slightly visible background on hover */
-}
-
-.block-item img {
-    width: 100%;
-    height: auto;
-    cursor: pointer;
-}
-
- /* Modal styling */
-.modal {
-    display: none; /* Hidden by default */
-    position: fixed; /* Stay in place */
-    z-index: 1001; /* Sit on top */
-    left: 0;
-    top: 0;
-    width: 100%; /* Full width */
-    height: 100%; /* Full height */
-    overflow: auto; /* Enable scroll if needed */
-    background-color: rgb(0,0,0); /* Fallback color */
-    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
-    }
-
-.modal-content {
-    margin: auto;
-    display: block;
-    width: 80%;
-    max-width: 700px;
-    }
-
-.modal-content, #caption {
-    animation-name: zoom;
-    animation-duration: 0.6s;
-    }
-
-@keyframes zoom {
-    from {transform: scale(0)}
-    to {transform: scale(1)}
-    }
-
-.close {
-    position: absolute;
-    top: 15px;
-    right: 35px;
-    color: #f1f1f1;
-    font-size: 40px;
-    font-weight: bold;
-    transition: 0.3s;
-    }
-
-.close:hover,
-.close:focus {
-    color: #bbb;
-    text-decoration: none;
-    cursor: pointer;
-    }
-input[type="text"]:focus, textarea:focus {
-    background-color: #e9e9e9;
-    border-color: #aaa;
-    outline: none;
-}
-
-/* Specific styles for different textboxes */
-
-.user-description-textarea {
-    width: 400px;
-    height: 40px; /* Adjust as needed for 3 lines */
-    resize: vertical;
-    background: none;
-    font-family: "ScalySansRemake";
-    font-weight: 800;
-    
-}
-/* Focus styles for description textbox */
-.user-description-textarea:focus {
-    background-color: #e9e9e9;
-    border-color: #aaa;
-    outline: none;
-}
-
-.heading-textarea {
-    width: 100%;
-    font-size: .458cm; /* Matches the font size of an h4 heading */
-    line-height: .7em;
-    font-weight: 800;
-    border: none;
-    background: none;
-    margin: 0;
-    padding: 0;
-    resize: none; /* Prevents the textarea from being resizable */
-    overflow: hidden; /* Prevents scrollbars */
-    outline: none; /* Removes the focus outline */
-    font-family: "MrEavesRemake"; /* Ensures font family is inherited */
-    color: var(--HB_Color_HeaderText)
-    
-}
-.title-textarea{
-    height:30px;
-    width: 100%;
-    margin-bottom: 5px;
-    column-span: all;
-    font-size: .89cm;
-    line-height: 1em;
-    font-family: "MrEavesRemake";
-    font-weight: 800;
-    color: var(--HB_Color_HeaderText);
-    border: 0;
-    font: inherit;
-    background: none;
-    padding: 0;
-    resize: none; /* Prevents the textarea from being resizable */
-    overflow: hidden; /* Prevents scrollbars */
-    outline: none; /* Removes the focus outline */
-
-}
-
-.subtitle-textarea{
-    height:20px;
-    width: 100%;
-    margin-bottom: 5px;
-    column-span: all;
-    font-size: .89cm;
-    line-height: 1em;
-    font-family: "MrEavesRemake";
-    font-weight: 800;
-    color: var(--HB_Color_HeaderText);
-    border: 0;
-    font: inherit;
-    background: none;
-    padding: 0;
-    resize: none; /* Prevents the textarea from being resizable */
-    overflow: hidden; /* Prevents scrollbars */
-    outline: none; /* Removes the focus outline */
-
-}
-
-div[contenteditable="true"]:focus {
-    background-color: #e9e9e9;
-    border-color: #aaa;
-    outline: none;
-}
-
-div[contenteditable="true"] p::first-letter {
-  float: left;
-  padding-bottom: 2px;
-  padding-left: 40px;
-  margin-top: 0cm;
-  margin-bottom: -20px;
-  margin-left: -40px;
-  font-family: "SolberaImitationRemake";
-  font-size: 3.5cm;
-  line-height: 1em;
-  color: rgba(0, 0, 0, 0);
-  background-image: linear-gradient(-45deg, #322814, #998250, #322814);
-  -webkit-background-clip: text;
-  background-clip: text;
-  border: 0;
-}
-.properties-textarea {
-    width: 100%;
-    font-size: 12px;
-    font-weight: 400;
-    line-height: .7em;
-    margin-bottom: 0;
-    font-style: italic;
-    box-sizing: border-box;
-    border: 0;
-    font-family: "ScalySansRemake";
-    vertical-align: baseline;
-    margin: 0;
-    padding: 0;
-    overflow-wrap: break-word;
-    text-rendering: optimizeLegibility;
-    background: none;
-    resize: none; /* Prevents the textarea from being resizable */
-
-}
-
-.description-textarea {
-    width: 100%;
-    height: auto; 
-    font-size: .318cm;
-    font-weight: 400;
-    line-height: .9em;
-    margin-bottom: 0;
-    font-style: italic;
-    box-sizing: border-box;
-    border: 0;
-    font-family: "ScalySansSmallCapsRemake";
-    vertical-align: baseline;
-    margin: 0;
-    padding: 0;
-    overflow-wrap: break-word;
-    text-rendering: optimizeLegibility;
-    background: none;
-    resize: none; /* Prevents the textarea from being manually resizable */
-    overflow: hidden; /* Hide scrollbars */
-}
-
-.red-integer-stat-textarea {
-    width: 20px;
-    height:13px;
-    font-size: .318cm;
-    font-weight: 400;
-    line-height: 1.2em;
-    margin-bottom: 0;
-    font-style: italic;
-    box-sizing: border-box;
-    border: 0;
-    font-family: "ScalySansSmallCapsRemake";
-    vertical-align: baseline;
-    margin: 0;
-    padding: 0;
-    overflow-wrap: break-word;
-    text-rendering: optimizeLegibility;
-    background: none;
-    resize: none; /* Prevents the textarea from being manually resizable */
-    overflow: hidden; /* Hide scrollbars */
-    color: var(--HB_Color_HeaderText);
-    white-space: pre-line;
-}
-
-.integer-stat-textarea {
-    width: 20px;
-    height:13px;
-    font-size: .318cm;
-    font-weight: 400;
-    line-height: 1.2em;
-    margin-bottom: 0;
-    font-style: italic;
-    box-sizing: border-box;
-    border: 0;
-    font-family: "ScalySansRemake";
-    vertical-align: baseline;
-    margin: 0;
-    padding: 0;
-    overflow-wrap: break-word;
-    text-rendering: optimizeLegibility;
-    background: none;
-    resize: none; /* Prevents the textarea from being manually resizable */
-    overflow: hidden; /* Hide scrollbars */
-    white-space: pre-line;
-}
-
-.string-stat-textarea {
-    width: 200px;
-    height:13px;
-    font-size: .318cm;
-    font-weight: 400;
-    line-height: 1.2em;
-    margin-bottom: 0;
-    font-style: italic;
-    box-sizing: border-box;
-    border: 0;
-    font-family: "ScalySansRemake";
-    vertical-align: baseline;
-    margin: 0;
-    padding: 0;
-    overflow-wrap: break-word;
-    text-rendering: optimizeLegibility;
-    background: none;
-    resize: none; /* Prevents the textarea from being manually resizable */
-    overflow: hidden; /* Hide scrollbars */
-    white-space: pre-wrap;
-}
-
-.string-action-name-textarea {
-    width: 100%;
-    height:13px;
-    font-size: .318cm;
-    font-style: italic;
-    font-weight: bold;
-    line-height: 1.2em;
-    margin-bottom: 0;
-    font-style: italic;
-    box-sizing: border-box;
-    border: 0;
-    font-family: "ScalySansRemake";
-    vertical-align: baseline;
-    margin: 0;
-    padding: 0;
-    overflow-wrap: break-word;
-    text-rendering: optimizeLegibility;
-    background: none;
-    resize: none; /* Prevents the textarea from being manually resizable */
-    overflow: hidden; /* Hide scrollbars */
-    
-}
-
-.string-action-description-textarea {
-    width: 100%;
-    height:16px;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 16px;
-    margin-bottom: 0;
-    box-sizing: border-box;
-    border: 0;
-    font-family: "ScalySansRemake";
-    vertical-align: baseline;
-    margin: 0;
-    padding: 0;
-    overflow-wrap: break-word;
-    text-rendering: optimizeLegibility;
-    background: none;
-    resize: none; /* Prevents the textarea from being manually resizable */
-    overflow: hidden; /* Hide scrollbars */
-}
-
-.block.monster.frame.wide {
-    column-count: inherit;
-    min-height: 100px; /* Set an appropriate minimum height */
-    height: 859px; /* Allow height to expand automatically */
-    column-fill: auto;
-    overflow: hidden; /* Ensure content overflow is visible */
-    width: 100%; /* Ensure it takes the full width of the container */
-    
-}
-
-.highlight-page {
-    outline: 2px dashed #2196F3; /* Blue dashed border */
-    background-color: rgba(33, 150, 243, 0.1); /* Light blue background */
-}
-
-.highlight-block {
-    border-bottom: 2px solid #2196F3; /* Blue solid border */
-    background-color: rgba(33, 150, 243, 0.1); /* Light blue background */
-}
-
-.highlight-block-top {
-    border-top: 2px solid #2196F3; /* Blue solid border at the top */
-    background-color: rgba(33, 150, 243, 0.1); /* Light blue background */
-}
-
-.name-textbox {
-    width: 50px;
-    font-size: 1.5em;
-    padding: 10px;
-}
-
-.stat-textbox {
-    width: 50px;
-    text-align: center;
-    font-size: 1em;
-    padding: 5px;
-}
-
-.trash-area {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    width: 100px;
-    height: 100px;
-    
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    
-    cursor: pointer;
-    background-image: url('./closed-mimic-trashcan.png'); /* Adjust the path to your image file */
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center;
-}
-
-.trash-area:hover {
-            background-image: url('./mimic_trashcan.png');
-        }
-.trash-area.over {    
-    color: white;
-    background-image: url('./mimic_trashcan.png'); /* Example image change */
-}
-
-
-
-</style>
 <body>
     <div class="grid-container">
         <div class="block-container" id="blockContainer" >
@@ -541,17 +21,20 @@ div[contenteditable="true"] p::first-letter {
             <!-- Blocks will be wrapped in a page div and loaded here -->
              </div>
         </div>
+        
         <div class="page-container" id="pageContainer">
-            <div class="brewRenderer">
-                <h1>Describe your creature</h1>
+            <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="parseHTML">Parse HTML</button>
-                <button id="resetButton">Reset</button>
-                <div class="pages">
+                    <button id="resetButton">Reset</button>
+                    <button onclick="printPageContainer()">Print to PDF</button>
+            <div class="brewRenderer" id="brewRenderer">
+                
+                <div class="pages" id="pages">
                     <div id="page-1" class="page" data-page-id="page-0">
                         <div class="columnWrapper">
                             <div class="block monster frame wide">
@@ -570,792 +53,7 @@ div[contenteditable="true"] p::first-letter {
         <img class="modal-content" id="modalImage">
         <div id="caption"></div>
     </div>
-    <script>
-        // Waits for DOM content to be fully loaded and assigns critical elements to variables.
-        let initialPositions = [];
-        document.addEventListener("DOMContentLoaded", function() {
-            const blockContainer = document.getElementById('blockContainer');
-            let blockContainerPage = document.getElementById('block-page');
-            const pageContainer = document.getElementById('pageContainer');
-            const trashArea = document.getElementById('trashArea');
-            const resetButton = document.getElementById('resetButton');
-            let currentPage = pageContainer.querySelector('.block.monster.frame.wide');
-            const modal = document.getElementById('imageModal');
-            const modalImg = document.getElementById('modalImage');
-            const captionText = document.getElementById('caption');
-            const closeModal = document.getElementsByClassName('close')[0];
-            const MAX_COLUMN_HEIGHT = 847; 
-
-            if (!blockContainer || !pageContainer || !trashArea || !currentPage) {
-                console.error('Required elements are null');
-                return;
-            }
-            if (!modal) {
-                console.error('modal element not found');
-                return;
-            }
-            if (!modalImg) {
-                console.error('modalImg element not found');
-                return;
-            }
-            if (!captionText) {
-                console.error('captionText element not found');
-                return;
-            }
-            if (!closeModal) {
-                console.error('closeModal element not found');
-                return;
-            }
-            
-            // Event delegation for image clicks
-            blockContainer.addEventListener('click', function(event) {
-                console.log('Click detected in blockContainer:', event.target);
-                if (event.target.tagName === 'IMG' && event.target.id.startsWith('generated-image-')) {
-                    console.log('Image clicked for modal display. Image ID:', event.target.id);
-                    modal.style.display = 'block';
-                    modalImg.src = event.target.src;
-                    captionText.innerHTML = event.target.alt;
-                } else {
-                    console.log('Clicked element is not an image or does not match ID pattern.');
-                }
-            });
-
-            // Function to close the modal
-            closeModal.onclick = function() {
-                modal.style.display = "none";
-            }
-
-            // Function to close the modal when clicking outside of the modal content
-            window.onclick = function(event) {
-                if (event.target == modal) {
-                    modal.style.display = "none";
-                }
-            }
-
-            document.getElementById('submitDescription').addEventListener('click', function() {
-            const userInput = document.getElementById('user-description').value;
-            // Clear the block container before inserting new blocks
-            blockContainerPage.innerHTML = '';
-
-
-            fetch('http://127.0.0.1:5000/process-description', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({ user_input: userInput })
-            })
-            .then(response => response.json())
-            .then(data => {
-                console.log('Success:', data);
-                initialPositions.length = 0; // Clear the initialPositions array
-                insertHtmlBlocks(data.html_blocks);
-                const blocks = blockContainerPage.querySelectorAll('.block-item');
-                blocks.forEach(block => {
-                    block.setAttribute('data-page-id', 'block-container');
-                    block.setAttribute('draggable', true);
-                    block.addEventListener('dragstart', handleDragStart);
-                    block.addEventListener('dragend', handleDragEnd);
-                });
-                storeInitialPositions();
-            })
-            .catch((error) => {
-                console.error('Error:', error);
-            });
-        });
-        
-            // Store initial positions of the blocks
-            function storeInitialPositions() {
-                initialPositions = []; // Clear initialPositions before updating
-                const blocks = blockContainer.querySelectorAll('.block-item');
-                blocks.forEach((block, index) => {
-                    const blockId = block.getAttribute('data-block-id');
-                    if (!blockId) {
-                        console.error(`Block at index ${index} is missing data-block-id`);
-                    }
-                    initialPositions.push({
-                        id: blockId,
-                        index: index
-                    });
-                });
-                console.log('Initial positions:', initialPositions);
-            }
-            
-            function insertHtmlBlocks(blocks) {
-                console.log('blockContainerPage = ', blockContainerPage)
-                console.log('List of blocks:', blocks);
-                
-                const parser = new DOMParser();
-                
-                blocks.forEach(blockHtml => {
-                    console.log('Original blockHtml:', blockHtml);
-                    
-                    // Parse the HTML string
-                    const doc = parser.parseFromString(blockHtml, 'text/html');
-                    console.log('Parsed document:', doc);
-                    const block = doc.body.firstChild;
-                    console.log('Parsed block:', block);
-                    if (block) {
-                        blockContainerPage.appendChild(block); // Append the parsed block to the container
-                        console.log('Appended block:', block);
-                    }
-                   
-                });
-                // console.log('Final state of blockContainer:', blockContainer.innerHTML);
-                initializeTextareaResizing();
-            }
-
-            storeInitialPositions();
-
-            function adjustTextareaHeight(el) {
-                if (el.scrollHeight > 16){
-                    el.style.height = 'auto';
-                    el.style.height = (el.scrollHeight) + 'px';
-                }
-                console.log('Original height:', el.style.height);
-            }
-
-            function initializeTextareaResizing() {
-                const classes = [
-                    'description-textarea',
-                    'user-description-textarea',
-                    'heading-textarea',
-                    'properties-textarea',
-                    'string-stat-textarea',
-                    'string-action-description-textarea',
-                ];
-
-                classes.forEach(className => {
-                    const textareas = document.querySelectorAll(`.${className}`);
-                    console.log(`Textareas found for ${className}:`, textareas.length); // Debugging line
-                    textareas.forEach(textarea => {                                            
-                    console.log('scrollHeight:', textarea.scrollHeight);
-                    console.log('clientHeight:', textarea.clientHeight);
-                    console.log('offsetHeight:', textarea.offsetHeight);
-                    console.log('Computed line-height:', window.getComputedStyle(textarea).lineHeight);
-
-                        // Adjust height on page load
-                        adjustTextareaHeight(textarea);
-                        // Adjust height on input
-                        textarea.addEventListener('input', function() {
-                            adjustTextareaHeight(textarea);
-                            console.log('Input event triggered for:', textarea.id); // Debugging line
-                        });
-                    });
-                });
-            }
-
-            // Initial run on page load
-            initializeTextareaResizing();
-
-            async function extractBlocks() {
-                
-                try {
-                    if (blockContainerPage.children.length > 0) {
-                        console.log('Blocks already loaded, skipping fetch');
-                        return;
-                    }
-                    const response = await fetch('The_Mirage_Emporium.html');
-                    if (!response.ok) {
-                        throw new Error('Network response was not ok ' + response.statusText);
-                    }
-                    const text = await response.text();
-                    const parser = new DOMParser();
-                    const doc = parser.parseFromString(text, 'text/html');
-                    const blocks = doc.querySelectorAll('[class^="Block_"]');
-
-                    
-                    blocks.forEach((block, index) => {
-                        const blockContent = block.innerHTML;
-                        const blockItem = document.createElement('div');
-                        blockItem.classList.add('block-item');
-                        blockItem.innerHTML = blockContent;
-                        const blockId = `block-${index}`;
-                        blockItem.setAttribute('data-block-id', blockId);
-                        const pageId = 'block-container';
-                        blockItem.setAttribute('data-page-id', pageId);
-                        blockItem.setAttribute('draggable', true);
-                        blockItem.addEventListener('dragstart', handleDragStart);
-                        blockItem.addEventListener('dragend', handleDragEnd);
-                        
-                        console.log(`Loaded block with ID: ${blockId}`);
-                        blockContainerPage.appendChild(blockItem);
-                    });
-                    
-                    storeInitialPositions();
-                } catch (error) {
-                    console.error('Error fetching and parsing template.html:', error);
-                }
-            }
-
-             blockContainer.addEventListener('click', function(event) {
-                if (event.target && event.target.classList.contains('generate-image-button')) {
-                    const blockId = event.target.getAttribute('data-block-id');
-                    generateImage(blockId);
-                }
-                });
-
-            // Function to generate image
-            function generateImage(blockId) {
-                const sdPromptElement = document.getElementById(`user-storefront-prompt-${blockId}`);
-                const imageElement = document.getElementById(`generated-image-${blockId}`);
-                
-                if (!sdPromptElement) {
-                    console.error('Element with ID user-storefront-prompt not found');
-                    return;
-                }
-
-                if (!imageElement) {
-                    console.error('Element with ID generated-image not found');
-                    return;
-                }
-
-                const sdPrompt = sdPromptElement.value;
-
-                fetch('http://127.0.0.1:5000/generate-image', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({ sd_prompt: sdPrompt })
-                })
-                .then(response => response.json())
-                .then(data => {
-                    console.log('Received data:', data);
-                    imageElement.src = data.image_url;
-                    imageElement.style.display = 'block';
-
-                    // Log the image element's HTML structure
-                    console.log('Updated imageElement HTML:', imageElement.outerHTML);
-                })
-                .catch((error) => {
-                    console.error('Error:', error);
-                });
-                    }
-        
-            function handleDragStart(e) {
-                const target = e.target.closest('.block-item, .block-content');
-                if (!target) {
-                    console.error('Drag started for an element without a valid target');
-                    return;
-                }
-                const blockId = target.getAttribute('data-block-id');
-                const pageId = target.getAttribute('data-page-id');
-                if (!blockId) {
-                    console.error('Drag started for an element without a data-block-id');
-                    return;
-                }
-                if (!pageId) {
-                    console.error('Drag started for an element without a data-page-id');
-                    return;
-                }
-                const innerHTML = target.innerHTML;
-                e.dataTransfer.setData('block-id', blockId);
-                e.dataTransfer.setData('text/plain', innerHTML); // Store inner HTML
-                e.dataTransfer.setData('data-page-id', pageId); // Store original page ID
-                e.dataTransfer.effectAllowed = 'move';
-                target.style.opacity = '0.4';
-
-                // Create an invisible drag image
-                const dragImage = document.createElement('div');
-                dragImage.style.width = '1px';
-                dragImage.style.height = '1px';
-                dragImage.style.opacity = '0';
-                document.body.appendChild(dragImage);
-                e.dataTransfer.setDragImage(dragImage, 0, 0);
-
-                console.log(`Drag started for block ID: ${blockId} page ID: ${pageId}`);
-            }
-
-            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');
-                    console.log(`Drag ended for block ID: ${blockId}`);
-                }
-
-                // Remove highlight classes from pages and blocks
-                document.querySelectorAll('.highlight-page').forEach(el => el.classList.remove('highlight-page'));
-                document.querySelectorAll('.highlight-block').forEach(el => el.classList.remove('highlight-block'));
-                document.querySelectorAll('.highlight-block-top').forEach(el => el.classList.remove('highlight-block-top'));
-            }
-
-            function handleDragOver(e) {
-                e.preventDefault();
-                e.dataTransfer.dropEffect = 'move';
-                console.log('Drag over event');
-                
-                const targetPage = e.target.closest('.page');
-                if (targetPage) {
-                    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;
-                    if (offset > bounding.height / 2) {
-                        targetBlock.classList.add('highlight-block');
-                        targetBlock.classList.remove('highlight-block-top');
-                    } else {
-                        targetBlock.classList.add('highlight-block-top');
-                        targetBlock.classList.remove('highlight-block');
-                    }
-                }
-            }
-           
-            function handleDrop(e) {
-                e.preventDefault();
-                const blockId = e.dataTransfer.getData('block-id');
-                const originalPageId = e.dataTransfer.getData('data-page-id');
-                const innerHTML = e.dataTransfer.getData('text/plain');
-                console.log(`Drop event for block ID: ${blockId} from page ID: ${originalPageId}`);
-
-                // Ensure we are not dropping into a textarea or another block
-                if (event.target.classList.contains('block-item', 'block-content') || event.target.tagName === 'TEXTAREA') {
-                    console.log('Cannot drop block inside another block or textarea');
-                    return;
-    }
-                
-                if (blockId && originalPageId) {
-                    const originalBlock = document.querySelector(`[data-block-id="${blockId}"]`);
-                    const newPage = e.target.closest('.page');
-                    console.log(`Over page ${newPage} from page ID: ${originalPageId}`);
-                    const newPageId = newPage.getAttribute('data-page-id');
-                    
-                    // Ensure the original block exists before proceeding
-                    if (!originalBlock || !newPage) {
-                        console.error(`Block with ID ${blockId} on page ${originalPageId} not found`);
-                        return;
-                    }
-
-                    const newBlockContent = document.createElement('div');
-                    newBlockContent.classList.add('block-content');
-                    newBlockContent.innerHTML = originalBlock.innerHTML; // Transfer inner content only
-
-                    // Add necessary attributes and event listeners
-                    newBlockContent.setAttribute('data-block-id', blockId);
-                    newBlockContent.setAttribute('data-page-id', newPageId);
-                    console.log('newPageID:', newPageId);
-                    newBlockContent.setAttribute('draggable', true);
-                    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();
-                        const offset = e.clientY - bounding.top;
-
-                        console.log('Drop target found:', target);
-                        console.log('Bounding rectangle:', bounding);
-                        console.log('Offset from top:', offset);
-                        console.log('Target height:', bounding.height);
-                        console.log('Insert before or after decision point (height / 2):', bounding.height / 2);
-
-                        targetColumn = getColumnFromOffset(target, offset);
-                        if (offset > bounding.height / 2) {
-                            console.log('Inserting after the target');
-                            target.parentNode.insertBefore(newBlockContent, target.nextSibling);
-                        } else {
-                            console.log('Inserting before the target');
-                            target.parentNode.insertBefore(newBlockContent, target);
-                        }
-
-                        // Remove highlight borders
-                        target.style['border-bottom'] = '';
-                        target.style['border-top'] = '';
-                    } else {
-                        console.log('No valid drop target found, appending to the end');
-                        newPage.querySelector('.block.monster.frame.wide').appendChild(newBlockContent);
-                    }
-
-                    // Remove the original block from the original container
-                    originalBlock.parentNode.removeChild(originalBlock);
-
-                    // Reset opacity of dragged element
-                    newBlockContent.style.opacity = '1';
-                    console.log(`Moved existing block with ID: ${blockId} to page ID: ${newPageId}`);
-                    initializeTextareaResizing();
-                    // Adjust layouts
-                    if (originalPageId !== 'block-container') {
-                        adjustPageLayout(originalPageId);
-                    }
-                    adjustPageLayout(newPageId, targetColumn);
-                    } else {
-                    console.log('No data transferred');
-                                    }
-                                }
-                            
-                function getColumnFromOffset(block, offset) {
-                    const page = block.closest('.page');
-                    if (!page) return 1;
-                    const columnWrapper = page.querySelector('.columnWrapper');
-                    const columnWrapperRect = columnWrapper.getBoundingClientRect();
-                    const relativeOffset = offset - columnWrapperRect.left; // Calculate the offset relative to the column wrapper
-                    const columnWidth = columnWrapper.clientWidth / 2; // Assuming two columns
-
-                    // Log details for debugging
-                    console.log('Block offset:', offset);
-                    console.log('Relative offset:', relativeOffset);
-                    
-                    const columnNumber = Math.ceil(relativeOffset / columnWidth);
-
-                    // Ensure the column number is within valid bounds (1 or 2)
-                    const validColumnNumber = Math.min(Math.max(columnNumber, 1), 2);
-                    return validColumnNumber;
-                }
-
-
-                 // 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;
-                    });
-                    return columns;
-                }
-                
-                function adjustPageLayout(pageId) {
-                    const page = document.querySelector(`[data-page-id="${pageId}"]`);
-                    if (!page) {
-                        console.error(`Page with ID ${pageId} not found`);
-                        return;
-                    }
-
-                    const columnHeights = getColumnHeights(page);
-                    console.log(`Total height of columns in ${pageId}: ${columnHeights}`);
-
-                    for (let i = 0; i < columnHeights.length; i++) {
-                        if (columnHeights[i] > MAX_COLUMN_HEIGHT) {
-                            console.log(`Column ${i + 1} in ${pageId} exceeds max height, total height: ${columnHeights[i]}px`);
-                            handleColumnOverflow(page, i + 1);
-                        }
-                    }
-                }
-
-                let pageCounter = 1;
-                // Function to create new page
-                function createNewPage() {
-                    const newPage = document.createElement('div');
-                    newPage.classList.add('page');
-                    newPage.setAttribute('data-page-id', `page-${pageCounter}`);
-                    newPage.id = `page-${pageCounter}`;
-                                    
-                    const columnWrapper = document.createElement('div');
-                    columnWrapper.classList.add('columnWrapper');
-
-                    const newMonsterFrame = document.createElement('div');
-                    newMonsterFrame.classList.add('block', 'monster', 'frame', 'wide');
-
-                    columnWrapper.appendChild(newMonsterFrame);
-                    newPage.appendChild(columnWrapper);
-                    pageContainer.appendChild(newPage);
-
-                    currentPage = newMonsterFrame;
-                    console.log(`Created new page with ID: ${newPage.id}`);
-
-                    // Add event listeners to the new currentPage
-                    currentPage.addEventListener('dragover', handleDragOver);
-                    currentPage.addEventListener('drop', handleDrop);
-
-                    pageCounter++;
-                    return newPage;
-                }
-
-                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;
-
-                    // Find the start index where overflow begins in the target column
-                    blocks.forEach((block, index) => {
-                        const column = getColumnFromOffset(block, block.getBoundingClientRect().left);
-                        columnHeights[column - 1] += block.offsetHeight;
-                        if (columnHeights[targetColumn - 1] > MAX_COLUMN_HEIGHT && overflowStartIndex === -1) {
-                            overflowStartIndex = index;
-                        }
-                    });
-
-                    // If no overflow, return early
-                    if (overflowStartIndex === -1) {
-                        return;
-                    }
-                    const overflowBlocks = blocks.slice(overflowStartIndex);
-                    const overflowHeight = overflowBlocks.reduce((acc, block) => acc + block.offsetHeight, 0);
-
-                    // If the target column is the first column, check if the second column has enough space
-                    if (targetColumn === 1) {
-                        const secondColumnAvailableHeight = MAX_COLUMN_HEIGHT - columnHeights[1];
-                      
-                        if (overflowHeight <= secondColumnAvailableHeight) {
-                            // Move the overflowing blocks to the second column within the same page
-                            overflowBlocks.forEach(block => {
-                                const blockWrapper = block.closest('.block.monster.frame.wide');
-                                if (blockWrapper) {
-                                    blockWrapper.appendChild(block);
-                                    block.setAttribute('data-page-id', page.getAttribute('data-page-id'));
-                                }
-                            });
-                            return;
-                        }
-                    }
-
-                     // 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 => {
-                            const column = getColumnFromOffset(block, block.getBoundingClientRect().left);
-                            nextPageColumnHeights[column - 1] += block.offsetHeight;
-                        });
-
-                        // Check if there's enough space in the target column of the next page
-                        if (nextPageColumnHeights[targetColumn - 1] + overflowHeight <= MAX_COLUMN_HEIGHT) {
-                            const nextPageContainer = nextPage.querySelector('.block.monster.frame.wide');
-                            overflowBlocks.forEach(block => {
-                                nextPageContainer.appendChild(block);
-                                block.setAttribute('data-page-id', nextPage.getAttribute('data-page-id'));
-                            });
-                            return;
-                        }
-
-                        // If the next page's second column has enough space for overflow from the first column
-                        if (targetColumn === 1 && nextPageColumnHeights[1] + overflowHeight <= MAX_COLUMN_HEIGHT) {
-                            const nextPageContainer = nextPage.querySelector('.block.monster.frame.wide');
-                            overflowBlocks.forEach(block => {
-                                nextPageContainer.appendChild(block);
-                                block.setAttribute('data-page-id', nextPage.getAttribute('data-page-id'));
-                            });
-                            return;
-                        }
-                    }
-
-                    // Otherwise, create a new page and move the overflowing blocks there
-                    const newPage = createNewPage();
-                    if (!newPage) {
-                        console.error('Failed to create a new page');
-                        return;
-                    }
-                    const newMonsterFrame = newPage.querySelector('.block.monster.frame.wide');
-                    if (!newMonsterFrame) {
-                        console.error('New monster frame not found in the new page');
-                        return;
-                    }
-
-                    
-                    overflowBlocks.forEach(block => {
-                        newMonsterFrame.appendChild(block);
-                    });
-                    console.log(`Moved overflowing blocks to new page with ID: ${newPage.getAttribute('data-page-id')}`);
-                }
-
-                // Utility function to get the next page element
-                function getNextPage(currentPage) {
-                    const nextPageId = parseInt(currentPage.getAttribute('data-page-id').split('-')[1]) + 1;
-                    return document.querySelector(`[data-page-id="page-${nextPageId}"]`);
-                }
-
-            function moveBlockToPage(block, newPageId) {
-                block.setAttribute('data-page-id', newPageId);
-                const newPage = document.querySelector(`[data-page-id="${newPageId}"] .block-container`);
-                newPage.appendChild(block);
-            }
-
-            // Handle the drop event on the trash area
-            function handleTrashDrop(e) {
-                e.preventDefault();
-                const innerHTML = e.dataTransfer.getData('text/plain');
-                const blockId = e.dataTransfer.getData('block-id');
-                console.log('Trash Drop event:', e);
-                console.log('Dragged block ID to trash:', blockId);
-
-                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`);
-                    }
-                    if (draggedElement && draggedElement.parentElement) {
-                        draggedElement.parentElement.removeChild(draggedElement);
-                        console.log(`Removed block with ID: ${blockId} from the page`);
-                    }
-
-                    // 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`);
-                    }
-                    if (existingBlock && existingBlock.parentElement) {
-                        existingBlock.parentElement.removeChild(existingBlock);
-                        console.log(`Removed duplicate block with ID: ${blockId} from block-container`);
-                    }
-
-                    // Create a new block-item to be placed back in the block-container
-                    const newBlock = document.createElement('div');
-                    newBlock.classList.add('block-item');
-                    newBlock.setAttribute('data-block-id', blockId);
-                    newBlock.setAttribute('data-page-id', 'block-container');
-                    newBlock.innerHTML = innerHTML;
-                    newBlock.setAttribute('draggable', true);
-                    newBlock.addEventListener('dragstart', handleDragStart);
-                    newBlock.addEventListener('dragend', handleDragEnd);
-
-                    // Ensure the block is appended to the page wrapper inside blockContainer
-                    let pageWrapper = blockContainer.querySelector('.page');
-                    if (!pageWrapper) {
-                        pageWrapper = document.createElement('div');
-                        pageWrapper.classList.add('page');
-                        pageWrapper.setAttribute('data-page-id', 'block-container');
-                        blockContainer.appendChild(pageWrapper);
-                    }
-
-                    // Debugging output
-                    console.log('Page wrapper:', pageWrapper);
-                    console.log('New block:', newBlock);
-
-                    // Find the original position to insert the new block
-                    const originalPosition = initialPositions.find(pos => pos.id === blockId);
-                    console.log('Original position:', originalPosition);
-
-                    if (originalPosition) {
-                        const blocks = pageWrapper.querySelectorAll('.block-item');
-                        console.log('Blocks in pageWrapper:', blocks);
-                        console.log('Inserting at position:', originalPosition.index);
-
-                        if (originalPosition.index < blocks.length) {
-                            const referenceNode = blocks[originalPosition.index];
-                            if (referenceNode && referenceNode.parentNode === pageWrapper) {
-                                console.log('Inserting before block at index:', originalPosition.index);
-                                pageWrapper.insertBefore(newBlock, referenceNode);
-                                console.log(`Moved block back to original position ${originalPosition.index} in block-container`);
-                            } else {
-                                console.warn('Reference node does not belong to pageWrapper, appending to the end');
-                                pageWrapper.appendChild(newBlock);
-                                console.log('Appended block to the end of block-container');
-                            }
-                        } else {
-                            console.log('Appending block to the end of pageWrapper');
-                            pageWrapper.appendChild(newBlock);
-                            console.log('Appended block to the end of block-container');
-                        }
-                    } else {
-                        console.log('Original position not found, appending block to the end of pageWrapper');
-                        pageWrapper.appendChild(newBlock);
-                        console.log('Appended block to the end of block-container');
-                    }
-
-                    console.log(`Restored block with ID: ${blockId}`);
-                } else {
-                    console.log('No data transferred');
-                }
-
-                // Remove the "over" class and reset the background image
-                trashArea.classList.remove('over');
-                trashArea.style.backgroundImage = "url('./closed-mimic-trashcan.png')";
-                initializeTextareaResizing();
-            }
-
-            function handleTrashOver(e) {
-                e.preventDefault();
-                e.dataTransfer.dropEffect = 'move';
-                trashArea.classList.add('over');
-                trashArea.style.backgroundImage = "url('./mimic_trashcan.png')";
-                console.log('Trash over event');
-            }
-
-            function handleTrashLeave(e) {
-                trashArea.classList.remove('over');
-                trashArea.style.backgroundImage = "url('./closed-mimic-trashcan.png')";
-                console.log('Trash leave event');
-            }
-
-            currentPage.addEventListener('dragover', handleDragOver);
-            currentPage.addEventListener('drop', handleDrop);
-
-            trashArea.addEventListener('dragover', handleTrashOver);
-            trashArea.addEventListener('dragleave', handleTrashLeave);
-            trashArea.addEventListener('drop', handleTrashDrop);
-
-            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
-                let pageWrapper = blockContainer.querySelector('.page');
-                if (!pageWrapper) {
-                    pageWrapper = document.createElement('div');
-                    pageWrapper.classList.add('page');
-                    pageWrapper.setAttribute('id', 'block-page');
-                    blockContainer.appendChild(pageWrapper);
-                }
-                // 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) {
-                        const newBlock = document.createElement('div');
-                        newBlock.classList.add('block-item');
-                        newBlock.setAttribute('data-block-id', blockData.id);
-                        newBlock.setAttribute('data-page-id', 'block-container');
-                        newBlock.innerHTML = blockData.innerHTML;
-                        newBlock.setAttribute('draggable', true);
-                        newBlock.addEventListener('dragstart', handleDragStart);
-                        newBlock.addEventListener('dragend', handleDragEnd);
-
-                        const blocks = pageWrapper.querySelectorAll('.block-item');
-                        if (pos.index < blocks.length) {
-                            pageWrapper.insertBefore(newBlock, blocks[pos.index]);
-                            console.log(`Moved block back to original position ${pos.index} in block-container`);
-                        } else {
-                            pageWrapper.appendChild(newBlock);
-                            console.log('Appended block to the end of block-container');
-                        }
-                    }
-                });
-                createNewPage();
-
-                console.log('Reset complete, all blocks moved back to block-container');
-                initializeTextareaResizing();
-            }
-
-            pageContainer.addEventListener('dragover', handleDragOver);
-            pageContainer.addEventListener('drop', handleDrop);
-            
-            trashArea.addEventListener('dragover', handleTrashOver);
-            trashArea.addEventListener('dragleave', handleTrashLeave);
-            trashArea.addEventListener('drop', handleTrashDrop);
-            resetButton.addEventListener('click', handleReset);
-            extractBlocks();
-        });
+    <script src="scripts.js"></script>
         
     </script>
 </body>

template_update.html

@@ -0,0 +1,315 @@
+<div class="page" id="block-page" data-page-id="block-container">
+    <div class="block-item" data-block-id="0" data-page-id="block-container" draggable="true">
+        <h1>
+            <textarea class="title-textarea" id="user-store-title" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-name" hx-swap="outerHTML" title="Name of store">Enchanted Roots Gear Emporium</textarea>
+        </h1>
+        <div contenteditable="true" class="description-textarea" id="user-store-description" hx-post="/update-stats" hx-trigger="change" hx-target="#user-monster-description" hx-swap="outerHTML" title="Any amount or style of description" style="height: 195px;">
+            <p>Nestled in the heart of the bustling Market District, Enchanted Roots Gear Emporium is a veritable Eden for adventurers seeking gear with a twist of magic and a dash of the unexpected. A vivid cacophony of wild, glowing flora complements the vast inventory of essential equipment and enchanting curiosities. Enchanted Roots was established by Gorgeous, an intelligent fae plant, after it was discovered by a wandering druid in a mystical forest. With an innate understanding of magical flora and fauna, Gorgeous decided to settle in town and share its treasures with the world. Renowned for its unique owner and unusual collection, adventurers and local townsfolk alike swear by the quality and charm of the items sold here.</p>
+        </div>
+    </div>
+    
+    <div class="block-item" data-block-id="1" data-page-id="block-container" draggable="true">
+        <textarea class="string-action-description-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>
+    
+    <div class="block-item" data-block-id="2" data-page-id="block-container" draggable="true">
+        <div class="block classTable frame decoration">
+            <table>
+                <thead>
+                    <tr>
+                        <th align="left"></th>
+                        <th align="center"></th>
+                        <th align="center"></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr> 
+                        <td align="left"><strong>Size</strong></td>
+                        <td align="right"><textarea class="string-action-description-textarea" id="user-store-size-2" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-size-2t" hx-swap="outerHTML" title="Store Size">Medium</textarea></td>
+                    </tr>
+                    <tr>
+                        <td align="left"><strong>Town</strong></td>
+                        <td align="right"><textarea class="string-action-description-textarea" id="user-store-town-2" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-town-2t" hx-swap="outerHTML" title="Store Size">Everbright</textarea></td>
+                    </tr>
+                    <tr>
+                        <td align="left"><strong>District</strong></td>
+                        <td align="right"><textarea class="string-action-description-textarea" id="user-store-district-2" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-district-2t" hx-swap="outerHTML" title="Store Size">Market District</textarea></td>
+                    </tr>
+                    <tr>
+                        <td align="left"><strong>Street</strong></td>
+                        <td align="right"><textarea class="string-action-description-textarea" id="user-store-street-2" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-street-2t" hx-swap="outerHTML" title="Store Size">Wanderer's Way</textarea></td>
+                    </tr>
+                    <tr>
+                        <td align="left"><strong>Type</strong></td>
+                        <td align="right"><textarea class="string-action-description-textarea" id="user-store-type-2" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-type-2t" hx-swap="outerHTML" title="Store Size">Gear Shop</textarea></td>
+                    </tr>
+                    <tr>
+                        <td align="left"><strong>Store Hours</strong></td>
+                        <td align="right"><textarea class="string-action-description-textarea" id="user-store-hours-2" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-hours-2t" hx-swap="outerHTML" title="Store Size">9 AM - 6 PM, daily</textarea></td>
+                    </tr> 
+                    <tr>
+                        <td align="left"><strong>Store Services</strong></td>
+                        <td align="right"><textarea class="string-action-description-textarea" id="user-store-services-2" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-services-2t" hx-swap="outerHTML" title="">Plant Whispering</textarea></td>
+                    </tr>
+                    <tr>
+                        <td align="left"><strong>Store Services</strong></td>
+                        <td align="right"><textarea class="string-action-description-textarea" id="user-store-services-2" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-services-2t" hx-swap="outerHTML" title="">Enchantment Infusion</textarea></td>
+                    </tr>
+                    <tr>
+                        <td align="left"><strong>Store Specialties</strong></td>
+                        <td align="right"><textarea class="string-action-description-textarea" id="user-store-specialties-2" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-specialties-2t" hx-swap="outerHTML" title="">Fae Light Compass</textarea></td>
+                    </tr>
+                    <tr>
+                        <td align="left"><strong>Store Rumors</strong></td>
+                        <td align="right"><textarea class="string-action-description-textarea" id="user-store-rumors-2" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-rumors-2t" hx-swap="outerHTML" title="Rumors" style="height: 64px;">It's whispered that if a seed from Gorgeous's pot is planted under a full moon, it will sprout a magical beanstalk leading to another realm.</textarea></td>
+                    </tr>
+                    <tr>
+                        <td align="left"><strong>Store Reputation</strong></td>
+                        <td align="right"><textarea class="string-action-description-textarea" id="user-store-reputation-2" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-reputation-2t" hx-swap="outerHTML" title="Store Size" style="height: 80px;">Renowned for its unique owner and unusual collection, adventurers and local townsfolk alike swear by the quality and charm of the items sold here.</textarea></td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </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>
+        <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 class="block-item" data-block-id="4" data-page-id="block-container" draggable="true">
+        <h2 id="owner">Owner</h2>
+        <h3 id="owner_1"><textarea class="subtitle-textarea" id="user-store-owner-4" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-owner-4t" hx-swap="outerHTML" title="Owner Name">Gorgeous</textarea></h3>
+        <table>
+            <thead>
+                <tr>
+                    <th align="center"></th>
+                    <th align="center"></th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td align="left"><strong>Owner</strong></td>
+                    <td align="right"><textarea class="string-action-description-textarea" id="Owner-4" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-owners-4t" hx-swap="outerHTML" title="">Gorgeous</textarea></td>
+                </tr>
+                <tr>
+                    <td align="left"><strong>Species</strong></td>
+                    <td align="right"><textarea class="string-action-description-textarea" id="Species-4" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-owners-4t" hx-swap="outerHTML" title="">Fae Plant</textarea></td>
+                </tr>
+                <tr>
+                    <td align="left"><strong>Class</strong></td>
+                    <td align="right"><textarea class="string-action-description-textarea" id="Class-4" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-owners-4t" hx-swap="outerHTML" title="">Druid</textarea></td>
+                </tr>
+                <tr>
+                    <td align="left"><strong>Description</strong></td>
+                    <td align="right"><textarea class="string-action-description-textarea" id="Description-4" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-owners-4t" hx-swap="outerHTML" title="" style="height: 32px;">A vibrant potted plant with bioluminescent tendrils and a captivating aura.</textarea></td>
+                </tr>
+                <tr>
+                    <td align="left"><strong>Personality</strong></td>
+                    <td align="right"><textarea class="string-action-description-textarea" id="Personality-4" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-owners-4t" hx-swap="outerHTML" title="" style="height: 32px;">Charming, knowledgeable, with a dry sense of humor.</textarea></td>
+                </tr>
+                <tr>
+                    <td align="left"><strong>Secrets</strong></td>
+                    <td align="right"><textarea class="string-action-description-textarea" id="user-store-secrets-4" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-secrets-4t" hx-swap="outerHTML" title="Store Size">Contains hidden seeds of a rare, sentient forest.</textarea></td>
+                </tr>
+                <tr>
+                    <td align="left"><strong>Secrets</strong></td>
+                    <td align="right"><textarea class="string-action-description-textarea" id="user-store-secrets-4" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-secrets-4t" hx-swap="outerHTML" title="Store Size" style="height: 32px;">Can communicate with other plants within a mile radius.</textarea></td>
+                </tr>
+            </tbody>
+        </table>
+    </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>
+        <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 class="block-item" data-block-id="6" data-page-id="block-container" draggable="true">
+        <h2 id="employee">Employee</h2>
+        <h3 id="owner_1"><textarea class="subtitle-textarea" id="user-store-employee-6" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-employee-6t" hx-swap="outerHTML" title="Employee Name">Briar</textarea></h3>
+        <table>
+            <thead>
+                <tr>
+                    <th align="center"></th>
+                    <th align="center"></th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td align="left"><strong>Employee</strong></td>
+                    <td align="right"><textarea class="string-action-description-textarea" id="Employee-6" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-employee-6t" hx-swap="outerHTML" title="">Briar</textarea></td>
+                </tr>
+                <tr>
+                    <td align="left"><strong>Role</strong></td>
+                    <td align="right"><textarea class="string-action-description-textarea" id="Role-6" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-employee-6t" hx-swap="outerHTML" title="">Shopkeeper</textarea></td>
+                </tr>
+                <tr>
+                    <td align="left"><strong>Species</strong></td>
+                    <td align="right"><textarea class="string-action-description-textarea" id="Species-6" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-employee-6t" hx-swap="outerHTML" title="">Half-Elf</textarea></td>
+                </tr>
+                <tr>
+                    <td align="left"><strong>Description</strong></td>
+                    <td align="right"><textarea class="string-action-description-textarea" id="Description-6" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-employee-6t" hx-swap="outerHTML" title="" style="height: 32px;">A lithe figure with forest-green eyes and hair adorned with tiny flowers.</textarea></td>
+                </tr>
+                <tr>
+                    <td align="left"><strong>Personality</strong></td>
+                    <td align="right"><textarea class="string-action-description-textarea" id="Personality-6" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-employee-6t" hx-swap="outerHTML" title="" style="height: 32px;">Warm, effervescent, with an encyclopedic knowledge of magical flora.</textarea></td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+    
+    <div class="block-item" data-block-id="7" data-page-id="block-container" draggable="true">
+        <h1 id="store-quests">Customers</h1>
+        <h3 id="customer_1">
+            <textarea class="subtitle-textarea" id="user-store-customer-7" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-customer-7t" hx-swap="outerHTML" title="Customer Name">Thistle</textarea>
+        </h3>
+        <p>
+            <textarea class="string-action-description-textarea" id="user-store-customer-7" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-customer-7t" hx-swap="outerHTML" title="Customer Description" style="height: 32px;">Description: A mischievous forest sprite often seen fluttering among the flora displays.</textarea>
+        </p>
+        <p>
+            <textarea class="string-action-description-textarea" id="user-store-customer-7" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-customer-7t" hx-swap="outerHTML" title="Customer Influence">Influence: Helps attract other mythical creatures to the shop.</textarea>
+        </p>
+    </div>
+    
+    <div class="block-item" data-block-id="8" data-page-id="block-container" draggable="true">
+        <h1 id="store-quests">Store Quests</h1>
+        <h3 id="quest_1">
+            <textarea class="subtitle-textarea" id="user-store-quest-8" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-quest-8t" hx-swap="outerHTML" title="Quest Name">The Lost Seed</textarea>
+        </h3>
+        <p>
+            <textarea class="string-action-description-textarea" id="user-store-quest-8" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-quest-8t" hx-swap="outerHTML" title="Quest Description" style="height: 63px;">Description: Gorgeous has lost a mystical seed that grants immense power to the one who plants it. Locate the seed somewhere in the mystical forest, but beware of the enchanted creatures residing there.</textarea>
+        </p>
+        <p>
+            <textarea class="string-action-description-textarea" id="user-store-quest-8" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-quest-8t" hx-swap="outerHTML" title="Quest Reward" style="height: 32px;">Reward: An enchanted satchel that holds double its volume without increasing in weight.</textarea>
+        </p>
+    </div>
+    
+    <div class="block-item" data-block-id="9" data-page-id="block-container" draggable="true">
+        <h1 id="store-quests">Services</h1>
+        <h3 id="service_1">
+            <textarea class="subtitle-textarea" id="user-store-service-9" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-service-9t" hx-swap="outerHTML" title="Service Name">Plant Whispering</textarea>
+        </h3>
+        <p>
+            <textarea class="string-action-description-textarea" id="user-store-service-9" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-service-9t" hx-swap="outerHTML" title="Service Description" style="height: 48px;">Description: A unique service where Gorgeous communicates with the plants brought in by customers, diagnosing their needs and healing them.</textarea>
+        </p>
+        <p>
+            <textarea class="string-action-description-textarea" id="user-store-service-9" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-service-9t" hx-swap="outerHTML" title="Service Price">Price: 5 gold pieces per session</textarea>
+        </p>
+    </div>
+    
+    <div class="block-item" data-block-id="10" data-page-id="block-container" draggable="true">
+        <h3 id="service_2">
+            <textarea class="subtitle-textarea" id="user-store-service-10" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-service-10t" hx-swap="outerHTML" title="Service Name">Enchantment Infusion</textarea>
+        </h3>
+        <p>
+            <textarea class="string-action-description-textarea" id="user-store-service-10" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-service-10t" hx-swap="outerHTML" title="Service Description" style="height: 32px;">Description: Infuse your regular gear with minor enchantments for enhanced performance.</textarea>
+        </p>
+        <p>
+            <textarea class="string-action-description-textarea" id="user-store-service-10" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-service-10t" hx-swap="outerHTML" title="Service Price">Price: 20 gold pieces per item</textarea>
+        </p>
+    </div>
+    
+    <div class="block-item" data-block-id="11" data-page-id="block-container" draggable="true">
+        <h1 id="store-quests">Specialties</h1>
+        <h3 id="specialty_1">
+            <textarea class="subtitle-textarea" id="user-store-specialty-11" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-specialty-11t" hx-swap="outerHTML" title="Specialty Name">Fae Light Compass</textarea>
+        </h3>
+        <p>
+            <textarea class="string-action-description-textarea" id="user-store-specialty-11" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-specialty-11t" hx-swap="outerHTML" title="Specialty Description" style="height: 32px;">Description: A magical compass that not only points north but also glows brightly in the presence of nearby hidden treasures.</textarea>
+        </p>
+        <p>
+            <textarea class="string-action-description-textarea" id="user-store-specialty-11" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-specialty-11t" hx-swap="outerHTML" title="Specialty Price">Price: 35 gold pieces</textarea>
+        </p>
+    </div>
+    
+    <div class="block-item" data-block-id="12" data-page-id="block-container" draggable="true">
+        <h1 id="store-quests">Security</h1>
+        <h3 id="security_1">
+            <textarea class="subtitle-textarea" id="user-store-security-12" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-security-12t" hx-swap="outerHTML" title="Security Name">Root Sentinels</textarea>
+        </h3>
+        <p>
+            <textarea class="string-action-description-textarea" id="user-store-security-12" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-security-12t" hx-swap="outerHTML" title="Security Description" style="height: 32px;">Description: Invisible roots that prevent theft by entangling or tripping would-be thieves.</textarea>
+        </p>
+        <p>
+            <textarea class="string-action-description-textarea" id="user-store-security-12" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-security-12t" hx-swap="outerHTML" title="Security Mechanics" style="height: 32px;">Mechanics: Automatically triggered by any unauthorized attempt to take an item, they immobilize and alert the staff.</textarea>
+        </p>
+    </div>
+    
+    <div class="block-item" data-block-id="13" data-page-id="block-container" draggable="true">
+        <div class="block classTable frame decoration">
+            <h5 id="inventory">Inventory</h5>
+            <table>
+                <thead>
+                    <tr>
+                        <th align="center">Name</th>
+                        <th align="center">Type</th>
+                        <th align="left">Cost</th>
+                        <th align="center">Properties</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td align="center"><textarea class="string-action-description-textarea" id="user-store-item-name-13" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-item-name-13t" hx-swap="outerHTML" title="Item Name" style="height: 32px;">Traveler's Cloak</textarea></td>
+                        <td align="center"><textarea class="string-action-description-textarea" id="user-store-item-type-13" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-item-type-13t" hx-swap="outerHTML" title="Item Type">Apparel</textarea></td>
+                        <td align="center"><textarea class="string-action-description-textarea" id="user-store-item-cost-13" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-item-cost-13t" hx-swap="outerHTML" title="Item Cost">12 gold pieces</textarea></td>
+                        <td align="center"><textarea class="string-action-description-textarea" id="user-store-item-properties-13" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-item-properties-13t" hx-swap="outerHTML" title="Item Properties" style="height: 48px;">Weather-resistant, Self-cleaning</textarea></td>
+                    </tr>
+                    <tr>
+                        <td align="center"><textarea class="string-action-description-textarea" id="user-store-item-name-13" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-item-name-13t" hx-swap="outerHTML" title="Item Name" style="height: 32px;">Explorer's Rope</textarea></td>
+                        <td align="center"><textarea class="string-action-description-textarea" id="user-store-item-type-13" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-item-type-13t" hx-swap="outerHTML" title="Item Type">Equipment</textarea></td>
+                        <td align="center"><textarea class="string-action-description-textarea" id="user-store-item-cost-13" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-item-cost-13t" hx-swap="outerHTML" title="Item Cost">8 gold pieces</textarea></td>
+                        <td align="center"><textarea class="string-action-description-textarea" id="user-store-item-properties-13" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-item-properties-13t" hx-swap="outerHTML" title="Item Properties" style="height: 32px;">Unbreakable, 50 feet long</textarea></td>
+                    </tr>
+                    <tr>
+                        <td align="center"><textarea class="string-action-description-textarea" id="user-store-item-name-13" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-item-name-13t" hx-swap="outerHTML" title="Item Name" style="height: 32px;">Glowing Map</textarea></td>
+                        <td align="center"><textarea class="string-action-description-textarea" id="user-store-item-type-13" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-item-type-13t" hx-swap="outerHTML" title="Item Type" style="height: 32px;">Navigational Aid</textarea></td>
+                        <td align="center"><textarea class="string-action-description-textarea" id="user-store-item-cost-13" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-item-cost-13t" hx-swap="outerHTML" title="Item Cost">15 gold pieces</textarea></td>
+                        <td align="center"><textarea class="string-action-description-textarea" id="user-store-item-properties-13" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-item-properties-13t" hx-swap="outerHTML" title="Item Properties" style="height: 49px;">Illuminates in the dark, Self-updating</textarea></td>
+                    </tr>
+                    <tr>
+                        <td align="center"><textarea class="string-action-description-textarea" id="user-store-item-name-13" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-item-name-13t" hx-swap="outerHTML" title="Item Name" style="height: 32px;">Mystic Lantern</textarea></td>
+                        <td align="center"><textarea class="string-action-description-textarea" id="user-store-item-type-13" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-item-type-13t" hx-swap="outerHTML" title="Item Type">Tool</textarea></td>
+                        <td align="center"><textarea class="string-action-description-textarea" id="user-store-item-cost-13" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-item-cost-13t" hx-swap="outerHTML" title="Item Cost">10 gold pieces</textarea></td>
+                        <td align="center"><textarea class="string-action-description-textarea" id="user-store-item-properties-13" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-item-properties-13t" hx-swap="outerHTML" title="Item Properties" style="height: 48px;">Ever-burning flame, Detects magical auras</textarea></td>
+                    </tr>
+                    <tr>
+                        <td align="center"><textarea class="string-action-description-textarea" id="user-store-item-name-13" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-item-name-13t" hx-swap="outerHTML" title="Item Name" style="height: 32px;">Waterproof Satchel</textarea></td>
+                        <td align="center"><textarea class="string-action-description-textarea" id="user-store-item-type-13" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-item-type-13t" hx-swap="outerHTML" title="Item Type">Bag</textarea></td>
+                        <td align="center"><textarea class="string-action-description-textarea" id="user-store-item-cost-13" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-item-cost-13t" hx-swap="outerHTML" title="Item Cost">18 gold pieces</textarea></td>
+                        <td align="center"><textarea class="string-action-description-textarea" id="user-store-item-properties-13" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-item-properties-13t" hx-swap="outerHTML" title="Item Properties" style="height: 64px;">Waterproof, Pockets that adjust for extra space</textarea></td>
+                    </tr>
+                    <tr>
+                        <td align="center"><textarea class="string-action-description-textarea" id="user-store-item-name-13" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-item-name-13t" hx-swap="outerHTML" title="Item Name" style="height: 32px;">Verdant Blade</textarea></td>
+                        <td align="center"><textarea class="string-action-description-textarea" id="user-store-item-type-13" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-item-type-13t" hx-swap="outerHTML" title="Item Type">Sword</textarea></td>
+                        <td align="center"><textarea class="string-action-description-textarea" id="user-store-item-cost-13" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-item-cost-13t" hx-swap="outerHTML" title="Item Cost">50 gold pieces</textarea></td>
+                        <td align="center"><textarea class="string-action-description-textarea" id="user-store-item-properties-13" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-item-properties-13t" hx-swap="outerHTML" title="Item Properties" style="height: 80px;">Chlorophyll-infused edge, Regenerates minor damage over time</textarea></td>
+                    </tr>
+                    <tr>
+                        <td align="center"><textarea class="string-action-description-textarea" id="user-store-item-name-13" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-item-name-13t" hx-swap="outerHTML" title="Item Name" style="height: 32px;">Barkskin Armor</textarea></td>
+                        <td align="center"><textarea class="string-action-description-textarea" id="user-store-item-type-13" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-item-type-13t" hx-swap="outerHTML" title="Item Type">Light Armor</textarea></td>
+                        <td align="center"><textarea class="string-action-description-textarea" id="user-store-item-cost-13" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-item-cost-13t" hx-swap="outerHTML" title="Item Cost">40 gold pieces</textarea></td>
+                        <td align="center"><textarea class="string-action-description-textarea" id="user-store-item-properties-13" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-item-properties-13t" hx-swap="outerHTML" title="Item Properties" style="height: 80px;">Provides moderate protection, Camouflages in forested areas</textarea></td>
+                    </tr>
+                    <tr>
+                        <td align="center"><textarea class="string-action-description-textarea" id="user-store-item-name-13" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-item-name-13t" hx-swap="outerHTML" title="Item Name" style="height: 32px;">Elixir of Root Strength</textarea></td>
+                        <td align="center"><textarea class="string-action-description-textarea" id="user-store-item-type-13" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-item-type-13t" hx-swap="outerHTML" title="Item Type">Potion</textarea></td>
+                        <td align="center"><textarea class="string-action-description-textarea" id="user-store-item-cost-13" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-item-cost-13t" hx-swap="outerHTML" title="Item Cost">25 gold pieces</textarea></td>
+                        <td align="center"><textarea class="string-action-description-textarea" id="user-store-item-properties-13" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-item-properties-13t" hx-swap="outerHTML" title="Item Properties" style="height: 63px;">Temporarily grants enhanced strength and resistance</textarea></td>
+                    </tr>
+                    <tr>
+                        <td align="center"><textarea class="string-action-description-textarea" id="user-store-item-name-13" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-item-name-13t" hx-swap="outerHTML" title="Item Name" style="height: 32px;">Seed of Instant Growth</textarea></td>
+                        <td align="center"><textarea class="string-action-description-textarea" id="user-store-item-type-13" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-item-type-13t" hx-swap="outerHTML" title="Item Type">Seed</textarea></td>
+                        <td align="center"><textarea class="string-action-description-textarea" id="user-store-item-cost-13" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-item-cost-13t" hx-swap="outerHTML" title="Item Cost">30 gold pieces</textarea></td>
+                        <td align="center"><textarea class="string-action-description-textarea" id="user-store-item-properties-13" hx-post="/update-stats" hx-trigger="change" hx-target="#user-store-item-properties-13t" hx-swap="outerHTML" title="Item Properties" style="height: 80px;">Grows into a full-sized tree within minutes, Can be used once</textarea></td>
+                    </tr>
+                </tbody>
+            </table>
+        </div> 
+    </div>
+</div>