From ba50fc5bdcd72b6d9c2411456a50f808db1f79c4 Mon Sep 17 00:00:00 2001 From: Lucas 'Paperboy' Rose-Winters Date: Fri, 17 Oct 2025 13:39:24 +1100 Subject: [PATCH] refactor(features): extract plot progression UI to standalone module Extract plot progression button setup from index.js into dedicated feature module at src/systems/features/plotProgression.js. Due to ES6 module import path limitations in deeply nested modules, the generation logic (sendPlotProgression) remains in index.js where it can properly import from SillyTavern's script.js. The UI setup function accepts the generation function as a callback parameter. Creates plotProgression.js with 62 lines of UI setup code. Index.js increases from 800 to 869 lines (+69 for generation logic). --- index.js | 116 +++++++----------------- src/systems/features/plotProgression.js | 62 +++++++++++++ 2 files changed, 94 insertions(+), 84 deletions(-) create mode 100644 src/systems/features/plotProgression.js diff --git a/index.js b/index.js index d750dde..3b8146e 100644 --- a/index.js +++ b/index.js @@ -94,6 +94,9 @@ import { setupContentEditableScrolling } from './src/systems/ui/mobile.js'; +// Feature modules +import { setupPlotButtons } from './src/systems/features/plotProgression.js'; + // Old state variable declarations removed - now imported from core modules // (extensionSettings, lastGeneratedData, committedTrackerData, etc. are now in src/core/state.js) @@ -349,64 +352,41 @@ async function initUI() { setupClassicStatsButtons(); setupSettingsPopup(); addDiceQuickReply(); - setupPlotButtons(); + setupPlotButtons(sendPlotProgression); setupMobileKeyboardHandling(); setupContentEditableScrolling(); } /** - * Sets up the plot progression buttons inside the send form area. + * Sets up event listeners for classic stat +/- buttons using delegation. + * Uses delegated events to persist across re-renders of the stats section. */ -function setupPlotButtons() { - // Remove existing buttons if any - $('#rpg-plot-buttons').remove(); +function setupClassicStatsButtons() { + if (!$userStatsContainer) return; - // Create wrapper if it doesn't exist (shared with other extensions like Spotify) - if ($('#extension-buttons-wrapper').length === 0) { - $('#send_form').prepend('
'); - } + // Delegated event listener for increase buttons + $userStatsContainer.on('click', '.rpg-stat-increase', function() { + const stat = $(this).data('stat'); + if (extensionSettings.classicStats[stat] < 100) { + extensionSettings.classicStats[stat]++; + saveSettings(); + saveChatData(); + // Update only the specific stat value, not the entire stats panel + $(this).closest('.rpg-classic-stat').find('.rpg-classic-stat-value').text(extensionSettings.classicStats[stat]); + } + }); - // Create the button container - const buttonHtml = ` - - `; - - // Insert into the wrapper - $('#extension-buttons-wrapper').append(buttonHtml); - - // Add event handlers for buttons - $('#rpg-plot-random').on('click', () => sendPlotProgression('random')); - $('#rpg-plot-natural').on('click', () => sendPlotProgression('natural')); - - // Show/hide based on setting - togglePlotButtons(); + // Delegated event listener for decrease buttons + $userStatsContainer.on('click', '.rpg-stat-decrease', function() { + const stat = $(this).data('stat'); + if (extensionSettings.classicStats[stat] > 1) { + extensionSettings.classicStats[stat]--; + saveSettings(); + saveChatData(); + // Update only the specific stat value, not the entire stats panel + $(this).closest('.rpg-classic-stat').find('.rpg-classic-stat-value').text(extensionSettings.classicStats[stat]); + } + }); } /** @@ -450,7 +430,7 @@ async function sendPlotProgression(type) { // Set flag to indicate we're doing plot progression // This will be used by onMessageReceived to clear the prompt after generation completes - isPlotProgression = true; + setIsPlotProgression(true); // console.log('[RPG Companion] Calling Generate with continuation and plot prompt'); // console.log('[RPG Companion] Full prompt:', prompt); @@ -468,7 +448,7 @@ async function sendPlotProgression(type) { // console.log('[RPG Companion] Plot progression generation triggered'); } catch (error) { console.error('[RPG Companion] Error sending plot progression:', error); - isPlotProgression = false; + setIsPlotProgression(false); } finally { // Restore original enabled state and re-enable buttons after a delay setTimeout(() => { @@ -478,38 +458,6 @@ async function sendPlotProgression(type) { } } -/** - * Sets up event listeners for classic stat +/- buttons using delegation. - * Uses delegated events to persist across re-renders of the stats section. - */ -function setupClassicStatsButtons() { - if (!$userStatsContainer) return; - - // Delegated event listener for increase buttons - $userStatsContainer.on('click', '.rpg-stat-increase', function() { - const stat = $(this).data('stat'); - if (extensionSettings.classicStats[stat] < 100) { - extensionSettings.classicStats[stat]++; - saveSettings(); - saveChatData(); - // Update only the specific stat value, not the entire stats panel - $(this).closest('.rpg-classic-stat').find('.rpg-classic-stat-value').text(extensionSettings.classicStats[stat]); - } - }); - - // Delegated event listener for decrease buttons - $userStatsContainer.on('click', '.rpg-stat-decrease', function() { - const stat = $(this).data('stat'); - if (extensionSettings.classicStats[stat] > 1) { - extensionSettings.classicStats[stat]--; - saveSettings(); - saveChatData(); - // Update only the specific stat value, not the entire stats panel - $(this).closest('.rpg-classic-stat').find('.rpg-classic-stat-value').text(extensionSettings.classicStats[stat]); - } - }); -} - /** * Clears all extension prompts. */ diff --git a/src/systems/features/plotProgression.js b/src/systems/features/plotProgression.js new file mode 100644 index 0000000..ad15058 --- /dev/null +++ b/src/systems/features/plotProgression.js @@ -0,0 +1,62 @@ +/** + * Plot Progression Module + * Handles plot buttons (Random/Natural) UI setup + */ + +import { togglePlotButtons } from '../ui/layout.js'; + +/** + * Sets up the plot progression buttons inside the send form area. + * @param {Function} handlePlotClick - Callback function to handle plot button clicks + */ +export function setupPlotButtons(handlePlotClick) { + // Remove existing buttons if any + $('#rpg-plot-buttons').remove(); + + // Create wrapper if it doesn't exist (shared with other extensions like Spotify) + if ($('#extension-buttons-wrapper').length === 0) { + $('#send_form').prepend('
'); + } + + // Create the button container + const buttonHtml = ` + + `; + + // Insert into the wrapper + $('#extension-buttons-wrapper').append(buttonHtml); + + // Add event handlers for buttons + $('#rpg-plot-random').on('click', () => handlePlotClick('random')); + $('#rpg-plot-natural').on('click', () => handlePlotClick('natural')); + + // Show/hide based on setting + togglePlotButtons(); +}