v3.5.0: Weather effects improvements and dice roll fixes

- Refactor weather effects toggles to radio buttons in settings
  - Replace weatherEffectsForeground with weatherBackground/weatherForeground
  - Add Background/Foreground position options as radio toggles
  - Remove weather foreground toggle from main panel
- Fix dice roll to work independently of RPG attributes
  - Dice rolls now sent regardless of attribute settings
  - Adjust prompt wording based on whether attributes are enabled
- Improve History Persistence UI styling
  - Update input/select CSS to match tracker editor
  - Fix alignment issues
- Add theme-based radio button styling
  - Radio buttons now use theme colors instead of default blue
  - Support for all themes (default, sci-fi, fantasy, cyberpunk, custom)
- Update weather effects z-index logic for both modes
- Bump version to v3.5.0

README.md

@@ -7,9 +7,14 @@ An immersive RPG extension for browsers that tracks character stats, scene infor
 
 ## 🆕 What's New
 
-### v3.4.1
+### v3.5.0
  
-- Fixed a bug that prevented characters' data from being sent when thoughts were disabled.
+- Various fixes and upgrades to the existing systems.
+- Repaired Auto-generate Avatars.
+- Fixed Dynami Weather on mobiles.
+- Added an option to decide where to display the weather effects (foreground or background).
+- Unified CSS.
+- Dice rolls are now sent with the prompt even if you don't have Attributes toggled on.
 
 **Special thanks to all the other contributors for this project:**
 Paperboygold, Munimunigamer, Subarashimo, Lilminzyu, Claude, IDeathByte, Chungchandev, Joenunezb, Amauragis, and Tomt610.

index.js

@@ -403,16 +403,6 @@ async function initUI() {
         toggleDynamicWeather(extensionSettings.enableDynamicWeather);
     });
 
