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).
2025-10-17 13:39:24 +11:00
parent f4dfd368e1
commit ba50fc5bdc
2 changed files with 94 additions and 84 deletions
@@ -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('<div id="extension-buttons-wrapper" style="text-align: center; margin: 5px auto;"></div>');
+    }
+
+    // Create the button container
+    const buttonHtml = `
+        <span id="rpg-plot-buttons" style="display: none;">
+            <button id="rpg-plot-random" class="menu_button interactable" style="
+                background-color: #e94560;
+                color: white;
+                border: none;
+                padding: 8px 12px;
+                border-radius: 4px;
+                font-size: 13px;
+                cursor: pointer;
+                margin: 0 4px;
+                display: inline-block;
+            " tabindex="0" role="button">
+                <i class="fa-solid fa-dice"></i> Randomized Plot
+            </button>
+            <button id="rpg-plot-natural" class="menu_button interactable" style="
+                background-color: #4a90e2;
+                color: white;
+                border: none;
+                padding: 8px 12px;
+                border-radius: 4px;
+                font-size: 13px;
+                cursor: pointer;
+                margin: 0 4px;
+                display: inline-block;
+            " tabindex="0" role="button">
+                <i class="fa-solid fa-forward"></i> Natural Plot
+            </button>
+        </span>
+    `;
+
+    // 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();
+}