feat: Add weather foreground option (experimental)

- Add weatherEffectsForeground setting to render weather effects in front of chat
- Add UI toggle in main panel (visible when Dynamic Weather toggle is visible)
- Apply z-index 9998 when foreground option is enabled
- Fix weather container sizing with viewport units (100vh/100dvh) for better mobile support

index.js

@@ -403,6 +403,16 @@ 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();
@@ -879,6 +889,7 @@ 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

src/core/state.js

@@ -35,6 +35,7 @@ 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)
     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/ui/theme.js

@@ -143,6 +143,7 @@ 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');
 
@@ -154,6 +155,8 @@ 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,6 +270,11 @@ export function updateWeatherEffect() {
     }
 
     if (weatherContainer) {
+        // Apply foreground z-index if experimental setting is enabled
+        if (extensionSettings.weatherEffectsForeground) {
+            weatherContainer.style.zIndex = '9998';
+        }
+
         document.body.appendChild(weatherContainer);
     }
 }

style.css

@@ -9428,8 +9428,9 @@ body[data-theme="cyberpunk"] .rpg-music-widget-play {
     position: fixed;
     top: 0;
     left: 0;
-    width: 100%;
-    height: 100%;
+    width: 100vw;
+    height: 100vh;
+    height: 100dvh; /* Dynamic viewport height for mobile browsers */
     pointer-events: none;
     z-index: 1;
     overflow: hidden;

template.html

@@ -125,6 +125,14 @@
                         <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">