feat(dashboard): implement smart widget collision and category-aware layout
Complete dashboard v2 improvements for better UX and visual consistency: **1. Push-Aside Drag/Drop (dragDrop.js)** - Replace swap/revert logic with intelligent reflow algorithm - When widgets collide on drag, automatically push overlapping widgets down - All affected widgets repositioned after reflow completes - Eliminates widget overlap issues **2. Unified Widget Styling (style.css)** - Add consistent .rpg-widget container styling for all widgets - Background: rgba(0,0,0,0.2) for visual separation - Border-left: 3px highlight for category identification - Box-shadow and border-radius for depth and polish - Maintain individual widget decorative styles **3. Logical Default Layout (defaultLayout.js)** - Reorganize widgets into semantic clusters with clear comments: - USER CLUSTER (top): userInfo → userStats → userMood + userAttributes - SCENE CLUSTER (middle): calendar + weather → temp + clock → location - SOCIAL CLUSTER (bottom): presentCharacters - userInfo widget now at top (y=0) as expected - All positions use rem units for responsive scaling **4. Category-Aware Auto-Layout (dashboardManager.js)** - Implement sortWidgetsByCategory() with priority ordering: user → scene → social → inventory - Within user category, specific ordering: userInfo → userStats → userMood → userAttributes - Add preserveOrder option to gridEngine.autoLayout() - Auto-arrange now uses logical grouping instead of random bin-packing **5. Multi-Tab Auto-Distribution (dashboardManager.js)** - Add estimateLayoutHeight() to detect when content exceeds threshold - Implement distributeWidgetsByCategory() for automatic tab creation: - "Status" tab: user + scene widgets - "Social" tab: social widgets (if any) - "Inventory" tab: inventory widgets (if any) - Each tab gets category-aware auto-layout - 80rem height threshold for single-tab limit **6. Widget Category Metadata (widgets/)** - Add category field to all widget definitions: - userInfo, userStats, userMood, userAttributes: 'user' - calendar, weather, temperature, clock, location: 'scene' - presentCharacters: 'social' - inventory: 'inventory' **7. Integration Improvements (dashboardIntegration.js)** - Set default layout on initialization for reset functionality - Add reset layout button to dashboard header - Wire up reset button event handler **8. Core State Management (index.js)** - Add getInfoBoxData() and setInfoBoxData() to state API - Ensure info box data persists across sessions **Technical Details:** - Rem units throughout for 1080p→4K→mobile responsive scaling - Reflow algorithm leverages existing gridEngine collision detection - Category-aware sorting preserves logical relationships - Multi-tab distribution prevents single-page scroll fatigue - All changes maintain backwards compatibility with existing layouts Fixes dashboard issues after rem unit conversion introduced massive positioning bugs. Users reported widgets overlapping on drag, visual inconsistency, and random auto-arrange behavior. Related: Epic 2 (Dashboard v2), Phase 3.2
This commit is contained in:
@@ -191,6 +191,7 @@ export function registerCalendarWidget(registry, dependencies) {
|
||||
name: 'Calendar',
|
||||
icon: '📅',
|
||||
description: 'Date, weekday, month, and year display',
|
||||
category: 'scene',
|
||||
minSize: { w: 1, h: 2 },
|
||||
defaultSize: { w: 1, h: 2 },
|
||||
requiresSchema: false,
|
||||
@@ -274,6 +275,7 @@ function attachCalendarHandlers(container, dependencies) {
|
||||
*/
|
||||
export function registerWeatherWidget(registry, dependencies) {
|
||||
registry.register('weather', {
|
||||
category: 'scene',
|
||||
name: 'Weather',
|
||||
icon: '🌤️',
|
||||
description: 'Weather emoji and forecast',
|
||||
@@ -306,6 +308,7 @@ export function registerWeatherWidget(registry, dependencies) {
|
||||
*/
|
||||
export function registerTemperatureWidget(registry, dependencies) {
|
||||
registry.register('temperature', {
|
||||
category: 'scene',
|
||||
name: 'Temperature',
|
||||
icon: '🌡️',
|
||||
description: 'Temperature display with thermometer',
|
||||
@@ -345,6 +348,7 @@ export function registerTemperatureWidget(registry, dependencies) {
|
||||
*/
|
||||
export function registerClockWidget(registry, dependencies) {
|
||||
registry.register('clock', {
|
||||
category: 'scene',
|
||||
name: 'Clock',
|
||||
icon: '🕐',
|
||||
description: 'Analog clock with time display',
|
||||
@@ -393,6 +397,7 @@ export function registerClockWidget(registry, dependencies) {
|
||||
*/
|
||||
export function registerLocationWidget(registry, dependencies) {
|
||||
registry.register('location', {
|
||||
category: 'scene',
|
||||
name: 'Location',
|
||||
icon: '📍',
|
||||
description: 'Map with location display',
|
||||
|
||||
Reference in New Issue
Block a user