Pakobbix/rpg-companion-sillytavern
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(inventory): wire up v2 system to main panel with full interactivity

Browse Source 
- Add inventory section to template.html between Thoughts and bottom controls
- Wire up renderInventory() to all event handlers (message received, character changed, swipes)
- Initialize inventory container reference and event listeners in index.js
- Add showInventory toggle checkbox to settings with visibility control
- Update layout.js to handle inventory section and divider visibility
- Add renderInventory parameter to updateRPGData for separate mode support
- Update state.js and config.js with inventory container and showInventory setting

Inventory is now fully integrated as a visible, interactive panel section that persists across all user interactions.
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-10-17 15:36:15 +11:00
parent 60e4a6c2cc
commit 1f948cd5d8
7 changed files with 64 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.js
+18 -2
View File
@@ -18,6 +18,7 @@ import {
$userStatsContainer,
$infoBoxContainer,
$thoughtsContainer,
$inventoryContainer,
setExtensionSettings,
updateExtensionSettings,
setLastGeneratedData,
@@ -31,7 +32,8 @@ import {
setPanelContainer,
setUserStatsContainer,
setInfoBoxContainer,
setThoughtsContainer
setThoughtsContainer,
setInventoryContainer
} from './src/core/state.js';
import { loadSettings, saveSettings, saveChatData, loadChatData, updateMessageSwipeData } from './src/core/persistence.js';
import { registerAllEvents } from './src/core/events.js';
@@ -58,6 +60,10 @@ import {
updateChatThoughts,
createThoughtPanel
} from './src/systems/rendering/thoughts.js';
import { renderInventory } from './src/systems/rendering/inventory.js';
// Interaction modules
import { initInventoryEventListeners } from './src/systems/interaction/inventoryActions.js';
// UI Systems modules
import {
@@ -180,6 +186,7 @@ async function initUI() {
setUserStatsContainer($('#rpg-user-stats'));
setInfoBoxContainer($('#rpg-info-box'));
setThoughtsContainer($('#rpg-thoughts'));
setInventoryContainer($('#rpg-inventory'));
// Set up event listeners (enable/disable is handled in Extensions tab)
$('#rpg-toggle-auto-update').on('change', function() {
@@ -225,6 +232,12 @@ async function initUI() {
updateSectionVisibility();
});
$('#rpg-toggle-inventory').on('change', function() {
extensionSettings.showInventory = $(this).prop('checked');
saveSettings();
updateSectionVisibility();
});
$('#rpg-toggle-thoughts-in-chat').on('change', function() {
extensionSettings.showThoughtsInChat = $(this).prop('checked');
// console.log('[RPG Companion] Toggle showThoughtsInChat changed to:', extensionSettings.showThoughtsInChat);
@@ -256,7 +269,7 @@ async function initUI() {
// console.log('[RPG Companion] Extension is disabled. Please enable it in the Extensions tab.');
return;
}
await updateRPGData(renderUserStats, renderInfoBox, renderThoughts);
await updateRPGData(renderUserStats, renderInfoBox, renderThoughts, renderInventory);
});
$('#rpg-stat-bar-color-low').on('change', function() {
@@ -330,6 +343,7 @@ async function initUI() {
$('#rpg-toggle-user-stats').prop('checked', extensionSettings.showUserStats);
$('#rpg-toggle-info-box').prop('checked', extensionSettings.showInfoBox);
$('#rpg-toggle-thoughts').prop('checked', extensionSettings.showCharacterThoughts);
$('#rpg-toggle-inventory').prop('checked', extensionSettings.showInventory);
$('#rpg-toggle-thoughts-in-chat').prop('checked', extensionSettings.showThoughtsInChat);
$('#rpg-toggle-html-prompt').prop('checked', extensionSettings.enableHtmlPrompt);
$('#rpg-toggle-plot-buttons').prop('checked', extensionSettings.enablePlotButtons);
@@ -361,6 +375,7 @@ async function initUI() {
renderUserStats();
renderInfoBox();
renderThoughts();
renderInventory();
updateDiceDisplay();
setupDiceRoller();
setupClassicStatsButtons();
@@ -369,6 +384,7 @@ async function initUI() {
setupPlotButtons(sendPlotProgression);
setupMobileKeyboardHandling();
setupContentEditableScrolling();
initInventoryEventListeners();
}
src/core/config.js
+3 -1
View File
@@ -29,6 +29,7 @@ export const defaultSettings = {
showUserStats: true,
showInfoBox: true,
showCharacterThoughts: true,
showInventory: true, // Show inventory section (v2 system)
showThoughtsInChat: true, // Show thoughts overlay in chat
enableHtmlPrompt: false, // Enable immersive HTML prompt injection
enablePlotButtons: true, // Show plot progression buttons above chat input
@@ -71,5 +72,6 @@ export const defaultSettings = {
wis: 10,
cha: 10
},
lastDiceRoll: null // Store last dice roll result
lastDiceRoll: null, // Store last dice roll result
collapsedInventoryLocations: [] // Array of collapsed storage location names
};
src/core/state.js
+8 -1
View File
@@ -17,6 +17,7 @@ export let extensionSettings = {
showUserStats: true,
showInfoBox: true,
showCharacterThoughts: true,
showInventory: true, // Show inventory section (v2 system)
showThoughtsInChat: true, // Show thoughts overlay in chat
enableHtmlPrompt: false, // Enable immersive HTML prompt injection
enablePlotButtons: true, // Show plot progression buttons above chat input
@@ -59,7 +60,8 @@ export let extensionSettings = {
wis: 10,
cha: 10
},
lastDiceRoll: null // Store last dice roll result
lastDiceRoll: null, // Store last dice roll result
collapsedInventoryLocations: [] // Array of collapsed storage location names
};
/**
@@ -123,6 +125,7 @@ export let $panelContainer = null;
export let $userStatsContainer = null;
export let $infoBoxContainer = null;
export let $thoughtsContainer = null;
export let $inventoryContainer = null;
/**
* State setters - provide controlled mutation of state variables
@@ -186,3 +189,7 @@ export function setInfoBoxContainer($element) {
export function setThoughtsContainer($element) {
$thoughtsContainer = $element;
}
export function setInventoryContainer($element) {
$inventoryContainer = $element;
}
src/systems/generation/apiClient.js
+4 -1
View File
@@ -25,8 +25,9 @@ import { parseResponse, parseUserStats } from './parser.js';
* @param {Function} renderUserStats - UI function to render user stats
* @param {Function} renderInfoBox - UI function to render info box
* @param {Function} renderThoughts - UI function to render character thoughts
* @param {Function} renderInventory - UI function to render inventory
*/
export async function updateRPGData(renderUserStats, renderInfoBox, renderThoughts) {
export async function updateRPGData(renderUserStats, renderInfoBox, renderThoughts, renderInventory) {
if (isGenerating) {
// console.log('[RPG Companion] Already generating, skipping...');
return;
@@ -123,6 +124,7 @@ export async function updateRPGData(renderUserStats, renderInfoBox, renderThough
renderUserStats();
renderInfoBox();
renderThoughts();
renderInventory();
} else {
// No assistant message to attach to - just update display
if (parsedData.userStats) {
@@ -131,6 +133,7 @@ export async function updateRPGData(renderUserStats, renderInfoBox, renderThough
renderUserStats();
renderInfoBox();
renderThoughts();
renderInventory();
}
// Save to chat metadata
src/systems/integration/sillytavern.js
+5 -1
View File
@@ -28,6 +28,7 @@ import { updateRPGData } from '../generation/apiClient.js';
import { renderUserStats } from '../rendering/userStats.js';
import { renderInfoBox } from '../rendering/infoBox.js';
import { renderThoughts, updateChatThoughts } from '../rendering/thoughts.js';
import { renderInventory } from '../rendering/inventory.js';
// Utils
import { getSafeThumbnailUrl } from '../../utils/avatars.js';
@@ -162,6 +163,7 @@ export async function onMessageReceived(data) {
renderUserStats();
renderInfoBox();
renderThoughts();
renderInventory();
// Save to chat metadata
saveChatData();
@@ -169,7 +171,7 @@ export async function onMessageReceived(data) {
} else if (extensionSettings.generationMode === 'separate' && extensionSettings.autoUpdate) {
// In separate mode with auto-update, trigger update after message
setTimeout(async () => {
await updateRPGData(renderUserStats, renderInfoBox, renderThoughts);
await updateRPGData(renderUserStats, renderInfoBox, renderThoughts, renderInventory);
}, 500);
}
@@ -210,6 +212,7 @@ export function onCharacterChanged() {
renderUserStats();
renderInfoBox();
renderThoughts();
renderInventory();
// Update chat thought overlays
updateChatThoughts();
@@ -280,6 +283,7 @@ export function onMessageSwiped(messageIndex) {
renderUserStats();
renderInfoBox();
renderThoughts();
renderInventory();
// Update chat thought overlays
updateChatThoughts();
src/systems/ui/layout.js
+13 -4
View File
@@ -8,7 +8,8 @@ import {
$panelContainer,
$userStatsContainer,
$infoBoxContainer,
$thoughtsContainer
$thoughtsContainer,
$inventoryContainer
} from '../../core/state.js';
/**
@@ -217,17 +218,25 @@ export function updateSectionVisibility() {
$userStatsContainer.toggle(extensionSettings.showUserStats);
$infoBoxContainer.toggle(extensionSettings.showInfoBox);
$thoughtsContainer.toggle(extensionSettings.showCharacterThoughts);
if ($inventoryContainer) {
$inventoryContainer.toggle(extensionSettings.showInventory);
}
// Show/hide dividers intelligently
// Divider after User Stats: shown if User Stats is visible AND at least one section after it is visible
const showDividerAfterStats = extensionSettings.showUserStats &&
(extensionSettings.showInfoBox || extensionSettings.showCharacterThoughts);
(extensionSettings.showInfoBox || extensionSettings.showCharacterThoughts || extensionSettings.showInventory);
$('#rpg-divider-stats').toggle(showDividerAfterStats);
// Divider after Info Box: shown if Info Box is visible AND Mind Reading is visible
// Divider after Info Box: shown if Info Box is visible AND at least one section after it is visible
const showDividerAfterInfo = extensionSettings.showInfoBox &&
extensionSettings.showCharacterThoughts;
(extensionSettings.showCharacterThoughts || extensionSettings.showInventory);
$('#rpg-divider-info').toggle(showDividerAfterInfo);
// Divider after Thoughts: shown if Thoughts is visible AND Inventory is visible
const showDividerAfterThoughts = extensionSettings.showCharacterThoughts &&
extensionSettings.showInventory;
$('#rpg-divider-thoughts').toggle(showDividerAfterThoughts);
}
/**
template.html
+13
View File
@@ -44,6 +44,14 @@
<div id="rpg-thoughts" class="rpg-section rpg-thoughts-section">
<!-- Content will be populated by JavaScript -->
</div>
<!-- Divider after Thoughts -->
<div id="rpg-divider-thoughts" class="rpg-divider"></div>
<!-- Inventory Section -->
<div id="rpg-inventory" class="rpg-section rpg-inventory-section">
<!-- Content will be populated by JavaScript -->
</div>
</div>
<!-- HTML Prompt Toggle -->
@@ -159,6 +167,11 @@
<span>Show Present Characters</span>
</label>
<label class="checkbox_label">
<input type="checkbox" id="rpg-toggle-inventory" />
<span>Show Inventory</span>
</label>
<label class="checkbox_label">
<input type="checkbox" id="rpg-toggle-thoughts-in-chat" />
<span>Show Thoughts in Chat</span>