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
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-10-17 15:14:02 +11:00
parent b00bae905f
commit 790cf995b4
3 changed files with 476 additions and 19 deletions
-19
View File
@@ -55,11 +55,6 @@ export function renderUserStats() {
<div class="rpg-stats-left">
<div style="display: flex; gap: clamp(4px, 0.8vh, 8px); align-items: center; flex-shrink: 0;">
<img src="${userPortrait}" alt="${userName}" class="rpg-user-portrait" onerror="this.style.opacity='0.5';this.onerror=null;" />
<div class="rpg-inventory-box">
<div class="rpg-inventory-items rpg-editable" contenteditable="true" data-field="inventory" title="Click to edit">
${stats.inventory || 'None'}
</div>
</div>
</div>
<div class="rpg-stats-grid">
<div class="rpg-stat-row">
@@ -199,20 +194,6 @@ export function renderUserStats() {
renderUserStats();
});
// Add event listener for inventory editing
$('.rpg-inventory-items.rpg-editable').on('blur', function() {
const value = $(this).text().trim();
extensionSettings.userStats.inventory = value || 'None';
// Update lastGeneratedData
const statsText = `Health: ${extensionSettings.userStats.health}%\nSatiety: ${extensionSettings.userStats.satiety}%\nEnergy: ${extensionSettings.userStats.energy}%\nHygiene: ${extensionSettings.userStats.hygiene}%\nArousal: ${extensionSettings.userStats.arousal}%\n${extensionSettings.userStats.mood}: ${extensionSettings.userStats.conditions}\nInventory: ${extensionSettings.userStats.inventory}`;
lastGeneratedData.userStats = statsText;
saveSettings();
saveChatData();
updateMessageSwipeData();
});
// Add event listeners for mood/conditions editing
$('.rpg-mood-emoji.rpg-editable').on('blur', function() {
const value = $(this).text().trim();