abd3ade30e
fix(inventory): refactor renderInventory() to match other render functions
...
Root cause: renderInventory() signature mismatch - was expecting parameters
but called without any, resulting in empty/broken rendering.
Changes:
- Rename renderInventory(inventory, options) → generateInventoryHTML() (internal)
- Create new renderInventory() with no parameters (like renderUserStats, etc.)
- New function gets container from state, data from settings, updates DOM directly
- Import getInventoryRenderOptions() to get current tab/collapse state
- Keep updateInventoryDisplay() for use by inventoryActions module
Now matches the pattern used by all other render modules, fixing the bug where
inventory section appeared empty in the panel.
2025-10-17 15:46:13 +11:00
790cf995b4
feat(inventory): add v2 UI rendering with tabbed interface
...
Create complete inventory UI rendering system:
**NEW: inventory.js rendering module (252 lines):**
- renderInventorySubTabs() - Navigation tabs (On Person, Stored, Assets)
- renderOnPersonView() - Display items currently carried/worn
- renderStoredView() - Collapsible storage locations with edit/remove actions
- renderAssetsView() - Vehicles, property, and major possessions
- renderInventory() - Main rendering function with v1/v2 compatibility
- updateInventoryDisplay() - DOM update helper
- Includes HTML escaping for XSS prevention
**Tab System:**
- Three sub-tabs: On Person, Stored, Assets
- Smooth tab switching with active state highlighting
- Each view shows relevant inventory section
**On Person View:**
- Shows items currently carried/worn
- Edit button to modify items
- Clean text display
**Stored View:**
- Collapsible location sections
- Each location shows: name, items, edit/remove buttons
- "Add Location" button for new storage spots
- Empty state message when no locations exist
- Toggle icons (chevron-down/chevron-right)
**Assets View:**
- Display of vehicles, property, equipment
- Edit button to modify assets
- Helpful hint text explaining asset categories
**Removed old inventory UI from userStats.js:**
- Deleted rpg-inventory-box HTML (5 lines)
- Deleted inventory editing event listener (13 lines)
- Inventory now has dedicated tab instead of inline display
- Maintains backward compatibility for data tracking
**NEW: Inventory CSS styles (242 lines):**
- .rpg-inventory-container - Main layout
- .rpg-inventory-subtabs - Tab navigation styling
- .rpg-inventory-section - Content area styling
- .rpg-storage-location - Collapsible location cards
- Button styles (edit, add, remove) with hover states
- Mobile responsive breakpoints for touch-friendly UI
- Theme-aware using SillyTavern CSS variables
- Font size: 0.9rem for readability
**Design Features:**
- Clean, modern card-based layout
- Smooth transitions and hover effects
- Collapsible sections to reduce clutter
- Consistent with existing RPG Companion theme system
- Mobile-first responsive design
- Touch-friendly button sizes on mobile
Changes:
- NEW: src/systems/rendering/inventory.js (252 lines)
- MODIFIED: src/systems/rendering/userStats.js (-18 lines, removed old UI)
- MODIFIED: style.css (+242 lines, inventory styles)
Part of inventory system v2 implementation
Dependencies: v2 types, migration, parsing, generation
2025-10-17 15:14:02 +11:00
Lucas 'Paperboy' Rose-Winters