Pakobbix/rpg-companion-sillytavern
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(dashboard): implement smart widget scaling and improved auto-layout

Browse Source 
- Add resetWidgetSizesToDefault() to reset all widgets to default sizes before auto-arrange/reset
- Implement continuous expansion algorithm that fills available space up to maxAutoSize limits
- Add visible height detection to prevent widgets expanding beyond viewport (no forced scroll)
- Update all widget defaultSize and maxAutoSize for optimal 1x1 compact layouts
  - Info widgets (calendar, weather, temp, clock): 1x1 default, 1x2 max
  - Location: 2x2 max (was 3x3)
  - Characters: 3x5 max, moved to 'scene' category (eliminates Social tab)
  - User Info: 2x1 max (prevents expansion)
  - User Mood: 1x1 default and max (compact top-right placement)
  - User Attributes: 3x5 max (fills bottom space)
  - User Stats: 3x3 max
- Fix CSS scaling for 1x1 widgets
  - Replace viewport-based units with fixed rem values
  - Reduce icon/graphic sizes to fit with visible text
  - Add explicit gaps and padding for consistent spacing
  - Set line-height: 1 to prevent text overflow
- Reorganize default layout
  - Status tab: User Info (2x1) + Mood (1x1 top right) + Stats + Attributes
  - Scene tab: Info widgets (1x1) + Location + Characters (all on one tab)
  - Inventory tab: Full inventory widget

Auto-arrange and reset now properly size widgets to defaults and expand to fill
available space without exceeding visible area.
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-10-23 22:08:04 +11:00
parent f61e6390fb
commit 3dd7b017a6
10 changed files with 146 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/systems/dashboard/defaultLayout.js
+24 -25
View File
@@ -39,7 +39,7 @@ export function generateDefaultDashboard() {
icon: '📊',
order: 0,
widgets: [
// Row 0: User Info (avatar, name, level)
// Row 0: User Info (left) + User Mood (top right in 3-col)
{
id: 'widget-userinfo',
type: 'userInfo',
@@ -49,6 +49,15 @@ export function generateDefaultDashboard() {
h: 1,
config: {}
},
{
id: 'widget-usermood',
type: 'userMood',
x: 2,
y: 0,
w: 1,
h: 1,
config: {}
},
// Row 1-2: User Stats (health/energy bars)
{
id: 'widget-userstats',
@@ -61,22 +70,12 @@ export function generateDefaultDashboard() {
statBarGradient: true
}
},
// Row 3: User Mood
{
id: 'widget-usermood',
type: 'userMood',
x: 0,
y: 3,
w: 2,
h: 1,
config: {}
},
// Row 4-5: User Attributes
// Row 3-4: User Attributes
{
id: 'widget-userattributes',
type: 'userAttributes',
x: 0,
y: 4,
y: 3,
w: 2,
h: 2,
config: {}
@@ -90,14 +89,14 @@ export function generateDefaultDashboard() {
icon: '🌍',
order: 1,
widgets: [
// Row 0-1: Calendar (left) + Weather (right)
// Row 0: Calendar (left) + Weather (right)
{
id: 'widget-calendar',
type: 'calendar',
x: 0,
y: 0,
w: 1,
h: 2,
h: 1,
config: {}
},
{
@@ -106,19 +105,19 @@ export function generateDefaultDashboard() {
x: 1,
y: 0,
w: 1,
h: 2,
h: 1,
config: {
compact: false
}
},
// Row 2-3: Temperature (left) + Clock (right)
// Row 1: Temperature (left) + Clock (right)
{
id: 'widget-temperature',
type: 'temperature',
x: 0,
y: 2,
y: 1,
w: 1,
h: 2,
h: 1,
config: {
unit: 'celsius'
}
@@ -127,29 +126,29 @@ export function generateDefaultDashboard() {
id: 'widget-clock',
type: 'clock',
x: 1,
y: 2,
y: 1,
w: 1,
h: 2,
h: 1,
config: {
format: 'digital'
}
},
// Row 4-5: Location (full width)
// Row 2-3: Location (full width)
{
id: 'widget-location',
type: 'location',
x: 0,
y: 4,
y: 2,
w: 2,
h: 2,
config: {}
},
// Row 6-8: Present Characters (full width, will expand with auto-layout)
// Row 4-6: Present Characters (full width, will expand with auto-layout)
{
id: 'widget-presentchars',
type: 'presentCharacters',
x: 0,
y: 6,
y: 4,
w: 2,
h: 3,
config: {