client/addons/locker/ui/_site/script.js

// Simulated locker data - this would be replaced with actual game data
let lockerData = {
    storageSpace: {
        used: 45,
        total: 100
    },
    playerEquipment: [
        {
            id: 1,
            name: "Combat Uniform",
            type: "clothing",
            category: "Uniform",
            condition: 95
        },
        {
            id: 2,
            name: "Tactical Vest",
            type: "clothing",
            category: "Vest",
            condition: 88
        },
        {
            id: 3,
            name: "Combat Backpack",
            type: "clothing",
            category: "Backpack",
            condition: 90
        },
        {
            id: 4,
            name: "Assault Rifle",
            type: "weapons",
            category: "Primary",
            condition: 92,
            attachments: ["Scope", "Grip"]
        }
    ],
    storedItems: [
        {
            id: 5,
            name: "Pistol",
            type: "weapons",
            category: "Secondary",
            condition: 100
        },
        {
            id: 6,
            name: "Medical Kit",
            type: "equipment",
            category: "Medical",
            quantity: 3
        },
        {
            id: 7,
            name: "Rifle Magazines",
            type: "magazines",
            category: "Magazine",
            quantity: 5
        },
        {
            id: 8,
            name: "Combat Helmet",
            type: "clothing",
            category: "Headgear",
            condition: 85
        }
    ]
};

// Initialize the locker interface
function initializeLocker() {
    updateStats();
    setupFilterListeners();
    updateEquipmentLists();
}

// Update storage statistics
function updateStats() {
    document.getElementById('storageSpace').textContent = 
        `${lockerData.storageSpace.used}/${lockerData.storageSpace.total}`;
    document.getElementById('itemCount').textContent = 
        lockerData.storedItems.length;
}

// Set up category filter listeners
function setupFilterListeners() {
    const filterButtons = document.querySelectorAll('.filter-btn');
    
    filterButtons.forEach(button => {
        button.addEventListener('click', (e) => {
            // Update active state
            filterButtons.forEach(btn => btn.classList.remove('active'));
            button.classList.add('active');
            
            // Filter items
            const category = button.dataset.category;
            filterEquipment(category);
        });
    });
}

// Filter equipment by category
function filterEquipment(category) {
    const playerItems = category === 'all' 
        ? lockerData.playerEquipment 
        : lockerData.playerEquipment.filter(item => item.type === category);
    
    const storedItems = category === 'all'
        ? lockerData.storedItems
        : lockerData.storedItems.filter(item => item.type === category);
    
    updateEquipmentLists(playerItems, storedItems);
}

// Update equipment lists display
function updateEquipmentLists(playerItems = lockerData.playerEquipment, storedItems = lockerData.storedItems) {
    const playerList = document.getElementById('playerEquipment');
    const storedList = document.getElementById('storedEquipment');
    
    // Update player equipment
    playerList.innerHTML = playerItems.map(item => `
        <div class="equipment-item" data-id="${item.id}">
            <div class="item-info">
                <span class="item-name">${item.name}</span>
                <span class="item-type">${item.category}</span>
                ${item.condition ? `
                    <span class="item-quantity">
                        ${item.condition}%
                    </span>
                ` : ''}
            </div>
            <button class="action-btn store-btn" onclick="storeItem(${item.id})">
                Store
            </button>
        </div>
    `).join('');
    
    // Update stored equipment
    storedList.innerHTML = storedItems.map(item => `
        <div class="equipment-item" data-id="${item.id}">
            <div class="item-info">
                <span class="item-name">${item.name}</span>
                <span class="item-type">${item.category}</span>
                ${item.quantity ? `
                    <span class="item-quantity">
                        x${item.quantity}
                    </span>
                ` : item.condition ? `
                    <span class="item-quantity">
                        ${item.condition}%
                    </span>
                ` : ''}
            </div>
            <button class="action-btn equip-btn" onclick="equipItem(${item.id})">
                Equip
            </button>
        </div>
    `).join('');

    // Add click listeners for showing details
    document.querySelectorAll('.equipment-item').forEach(item => {
        item.addEventListener('click', () => showItemDetails(item.dataset.id));
    });
}

// Show item details
function showItemDetails(itemId) {
    const item = lockerData.playerEquipment.find(i => i.id === parseInt(itemId)) ||
                lockerData.storedItems.find(i => i.id === parseInt(itemId));
    
    if (!item) return;

    const detailsDiv = document.getElementById('equipmentDetails');
    detailsDiv.innerHTML = `
        <h3>${item.name}</h3>
        <div class="detail-grid">
            <div class="detail-item">
                <span class="detail-label">Category:</span>
                <span class="detail-value">${item.category}</span>
            </div>
            <div class="detail-item">
                <span class="detail-label">Type:</span>
                <span class="detail-value">${item.type}</span>
            </div>
            ${item.condition ? `
                <div class="detail-item">
                    <span class="detail-label">Condition:</span>
                    <span class="detail-value">${item.condition}%</span>
                </div>
            ` : ''}
            ${item.quantity ? `
                <div class="detail-item">
                    <span class="detail-label">Quantity:</span>
                    <span class="detail-value">x${item.quantity}</span>
                </div>
            ` : ''}
            ${item.attachments ? `
                <div class="detail-item">
                    <span class="detail-label">Attachments:</span>
                    <span class="detail-value">${item.attachments.join(', ')}</span>
                </div>
            ` : ''}
        </div>
    `;
}

// Store an item in the locker
function storeItem(itemId) {
    const itemIndex = lockerData.playerEquipment.findIndex(item => item.id === itemId);
    if (itemIndex === -1) return;

    const item = lockerData.playerEquipment[itemIndex];
    lockerData.playerEquipment.splice(itemIndex, 1);
    lockerData.storedItems.push(item);
    lockerData.storageSpace.used += 1;

    updateStats();
    updateEquipmentLists();
}

// Equip an item from the locker
function equipItem(itemId) {
    const itemIndex = lockerData.storedItems.findIndex(item => item.id === itemId);
    if (itemIndex === -1) return;

    const item = lockerData.storedItems[itemIndex];
    lockerData.storedItems.splice(itemIndex, 1);
    lockerData.playerEquipment.push(item);
    lockerData.storageSpace.used -= 1;

    updateStats();
    updateEquipmentLists();
}

// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', initializeLocker);