Fixed Scene Info widget using fixed sizes instead of column-aware functions,
causing it to be too narrow on desktop (3-4 columns) while working fine on mobile (2 columns).
**Problem:**
- Widget had fixed `defaultSize: {w: 2, h: 2}` and `maxAutoSize: {w: 2, h: 3}`
- Worked perfectly on mobile (2 columns) → 2×3 fills width
- Too narrow on desktop (3-4 columns) → 2×3 only uses 50-66% of width
- Reset Layout/Sort/Auto-Arrange buttons couldn't scale properly
**Root Cause:**
Scene Info widget not following established pattern used by User Info and User Stats widgets,
which use column-aware functions instead of fixed size objects.
**Fix (sceneInfoWidget.js:292-303):**
Changed from fixed sizes:
```javascript
defaultSize: { w: 2, h: 2 },
maxAutoSize: { w: 2, h: 3 },
```
To column-aware functions:
```javascript
defaultSize: (columns) => {
if (columns <= 2) {
return { w: 2, h: 2 }; // Mobile: 2×2 (compact, full width)
}
return { w: 3, h: 3 }; // Desktop: 3×3 (spacious)
},
maxAutoSize: (columns) => {
if (columns <= 2) {
return { w: 2, h: 3 }; // Mobile: 2×3 max (full width)
}
return { w: 3, h: 3 }; // Desktop: 3×3 max
},
```
**Behavior:**
Mobile (≤2 columns):
- Default: 2×2 (compact)
- Max: 2×3 (can expand vertically)
- Fills entire panel width ✓
Desktop (≥3 columns):
- Default: 3×3 (spacious)
- Max: 3×3 (properly sized)
- Uses horizontal space appropriately ✓
**Result:**
- Reset Layout: Uses correct size for current column count
- Sort Widgets: Sizes correctly after sort
- Auto-Arrange: Expands to proper maxAutoSize based on columns
- Panel resize: Widget reflowed properly when columns change
- All 5 data points (date, time, weather, temp, location) visible at all sizes
Follows same pattern as User Info (lines 42-54) and User Stats (lines 38-43) widgets.
Implemented Smart Hybrid Parser to handle virtually any fantasy or real-world scenario
while maintaining backward compatibility with existing comma-separated formats.
**Date Parsing Enhancement (infoBoxWidgets.js, lines 43-62):**
- Added conditional parsing: structured (comma-separated) vs unstructured
- Structured: "Tuesday, 15 January, 2024" → weekday/month/year split
- Unstructured: "3rd Day of Ninth Moon Year of Dragon" → full text in month field
- Handles: Fantasy calendars, ISO dates (2024-01-15), prose, stardates
**Weather Parsing Enhancement (infoBoxWidgets.js, lines 84-120):**
- JOIN remaining comma parts instead of taking only 2nd part
- Fixes: "🌧️, Heavy rain, flooding, winds" → preserves full forecast
- Added emoji prefix detection for non-comma formats
- Handles prose weather: "The air crackles with magical energy"
- Graceful fallback: no emoji → text-only display
**formatWeather Enhancement (sceneInfoWidget.js, lines 65-102):**
- Added no-emoji handling (display forecast only)
- Expanded symbol validation: custom symbols (+++, ***, ##)
- Symbol regex: /^[+*#~\-=_]+$/ for weather symbols
- Text-as-emoji handling: combines text with forecast gracefully
**formatLocation Enhancement (sceneInfoWidget.js, lines 126-148):**
- Changed to split on FIRST comma only (using indexOf)
- Preserves all remaining text after first comma as label
- Fixes: "The Winding Stair, Third Floor, East Wing, Palace" → keeps full context
- Still preserves hyphens in names (Seol Yi-hwan)
**CSS Text Wrapping (style.css, lines 2716-2745):**
- Removed white-space: nowrap restriction
- Added -webkit-line-clamp: 3 for values (2-3 line wrap)
- Added -webkit-line-clamp: 2 for labels
- Added word-wrap and overflow-wrap for long words
- Text now wraps gracefully instead of truncating prematurely
**Backward Compatibility:**
✅ Existing formats continue to work perfectly
✅ "Tuesday, 15 January, 2024" still parses as structured
✅ "🌤️, Partly cloudy" still displays with emoji
✅ "Location, City" still splits correctly
**New Format Support:**
✅ Fantasy: "3rd Day of the Ninth Moon Year of the Azure Dragon"
✅ ISO: "2024-01-15"
✅ Prose: "The third day after the full moon"
✅ Stardates: "Stardate 47634.44"
✅ Weather prose: "The air crackles with magical energy"
✅ Weather symbols: "+++, Heavy rainfall"
✅ Complex locations: "Building A, Floor 3, Room 101, Campus"
✅ Hyphenated names: "Seol Yi-hwan's Private Quarters"
**Testing Scenarios Covered:**
- Standard comma-separated formats (backward compat)
- Fantasy calendars without commas
- ISO date formats
- Prose descriptions for date/weather
- Stardates and custom time systems
- Weather symbols instead of emoji
- Multi-part weather forecasts
- Long multi-part locations
- Hyphenated character names
Result: Widget now handles ANY user-defined format while maintaining
visual polish and backward compatibility.
Fixed display issues with user's actual data formats:
Date Field Fix:
- Changed from simple "day + month" to using parsed fields
- Now displays data.month ("3rd Day of the Ninth Month")
- With data.weekday ("Tuesday") as label
- Handles complex comma-separated date strings correctly
- No more "JAN Friday, January..." overflow
Weather Field Fix:
- Added validation to check if weatherEmoji is actual emoji
- Expanded emoji detection regex to cover more Unicode ranges
- Falls back to ☀️ if weatherEmoji is text (like "Clear")
- Prevents "Clear 🌙 Clear skies" duplication
- Now shows just "Clear skies 🌙"
Location Field Fix:
- Changed split pattern from /[,\-]/ to comma-only
- Preserves hyphens in names (e.g., "Seol Yi-hwan")
- No more splitting "Seol Yi-hwan's Private Quarters"
- Secondary location parts (after comma) shown as label
Technical Changes:
- formatDate() now takes (fullDate, weekday, month) params
- Uses month field as primary display value
- formatWeather() validates emoji with expanded regex
- formatLocation() splits on comma only, preserves hyphens
- All formatters handle complex user-defined formats
Addresses parseInfoBoxData's comma-split parsing:
"Tuesday, 3rd Day of Ninth Month, Autumn, Year..." becomes:
weekday: "Tuesday"
month: "3rd Day of Ninth Month" (displayed)
year: "Autumn" (not shown - save space)
Fixed redundant and confusing formatting:
Date Field:
- Changed from "JAN 15" + "Fri" to "15 Jan" + "Monday"
- More natural reading order (day before month)
- Full weekday name as label instead of 3-letter abbreviation
- No more ALL-CAPS month
Weather Field:
- Changed from icon-left + "Clear" + "Clear skies" (redundant)
to "Clear Skies ☀️" (emoji on right)
- Removed redundant display of same text twice
- Emoji now appears at end of forecast text
- No separate icon element (included in text)
Technical Changes:
- Updated formatDate() to return icon and use natural order
- Updated formatWeather() to include emoji in value text
- Updated formatTime() and formatTemp() to return icon for consistency
- Updated renderInfoItem() to conditionally render icon only if present
- All formatters now return { icon, value, label } consistently
Result: Cleaner, more readable display without text duplication.
Fixed sizing issues where Scene Info widget overflowed its container.
Problems fixed:
- Removed unnecessary .rpg-dashboard-widget wrapper
- Grid now fills container with height: 100%
- Reduced padding from 1rem → 0.375rem
- Reduced gaps from 0.75rem → 0.375rem
- Reduced item padding from 0.75rem → 0.375rem
- Reduced icon size from 1.5rem → 1.125rem
- Reduced font sizes:
- Value: 1.125rem → 0.875rem
- Label: 0.8125rem → 0.6875rem
- Location value: 1rem → 0.8125rem
- Added text-overflow: ellipsis for long values
- Added min-height: 0 and overflow: hidden
Now follows same sizing pattern as other widgets (userInfo, userStats):
- Direct container without wrapper
- height/width: 100% to fill available space
- Compact padding and gaps
- Responsive font scaling
- Text truncation for overflow
Widget now fits properly in 2x2 grid space.
Complete redesign of Scene Info widget following UX best practices:
BEFORE:
- Tab-based interface with 5 separate views
- Only 1 data point visible at a time (poor scannability)
- Size: 2×3 (oversized, wasted vertical space)
- Didn't fit in desktop side panel
- Poor information density
AFTER:
- Grid-based layout showing all 5 data points simultaneously
- High information density and scannability
- Compact size: 2×2 (reduced from 2×3)
- Inspired by Apple Widgets / Material Design patterns
- Mobile-responsive with breakpoints at 1000px and 340px
- Zero interaction needed - all data visible at once
Changes:
- sceneInfoWidget.js: Complete rewrite (390→309 lines)
- Removed tab logic and state management
- Added data formatting helpers (formatDate, formatTime, etc.)
- Grid HTML structure with semantic CSS classes
- Maintained inline editing for all fields
- Simplified configuration
- style.css: Added comprehensive grid styling (lines 2647-2811)
- CSS Grid layout with named areas
- Responsive typography and spacing
- Hover states and focus styles
- 2 mobile breakpoints for optimal scaling
- defaultLayout.js: Updated Scene Info widget
- Changed height: 3→2 rows
- Adjusted Y positions for widgets below
- Simplified config (removed view selection)
Design Principles:
- All information visible simultaneously (zero interaction)
- High scannability for quick information gathering
- Proper information density for simple data points
- Grid structure: 2 columns, 3 rows (location full-width header)
- Mobile-first responsive design
Layout:
┌─────────────────────────────────┐
│ 📍 Location │
├──────────────────┬──────────────┤
│ 📅 Date │ 🕐 Time │
├──────────────────┼──────────────┤
│ 🌤️ Weather │ 🌡️ Temp │
└──────────────────┴──────────────┘
Implements combined widget that merges Calendar, Weather, Temperature, Clock,
and Location into one tabbed interface, reducing Scene tab from 7 to 3 widgets.
Phase 2: Scene Info Multi-View Widget
New Features:
- sceneInfoWidget.js: Tab-based multi-view widget
- Reuses existing infoBox widget render functions (no code duplication)
- Tab bar with icon + label for each view (📅 Cal, 🌤️ Wea, 🌡️ Tmp, 🕐 Clk, 📍 Loc)
- View switching by toggling CSS display (preserves handlers and state)
- Smart empty state detection (hides tabs for widgets with no data)
- Configurable: select views, default view, show/hide empty views
- Per-instance state management (activeSubTab persists per widget)
- Size: 2×3 default (tab bar + content)
- Registered in dashboardIntegration.js
Default Layout Changes:
- Scene tab: 7 widgets → 3 widgets (57% reduction)
- Old: Calendar (1×1) + Weather (1×1) + Temp (1×1) + Clock (1×1) + Location (2×2)
- New: Scene Info (2×3) - combined multi-view widget
- Repositioned: Recent Events (y: 4 → 3), Present Characters (y: 6 → 5)
- Vertical space: 10 rows → 9 rows (10% reduction)
Benefits:
- Reduces mobile vertical scroll by ~30%
- Cleaner Scene tab layout
- Individual widgets still available for customization
- Consistent UX with Inventory/Quests tab patterns
- Leverages existing CSS (.rpg-inventory-subtabs)
Technical Approach:
- Render all views once on mount (not destroyed on tab switch)
- Toggle visibility with CSS display property
- Preserves widget edit handlers and state
- Empty views filtered based on data availability
Individual calendar/weather/temperature/clock/location widgets remain
available in registry for users who prefer separate widgets.
Testing Required:
- Tab switching between all 5 views
- Empty state detection (remove data from infoBox)
- Edit functionality in each view
- Config changes (remove views, change default)
- Mobile responsive behavior
- Theme compatibility
Lucas 'Paperboy' Rose-Winters