feat(dashboard): implement reactive tracker-dashboard integration
Replaced surface-level "disabled" messages with true reactive integration.
When tracker editor saves config changes, dashboard now automatically
updates without page reload - removing disabled widgets and refreshing
remaining ones with new field names/settings.
**Event-Based Architecture:**
- trackerEditor.js dispatches 'rpg:trackerConfigChanged' custom event
- dashboardManager.js subscribes to event and reacts to changes
- Decoupled, extensible, browser-native event system
**Dashboard Reactive Methods:**
- onTrackerConfigChanged(config): Main handler coordinating refresh flow
- removeDisabledWidgets(config): Removes widgets with disabled fields
- Cleans up DOM, drag/resize handlers, state
- Removes from tab.widgets arrays
- shouldWidgetBeRemoved(type, config): Decision logic per widget type
- calendar → remove if date disabled
- weather → remove if weather disabled
- temperature → remove if temperature disabled
- clock → remove if time disabled
- location → remove if location disabled
- userStats → remove only if ALL stats disabled
- presentCharacters → remove if thoughts disabled
- refreshAllWidgets(): Re-renders all remaining widgets with new config
**Widget Auto-Removal Flow:**
1. User disables field in tracker editor
2. Clicks "Save & Apply"
3. Event fires → dashboard receives notification
4. Disabled widgets removed from all tabs
5. Affected tabs auto-layout to fill space
6. Remaining widgets re-render with new config
7. Layout saved automatically
**Removed Surface-Level Bandaid:**
- Deleted checkFieldEnabled() from infoBoxWidgets.js (-36 lines)
- Removed all checkFieldEnabled() calls from widget renders (-25 lines)
- Removed empty state message from userStatsWidget.js (-8 lines)
- Removed tracker settings link handler (-7 lines)
- Widgets no longer show "⚠️ Field disabled" messages
- Dashboard handles removal elegantly instead
**Result:**
True reactive integration. Disable "Arousal" → instantly disappears from
all userStats widgets. Disable "Date" → calendar widget removed and tab
auto-layouts. Rename "Health" to "HP" → updates instantly everywhere.
All changes happen immediately without page reload.
Files modified:
- src/systems/dashboard/dashboardManager.js (+129 lines)
- src/systems/ui/trackerEditor.js (+11 lines)
- src/systems/dashboard/widgets/infoBoxWidgets.js (-67 lines)
- src/systems/dashboard/widgets/userStatsWidget.js (-21 lines)
This commit is contained in:
@@ -12,43 +12,6 @@
|
||||
* Users can arrange them independently or group them together.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Check if a field is enabled in trackerConfig and render disabled state if not
|
||||
* @param {HTMLElement} container - Widget container
|
||||
* @param {string} fieldName - Field name in trackerConfig (e.g., 'date', 'weather', 'temperature')
|
||||
* @param {string} displayName - Display name for the field (e.g., 'Date', 'Weather')
|
||||
* @param {Object} dependencies - Dependencies object
|
||||
* @returns {boolean} True if enabled, false if disabled
|
||||
*/
|
||||
function checkFieldEnabled(container, fieldName, displayName, dependencies) {
|
||||
const { getExtensionSettings } = dependencies;
|
||||
const settings = getExtensionSettings();
|
||||
const trackerConfig = settings.trackerConfig?.infoBox;
|
||||
const fieldEnabled = trackerConfig?.widgets?.[fieldName]?.enabled !== false;
|
||||
|
||||
if (!fieldEnabled) {
|
||||
container.innerHTML = `
|
||||
<div class="rpg-widget-empty-state">
|
||||
<p>⚠️ ${displayName} disabled</p>
|
||||
<p style="font-size: 0.85em; opacity: 0.7;">
|
||||
Enable in <a href="#" class="rpg-open-tracker-settings">Tracker Settings</a>
|
||||
</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Handle tracker settings link
|
||||
const link = container.querySelector('.rpg-open-tracker-settings');
|
||||
if (link) {
|
||||
link.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
document.getElementById('rpg-open-tracker-editor')?.click();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return fieldEnabled;
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse Info Box data from shared data source
|
||||
* @param {string} infoBoxText - Raw info box text
|
||||
@@ -236,12 +199,6 @@ export function registerCalendarWidget(registry, dependencies) {
|
||||
|
||||
render(container, config = {}) {
|
||||
const { getInfoBoxData } = dependencies;
|
||||
|
||||
// Check if date field is enabled in trackerConfig
|
||||
if (!checkFieldEnabled(container, 'date', 'Date', dependencies)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const data = parseInfoBoxData(getInfoBoxData());
|
||||
|
||||
const monthShort = data.month ? data.month.substring(0, 3).toUpperCase() : 'MON';
|
||||
@@ -330,12 +287,6 @@ export function registerWeatherWidget(registry, dependencies) {
|
||||
|
||||
render(container, config = {}) {
|
||||
const { getInfoBoxData } = dependencies;
|
||||
|
||||
// Check if weather field is enabled in trackerConfig
|
||||
if (!checkFieldEnabled(container, 'weather', 'Weather', dependencies)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const data = parseInfoBoxData(getInfoBoxData());
|
||||
|
||||
const weatherEmoji = data.weatherEmoji || '🌤️';
|
||||
@@ -368,12 +319,6 @@ export function registerTemperatureWidget(registry, dependencies) {
|
||||
|
||||
render(container, config = {}) {
|
||||
const { getInfoBoxData } = dependencies;
|
||||
|
||||
// Check if temperature field is enabled in trackerConfig
|
||||
if (!checkFieldEnabled(container, 'temperature', 'Temperature', dependencies)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const data = parseInfoBoxData(getInfoBoxData());
|
||||
|
||||
const tempDisplay = data.temperature || '20°C';
|
||||
@@ -415,12 +360,6 @@ export function registerClockWidget(registry, dependencies) {
|
||||
|
||||
render(container, config = {}) {
|
||||
const { getInfoBoxData } = dependencies;
|
||||
|
||||
// Check if time field is enabled in trackerConfig
|
||||
if (!checkFieldEnabled(container, 'time', 'Time', dependencies)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const data = parseInfoBoxData(getInfoBoxData());
|
||||
|
||||
const timeDisplay = data.timeEnd || data.timeStart || '12:00';
|
||||
@@ -471,12 +410,6 @@ export function registerLocationWidget(registry, dependencies) {
|
||||
|
||||
render(container, config = {}) {
|
||||
const { getInfoBoxData } = dependencies;
|
||||
|
||||
// Check if location field is enabled in trackerConfig
|
||||
if (!checkFieldEnabled(container, 'location', 'Location', dependencies)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const data = parseInfoBoxData(getInfoBoxData());
|
||||
|
||||
const locationDisplay = data.location || 'Location';
|
||||
|
||||
Reference in New Issue
Block a user