/**
* Inventory Rendering Module
* Handles UI rendering for inventory v2 system
*/
import { extensionSettings, $inventoryContainer } from '../../core/state.js';
import { getInventoryRenderOptions, restoreFormStates } from '../interaction/inventoryActions.js';
import { updateInventoryItem } from '../interaction/inventoryEdit.js';
import { parseItems } from '../../utils/itemParser.js';
import { i18n } from '../../core/i18n.js';
import { itemHasLinkedSkills, navigateToLinkedSkills } from './skills.js';
// Type imports
/** @typedef {import('../../types/inventory.js').InventoryV2} InventoryV2 */
/**
* Converts a location name to a safe ID for use in HTML element IDs.
* Must match the logic used in inventoryActions.js.
* @param {string} locationName - The location name
* @returns {string} Safe ID string
*/
export function getLocationId(locationName) {
// Remove all non-alphanumeric characters except spaces, then replace spaces with hyphens
return locationName.replace(/[^a-zA-Z0-9\s]/g, '').replace(/\s+/g, '-');
}
/**
* Generates the skill link indicator for an inventory item
* @param {string} itemName - The item name
* @returns {string} HTML string for the link indicator (empty if no links)
*/
function getSkillLinkIndicator(itemName) {
if (!extensionSettings.enableItemSkillLinks || !extensionSettings.showSkills) {
return '';
}
if (itemHasLinkedSkills(itemName)) {
return ``;
}
return '';
}
/**
* Renders the inventory sub-tab navigation (On Person, Stored, Assets)
* @param {string} activeTab - Currently active sub-tab ('onPerson', 'stored', 'assets')
* @returns {string} HTML for sub-tab navigation
*/
export function renderInventorySubTabs(activeTab = 'onPerson') {
return `
`;
}
/**
* Gets the description for an item from structured inventory data
* @param {string} field - Field type ('onPerson', 'stored', 'assets', 'simplified')
* @param {number} index - Item index
* @param {string} [location] - Location name for stored items
* @returns {string} Item description or empty string
*/
function getItemDescription(field, index, location = null) {
const inv3 = extensionSettings.inventoryV3;
if (!inv3) return '';
let items;
if (field === 'onPerson') {
items = inv3.onPerson;
} else if (field === 'assets') {
items = inv3.assets;
} else if (field === 'stored' && location) {
items = inv3.stored?.[location];
} else if (field === 'simplified') {
items = inv3.simplified;
}
if (!items || !Array.isArray(items) || !items[index]) return '';
const item = items[index];
return (typeof item === 'object' ? item.description : '') || '';
}
/**
* Renders the "On Person" inventory view with list or grid display
* @param {string} onPersonItems - Current on-person items (comma-separated string)
* @param {string} viewMode - View mode ('list' or 'grid')
* @returns {string} HTML for on-person view with items and add button
*/
export function renderOnPersonView(onPersonItems, viewMode = 'list') {
const items = parseItems(onPersonItems);
let itemsHtml = '';
if (items.length === 0) {
itemsHtml = `
`;
}
/**
* 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',
stored: 'list',
assets: 'list'
};
// Render the active view
switch (activeSubTab) {
case 'onPerson':
html += renderOnPersonView(v2Inventory.onPerson, viewModes.onPerson);
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();
}
/**
* Renders the simplified (single-list) inventory view
* Used when useSimplifiedInventory setting is enabled
* @param {string} itemsString - All items as a comma-separated string
* @param {string} viewMode - View mode ('list' or 'grid')
* @returns {string} HTML for simplified inventory view
*/
export function renderSimplifiedInventoryView(itemsString, viewMode = 'list') {
const items = parseItems(itemsString);
let itemsHtml = '';
if (items.length === 0) {
itemsHtml = `