script.js

// Get DOM elements for first masonry layout
const input = document.getElementById('items-input');
const row1 = document.getElementById('row-1');
const row2 = document.getElementById('row-2');

// Get DOM elements for second masonry layout
const beDrivenInput = document.getElementById('be-driven-input');
const rowTop = document.getElementById('row-top');
const rowBottom = document.getElementById('row-bottom');

// Load saved values from localStorage
function loadSavedValues() {
    const savedInput = localStorage.getItem('items-input');
    const savedBeDrivenInput = localStorage.getItem('be-driven-input');
    
    if (savedInput !== null) {
        input.value = savedInput;
    }
    if (savedBeDrivenInput !== null) {
        beDrivenInput.value = savedBeDrivenInput;
    }
}

// Save values to localStorage
function saveValue(key, value) {
    localStorage.setItem(key, value);
}

// Function to update the masonry layout
function updateMasonryLayout() {
    // Get input value and split by comma
    const inputValue = input.value.trim();
    
    // Clear existing items
    row1.innerHTML = '';
    row2.innerHTML = '';
    
    if (!inputValue) {
        document.getElementById('ui-row1-stat').textContent = 'width sum: 0px';
        document.getElementById('ui-row2-stat').textContent = 'width sum: 0px';
        return;
    }
    
    // Split by comma and trim each item
    const items = inputValue.split(',').map(item => item.trim()).filter(item => item !== '');
    
    // Keep track of estimated widths for each row
    let row1Width = 0;
    let row2Width = 0;
    
    // Distribute items based on row width (each item goes to the row with smaller width)
    items.forEach((item) => {
        const itemElement = document.createElement('div');
        itemElement.className = 'masonry-item';
        itemElement.textContent = item;
        
        // Temporarily add to measure width
        document.body.appendChild(itemElement);
        const itemWidth = itemElement.offsetWidth;
        document.body.removeChild(itemElement);
        
        // Add to the row with smaller width
        if (row1Width <= row2Width) {
            row1.appendChild(itemElement);
            row1Width += itemWidth + 8; // +8 for gap
        } else {
            row2.appendChild(itemElement);
            row2Width += itemWidth + 8; // +8 for gap
        }
    });
    
    // Update stats (subtract last gap)
    document.getElementById('ui-row1-stat').textContent = `width sum: ${Math.max(0, row1Width - 8)}px`;
    document.getElementById('ui-row2-stat').textContent = `width sum: ${Math.max(0, row2Width - 8)}px`;
}

// Function to populate a single row from input
function populateSingleRow(inputElement, rowElement) {
    const inputValue = inputElement.value.trim();
    
    // Clear existing items
    rowElement.innerHTML = '';
    
    if (!inputValue) {
        return;
    }
    
    // Split by comma and trim each item
    const items = inputValue.split(',').map(item => item.trim()).filter(item => item !== '');
    
    // Add items to the row
    items.forEach((item) => {
        const itemElement = document.createElement('div');
        itemElement.className = 'masonry-item';
        itemElement.textContent = item;
        rowElement.appendChild(itemElement);
    });
}

// Function to update the second masonry layout (character-count based)
function updateBeDrivenLayout() {
    const inputValue = beDrivenInput.value.trim();
    
    // Clear existing items
    rowTop.innerHTML = '';
    rowBottom.innerHTML = '';
    
    if (!inputValue) {
        document.getElementById('be-row-top-stat').textContent = 'character sum: 0';
        document.getElementById('be-row-bottom-stat').textContent = 'character sum: 0';
        return;
    }
    
    // Split by comma and trim each item
    const items = inputValue.split(',').map(item => item.trim()).filter(item => item !== '');
    
    // Keep track of character counts for each row
    let topRowChars = 0;
    let bottomRowChars = 0;
    
    // Distribute items based on character count
    items.forEach((item) => {
        const itemElement = document.createElement('div');
        itemElement.className = 'masonry-item';
        itemElement.textContent = item;
        
        const charCount = item.length;
        
        // Add to the row with fewer characters
        if (topRowChars <= bottomRowChars) {
            rowTop.appendChild(itemElement);
            topRowChars += charCount;
        } else {
            rowBottom.appendChild(itemElement);
            bottomRowChars += charCount;
        }
    });
    
    // Update stats
    document.getElementById('be-row-top-stat').textContent = `character sum: ${topRowChars}`;
    document.getElementById('be-row-bottom-stat').textContent = `character sum: ${bottomRowChars}`;
}

// Listen for input changes
input.addEventListener('input', () => {
    saveValue('items-input', input.value);
    updateMasonryLayout();
});
beDrivenInput.addEventListener('input', () => {
    saveValue('be-driven-input', beDrivenInput.value);
    updateBeDrivenLayout();
});

// Load saved values and initialize on page load
loadSavedValues();
updateMasonryLayout();
updateBeDrivenLayout();