v2.1: Add dynamic weather effects, clothing inventory, and bug fixes
Features: - Add dynamic weather effects system (snow, rain, mist, sunshine, storm, wind, blizzard) - Add separate Clothing tab in inventory system - Weather effects auto-update based on Info Box weather field - Combined effects for storm (rain+lightning) and blizzard (snow+wind) Improvements: - Settings migration system for automatic feature enablement - Weather effects positioned behind chat interface (z-index: 1) - Dynamic weather enabled by default for new users Bug Fixes: - Fix tab visibility issues (disabled tabs now properly hide) - Fix theme-aware borders (remove hardcoded blue colors) - Fix double scrollbar in Edit Trackers window - Fix scroll position jumping when editing Present Characters - Fix dynamic weather toggle hiding issue Technical: - Update inventory schema to v2.1 with clothing field - Add automatic migration for existing v2 inventories - Update parsers and prompts to handle clothing separately - Add translations (EN/ZH-TW) for new features
This commit is contained in:
Spicy_Marinara
+44
-22
@@ -4,6 +4,7 @@
|
||||
*/
|
||||
|
||||
import { i18n } from '../../core/i18n.js';
|
||||
import { extensionSettings } from '../../core/state.js';
|
||||
|
||||
/**
|
||||
* Sets up desktop tab navigation for organizing content.
|
||||
@@ -31,23 +32,40 @@ export function setupDesktopTabs() {
|
||||
return;
|
||||
}
|
||||
|
||||
// Create tab navigation
|
||||
const $tabNav = $(`
|
||||
<div class="rpg-tabs-nav">
|
||||
<button class="rpg-tab-btn active" data-tab="status">
|
||||
<i class="fa-solid fa-chart-simple"></i>
|
||||
<span data-i18n-key="global.status">Status</span>
|
||||
</button>
|
||||
// Build tab navigation dynamically based on enabled settings
|
||||
const tabButtons = [];
|
||||
const hasInventory = $inventory.length > 0 && extensionSettings.showInventory;
|
||||
const hasQuests = $quests.length > 0 && extensionSettings.showQuests;
|
||||
|
||||
// Status tab (always present if any status content exists)
|
||||
tabButtons.push(`
|
||||
<button class="rpg-tab-btn active" data-tab="status">
|
||||
<i class="fa-solid fa-chart-simple"></i>
|
||||
<span data-i18n-key="global.status">Status</span>
|
||||
</button>
|
||||
`);
|
||||
|
||||
// Inventory tab (only if enabled in settings)
|
||||
if (hasInventory) {
|
||||
tabButtons.push(`
|
||||
<button class="rpg-tab-btn" data-tab="inventory">
|
||||
<i class="fa-solid fa-box"></i>
|
||||
<span data-i18n-key="global.inventory">Inventory</span>
|
||||
</button>
|
||||
`);
|
||||
}
|
||||
|
||||
// Quests tab (only if enabled in settings)
|
||||
if (hasQuests) {
|
||||
tabButtons.push(`
|
||||
<button class="rpg-tab-btn" data-tab="quests">
|
||||
<i class="fa-solid fa-scroll"></i>
|
||||
<span data-i18n-key="global.quests">Quests</span>
|
||||
</button>
|
||||
</div>
|
||||
`);
|
||||
`);
|
||||
}
|
||||
|
||||
const $tabNav = $(`<div class="rpg-tabs-nav">${tabButtons.join('')}</div>`);
|
||||
|
||||
// Create tab content containers
|
||||
const $statusTab = $('<div class="rpg-tab-content active" data-tab-content="status"></div>');
|
||||
@@ -57,23 +75,25 @@ export function setupDesktopTabs() {
|
||||
// Move sections into their respective tabs (detach to preserve event handlers)
|
||||
if ($userStats.length > 0) {
|
||||
$statusTab.append($userStats.detach());
|
||||
$userStats.show();
|
||||
if (extensionSettings.showUserStats) $userStats.show();
|
||||
}
|
||||
if ($infoBox.length > 0) {
|
||||
$statusTab.append($infoBox.detach());
|
||||
$infoBox.show();
|
||||
if (extensionSettings.showInfoBox) $infoBox.show();
|
||||
}
|
||||
if ($thoughts.length > 0) {
|
||||
$statusTab.append($thoughts.detach());
|
||||
$thoughts.show();
|
||||
if (extensionSettings.showCharacterThoughts) $thoughts.show();
|
||||
}
|
||||
if ($inventory.length > 0) {
|
||||
$inventoryTab.append($inventory.detach());
|
||||
$inventory.show();
|
||||
// Only show if enabled (will be part of tab structure)
|
||||
if (hasInventory) $inventory.show();
|
||||
}
|
||||
if ($quests.length > 0) {
|
||||
$questsTab.append($quests.detach());
|
||||
$quests.show();
|
||||
// Only show if enabled (will be part of tab structure)
|
||||
if (hasQuests) $quests.show();
|
||||
}
|
||||
|
||||
// Hide dividers on desktop tabs (tabs separate content naturally)
|
||||
@@ -83,6 +103,9 @@ export function setupDesktopTabs() {
|
||||
const $tabsContainer = $('<div class="rpg-tabs-container"></div>');
|
||||
$tabsContainer.append($tabNav);
|
||||
$tabsContainer.append($statusTab);
|
||||
|
||||
// Always append inventory and quests tabs to preserve the elements
|
||||
// But they'll only show if enabled (via tab button visibility)
|
||||
$tabsContainer.append($inventoryTab);
|
||||
$tabsContainer.append($questsTab);
|
||||
|
||||
@@ -103,7 +126,7 @@ export function setupDesktopTabs() {
|
||||
$(`.rpg-tab-content[data-tab-content="${tabName}"]`).addClass('active');
|
||||
});
|
||||
|
||||
console.log('[RPG Desktop] Desktop tabs initialized');
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -145,12 +168,11 @@ export function removeDesktopTabs() {
|
||||
$contentBox.append($quests);
|
||||
}
|
||||
|
||||
// Show sections and dividers
|
||||
$userStats.show();
|
||||
$infoBox.show();
|
||||
$thoughts.show();
|
||||
$inventory.show();
|
||||
// Show/hide sections based on settings (respect visibility settings)
|
||||
if (extensionSettings.showUserStats) $userStats.show();
|
||||
if (extensionSettings.showInfoBox) $infoBox.show();
|
||||
if (extensionSettings.showCharacterThoughts) $thoughts.show();
|
||||
if (extensionSettings.showInventory) $inventory.show();
|
||||
if (extensionSettings.showQuests) $quests.show();
|
||||
$('.rpg-divider').show();
|
||||
|
||||
console.log('[RPG Desktop] Desktop tabs removed');
|
||||
}
|
||||
|
||||
+49
-13
@@ -11,9 +11,13 @@ import {
|
||||
$thoughtsContainer,
|
||||
$inventoryContainer,
|
||||
$questsContainer,
|
||||
$musicPlayerContainer
|
||||
$musicPlayerContainer,
|
||||
setInventoryContainer,
|
||||
setQuestsContainer
|
||||
} from '../../core/state.js';
|
||||
import { i18n } from '../../core/i18n.js';
|
||||
import { setupMobileTabs, removeMobileTabs } from './mobile.js';
|
||||
import { setupDesktopTabs, removeDesktopTabs } from './desktop.js';
|
||||
|
||||
/**
|
||||
* Toggles the visibility of plot buttons based on settings.
|
||||
@@ -248,6 +252,10 @@ export function updatePanelVisibility() {
|
||||
* Updates the visibility of individual sections.
|
||||
*/
|
||||
export function updateSectionVisibility() {
|
||||
// Refresh container references first (in case they were detached during tab operations)
|
||||
setInventoryContainer($('#rpg-inventory'));
|
||||
setQuestsContainer($('#rpg-quests'));
|
||||
|
||||
// Show/hide sections based on settings
|
||||
// Use explicit .show()/.hide() instead of .toggle() to ensure proper state on reload
|
||||
if (extensionSettings.showUserStats) {
|
||||
@@ -268,20 +276,17 @@ export function updateSectionVisibility() {
|
||||
$thoughtsContainer.hide();
|
||||
}
|
||||
|
||||
if ($inventoryContainer) {
|
||||
if (extensionSettings.showInventory) {
|
||||
$inventoryContainer.show();
|
||||
} else {
|
||||
$inventoryContainer.hide();
|
||||
}
|
||||
// Use direct DOM selectors for inventory and quests to avoid stale references
|
||||
if (extensionSettings.showInventory) {
|
||||
$('#rpg-inventory').show();
|
||||
} else {
|
||||
$('#rpg-inventory').hide();
|
||||
}
|
||||
|
||||
if ($questsContainer) {
|
||||
if (extensionSettings.showQuests) {
|
||||
$questsContainer.show();
|
||||
} else {
|
||||
$questsContainer.hide();
|
||||
}
|
||||
if (extensionSettings.showQuests) {
|
||||
$('#rpg-quests').show();
|
||||
} else {
|
||||
$('#rpg-quests').hide();
|
||||
}
|
||||
|
||||
if ($musicPlayerContainer) {
|
||||
@@ -335,6 +340,37 @@ export function updateSectionVisibility() {
|
||||
} else {
|
||||
$('#rpg-divider-quests').hide();
|
||||
}
|
||||
|
||||
// Rebuild tabs to reflect visibility changes for inventory and quests
|
||||
const isMobile = window.innerWidth <= 1000;
|
||||
const hasMobileTabs = $('.rpg-mobile-container').length > 0;
|
||||
const hasDesktopTabs = $('.rpg-tabs-nav').length > 0;
|
||||
|
||||
// Only rebuild if tabs currently exist
|
||||
if (hasMobileTabs || hasDesktopTabs) {
|
||||
// Remove existing tabs
|
||||
if (hasMobileTabs) {
|
||||
removeMobileTabs();
|
||||
// Force remove any lingering mobile tab elements (but not the content sections!)
|
||||
$('.rpg-mobile-container').remove();
|
||||
$('.rpg-mobile-tabs').remove();
|
||||
} else {
|
||||
removeDesktopTabs();
|
||||
// Force remove any lingering desktop tab structure (but not the content sections!)
|
||||
// The removeDesktopTabs() function already detached and restored the sections
|
||||
}
|
||||
|
||||
// Rebuild tabs immediately
|
||||
if (isMobile) {
|
||||
setupMobileTabs();
|
||||
} else {
|
||||
setupDesktopTabs();
|
||||
}
|
||||
|
||||
// Refresh container references
|
||||
setInventoryContainer($('#rpg-inventory'));
|
||||
setQuestsContainer($('#rpg-quests'));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
+14
-13
@@ -579,8 +579,8 @@ export function setupMobileTabs() {
|
||||
const tabs = [];
|
||||
const hasStats = $userStats.length > 0;
|
||||
const hasInfo = $infoBox.length > 0 || $thoughts.length > 0;
|
||||
const hasInventory = $inventory.length > 0;
|
||||
const hasQuests = $quests.length > 0;
|
||||
const hasInventory = $inventory.length > 0 && extensionSettings.showInventory;
|
||||
const hasQuests = $quests.length > 0 && extensionSettings.showQuests;
|
||||
|
||||
// Tab 1: Stats (User Stats only)
|
||||
if (hasStats) {
|
||||
@@ -650,12 +650,12 @@ export function setupMobileTabs() {
|
||||
const $mobileContainer = $('<div class="rpg-mobile-container"></div>');
|
||||
$mobileContainer.append($tabNav);
|
||||
|
||||
// Only append tab content wrappers that have content
|
||||
if (hasStats) $mobileContainer.append($statsTab);
|
||||
if (hasInfo) $mobileContainer.append($infoTab);
|
||||
if (hasInventory) $mobileContainer.append($inventoryTab);
|
||||
if (hasQuests) $mobileContainer.append($questsTab);
|
||||
if (hasInventory) $mobileContainer.append($inventoryTab);
|
||||
// Always append all tab content wrappers to preserve elements
|
||||
// Tab buttons control visibility
|
||||
$mobileContainer.append($statsTab);
|
||||
$mobileContainer.append($infoTab);
|
||||
$mobileContainer.append($inventoryTab);
|
||||
$mobileContainer.append($questsTab);
|
||||
|
||||
// Insert mobile tab structure at the beginning of content box
|
||||
$contentBox.prepend($mobileContainer);
|
||||
@@ -712,11 +712,12 @@ export function removeMobileTabs() {
|
||||
$contentBox.prepend($userStats);
|
||||
}
|
||||
|
||||
// Show sections and dividers
|
||||
$userStats.show();
|
||||
$infoBox.show();
|
||||
$thoughts.show();
|
||||
$inventory.show();
|
||||
// Show/hide sections based on settings (respect visibility settings)
|
||||
if (extensionSettings.showUserStats) $userStats.show();
|
||||
if (extensionSettings.showInfoBox) $infoBox.show();
|
||||
if (extensionSettings.showCharacterThoughts) $thoughts.show();
|
||||
if (extensionSettings.showInventory) $inventory.show();
|
||||
if (extensionSettings.showQuests) $quests.show();
|
||||
$('.rpg-divider').show();
|
||||
}
|
||||
|
||||
|
||||
@@ -84,16 +84,19 @@ export function updateFeatureTogglesVisibility() {
|
||||
const $htmlToggle = $('#rpg-html-toggle-wrapper');
|
||||
const $spotifyToggle = $('#rpg-spotify-toggle-wrapper');
|
||||
const $snowflakesToggle = $('#rpg-snowflakes-toggle-wrapper');
|
||||
const $dynamicWeatherToggle = $('#rpg-dynamic-weather-toggle-wrapper');
|
||||
|
||||
// Show/hide individual toggles
|
||||
$htmlToggle.toggle(extensionSettings.showHtmlToggle);
|
||||
$spotifyToggle.toggle(extensionSettings.showSpotifyToggle);
|
||||
$snowflakesToggle.toggle(extensionSettings.showSnowflakesToggle);
|
||||
$dynamicWeatherToggle.toggle(extensionSettings.showDynamicWeatherToggle);
|
||||
|
||||
// Hide entire row if all toggles are hidden
|
||||
const anyVisible = extensionSettings.showHtmlToggle ||
|
||||
extensionSettings.showSpotifyToggle ||
|
||||
extensionSettings.showSnowflakesToggle;
|
||||
extensionSettings.showSnowflakesToggle ||
|
||||
extensionSettings.showDynamicWeatherToggle;
|
||||
$featuresRow.toggle(anyVisible);
|
||||
}
|
||||
|
||||
|
||||
@@ -68,6 +68,16 @@ export function initTrackerEditor() {
|
||||
$(document).on('click', '#rpg-open-tracker-editor', function() {
|
||||
openTrackerEditor();
|
||||
});
|
||||
|
||||
// Export button
|
||||
$(document).on('click', '#rpg-editor-export', function() {
|
||||
exportTrackerPreset();
|
||||
});
|
||||
|
||||
// Import button
|
||||
$(document).on('click', '#rpg-editor-import', function() {
|
||||
importTrackerPreset();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -188,6 +198,103 @@ function resetToDefaults() {
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Export current tracker configuration to a JSON file
|
||||
*/
|
||||
function exportTrackerPreset() {
|
||||
try {
|
||||
// Get the current tracker configuration
|
||||
const config = extensionSettings.trackerConfig;
|
||||
|
||||
// Create a preset object with metadata
|
||||
const preset = {
|
||||
name: 'Custom Tracker Preset',
|
||||
version: '1.0',
|
||||
exportDate: new Date().toISOString(),
|
||||
trackerConfig: JSON.parse(JSON.stringify(config)) // Deep copy
|
||||
};
|
||||
|
||||
// Convert to JSON
|
||||
const jsonString = JSON.stringify(preset, null, 2);
|
||||
const blob = new Blob([jsonString], { type: 'application/json' });
|
||||
|
||||
// Create download link
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
|
||||
// Generate filename with timestamp
|
||||
const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, -5);
|
||||
link.download = `rpg-tracker-preset-${timestamp}.json`;
|
||||
|
||||
// Trigger download
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
URL.revokeObjectURL(url);
|
||||
|
||||
console.log('[RPG Companion] Tracker preset exported successfully');
|
||||
toastr.success(i18n.getTranslation('template.trackerEditorModal.messages.exportSuccess') || 'Tracker preset exported successfully!');
|
||||
} catch (error) {
|
||||
console.error('[RPG Companion] Error exporting tracker preset:', error);
|
||||
toastr.error(i18n.getTranslation('template.trackerEditorModal.messages.exportError') || 'Failed to export tracker preset. Check console for details.');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Import tracker configuration from a JSON file
|
||||
*/
|
||||
function importTrackerPreset() {
|
||||
// Create file input
|
||||
const input = document.createElement('input');
|
||||
input.type = 'file';
|
||||
input.accept = '.json';
|
||||
|
||||
input.onchange = async (e) => {
|
||||
const file = e.target.files[0];
|
||||
if (!file) return;
|
||||
|
||||
try {
|
||||
const text = await file.text();
|
||||
const data = JSON.parse(text);
|
||||
|
||||
// Validate the imported data
|
||||
if (!data.trackerConfig) {
|
||||
throw new Error('Invalid preset file: missing trackerConfig');
|
||||
}
|
||||
|
||||
// Validate required sections
|
||||
if (!data.trackerConfig.userStats || !data.trackerConfig.infoBox || !data.trackerConfig.presentCharacters) {
|
||||
throw new Error('Invalid preset file: missing required configuration sections');
|
||||
}
|
||||
|
||||
// Ask for confirmation
|
||||
const confirmMessage = i18n.getTranslation('template.trackerEditorModal.messages.importConfirm') ||
|
||||
'This will replace your current tracker configuration. Continue?';
|
||||
|
||||
if (!confirm(confirmMessage)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Apply the imported configuration
|
||||
extensionSettings.trackerConfig = JSON.parse(JSON.stringify(data.trackerConfig)); // Deep copy
|
||||
|
||||
// Re-render the editor UI
|
||||
renderEditorUI();
|
||||
|
||||
console.log('[RPG Companion] Tracker preset imported successfully');
|
||||
toastr.success(i18n.getTranslation('template.trackerEditorModal.messages.importSuccess') || 'Tracker preset imported successfully!');
|
||||
} catch (error) {
|
||||
console.error('[RPG Companion] Error importing tracker preset:', error);
|
||||
toastr.error(i18n.getTranslation('template.trackerEditorModal.messages.importError') ||
|
||||
`Failed to import tracker preset: ${error.message}`);
|
||||
}
|
||||
};
|
||||
|
||||
// Trigger file selection
|
||||
input.click();
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the editor UI based on current config
|
||||
*/
|
||||
|
||||
@@ -0,0 +1,289 @@
|
||||
/**
|
||||
* Dynamic Weather Effects Module
|
||||
* Creates weather effects based on the Info Box weather field
|
||||
*/
|
||||
|
||||
import { extensionSettings, lastGeneratedData, committedTrackerData } from '../../core/state.js';
|
||||
|
||||
let weatherContainer = null;
|
||||
let currentWeatherType = null;
|
||||
|
||||
/**
|
||||
* Parse weather text to determine effect type
|
||||
*/
|
||||
function parseWeatherType(weatherText) {
|
||||
if (!weatherText) return 'none';
|
||||
|
||||
const text = weatherText.toLowerCase();
|
||||
|
||||
// Check for specific weather conditions (order matters - check combined effects first)
|
||||
if (text.includes('blizzard')) {
|
||||
return 'blizzard'; // Snow + Wind
|
||||
}
|
||||
if (text.includes('storm') || text.includes('thunder') || text.includes('lightning')) {
|
||||
return 'storm'; // Rain + Lightning
|
||||
}
|
||||
if (text.includes('wind') || text.includes('breeze') || text.includes('gust') || text.includes('gale')) {
|
||||
return 'wind';
|
||||
}
|
||||
if (text.includes('snow') || text.includes('flurries')) {
|
||||
return 'snow';
|
||||
}
|
||||
if (text.includes('rain') || text.includes('drizzle') || text.includes('shower')) {
|
||||
return 'rain';
|
||||
}
|
||||
if (text.includes('mist') || text.includes('fog') || text.includes('haze')) {
|
||||
return 'mist';
|
||||
}
|
||||
if (text.includes('sunny') || text.includes('clear') || text.includes('bright')) {
|
||||
return 'sunny';
|
||||
}
|
||||
if (text.includes('cloud') || text.includes('overcast') || text.includes('indoor') || text.includes('inside')) {
|
||||
return 'none';
|
||||
}
|
||||
|
||||
return 'none';
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract weather from Info Box data
|
||||
*/
|
||||
function getCurrentWeather() {
|
||||
const infoBoxData = lastGeneratedData.infoBox || committedTrackerData.infoBox || '';
|
||||
|
||||
// Parse the Info Box data to find Weather field
|
||||
const lines = infoBoxData.split('\n');
|
||||
for (const line of lines) {
|
||||
const trimmed = line.trim();
|
||||
if (trimmed.startsWith('Weather:')) {
|
||||
return trimmed.substring('Weather:'.length).trim();
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create snowflakes effect
|
||||
*/
|
||||
function createSnowflakes() {
|
||||
const container = document.createElement('div');
|
||||
container.className = 'rpg-weather-particles';
|
||||
|
||||
// Create 50 snowflakes
|
||||
for (let i = 0; i < 50; i++) {
|
||||
const snowflake = document.createElement('div');
|
||||
snowflake.className = 'rpg-weather-particle rpg-snowflake';
|
||||
snowflake.textContent = '❄';
|
||||
snowflake.style.left = `${Math.random() * 100}%`;
|
||||
snowflake.style.animationDelay = `${Math.random() * 10}s`;
|
||||
snowflake.style.animationDuration = `${10 + Math.random() * 10}s`;
|
||||
container.appendChild(snowflake);
|
||||
}
|
||||
|
||||
return container;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create rain effect
|
||||
*/
|
||||
function createRain() {
|
||||
const container = document.createElement('div');
|
||||
container.className = 'rpg-weather-particles';
|
||||
|
||||
// Create 100 raindrops for heavier effect
|
||||
for (let i = 0; i < 100; i++) {
|
||||
const raindrop = document.createElement('div');
|
||||
raindrop.className = 'rpg-weather-particle rpg-raindrop';
|
||||
raindrop.style.left = `${Math.random() * 100}%`;
|
||||
raindrop.style.animationDelay = `${Math.random() * 2}s`;
|
||||
raindrop.style.animationDuration = `${0.5 + Math.random() * 0.5}s`;
|
||||
container.appendChild(raindrop);
|
||||
}
|
||||
|
||||
return container;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create mist/fog effect
|
||||
*/
|
||||
function createMist() {
|
||||
const container = document.createElement('div');
|
||||
container.className = 'rpg-weather-particles';
|
||||
|
||||
// Create 5 mist layers
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const mist = document.createElement('div');
|
||||
mist.className = 'rpg-weather-particle rpg-mist';
|
||||
mist.style.animationDelay = `${i * 2}s`;
|
||||
mist.style.animationDuration = `${15 + i * 2}s`;
|
||||
mist.style.opacity = `${0.1 + Math.random() * 0.2}`;
|
||||
container.appendChild(mist);
|
||||
}
|
||||
|
||||
return container;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create sunshine rays effect
|
||||
*/
|
||||
function createSunshine() {
|
||||
const container = document.createElement('div');
|
||||
container.className = 'rpg-weather-particles';
|
||||
|
||||
// Create 8 sun rays
|
||||
for (let i = 0; i < 8; i++) {
|
||||
const ray = document.createElement('div');
|
||||
ray.className = 'rpg-weather-particle rpg-sunray';
|
||||
ray.style.left = `${10 + i * 12}%`;
|
||||
ray.style.animationDelay = `${i * 0.5}s`;
|
||||
ray.style.animationDuration = `${8 + Math.random() * 4}s`;
|
||||
container.appendChild(ray);
|
||||
}
|
||||
|
||||
return container;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create lightning flash effect
|
||||
*/
|
||||
function createLightning() {
|
||||
const container = document.createElement('div');
|
||||
container.className = 'rpg-weather-particles';
|
||||
|
||||
// Create lightning flash overlay
|
||||
const flash = document.createElement('div');
|
||||
flash.className = 'rpg-weather-particle rpg-lightning';
|
||||
container.appendChild(flash);
|
||||
|
||||
return container;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create wind effect
|
||||
*/
|
||||
function createWind() {
|
||||
const container = document.createElement('div');
|
||||
container.className = 'rpg-weather-particles';
|
||||
|
||||
// Create 30 wind streaks
|
||||
for (let i = 0; i < 30; i++) {
|
||||
const streak = document.createElement('div');
|
||||
streak.className = 'rpg-weather-particle rpg-wind-streak';
|
||||
streak.style.top = `${Math.random() * 100}%`;
|
||||
streak.style.animationDelay = `${Math.random() * 5}s`;
|
||||
streak.style.animationDuration = `${1.5 + Math.random() * 1}s`;
|
||||
container.appendChild(streak);
|
||||
}
|
||||
|
||||
return container;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove current weather effect
|
||||
*/
|
||||
function removeWeatherEffect() {
|
||||
if (weatherContainer) {
|
||||
weatherContainer.remove();
|
||||
weatherContainer = null;
|
||||
currentWeatherType = null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Update weather effect based on current weather
|
||||
*/
|
||||
export function updateWeatherEffect() {
|
||||
// Check if dynamic weather is enabled
|
||||
if (!extensionSettings.enableDynamicWeather) {
|
||||
removeWeatherEffect();
|
||||
return;
|
||||
}
|
||||
|
||||
const weather = getCurrentWeather();
|
||||
const weatherType = parseWeatherType(weather);
|
||||
|
||||
// Don't recreate if weather hasn't changed
|
||||
if (weatherType === currentWeatherType) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Remove existing effect
|
||||
removeWeatherEffect();
|
||||
|
||||
// Create new effect based on weather type
|
||||
if (weatherType === 'none') {
|
||||
return; // No effect
|
||||
}
|
||||
|
||||
currentWeatherType = weatherType;
|
||||
|
||||
switch (weatherType) {
|
||||
case 'snow':
|
||||
weatherContainer = createSnowflakes();
|
||||
break;
|
||||
case 'rain':
|
||||
weatherContainer = createRain();
|
||||
break;
|
||||
case 'mist':
|
||||
weatherContainer = createMist();
|
||||
break;
|
||||
case 'sunny':
|
||||
weatherContainer = createSunshine();
|
||||
break;
|
||||
case 'wind':
|
||||
weatherContainer = createWind();
|
||||
break;
|
||||
case 'storm': {
|
||||
// Storm = Rain + Lightning (combined effects)
|
||||
const rainContainer = createRain();
|
||||
const lightningContainer = createLightning();
|
||||
// Merge both containers
|
||||
weatherContainer = document.createElement('div');
|
||||
weatherContainer.className = 'rpg-weather-particles';
|
||||
weatherContainer.appendChild(rainContainer);
|
||||
weatherContainer.appendChild(lightningContainer);
|
||||
break;
|
||||
}
|
||||
case 'blizzard': {
|
||||
// Blizzard = Snow + Wind (combined effects)
|
||||
const snowContainer = createSnowflakes();
|
||||
const windContainer = createWind();
|
||||
// Merge both containers
|
||||
weatherContainer = document.createElement('div');
|
||||
weatherContainer.className = 'rpg-weather-particles';
|
||||
weatherContainer.appendChild(snowContainer);
|
||||
weatherContainer.appendChild(windContainer);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (weatherContainer) {
|
||||
document.body.appendChild(weatherContainer);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize weather effects
|
||||
*/
|
||||
export function initWeatherEffects() {
|
||||
updateWeatherEffect();
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle dynamic weather effects
|
||||
*/
|
||||
export function toggleDynamicWeather(enabled) {
|
||||
if (enabled) {
|
||||
updateWeatherEffect();
|
||||
} else {
|
||||
removeWeatherEffect();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Clean up weather effects
|
||||
*/
|
||||
export function cleanupWeatherEffects() {
|
||||
removeWeatherEffect();
|
||||
}
|
||||
Reference in New Issue
Block a user