feat(dashboard): implement smart auto-layout with expansion and better defaults
This commit implements 5 major improvements to the dashboard layout system:
**1. Improved Default Layout (defaultLayout.js)**
- Changed from 2 tabs to 3 tabs for better organization:
- Tab 1 (Status): User widgets only (userInfo, userStats, userMood, userAttributes)
- Tab 2 (Scene): Scene widgets + characters (calendar, weather, temp, clock, location, presentCharacters)
- Tab 3 (Inventory): Full inventory widget
- Cleaner separation prevents cramming all widgets on one tab
**2. Widget Max Size Limits (widget definition files)**
- Added maxAutoSize property to all widgets (enforced only during auto-arrange):
- Info widgets (calendar, weather, temp, clock): { w: 2, h: 3 }
- Location: { w: 3, h: 3 }
- presentCharacters: { w: 3, h: 6 } (can expand significantly)
- Inventory: { w: 3, h: 8 } (full tab)
- Prevents blind expansion while allowing intelligent space filling
**3. Smart Expansion Algorithm (gridEngine.js)**
- Added expansion pass after compaction in autoLayout():
- Sorts widgets top-to-bottom, left-to-right
- Tries to expand height first (fills vertical gaps)
- Then tries to expand width (fills horizontal gaps)
- Respects maxAutoSize limits from widget definitions
- Only expands if no collision with other widgets
- Widgets now fill available space instead of staying at default sizes
- Example: presentCharacters expands from 2x3 to 3x6 when space available
**4. Auto-Reflow on Column Change (dashboardManager.js)**
- Modified onColumnsChange callback to auto-layout after column count changes
- When grid transitions (2→3 or 3→2), automatically reflo ws widgets
- Prevents overlap and optimizes for new column count
- User experience: seamless adaptation when console opens/closes
**5. Fixed Grid Height/Scrollbar CSS (style.css)**
- Added flex: 1, overflow-y: auto, min-height: 0 to .rpg-dashboard-grid
- Grid now properly fills available space in dashboard container
- Accounts for bottom buttons (manual update, settings)
- Prevents "fingernail of extra height" that caused scrollbars
**Technical Changes:**
- Passed widget registry to GridEngine for maxAutoSize lookups
- getWidgetMaxSize() helper looks up definitions from registry
- Moved registry initialization before GridEngine construction
- Grid now uses flexbox to fill available vertical space
**User-Facing Improvements:**
- Reset layout creates logical 3-tab structure from the start
- Auto-arrange expands widgets to fill available space intelligently
- Resizing window/console automatically reflows layout
- No more unwanted scrollbars from slight overflow
Fixes cramped layouts, underutilized space, and scrollbar issues.
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
@@ -32,14 +32,14 @@ export function generateDefaultDashboard() {
|
||||
},
|
||||
|
||||
tabs: [
|
||||
// Tab 1: Status (User widgets only - compact and focused)
|
||||
{
|
||||
id: 'tab-status',
|
||||
name: 'Status',
|
||||
icon: '📊',
|
||||
order: 0,
|
||||
widgets: [
|
||||
// === USER CLUSTER (Top) ===
|
||||
// Row 0: User Info (avatar, name, level) - AT TOP
|
||||
// Row 0: User Info (avatar, name, level)
|
||||
{
|
||||
id: 'widget-userinfo',
|
||||
type: 'userInfo',
|
||||
@@ -61,17 +61,17 @@ export function generateDefaultDashboard() {
|
||||
statBarGradient: true
|
||||
}
|
||||
},
|
||||
// Row 3: User Mood (left column)
|
||||
// Row 3: User Mood
|
||||
{
|
||||
id: 'widget-usermood',
|
||||
type: 'userMood',
|
||||
x: 0,
|
||||
y: 3,
|
||||
w: 1,
|
||||
w: 2,
|
||||
h: 1,
|
||||
config: {}
|
||||
},
|
||||
// Row 4-5: User Attributes (full width, needs 2 columns for 3x2 grid)
|
||||
// Row 4-5: User Attributes
|
||||
{
|
||||
id: 'widget-userattributes',
|
||||
type: 'userAttributes',
|
||||
@@ -80,15 +80,22 @@ export function generateDefaultDashboard() {
|
||||
w: 2,
|
||||
h: 2,
|
||||
config: {}
|
||||
},
|
||||
|
||||
// === SCENE CLUSTER (Middle) ===
|
||||
// Row 6-7: Calendar (left) + Weather (right)
|
||||
}
|
||||
]
|
||||
},
|
||||
// Tab 2: Scene (Scene info widgets + characters)
|
||||
{
|
||||
id: 'tab-scene',
|
||||
name: 'Scene',
|
||||
icon: '🌍',
|
||||
order: 1,
|
||||
widgets: [
|
||||
// Row 0-1: Calendar (left) + Weather (right)
|
||||
{
|
||||
id: 'widget-calendar',
|
||||
type: 'calendar',
|
||||
x: 0,
|
||||
y: 6,
|
||||
y: 0,
|
||||
w: 1,
|
||||
h: 2,
|
||||
config: {}
|
||||
@@ -97,19 +104,19 @@ export function generateDefaultDashboard() {
|
||||
id: 'widget-weather',
|
||||
type: 'weather',
|
||||
x: 1,
|
||||
y: 6,
|
||||
y: 0,
|
||||
w: 1,
|
||||
h: 2,
|
||||
config: {
|
||||
compact: false
|
||||
}
|
||||
},
|
||||
// Row 8-9: Temperature (left) + Clock (right)
|
||||
// Row 2-3: Temperature (left) + Clock (right)
|
||||
{
|
||||
id: 'widget-temperature',
|
||||
type: 'temperature',
|
||||
x: 0,
|
||||
y: 8,
|
||||
y: 2,
|
||||
w: 1,
|
||||
h: 2,
|
||||
config: {
|
||||
@@ -120,31 +127,29 @@ export function generateDefaultDashboard() {
|
||||
id: 'widget-clock',
|
||||
type: 'clock',
|
||||
x: 1,
|
||||
y: 8,
|
||||
y: 2,
|
||||
w: 1,
|
||||
h: 2,
|
||||
config: {
|
||||
format: 'digital'
|
||||
}
|
||||
},
|
||||
// Row 10-11: Location (full width)
|
||||
// Row 4-5: Location (full width)
|
||||
{
|
||||
id: 'widget-location',
|
||||
type: 'location',
|
||||
x: 0,
|
||||
y: 10,
|
||||
y: 4,
|
||||
w: 2,
|
||||
h: 2,
|
||||
config: {}
|
||||
},
|
||||
|
||||
// === SOCIAL CLUSTER (Bottom) ===
|
||||
// Row 12-14: Present Characters (full width)
|
||||
// Row 6-8: Present Characters (full width, will expand with auto-layout)
|
||||
{
|
||||
id: 'widget-presentchars',
|
||||
type: 'presentCharacters',
|
||||
x: 0,
|
||||
y: 12,
|
||||
y: 6,
|
||||
w: 2,
|
||||
h: 3,
|
||||
config: {
|
||||
@@ -154,11 +159,12 @@ export function generateDefaultDashboard() {
|
||||
}
|
||||
]
|
||||
},
|
||||
// Tab 3: Inventory (Full tab for inventory system)
|
||||
{
|
||||
id: 'tab-inventory',
|
||||
name: 'Inventory',
|
||||
icon: '🎒',
|
||||
order: 1,
|
||||
order: 2,
|
||||
widgets: [
|
||||
{
|
||||
id: 'widget-inventory',
|
||||
|
||||
Reference in New Issue
Block a user