-    $('#rpg-toggle-weather-foreground').on('change', function() {
-        extensionSettings.weatherEffectsForeground = $(this).prop('checked');
-        saveSettings();
-        // Re-apply weather effect with new z-index
-        if (extensionSettings.enableDynamicWeather) {
-            toggleDynamicWeather(false);
-            toggleDynamicWeather(true);
-        }
-    });
-
     $('#rpg-toggle-narrator').on('change', function() {
         extensionSettings.narratorMode = $(this).prop('checked');
         saveSettings();
@@ -603,6 +593,34 @@ async function initUI() {
         }
         saveSettings();
         updateFeatureTogglesVisibility();
+        updateWeatherSubOptionsVisibility();
+    });
+
+    // Weather sub-options (background and foreground) - radio buttons
+    $('#rpg-toggle-weather-background').on('change', function() {
+        if ($(this).prop('checked')) {
+            extensionSettings.weatherBackground = true;
+            extensionSettings.weatherForeground = false;
+            saveSettings();
+            // Re-apply weather effect
+            if (extensionSettings.enableDynamicWeather) {
+                toggleDynamicWeather(false);
+                toggleDynamicWeather(true);
+            }
+        }
+    });
+
+    $('#rpg-toggle-weather-foreground').on('change', function() {
+        if ($(this).prop('checked')) {
+            extensionSettings.weatherBackground = false;
+            extensionSettings.weatherForeground = true;
+            saveSettings();
+            // Re-apply weather effect
+            if (extensionSettings.enableDynamicWeather) {
+                toggleDynamicWeather(false);
+                toggleDynamicWeather(true);
+            }
+        }
     });
 
     $('#rpg-toggle-show-narrator-mode').on('change', function() {
@@ -889,7 +907,6 @@ async function initUI() {
     $('#rpg-toggle-spotify-music').prop('checked', extensionSettings.enableSpotifyMusic);
 
     $('#rpg-toggle-dynamic-weather').prop('checked', extensionSettings.enableDynamicWeather);
-    $('#rpg-toggle-weather-foreground').prop('checked', extensionSettings.weatherEffectsForeground ?? false);
     $('#rpg-toggle-narrator').prop('checked', extensionSettings.narratorMode);
 
     // Feature toggle visibility settings
@@ -899,6 +916,8 @@ async function initUI() {
     $('#rpg-toggle-show-cyoa-toggle').prop('checked', extensionSettings.showCYOAToggle ?? true);
     $('#rpg-toggle-show-spotify-toggle').prop('checked', extensionSettings.showSpotifyToggle ?? true);
     $('#rpg-toggle-show-dynamic-weather-toggle').prop('checked', extensionSettings.showDynamicWeatherToggle ?? true);
+    $('#rpg-toggle-weather-background').prop('checked', extensionSettings.weatherBackground ?? true);
+    $('#rpg-toggle-weather-foreground').prop('checked', extensionSettings.weatherForeground ?? false);
     $('#rpg-toggle-show-narrator-mode').prop('checked', extensionSettings.showNarratorMode ?? true);
     $('#rpg-toggle-show-auto-avatars').prop('checked', extensionSettings.showAutoAvatars ?? true);
 
@@ -1196,3 +1215,17 @@ jQuery(async () => {
         );
     }
 });
+
+/**
+ * Updates the visibility of weather sub-options in settings based on dynamic weather toggle
+ */
+function updateWeatherSubOptionsVisibility() {
+    const $weatherSubOptions = $('#rpg-weather-suboptions');
+    const isDynamicWeatherEnabled = extensionSettings.showDynamicWeatherToggle ?? true;
+
+    if (isDynamicWeatherEnabled) {
+        $weatherSubOptions.show();
+    } else {
+        $weatherSubOptions.hide();
+    }
+}

settings.html

@@ -48,7 +48,7 @@
             </div>
 
             <div style="margin-top: 10px; text-align: center; opacity: 0.6; font-size: 0.85em;">
-                v3.4.1
+                v3.5.0
             </div>
         </div>
     </div>

src/core/state.js

@@ -35,7 +35,8 @@ export let extensionSettings = {
     customSpotifyPrompt: '', // Custom Spotify prompt text (empty = use default)
 
     enableDynamicWeather: true, // Enable dynamic weather effects based on Info Box weather field (v2: enabled by default)
-    weatherEffectsForeground: false, // Experimental: render weather effects in foreground (on top of chat)
+    weatherBackground: true, // Show weather effects in background (behind chat)
+    weatherForeground: false, // Show weather effects in foreground (on top of chat)
     dismissedHolidayPromo: false, // User dismissed the holiday promotion banner
     showHtmlToggle: true, // Show Immersive HTML toggle in main panel
     showDialogueColoringToggle: true, // Show Dialogue Coloring toggle in main panel (enabled by default)

src/systems/generation/promptBuilder.js

@@ -392,21 +392,30 @@ export function generateTrackerInstructions(includeHtmlPrompt = true, includeCon
         // Include attributes based on settings (only if includeAttributes is true)
         if (includeAttributes) {
             const alwaysSendAttributes = trackerConfig?.userStats?.alwaysSendAttributes;
-            const shouldSendAttributes = alwaysSendAttributes || extensionSettings.lastDiceRoll;
+            const showRPGAttributes = trackerConfig?.userStats?.showRPGAttributes !== false;
+            const shouldSendAttributes = alwaysSendAttributes && showRPGAttributes;
 
             if (shouldSendAttributes) {
                 const attributesString = buildAttributesString();
                 instructions += `${userName}'s attributes: ${attributesString}\n`;
-
-                // Add dice roll context if there was one
-                if (extensionSettings.lastDiceRoll) {
-                    const roll = extensionSettings.lastDiceRoll;
-                    instructions += `${userName} rolled ${roll.total} on the last ${roll.formula} roll. Based on their attributes, decide whether they succeeded or failed the action they attempted.\n\n`;
-                } else {
-                    instructions += `\n`;
-                }
             }
         }
+
+        // Add dice roll context if there was one (independent of attributes)
+        if (extensionSettings.lastDiceRoll) {
+            const roll = extensionSettings.lastDiceRoll;
+            const showRPGAttributes = trackerConfig?.userStats?.showRPGAttributes !== false;
+            const alwaysSendAttributes = trackerConfig?.userStats?.alwaysSendAttributes;
+            const hasAttributes = includeAttributes && (alwaysSendAttributes && showRPGAttributes);
+
+            if (hasAttributes) {
+                instructions += `${userName} rolled ${roll.total} on the last ${roll.formula} roll. Based on their attributes, decide whether they succeeded or failed the action they attempted.\n\n`;
+            } else {
+                instructions += `${userName} rolled ${roll.total} on the last ${roll.formula} roll. Decide whether they succeeded or failed the action they attempted.\n\n`;
+            }
+        } else if (includeAttributes && trackerConfig?.userStats?.alwaysSendAttributes && trackerConfig?.userStats?.showRPGAttributes !== false) {
+            instructions += `\n`;
+        }
     }
 
     // Append HTML prompt if enabled AND includeHtmlPrompt is true
@@ -990,19 +999,25 @@ export function generateContextualSummary() {
 
     // Include attributes based on settings
     const alwaysSendAttributes = trackerConfig?.userStats?.alwaysSendAttributes;
-    const shouldSendAttributes = alwaysSendAttributes || extensionSettings.lastDiceRoll;
+    const showRPGAttributes = trackerConfig?.userStats?.showRPGAttributes !== false;
+    const shouldSendAttributes = alwaysSendAttributes && showRPGAttributes;
 
     if (shouldSendAttributes) {
         const attributesString = buildAttributesString();
         summary += `${userName}'s attributes: ${attributesString}\n`;
+    }
 
-        // Add dice roll context if there was one
-        if (extensionSettings.lastDiceRoll) {
-            const roll = extensionSettings.lastDiceRoll;
+    // Add dice roll context if there was one (independent of attributes)
+    if (extensionSettings.lastDiceRoll) {
+        const roll = extensionSettings.lastDiceRoll;
+
+        if (shouldSendAttributes) {
             summary += `${userName} rolled ${roll.total} on the last ${roll.formula} roll. Based on their attributes, decide whether they succeeded or failed the action they attempted.\n\n`;
         } else {
-            summary += `\n`;
+            summary += `${userName} rolled ${roll.total} on the last ${roll.formula} roll. Decide whether they succeeded or failed the action they attempted.\n\n`;
         }
+    } else if (shouldSendAttributes) {
+        summary += `\n`;
     }
 
     return summary.trim();

src/systems/ui/theme.js

@@ -143,7 +143,6 @@ export function updateFeatureTogglesVisibility() {
     const $spotifyToggle = $('#rpg-spotify-toggle-wrapper');
 
     const $dynamicWeatherToggle = $('#rpg-dynamic-weather-toggle-wrapper');
-    const $weatherForegroundToggle = $('#rpg-weather-foreground-toggle-wrapper');
     const $narratorToggle = $('#rpg-narrator-toggle-wrapper');
     const $autoAvatarsToggle = $('#rpg-auto-avatars-toggle-wrapper');
 
@@ -155,8 +154,6 @@ export function updateFeatureTogglesVisibility() {
     $spotifyToggle.toggle(extensionSettings.showSpotifyToggle);
 
     $dynamicWeatherToggle.toggle(extensionSettings.showDynamicWeatherToggle);
-    // Weather foreground toggle is only shown when dynamic weather toggle is visible
-    $weatherForegroundToggle.toggle(extensionSettings.showDynamicWeatherToggle);
     $narratorToggle.toggle(extensionSettings.showNarratorMode);
     $autoAvatarsToggle.toggle(extensionSettings.showAutoAvatars);
 

src/systems/ui/weatherEffects.js

@@ -270,9 +270,14 @@ export function updateWeatherEffect() {
     }
 
     if (weatherContainer) {
-        // Apply foreground z-index if experimental setting is enabled
-        if (extensionSettings.weatherEffectsForeground) {
-            weatherContainer.style.zIndex = '9998';
+        // Apply z-index based on background/foreground settings
+        if (extensionSettings.weatherForeground) {
+            weatherContainer.style.zIndex = '9998'; // In front of chat
+        } else if (extensionSettings.weatherBackground) {
+            weatherContainer.style.zIndex = '1'; // Behind chat (default)
+        } else {
+            // Both disabled - don't show weather
+            return;
         }
 
         document.body.appendChild(weatherContainer);

style.css

@@ -2696,6 +2696,100 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
     background-color: var(--rpg-highlight) !important;
 }
 
+/* Radio buttons - default theme */
+.checkbox_label input[type="radio"] {
+    accent-color: #666 !important;
+}
+
+/* Radio buttons - sci-fi theme */
+.rpg-panel[data-theme="sci-fi"] .checkbox_label input[type="radio"],
+.rpg-settings-popup[data-theme="sci-fi"] .checkbox_label input[type="radio"] {
+    accent-color: var(--rpg-highlight) !important;
+}
+
+/* Radio buttons - fantasy theme */
+.rpg-panel[data-theme="fantasy"] .checkbox_label input[type="radio"],
+.rpg-settings-popup[data-theme="fantasy"] .checkbox_label input[type="radio"] {
+    accent-color: var(--rpg-highlight) !important;
+}
+
+/* Radio buttons - cyberpunk theme */
+.rpg-panel[data-theme="cyberpunk"] .checkbox_label input[type="radio"],
+.rpg-settings-popup[data-theme="cyberpunk"] .checkbox_label input[type="radio"] {
+    accent-color: var(--rpg-highlight) !important;
+}
+
+/* Radio buttons - custom theme */
+.rpg-panel[data-theme="custom"] .checkbox_label input[type="radio"],
+.rpg-settings-popup[data-theme="custom"] .checkbox_label input[type="radio"] {
+    accent-color: var(--rpg-highlight) !important;
+}
+
+/* All radio buttons (including those not in checkbox_label) - default theme */
+.rpg-settings-popup input[type="radio"],
+#rpg-tracker-editor-popup input[type="radio"] {
+    accent-color: #666 !important;
+    color-scheme: dark;
+    background-color: transparent !important;
+}
+
+.rpg-settings-popup input[type="radio"]:checked,
+#rpg-tracker-editor-popup input[type="radio"]:checked {
+    background-color: #666 !important;
+}
+
+/* All radio buttons - sci-fi theme */
+.rpg-settings-popup[data-theme="sci-fi"] input[type="radio"],
+#rpg-tracker-editor-popup[data-theme="sci-fi"] input[type="radio"] {
+    accent-color: var(--rpg-highlight) !important;
+    color-scheme: dark;
+    background-color: transparent !important;
+}
+
+.rpg-settings-popup[data-theme="sci-fi"] input[type="radio"]:checked,
+#rpg-tracker-editor-popup[data-theme="sci-fi"] input[type="radio"]:checked {
+    background-color: var(--rpg-highlight) !important;
+}
+
+/* All radio buttons - fantasy theme */
+.rpg-settings-popup[data-theme="fantasy"] input[type="radio"],
+#rpg-tracker-editor-popup[data-theme="fantasy"] input[type="radio"] {
+    accent-color: var(--rpg-highlight) !important;
+    color-scheme: dark;
+    background-color: transparent !important;
+}
+
+.rpg-settings-popup[data-theme="fantasy"] input[type="radio"]:checked,
+#rpg-tracker-editor-popup[data-theme="fantasy"] input[type="radio"]:checked {
+    background-color: var(--rpg-highlight) !important;
+}
+
+/* All radio buttons - cyberpunk theme */
+.rpg-settings-popup[data-theme="cyberpunk"] input[type="radio"],
+#rpg-tracker-editor-popup[data-theme="cyberpunk"] input[type="radio"] {
+    accent-color: var(--rpg-highlight) !important;
+    color-scheme: dark;
+    background-color: transparent !important;
+}
+
+.rpg-settings-popup[data-theme="cyberpunk"] input[type="radio"]:checked,
+#rpg-tracker-editor-popup[data-theme="cyberpunk"] input[type="radio"]:checked {
+    background-color: var(--rpg-highlight) !important;
+}
+
+/* All radio buttons - custom theme */
+.rpg-settings-popup[data-theme="custom"] input[type="radio"],
+#rpg-tracker-editor-popup[data-theme="custom"] input[type="radio"] {
+    accent-color: var(--rpg-highlight) !important;
+    color-scheme: dark;
+    background-color: transparent !important;
+}
+
+.rpg-settings-popup[data-theme="custom"] input[type="radio"]:checked,
+#rpg-tracker-editor-popup[data-theme="custom"] input[type="radio"]:checked {
+    background-color: var(--rpg-highlight) !important;
+}
+
 /* Tracker Editor checkboxes (not wrapped in checkbox_label) */
 #rpg-tracker-editor-popup input[type="checkbox"] {
     accent-color: #666 !important;
