Spicy_Marinara
897c0278fb
Features: - Complete tracker configuration UI with add/remove functionality - User Stats: Custom stats, status fields, skills section - Info Box: Configurable widgets (date, weather, temp, time, location, events) - Present Characters: Custom fields, relationships, character stats, thoughts - Character-specific stats with color interpolation - New multi-line format for cleaner AI generation and parsing - Auto-cleanup of placeholder brackets in AI responses - Relationship badges with emoji mapping - Advanced inventory v2 system with multi-location storage - Responsive mobile support with horizontal scrolling - Removed legacy format support for cleaner codebase - Fixed context injection for together mode (no duplication) - Updated README with new features and configuration guide
143 lines
4.0 KiB
Markdown
143 lines
4.0 KiB
Markdown
# Tracker Customization Implementation Plan
|
|
|
|
## Overview
|
|
Allow users to fully customize what trackers display, including custom fields, toggles, and formats.
|
|
|
|
## Settings Schema Design
|
|
|
|
```javascript
|
|
extensionSettings.trackerConfig = {
|
|
userStats: {
|
|
// Array of custom stats (allows add/remove/rename)
|
|
customStats: [
|
|
{ id: 'health', name: 'Health', enabled: true, value: 100 },
|
|
{ id: 'satiety', name: 'Satiety', enabled: true, value: 100 },
|
|
{ id: 'energy', name: 'Energy', enabled: true, value: 100 },
|
|
{ id: 'hygiene', name: 'Hygiene', enabled: true, value: 100 },
|
|
{ id: 'arousal', name: 'Arousal', enabled: true, value: 0 }
|
|
],
|
|
showRPGAttributes: true,
|
|
statusSection: {
|
|
enabled: true,
|
|
showMoodEmoji: true,
|
|
customFields: ['Conditions']
|
|
},
|
|
skillsSection: {
|
|
enabled: false,
|
|
label: 'Skills'
|
|
}
|
|
},
|
|
|
|
infoBox: {
|
|
widgets: {
|
|
date: { enabled: true, format: 'Weekday, Month, Year' },
|
|
weather: { enabled: true },
|
|
temperature: { enabled: true, unit: 'C' },
|
|
time: { enabled: true },
|
|
location: { enabled: true },
|
|
recentEvents: { enabled: true }
|
|
}
|
|
},
|
|
|
|
presentCharacters: {
|
|
showEmoji: true,
|
|
showName: true,
|
|
customFields: [
|
|
{ id: 'physicalState', label: 'Physical State', enabled: true, placeholder: 'Visible traits' },
|
|
{ id: 'demeanor', label: 'Demeanor Cue', enabled: true, placeholder: 'Observable demeanor' },
|
|
{ id: 'relationship', label: 'Relationship', enabled: true, type: 'relationship' },
|
|
{ id: 'internalMonologue', label: 'Internal Monologue', enabled: true, placeholder: 'First person thoughts' }
|
|
],
|
|
characterStats: {
|
|
enabled: false,
|
|
stats: []
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
## Implementation Phases
|
|
|
|
### Phase 1: State Management ✓
|
|
- Update state.js with trackerConfig schema
|
|
- Add migration logic for existing users
|
|
- Ensure persistence in loadSettings/saveSettings
|
|
|
|
### Phase 2: Edit Trackers Modal UI
|
|
- Create src/systems/ui/trackerEditor.js
|
|
- Add "Edit Trackers" button in template.html
|
|
- Build tabbed modal interface with save/cancel/reset
|
|
|
|
### Phase 3: User Stats Customization
|
|
- Tab UI for managing custom stats array
|
|
- RPG attributes toggle
|
|
- Status section configuration
|
|
- Skills field configuration
|
|
|
|
### Phase 4: Info Box Customization
|
|
- Tab UI for widget toggles
|
|
- Date format selector
|
|
- Temperature unit toggle
|
|
|
|
### Phase 5: Present Characters Customization
|
|
- Tab UI for custom fields management
|
|
- Character stats configuration
|
|
- Field ordering and custom additions
|
|
|
|
### Phase 6: Dynamic Rendering
|
|
- Update renderUserStats() for variable stats
|
|
- Update renderInfoBox() for conditional widgets
|
|
- Update renderThoughts() for custom fields
|
|
|
|
### Phase 7: Dynamic Prompts
|
|
- Update generateTrackerInstructions()
|
|
- Build prompts from trackerConfig
|
|
- Handle variable formats
|
|
|
|
### Phase 8: Flexible Parsing
|
|
- Update parser.js for variable formats
|
|
- Handle custom stat names
|
|
- Parse custom character fields
|
|
|
|
### Phase 9: Responsive CSS
|
|
- Support variable stat counts
|
|
- Conditional widget visibility
|
|
- Mobile-friendly layouts for all configs
|
|
|
|
### Phase 10: Testing
|
|
- Test minimal configurations
|
|
- Test maximal configurations
|
|
- Test custom field names
|
|
- Verify mobile responsiveness
|
|
|
|
## Files to Modify
|
|
|
|
1. **State & Persistence**
|
|
- src/core/state.js
|
|
- src/core/persistence.js
|
|
- src/utils/migration.js
|
|
|
|
2. **UI Components**
|
|
- template.html (add button)
|
|
- src/systems/ui/trackerEditor.js (NEW)
|
|
- src/systems/ui/modals.js (register new modal)
|
|
|
|
3. **Rendering**
|
|
- src/systems/rendering/userStats.js
|
|
- src/systems/rendering/infoBox.js
|
|
- src/systems/rendering/thoughts.js
|
|
|
|
4. **Generation**
|
|
- src/systems/generation/promptBuilder.js
|
|
- src/systems/generation/parser.js
|
|
|
|
5. **Styling**
|
|
- style.css
|
|
|
|
## Critical Success Factors
|
|
- Backward compatibility via migration
|
|
- Mobile-first responsive design
|
|
- Flexible parsing handles variable formats
|
|
- CSS adapts without breaking existing layouts
|
|
- Settings persist correctly across sessions
|