${(i18n.getTranslation('inventory.stored.removeLocationConfirm') || 'Remove "{location}"? This will delete all items stored there.').replace('{location}', escapeHtml(location))}
`;
}
}
html += `
`;
return html;
}
/**
* Renders the "Assets" inventory view with list or grid display
* @param {string} assets - Current assets (vehicles, property, equipment)
* @param {string} viewMode - View mode ('list' or 'grid')
* @returns {string} HTML for assets view with items and add button
*/
export function renderAssetsView(assets, viewMode = 'list') {
const items = parseItems(assets);
let itemsHtml = '';
if (items.length === 0) {
itemsHtml = '
${i18n.getTranslation('inventory.assets.title') || 'Vehicles, Property & Major Possessions'}
${itemsHtml}
${i18n.getTranslation('inventory.assets.description') || 'Assets include vehicles (cars, motorcycles), property (homes, apartments), and major equipment (workshop tools, special items).'}
`;
}
/**
* Generates inventory HTML (internal helper)
* @param {InventoryV2} inventory - Inventory data to render
* @param {Object} options - Rendering options
* @param {string} options.activeSubTab - Currently active sub-tab ('onPerson', 'stored', 'assets')
* @param {string[]} options.collapsedLocations - Collapsed storage locations
* @returns {string} Complete HTML for inventory tab content
*/
function generateInventoryHTML(inventory, options = {}) {
const {
activeSubTab = 'onPerson',
collapsedLocations = []
} = options;
// Handle legacy v1 format - convert to v2 for display
let v2Inventory = inventory;
if (typeof inventory === 'string') {
v2Inventory = {
version: 2,
onPerson: inventory,
stored: {},
assets: 'None'
};
}
// Ensure v2 structure has all required fields
if (!v2Inventory || typeof v2Inventory !== 'object') {
v2Inventory = {
version: 2,
onPerson: 'None',
stored: {},
assets: 'None'
};
}
// Additional safety check: ensure required properties exist and are correct type
if (!v2Inventory.onPerson || typeof v2Inventory.onPerson !== 'string') {
v2Inventory.onPerson = 'None';
}
if (!v2Inventory.stored || typeof v2Inventory.stored !== 'object' || Array.isArray(v2Inventory.stored)) {
v2Inventory.stored = {};
}
if (!v2Inventory.assets || typeof v2Inventory.assets !== 'string') {
v2Inventory.assets = 'None';
}
let html = `
${renderInventorySubTabs(activeSubTab)}
`;
// Get view modes from settings (default to 'list')
const viewModes = extensionSettings.inventoryViewModes || {
onPerson: 'list',
clothing: 'list',
stored: 'list',
assets: 'list'
};
// Render the active view
switch (activeSubTab) {
case 'onPerson':
html += renderOnPersonView(v2Inventory.onPerson, viewModes.onPerson);
break;
case 'clothing':
html += renderClothingView(v2Inventory.clothing, viewModes.clothing);
break;
case 'stored':
html += renderStoredView(v2Inventory.stored, collapsedLocations, viewModes.stored);
break;
case 'assets':
html += renderAssetsView(v2Inventory.assets, viewModes.assets);
break;
default:
html += renderOnPersonView(v2Inventory.onPerson, viewModes.onPerson);
}
html += `
`;
return html;
}
/**
* Updates the inventory display in the DOM (used by inventoryActions)
* @param {string} containerId - ID of container element to update
* @param {Object} options - Rendering options (passed to generateInventoryHTML)
*/
export function updateInventoryDisplay(containerId, options = {}) {
const container = document.getElementById(containerId);
if (!container) {
console.warn(`[RPG Companion] Inventory container not found: ${containerId}`);
return;
}
const inventory = extensionSettings.userStats.inventory;
const html = generateInventoryHTML(inventory, options);
container.innerHTML = html;
// Restore form states after re-rendering
restoreFormStates();
}
/**
* Main inventory rendering function (matches pattern of other render functions)
* Gets data from state/settings and updates DOM directly.
* Call this after AI generation, character changes, or swipes.
*/
export function renderInventory() {
// Early return if container doesn't exist or section is hidden
if (!$inventoryContainer || !extensionSettings.showInventory) {
return;
}
// Get inventory data from settings
const inventory = extensionSettings.userStats.inventory;
// Get current render options (active tab, collapsed locations)
const options = getInventoryRenderOptions();
// Generate HTML and update DOM
const html = generateInventoryHTML(inventory, options);
const domUpdated = updateIfChanged($inventoryContainer, html, 'rpg-inventory');
// Restore form states after re-rendering (fixes Bug #1)
restoreFormStates();
// Only re-bind event handlers if DOM was actually updated
if (domUpdated) {
// Event listener for editing item names (mobile-friendly contenteditable)
$inventoryContainer.find('.rpg-item-name.rpg-editable').on('blur', function() {
const field = $(this).data('field');
const index = parseInt($(this).data('index'));
const location = $(this).data('location');
const newName = $(this).text().trim();
updateInventoryItem(field, index, newName, location);
});
// Add event listener for section lock icon clicks (support both click and touch)
$inventoryContainer.find('.rpg-section-lock-icon').on('click touchend', function(e) {
e.preventDefault();
e.stopPropagation();
const $icon = $(this);
const trackerType = $icon.data('tracker');
const itemPath = $icon.data('path');
const currentlyLocked = isItemLocked(trackerType, itemPath);
// Toggle lock state
setItemLock(trackerType, itemPath, !currentlyLocked);
// Update icon
const newIcon = !currentlyLocked ? '🔒' : '🔓';
const newTitle = !currentlyLocked ? 'Locked' : 'Unlocked';
$icon.text(newIcon);
$icon.attr('title', newTitle);
// Toggle 'locked' class for persistent visibility
$icon.toggleClass('locked', !currentlyLocked);
// Save settings
saveSettings();
});
} // end if (domUpdated)
}
/**
* Escapes HTML special characters to prevent XSS
* @param {string} text - Text to escape
* @returns {string} Escaped text
*/
function escapeHtml(text) {
if (!text) return '';
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}