@@ -4288,6 +4382,27 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
     font-size: 0.95em;
 }
 
+/* History Persistence inputs/selects - match tracker editor styling */
+#rpg-tracker-editor-popup .rpg-input,
+#rpg-tracker-editor-popup .rpg-select {
+    padding: 0.5em;
+    background: var(--rpg-accent);
+    border: 1px solid var(--rpg-border);
+    border-radius: 0.25em;
+    color: var(--rpg-text);
+    font-size: 0.95em;
+    text-align: left;
+    margin-left: 0 !important;
+    display: block;
+}
+
+#rpg-tracker-editor-popup .rpg-input:focus,
+#rpg-tracker-editor-popup .rpg-select:focus {
+    outline: none;
+    border-color: var(--rpg-highlight);
+    box-shadow: 0 0 5px rgba(var(--rpg-highlight-rgb), 0.3);
+}
+
 .rpg-editor-field-item {
     display: grid;
     grid-template-columns: auto auto 1fr 2fr auto;

template.html

@@ -125,14 +125,6 @@
                         <span class="rpg-toggle-text" data-i18n-key="template.mainPanel.dynamicWeatherEffects">Dynamic Weather</span>
                     </label>
                 </div>
-                <!-- Weather Foreground Toggle (Experimental) -->
-                <div class="rpg-toggle-container rpg-feature-col" id="rpg-weather-foreground-toggle-wrapper">
-                    <label class="rpg-toggle-label" title="Weather Effects in Foreground (Experimental)">
-                        <input type="checkbox" id="rpg-toggle-weather-foreground">
-                        <i class="fa-solid fa-layer-group"></i>
-                        <span class="rpg-toggle-text">Weather Foreground</span>
-                    </label>
-                </div>
                 <!-- Narrator Mode Toggle -->
                 <div class="rpg-toggle-container rpg-feature-col" id="rpg-narrator-toggle-wrapper">
                     <label class="rpg-toggle-label" title="Narrator Mode">
@@ -383,6 +375,25 @@
                     Display a toggle button to enable/disable animated weather effects.
                 </small>
 
+                <!-- Weather sub-options (shown when dynamic weather is enabled) -->
+                <div id="rpg-weather-suboptions" style="margin-left: 24px; margin-top: 8px;">
+                    <label class="checkbox_label">
+                        <input type="radio" name="rpg-weather-position" id="rpg-toggle-weather-background" />
+                        <span>Show in Background</span>
+                    </label>
+                    <small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;">
+                        Display weather effects behind the chat (standard behavior).
+                    </small>
+
+                    <label class="checkbox_label">
+                        <input type="radio" name="rpg-weather-position" id="rpg-toggle-weather-foreground" />
+                        <span>Show in Foreground</span>
+                    </label>
+                    <small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;">
+                        Display weather effects in front of the chat (experimental).
+                    </small>
+                </div>
+
                 <label class="checkbox_label">
                     <input type="checkbox" id="rpg-toggle-show-narrator-mode" />
                     <span data-i18n-key="template.settingsModal.display.showNarratorMode">Show Narrator Mode</span>