Major update: Full tracker customization system
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
This commit is contained in:
Spicy_Marinara
@@ -0,0 +1,146 @@
|
||||
# Tracker Customization Feature - Implementation Complete ✅
|
||||
|
||||
## Summary
|
||||
Implemented a comprehensive tracker customization system allowing users to fully customize what trackers display, track, and format.
|
||||
|
||||
## What Was Implemented
|
||||
|
||||
### 1. Settings Schema (state.js)
|
||||
- Added `trackerConfig` with three sections:
|
||||
- `userStats`: customStats array, RPG attributes toggle, status section config, skills section config
|
||||
- `infoBox`: widget toggles (date/weather/temp/time/location/events), date format, temperature unit
|
||||
- `presentCharacters`: customFields array, character stats config
|
||||
|
||||
### 2. Edit Trackers Modal (trackerEditor.js - 600+ lines)
|
||||
- Complete UI with 3 tabs: User Stats | Info Box | Present Characters
|
||||
- **User Stats Tab:**
|
||||
- Add/remove/rename custom stats
|
||||
- Toggle RPG attributes (STR/DEX/CON/INT/WIS/CHA/LVL)
|
||||
- Configure status section (enable/disable, mood emoji, custom fields)
|
||||
- Configure skills section (enable/disable, custom fields)
|
||||
- **Info Box Tab:**
|
||||
- Toggle individual widgets (date, weather, temperature, time, location, recent events)
|
||||
- Select date format (dd/mm/yy, mm/dd/yy, yyyy-mm-dd)
|
||||
- Choose temperature unit (Celsius/Fahrenheit)
|
||||
- **Present Characters Tab:**
|
||||
- Add/remove/rename custom character fields
|
||||
- Reorder fields with up/down buttons
|
||||
- Select character stats to track
|
||||
- Save/Cancel/Reset functionality
|
||||
|
||||
### 3. Migration System (persistence.js)
|
||||
- `migrateToTrackerConfig()` converts old `statNames` to new `customStats` format
|
||||
- Auto-runs on settings load
|
||||
- Ensures backward compatibility with existing user data
|
||||
|
||||
### 4. Dynamic Rendering
|
||||
|
||||
**User Stats (userStats.js):**
|
||||
- `renderUserStats()` loops through enabled customStats only
|
||||
- Conditionally renders:
|
||||
- RPG attributes section
|
||||
- Status section with optional mood emoji
|
||||
- Skills section
|
||||
- `buildUserStatsText()` generates dynamic tracker text from config
|
||||
|
||||
**Info Box (infoBox.js):**
|
||||
- `renderInfoBox()` conditionally renders widgets based on toggles
|
||||
- Applies date format conversions
|
||||
- Converts temperature between Celsius and Fahrenheit
|
||||
- Maintains responsive CSS grid layout
|
||||
|
||||
**Present Characters (thoughts.js):**
|
||||
- `renderThoughts()` parses custom fields dynamically
|
||||
- Renders character cards with variable field count
|
||||
- Relationship badge conditional on "Relationship" field existence
|
||||
- Generic `.rpg-character-field` class for all custom fields
|
||||
|
||||
### 5. Dynamic Prompt Generation (promptBuilder.js)
|
||||
- `generateTrackerInstructions()` builds prompts from `trackerConfig`:
|
||||
- User Stats format from enabled customStats array
|
||||
- RPG attributes line if enabled
|
||||
- Status/Skills sections if enabled
|
||||
- Info Box format with only enabled widgets
|
||||
- Present Characters format with custom fields
|
||||
|
||||
### 6. Flexible Parsing (parser.js)
|
||||
- `parseUserStats()` updated to:
|
||||
- Parse custom stat names dynamically using regex
|
||||
- Parse RPG attributes if enabled
|
||||
- Parse status section with optional mood emoji
|
||||
- Parse skills section if enabled
|
||||
- Store stats using normalized IDs
|
||||
|
||||
### 7. UI Integration
|
||||
- Added "Edit Trackers" button next to Settings button
|
||||
- Modal HTML in template.html with tab navigation
|
||||
- Complete CSS styling for all editor UI elements
|
||||
- Mobile-responsive design
|
||||
|
||||
### 8. CSS Updates
|
||||
- Added `.rpg-skills-section` styling
|
||||
- Added `.rpg-character-field` generic styling
|
||||
- Updated `.rpg-settings-buttons-row` for two-button layout
|
||||
- 300+ lines of tracker editor modal CSS
|
||||
- Flexbox layouts auto-handle variable content counts
|
||||
|
||||
## Files Modified
|
||||
|
||||
**Core:**
|
||||
- `src/core/state.js` - Added trackerConfig schema
|
||||
- `src/core/persistence.js` - Added migration function
|
||||
|
||||
**UI:**
|
||||
- `src/systems/ui/trackerEditor.js` - NEW FILE (600+ lines)
|
||||
- `template.html` - Edit Trackers button, modal HTML
|
||||
- `style.css` - Editor styling, new sections CSS
|
||||
|
||||
**Rendering:**
|
||||
- `src/systems/rendering/userStats.js` - Dynamic rendering
|
||||
- `src/systems/rendering/infoBox.js` - Widget toggles, format conversion
|
||||
- `src/systems/rendering/thoughts.js` - Custom fields rendering
|
||||
|
||||
**Generation:**
|
||||
- `src/systems/generation/promptBuilder.js` - Dynamic instructions
|
||||
- `src/systems/generation/parser.js` - Flexible parsing
|
||||
|
||||
**Integration:**
|
||||
- `index.js` - Import and initialize tracker editor
|
||||
|
||||
## Testing Checklist
|
||||
|
||||
- [ ] Open Edit Trackers modal
|
||||
- [ ] User Stats Tab:
|
||||
- [ ] Add/remove/rename stats
|
||||
- [ ] Toggle RPG attributes
|
||||
- [ ] Enable/disable status section
|
||||
- [ ] Add custom status fields
|
||||
- [ ] Enable/disable skills section
|
||||
- [ ] Add custom skill fields
|
||||
- [ ] Info Box Tab:
|
||||
- [ ] Toggle each widget on/off
|
||||
- [ ] Change date format
|
||||
- [ ] Change temperature unit
|
||||
- [ ] Present Characters Tab:
|
||||
- [ ] Add/remove/rename fields
|
||||
- [ ] Reorder fields
|
||||
- [ ] Select character stats
|
||||
- [ ] Save and verify:
|
||||
- [ ] Panels update with new configuration
|
||||
- [ ] AI receives correct prompt format
|
||||
- [ ] AI response parses correctly
|
||||
- [ ] Manual edits work
|
||||
- [ ] Settings persist after refresh
|
||||
|
||||
## Known Features
|
||||
|
||||
1. **Backward Compatible**: Old settings automatically migrate to new format
|
||||
2. **Fully Dynamic**: All rendering adapts to user configuration
|
||||
3. **Format Conversion**: Automatic date format and temperature unit conversion
|
||||
4. **Flexible Parsing**: Handles variable stat names and field counts
|
||||
5. **Mobile-Friendly**: All UI elements responsive
|
||||
6. **Validation**: Prevents duplicate stat/field names
|
||||
|
||||
## Ready for Testing!
|
||||
|
||||
All phases complete. Zero compilation errors. Ready to test in SillyTavern! 🎉
|
||||
@@ -27,30 +27,37 @@ An immersive RPG extension for browsers that tracks character stats, scene infor
|
||||
|
||||
### Core Functionality
|
||||
|
||||
- **📊 User Stats Tracker**: Visual progress bars for health, sustenance, energy, hygiene, arousal, mood, and conditions
|
||||
- **🌍 Info Box Dashboard**: Beautiful widgets displaying date, weather, temperature, time, and location of the current scene
|
||||
- **💭 Character Thoughts**: Floating thought bubbles showing AI characters' internal monologue
|
||||
- **📊 User Stats Tracker**: Fully customizable stats with visual progress bars, custom status fields, skills section, and dynamic inventory management
|
||||
- **🌍 Info Box Dashboard**: Configurable widgets for date, weather, temperature, time, location, and recent events
|
||||
- **💭 Present Characters Panel**: Track multiple characters with custom fields, relationship badges, character-specific stats, and internal thoughts
|
||||
- **🎭 Floating Thought Bubbles**: Optional thought bubbles positioned next to character avatars in chat
|
||||
- **🎲 Classic RPG Stats**: STR, DEX, CON, INT, WIS, CHA attributes with dice roll support
|
||||
- **📦 Inventory System**: Track items your character is carrying
|
||||
- **📦 Advanced Inventory System**: Multi-location storage (On Person, Stored locations, Assets) with v2 format
|
||||
- **🎯 Character Stats**: Track health, energy, or any custom stats for each present character with color interpolation
|
||||
- **📜 Immersive HTML**: Enhance the immersion by including creative HTML/CSS/JS elements in your roleplay
|
||||
- **➡️ Plot Progression**: Progress the plot with randomized events or natural progression with a click of a button
|
||||
- **🎨 Multiple Themes**: Cyberpunk, Fantasy, Minimal, Dark, Light, and Custom themes
|
||||
- **✏️ Live Editing**: Edit stats, thoughts, weather, and more directly in the panels
|
||||
- **✏️ Live Editing**: Edit all tracker fields directly in the panels with auto-save
|
||||
- **💾 Per-Swipe Data Storage**: Each swipe preserves its own tracker data
|
||||
- **🎛️ Tracker Configuration**: Customize every aspect of trackers - add/remove stats, fields, widgets, and more
|
||||
|
||||
### Smart Features
|
||||
|
||||
- **🔄 Swipe Detection**: Automatically handles swipes and maintains correct tracker context
|
||||
- **📝 Context-Aware**: Weather, stats, and character states naturally influence the narrative
|
||||
- **🎭 Multiple Characters**: Tracks thoughts and relationships for all present characters
|
||||
- **🎭 Multiple Characters**: Tracks thoughts, relationships, and stats for all present characters
|
||||
- **📍 Thought Bubbles in Chat**: Optional floating thought bubbles positioned next to character avatars
|
||||
- **🌈 Customizable Colors**: Create your own theme with custom color schemes
|
||||
- **📱 Mobile Support**: Works on mobile and tablet devices
|
||||
- **📱 Mobile Support**: Responsive design with horizontal scrolling for stats
|
||||
- **🔧 Advanced Configuration**: Add custom stats, fields, and widgets through Tracker Settings
|
||||
- **🎨 Color Interpolation**: Stats smoothly transition from low to high colors based on values
|
||||
- **💬 Multi-line Format**: Clean, structured format for AI generation and parsing
|
||||
- **🧹 Auto-cleanup**: Automatically removes placeholder brackets from AI responses
|
||||
|
||||
### To-Do
|
||||
|
||||
1. Allow users to use a different model for the separate trackers generation
|
||||
2. Make all trackers and fields customizable
|
||||
2. ~~Make all trackers and fields customizable~~ ✅ Done!
|
||||
3. ~~Kill myself~~
|
||||
|
||||
## ⚙️ Settings
|
||||
@@ -140,11 +147,31 @@ Cons:
|
||||
|
||||
You can edit most fields by clicking on them:
|
||||
|
||||
- **Stats**: Click on percentage values, mood emoji, conditions, or inventory
|
||||
- **Info Box**: Click on date fields, weather, temperature, time, or location
|
||||
- **Character Thoughts**: Click on emoji, name, traits, relationship, or thoughts
|
||||
- **User Stats**: Click on stat percentages, mood emoji, status fields, skills, inventory items, or quests
|
||||
- **Info Box**: Click on date fields, weather, temperature, time, location, or recent events
|
||||
- **Present Characters**: Click on character emoji, name, custom fields, relationship badge, or stats
|
||||
- **Thought Bubbles**: Click on thought text to edit (bubble will refresh to maintain positioning)
|
||||
|
||||
Note: When editing character thoughts in the floating bubble, the bubble will refresh to maintain proper positioning.
|
||||
### Tracker Configuration
|
||||
|
||||
Access comprehensive customization through the Tracker Settings button:
|
||||
|
||||
**User Stats Configuration:**
|
||||
- Add/remove custom stats with unique names
|
||||
- Configure Status section (mood emoji + custom fields)
|
||||
- Configure Skills section with custom skill fields
|
||||
- Toggle RPG attributes display
|
||||
|
||||
**Info Box Configuration:**
|
||||
- Enable/disable individual widgets (Date, Weather, Temperature, Time, Location, Recent Events)
|
||||
- Choose temperature unit (Celsius/Fahrenheit)
|
||||
|
||||
**Present Characters Configuration:**
|
||||
- Add custom character fields (appearance, action, demeanor, etc.)
|
||||
- Configure relationship status options
|
||||
- Enable character-specific stats tracking
|
||||
- Customize thought bubble label and description
|
||||
- All fields are dynamically generated in prompts
|
||||
|
||||
### Swipe Support
|
||||
|
||||
|
||||
@@ -0,0 +1,142 @@
|
||||
# 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
|
||||
@@ -86,6 +86,9 @@ import {
|
||||
addDiceQuickReply,
|
||||
getSettingsModal
|
||||
} from './src/systems/ui/modals.js';
|
||||
import {
|
||||
initTrackerEditor
|
||||
} from './src/systems/ui/trackerEditor.js';
|
||||
import {
|
||||
togglePlotButtons,
|
||||
updateCollapseToggleIcon,
|
||||
@@ -435,6 +438,7 @@ async function initUI() {
|
||||
setupDiceRoller();
|
||||
setupClassicStatsButtons();
|
||||
setupSettingsPopup();
|
||||
initTrackerEditor();
|
||||
addDiceQuickReply();
|
||||
setupPlotButtons(sendPlotProgression);
|
||||
setupMobileKeyboardHandling();
|
||||
|
||||
@@ -95,6 +95,13 @@ export function loadSettings() {
|
||||
saveSettings(); // Persist migrated inventory
|
||||
}
|
||||
}
|
||||
|
||||
// Migrate to trackerConfig if it doesn't exist
|
||||
if (!extensionSettings.trackerConfig) {
|
||||
console.log('[RPG Companion] Migrating to trackerConfig format');
|
||||
migrateToTrackerConfig();
|
||||
saveSettings(); // Persist migration
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[RPG Companion] Error loading settings:', error);
|
||||
console.error('[RPG Companion] Error details:', error.message, error.stack);
|
||||
@@ -345,3 +352,137 @@ function validateInventoryStructure(inventory, source) {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Migrates old settings format to new trackerConfig format
|
||||
* Converts statNames to customStats array and sets up default config
|
||||
*/
|
||||
function migrateToTrackerConfig() {
|
||||
// Initialize trackerConfig if it doesn't exist
|
||||
if (!extensionSettings.trackerConfig) {
|
||||
extensionSettings.trackerConfig = {
|
||||
userStats: {
|
||||
customStats: [],
|
||||
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 Physical State (up to three traits)' },
|
||||
{ id: 'demeanor', label: 'Demeanor Cue', enabled: true, placeholder: 'Observable Demeanor Cue (one trait)' },
|
||||
{ id: 'relationship', label: 'Relationship', enabled: true, type: 'relationship', placeholder: 'Enemy/Neutral/Friend/Lover' },
|
||||
{ id: 'internalMonologue', label: 'Internal Monologue', enabled: true, placeholder: 'Internal Monologue (in first person POV, up to three sentences long)' }
|
||||
],
|
||||
characterStats: {
|
||||
enabled: false,
|
||||
stats: []
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Migrate old statNames to customStats if statNames exists
|
||||
if (extensionSettings.statNames && extensionSettings.trackerConfig.userStats.customStats.length === 0) {
|
||||
const statOrder = ['health', 'satiety', 'energy', 'hygiene', 'arousal'];
|
||||
extensionSettings.trackerConfig.userStats.customStats = statOrder.map(id => ({
|
||||
id: id,
|
||||
name: extensionSettings.statNames[id] || id.charAt(0).toUpperCase() + id.slice(1),
|
||||
enabled: true
|
||||
}));
|
||||
console.log('[RPG Companion] Migrated statNames to customStats array');
|
||||
}
|
||||
|
||||
// Ensure all stats have corresponding values in userStats
|
||||
if (extensionSettings.userStats) {
|
||||
for (const stat of extensionSettings.trackerConfig.userStats.customStats) {
|
||||
if (extensionSettings.userStats[stat.id] === undefined) {
|
||||
extensionSettings.userStats[stat.id] = stat.id === 'arousal' ? 0 : 100;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Migrate old presentCharacters structure to new format
|
||||
if (extensionSettings.trackerConfig.presentCharacters) {
|
||||
const pc = extensionSettings.trackerConfig.presentCharacters;
|
||||
|
||||
// Check if using old flat customFields structure (has 'label' or 'placeholder' keys)
|
||||
if (pc.customFields && pc.customFields.length > 0) {
|
||||
const hasOldFormat = pc.customFields.some(f => f.label || f.placeholder || f.type === 'relationship');
|
||||
|
||||
if (hasOldFormat) {
|
||||
console.log('[RPG Companion] Migrating Present Characters to new structure');
|
||||
|
||||
// Extract relationship fields from old customFields
|
||||
const relationshipFields = ['Lover', 'Friend', 'Ally', 'Enemy', 'Neutral'];
|
||||
|
||||
// Extract non-relationship fields and convert to new format
|
||||
const newCustomFields = pc.customFields
|
||||
.filter(f => f.type !== 'relationship' && f.id !== 'internalMonologue')
|
||||
.map(f => ({
|
||||
id: f.id,
|
||||
name: f.label || f.name || 'Field',
|
||||
enabled: f.enabled !== false,
|
||||
description: f.placeholder || f.description || ''
|
||||
}));
|
||||
|
||||
// Extract thoughts config from old Internal Monologue field
|
||||
const thoughtsField = pc.customFields.find(f => f.id === 'internalMonologue');
|
||||
const thoughts = {
|
||||
enabled: thoughtsField ? (thoughtsField.enabled !== false) : true,
|
||||
name: 'Thoughts',
|
||||
description: thoughtsField?.placeholder || 'Internal monologue (in first person POV, up to three sentences long)'
|
||||
};
|
||||
|
||||
// Update to new structure
|
||||
pc.relationshipFields = relationshipFields;
|
||||
pc.customFields = newCustomFields;
|
||||
pc.thoughts = thoughts;
|
||||
|
||||
console.log('[RPG Companion] Present Characters migration complete');
|
||||
saveSettings(); // Persist the migration
|
||||
}
|
||||
}
|
||||
|
||||
// Ensure new structure exists even if migration wasn't needed
|
||||
if (!pc.relationshipFields) {
|
||||
pc.relationshipFields = ['Lover', 'Friend', 'Ally', 'Enemy', 'Neutral'];
|
||||
}
|
||||
if (!pc.relationshipEmojis) {
|
||||
// Create default emoji mapping from relationshipFields
|
||||
pc.relationshipEmojis = {
|
||||
'Lover': '❤️',
|
||||
'Friend': '⭐',
|
||||
'Ally': '🤝',
|
||||
'Enemy': '⚔️',
|
||||
'Neutral': '⚖️'
|
||||
};
|
||||
}
|
||||
if (!pc.thoughts) {
|
||||
pc.thoughts = {
|
||||
enabled: true,
|
||||
name: 'Thoughts',
|
||||
description: 'Internal monologue (in first person POV, up to three sentences long)'
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -60,6 +60,76 @@ export let extensionSettings = {
|
||||
hygiene: 'Hygiene',
|
||||
arousal: 'Arousal'
|
||||
},
|
||||
// Tracker customization configuration
|
||||
trackerConfig: {
|
||||
userStats: {
|
||||
// Array of custom stats (allows add/remove/rename)
|
||||
customStats: [
|
||||
{ id: 'health', name: 'Health', enabled: true },
|
||||
{ id: 'satiety', name: 'Satiety', enabled: true },
|
||||
{ id: 'energy', name: 'Energy', enabled: true },
|
||||
{ id: 'hygiene', name: 'Hygiene', enabled: true },
|
||||
{ id: 'arousal', name: 'Arousal', enabled: true }
|
||||
],
|
||||
// RPG Attributes toggle
|
||||
showRPGAttributes: true,
|
||||
// Status section config
|
||||
statusSection: {
|
||||
enabled: true,
|
||||
showMoodEmoji: true,
|
||||
customFields: ['Conditions'] // User can edit what to track
|
||||
},
|
||||
// Optional skills field
|
||||
skillsSection: {
|
||||
enabled: false,
|
||||
label: 'Skills' // User-editable
|
||||
}
|
||||
},
|
||||
infoBox: {
|
||||
widgets: {
|
||||
date: { enabled: true, format: 'Weekday, Month, Year' }, // Format options in UI
|
||||
weather: { enabled: true },
|
||||
temperature: { enabled: true, unit: 'C' }, // 'C' or 'F'
|
||||
time: { enabled: true },
|
||||
location: { enabled: true },
|
||||
recentEvents: { enabled: true }
|
||||
}
|
||||
},
|
||||
presentCharacters: {
|
||||
// Fixed fields (always shown)
|
||||
showEmoji: true,
|
||||
showName: true,
|
||||
// Relationship fields (shown after name, separated by /)
|
||||
relationshipFields: ['Lover', 'Friend', 'Ally', 'Enemy', 'Neutral'],
|
||||
// Relationship to emoji mapping (shown on character portraits)
|
||||
relationshipEmojis: {
|
||||
'Lover': '❤️',
|
||||
'Friend': '⭐',
|
||||
'Ally': '🤝',
|
||||
'Enemy': '⚔️',
|
||||
'Neutral': '⚖️'
|
||||
},
|
||||
// Custom fields (appearance, demeanor, etc. - shown after relationship, separated by |)
|
||||
customFields: [
|
||||
{ id: 'appearance', name: 'Appearance', enabled: true, description: 'Visible physical appearance (clothing, hair, notable features)' },
|
||||
{ id: 'demeanor', name: 'Demeanor', enabled: true, description: 'Observable demeanor or emotional state' }
|
||||
],
|
||||
// Thoughts configuration (separate line)
|
||||
thoughts: {
|
||||
enabled: true,
|
||||
name: 'Thoughts',
|
||||
description: 'Internal monologue (in first person POV, up to three sentences long)'
|
||||
},
|
||||
// Character stats toggle (optional feature)
|
||||
characterStats: {
|
||||
enabled: false,
|
||||
customStats: [
|
||||
{ id: 'health', name: 'Health', enabled: true },
|
||||
{ id: 'arousal', name: 'Arousal', enabled: true }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
quests: {
|
||||
main: "None", // Current main quest title
|
||||
optional: [] // Array of optional quest titles
|
||||
|
||||
@@ -118,6 +118,9 @@ export function onGenerationStarted(type, data) {
|
||||
// Don't include HTML prompt in instructions - inject it separately to avoid duplication on swipes
|
||||
const instructions = generateTrackerInstructions(false, true);
|
||||
|
||||
// Clear separate mode context injection - we don't use contextual summary in together mode
|
||||
setExtensionPrompt('rpg-companion-context', '', extension_prompt_types.IN_CHAT, 1, false);
|
||||
|
||||
// console.log('[RPG Companion] Example:', example ? 'exists' : 'empty');
|
||||
// console.log('[RPG Companion] Chat length:', chat ? chat.length : 'chat is null');
|
||||
|
||||
|
||||
@@ -47,10 +47,11 @@ function separateEmojiFromText(str) {
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper to strip enclosing brackets from text
|
||||
* Removes [], {}, and () from the entire text if it's wrapped
|
||||
* @param {string} text - Text that may be wrapped in brackets
|
||||
* @returns {string} Text with brackets removed
|
||||
* Helper to strip enclosing brackets from text and remove placeholder brackets
|
||||
* Removes [], {}, and () from the entire text if it's wrapped, plus removes
|
||||
* placeholder content like [Location], [Mood Emoji], etc.
|
||||
* @param {string} text - Text that may contain brackets
|
||||
* @returns {string} Text with brackets and placeholders removed
|
||||
*/
|
||||
function stripBrackets(text) {
|
||||
if (!text) return text;
|
||||
@@ -68,7 +69,58 @@ function stripBrackets(text) {
|
||||
text = text.substring(1, text.length - 1).trim();
|
||||
}
|
||||
|
||||
return text;
|
||||
// Remove placeholder text patterns like [Location], [Mood Emoji], [Name], etc.
|
||||
// Pattern matches: [anything with letters/spaces inside]
|
||||
// This preserves actual content while removing template placeholders
|
||||
const placeholderPattern = /\[([A-Za-z\s\/]+)\]/g;
|
||||
|
||||
// Check if a bracketed text looks like a placeholder vs real content
|
||||
const isPlaceholder = (match, content) => {
|
||||
// Common placeholder words to detect
|
||||
const placeholderKeywords = [
|
||||
'location', 'mood', 'emoji', 'name', 'description', 'placeholder',
|
||||
'time', 'date', 'weather', 'temperature', 'action', 'appearance',
|
||||
'skill', 'quest', 'item', 'character', 'field', 'value', 'details',
|
||||
'relationship', 'thoughts', 'stat', 'status', 'lover', 'friend',
|
||||
'enemy', 'neutral', 'weekday', 'month', 'year', 'forecast'
|
||||
];
|
||||
|
||||
const lowerContent = content.toLowerCase().trim();
|
||||
|
||||
// If it contains common placeholder keywords, it's likely a placeholder
|
||||
if (placeholderKeywords.some(keyword => lowerContent.includes(keyword))) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// If it's a short generic phrase (1-3 words) with only letters/spaces, might be placeholder
|
||||
const wordCount = content.trim().split(/\s+/).length;
|
||||
if (wordCount <= 3 && /^[A-Za-z\s\/]+$/.test(content)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
// Replace placeholders with empty string, keep real content
|
||||
text = text.replace(placeholderPattern, (match, content) => {
|
||||
if (isPlaceholder(match, content)) {
|
||||
return ''; // Remove placeholder
|
||||
}
|
||||
return match; // Keep real bracketed content
|
||||
});
|
||||
|
||||
// Clean up any resulting empty labels (e.g., "Status: " with nothing after)
|
||||
text = text.replace(/^([A-Za-z\s]+):\s*$/gm, ''); // Remove lines that are just "Label: " with nothing
|
||||
text = text.replace(/^([A-Za-z\s]+):\s*,/gm, '$1:'); // Fix "Label: ," patterns
|
||||
text = text.replace(/:\s*\|/g, ':'); // Fix ": |" patterns
|
||||
text = text.replace(/\|\s*\|/g, '|'); // Fix "| |" patterns (double pipes from removed content)
|
||||
text = text.replace(/\|\s*$/gm, ''); // Remove trailing pipes at end of lines
|
||||
|
||||
// Clean up multiple spaces and empty lines
|
||||
text = text.replace(/\s{2,}/g, ' '); // Multiple spaces to single space
|
||||
text = text.replace(/^\s*\n/gm, ''); // Remove empty lines
|
||||
|
||||
return text.trim();
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -173,8 +225,8 @@ export function parseResponse(responseText) {
|
||||
content.match(/Present Characters\s*\n\s*---/i) ||
|
||||
content.match(/Characters\s*\n\s*---/i) ||
|
||||
content.match(/Character Thoughts\s*\n\s*---/i) ||
|
||||
// Fallback: look for table-like structure with emoji and pipes
|
||||
(content.includes(" | ") && (content.includes("Thoughts") || content.includes("💭")));
|
||||
// Fallback: look for new multi-line format patterns
|
||||
(content.match(/^-\s+\w+/m) && content.match(/Details:/i));
|
||||
|
||||
if (isStats && !result.userStats) {
|
||||
result.userStats = stripBrackets(content);
|
||||
@@ -193,7 +245,7 @@ export function parseResponse(responseText) {
|
||||
debugLog('[RPG Parser] - Has "Info Box\\n---"?', !!content.match(/Info Box\s*\n\s*---/i));
|
||||
debugLog('[RPG Parser] - Has info keywords?', !!(content.match(/Date:/i) && content.match(/Location:/i)));
|
||||
debugLog('[RPG Parser] - Has "Present Characters\\n---"?', !!content.match(/Present Characters\s*\n\s*---/i));
|
||||
debugLog('[RPG Parser] - Has " | " + thoughts?', !!(content.includes(" | ") && (content.includes("Thoughts") || content.includes("💭"))));
|
||||
debugLog('[RPG Parser] - Has new format ("- Name" + "Details:")?', !!(content.match(/^-\s+\w+/m) && content.match(/Details:/i)));
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -219,88 +271,92 @@ export function parseUserStats(statsText) {
|
||||
debugLog('[RPG Parser] Stats text preview:', statsText.substring(0, 200));
|
||||
|
||||
try {
|
||||
// Extract percentages and mood/conditions
|
||||
const healthMatch = statsText.match(/Health:\s*(\d+)%/);
|
||||
const satietyMatch = statsText.match(/Satiety:\s*(\d+)%/);
|
||||
const energyMatch = statsText.match(/Energy:\s*(\d+)%/);
|
||||
const hygieneMatch = statsText.match(/Hygiene:\s*(\d+)%/);
|
||||
const arousalMatch = statsText.match(/Arousal:\s*(\d+)%/);
|
||||
// Get custom stat configuration
|
||||
const trackerConfig = extensionSettings.trackerConfig;
|
||||
const customStats = trackerConfig?.userStats?.customStats || [];
|
||||
const enabledStats = customStats.filter(s => s && s.enabled && s.name && s.id);
|
||||
|
||||
debugLog('[RPG Parser] Stat matches:', {
|
||||
health: healthMatch ? healthMatch[1] : 'NOT FOUND',
|
||||
satiety: satietyMatch ? satietyMatch[1] : 'NOT FOUND',
|
||||
energy: energyMatch ? energyMatch[1] : 'NOT FOUND',
|
||||
hygiene: hygieneMatch ? hygieneMatch[1] : 'NOT FOUND',
|
||||
arousal: arousalMatch ? arousalMatch[1] : 'NOT FOUND'
|
||||
});
|
||||
debugLog('[RPG Parser] Enabled custom stats:', enabledStats.map(s => s.name));
|
||||
|
||||
// Match mood/status with multiple format variations
|
||||
// Format 1: Status: [Emoji, Conditions]
|
||||
// Format 2: Status: [Emoji], [Conditions]
|
||||
// Format 3: [Emoji]: [Conditions] (legacy)
|
||||
// Format 4: Mood: [Emoji] - [Conditions]
|
||||
// Format 5: Status: [Emoji Conditions] (no separator - FIXED)
|
||||
// Dynamically parse custom stats
|
||||
for (const stat of enabledStats) {
|
||||
const statRegex = new RegExp(`${stat.name}:\\s*(\\d+)%`, 'i');
|
||||
const match = statsText.match(statRegex);
|
||||
if (match) {
|
||||
// Store using the stat ID (lowercase normalized name)
|
||||
const statId = stat.id;
|
||||
extensionSettings.userStats[statId] = parseInt(match[1]);
|
||||
debugLog(`[RPG Parser] Parsed ${stat.name}:`, match[1]);
|
||||
} else {
|
||||
debugLog(`[RPG Parser] ${stat.name} NOT FOUND`);
|
||||
}
|
||||
}
|
||||
|
||||
// Parse RPG attributes if enabled
|
||||
if (trackerConfig?.userStats?.showRPGAttributes) {
|
||||
const strMatch = statsText.match(/STR:\s*(\d+)/i);
|
||||
const dexMatch = statsText.match(/DEX:\s*(\d+)/i);
|
||||
const conMatch = statsText.match(/CON:\s*(\d+)/i);
|
||||
const intMatch = statsText.match(/INT:\s*(\d+)/i);
|
||||
const wisMatch = statsText.match(/WIS:\s*(\d+)/i);
|
||||
const chaMatch = statsText.match(/CHA:\s*(\d+)/i);
|
||||
const lvlMatch = statsText.match(/LVL:\s*(\d+)/i);
|
||||
|
||||
if (strMatch) extensionSettings.classicStats.str = parseInt(strMatch[1]);
|
||||
if (dexMatch) extensionSettings.classicStats.dex = parseInt(dexMatch[1]);
|
||||
if (conMatch) extensionSettings.classicStats.con = parseInt(conMatch[1]);
|
||||
if (intMatch) extensionSettings.classicStats.int = parseInt(intMatch[1]);
|
||||
if (wisMatch) extensionSettings.classicStats.wis = parseInt(wisMatch[1]);
|
||||
if (chaMatch) extensionSettings.classicStats.cha = parseInt(chaMatch[1]);
|
||||
if (lvlMatch) extensionSettings.level = parseInt(lvlMatch[1]);
|
||||
|
||||
debugLog('[RPG Parser] RPG Attributes parsed');
|
||||
}
|
||||
|
||||
// Match status section if enabled
|
||||
const statusConfig = trackerConfig?.userStats?.statusSection;
|
||||
if (statusConfig?.enabled) {
|
||||
let moodMatch = null;
|
||||
|
||||
// Try new format: Status: emoji, conditions OR Status: emojiConditions
|
||||
// Try Status: format
|
||||
const statusMatch = statsText.match(/Status:\s*(.+)/i);
|
||||
if (statusMatch) {
|
||||
const statusContent = statusMatch[1].trim();
|
||||
|
||||
// Extract mood emoji if enabled
|
||||
if (statusConfig.showMoodEmoji) {
|
||||
const { emoji, text } = separateEmojiFromText(statusContent);
|
||||
if (emoji && text) {
|
||||
moodMatch = [null, emoji, text];
|
||||
} else if (statusContent.includes(',')) {
|
||||
// Fallback to comma split if emoji detection failed
|
||||
const parts = statusContent.split(',').map(p => p.trim());
|
||||
moodMatch = [null, parts[0], parts.slice(1).join(', ')];
|
||||
if (emoji) {
|
||||
extensionSettings.userStats.mood = emoji;
|
||||
// Remaining text contains custom status fields
|
||||
if (text) {
|
||||
extensionSettings.userStats.conditions = text;
|
||||
}
|
||||
moodMatch = true;
|
||||
}
|
||||
} else {
|
||||
// No mood emoji, whole status is conditions
|
||||
extensionSettings.userStats.conditions = statusContent;
|
||||
moodMatch = true;
|
||||
}
|
||||
}
|
||||
|
||||
// Try alternative: Mood: emoji, conditions OR Mood: emojiConditions
|
||||
if (!moodMatch) {
|
||||
const moodAltMatch = statsText.match(/Mood:\s*(.+)/i);
|
||||
if (moodAltMatch) {
|
||||
const moodContent = moodAltMatch[1].trim();
|
||||
const { emoji, text } = separateEmojiFromText(moodContent);
|
||||
if (emoji && text) {
|
||||
moodMatch = [null, emoji, text];
|
||||
} else if (moodContent.includes(',') || moodContent.includes('-')) {
|
||||
// Fallback to comma/dash split if emoji detection failed
|
||||
const parts = moodContent.split(/[,\-]/).map(p => p.trim());
|
||||
moodMatch = [null, parts[0], parts.slice(1).join(', ')];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Legacy format fallback: [Emoji]: [Conditions]
|
||||
if (!moodMatch) {
|
||||
const lines = statsText.split('\n');
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
const line = lines[i].trim();
|
||||
// Skip lines with percentages or known keywords
|
||||
if (line.includes('%') ||
|
||||
line.toLowerCase().startsWith('inventory:') ||
|
||||
line.toLowerCase().startsWith('status:') ||
|
||||
line.toLowerCase().startsWith('health:') ||
|
||||
line.toLowerCase().startsWith('energy:') ||
|
||||
line.toLowerCase().startsWith('satiety:') ||
|
||||
line.toLowerCase().startsWith('hygiene:') ||
|
||||
line.toLowerCase().startsWith('arousal:')) continue;
|
||||
|
||||
// Match emoji/mood followed by colon and conditions
|
||||
const match = line.match(/^(.+?):\s*(.+)$/);
|
||||
if (match && match[1].length <= 10) { // Emoji/mood should be short
|
||||
moodMatch = match;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
debugLog('[RPG Parser] Mood/Status match:', {
|
||||
debugLog('[RPG Parser] Status match:', {
|
||||
found: !!moodMatch,
|
||||
emoji: moodMatch ? moodMatch[1] : 'NOT FOUND',
|
||||
conditions: moodMatch ? moodMatch[2] : 'NOT FOUND'
|
||||
mood: extensionSettings.userStats.mood,
|
||||
conditions: extensionSettings.userStats.conditions
|
||||
});
|
||||
}
|
||||
|
||||
// Parse skills section if enabled
|
||||
const skillsConfig = trackerConfig?.userStats?.skillsSection;
|
||||
if (skillsConfig?.enabled) {
|
||||
const skillsMatch = statsText.match(/Skills:\s*(.+)/i);
|
||||
if (skillsMatch) {
|
||||
extensionSettings.userStats.skills = skillsMatch[1].trim();
|
||||
debugLog('[RPG Parser] Skills extracted:', skillsMatch[1].trim());
|
||||
}
|
||||
}
|
||||
|
||||
// Extract inventory - use v2 parser if feature flag enabled, otherwise fallback to v1
|
||||
if (FEATURE_FLAGS.useNewInventory) {
|
||||
@@ -322,17 +378,6 @@ export function parseUserStats(statsText) {
|
||||
}
|
||||
}
|
||||
|
||||
// Update extension settings
|
||||
if (healthMatch) extensionSettings.userStats.health = parseInt(healthMatch[1]);
|
||||
if (satietyMatch) extensionSettings.userStats.satiety = parseInt(satietyMatch[1]);
|
||||
if (energyMatch) extensionSettings.userStats.energy = parseInt(energyMatch[1]);
|
||||
if (hygieneMatch) extensionSettings.userStats.hygiene = parseInt(hygieneMatch[1]);
|
||||
if (arousalMatch) extensionSettings.userStats.arousal = parseInt(arousalMatch[1]);
|
||||
if (moodMatch) {
|
||||
extensionSettings.userStats.mood = moodMatch[1].trim(); // Emoji
|
||||
extensionSettings.userStats.conditions = moodMatch[2].trim(); // Conditions
|
||||
}
|
||||
|
||||
// Extract quests
|
||||
const mainQuestMatch = statsText.match(/Main Quests?:\s*(.+)/i);
|
||||
if (mainQuestMatch) {
|
||||
|
||||
@@ -92,6 +92,7 @@ export function generateTrackerExample() {
|
||||
export function generateTrackerInstructions(includeHtmlPrompt = true, includeContinuation = true) {
|
||||
const userName = getContext().name1;
|
||||
const classicStats = extensionSettings.classicStats;
|
||||
const trackerConfig = extensionSettings.trackerConfig;
|
||||
let instructions = '';
|
||||
|
||||
// Check if any trackers are enabled
|
||||
@@ -104,24 +105,36 @@ export function generateTrackerInstructions(includeHtmlPrompt = true, includeCon
|
||||
|
||||
// Add format specifications for each enabled tracker
|
||||
if (extensionSettings.showUserStats) {
|
||||
// Get custom stat names with fallback defaults
|
||||
const statNames = extensionSettings.statNames || {
|
||||
health: 'Health',
|
||||
satiety: 'Satiety',
|
||||
energy: 'Energy',
|
||||
hygiene: 'Hygiene',
|
||||
arousal: 'Arousal'
|
||||
};
|
||||
const userStatsConfig = trackerConfig?.userStats;
|
||||
const enabledStats = userStatsConfig?.customStats?.filter(s => s && s.enabled && s.name) || [];
|
||||
|
||||
instructions += '```\n';
|
||||
instructions += `${userName}'s Stats\n`;
|
||||
instructions += '---\n';
|
||||
instructions += `- ${statNames.health}: X%\n`;
|
||||
instructions += `- ${statNames.satiety}: X%\n`;
|
||||
instructions += `- ${statNames.energy}: X%\n`;
|
||||
instructions += `- ${statNames.hygiene}: X%\n`;
|
||||
instructions += `- ${statNames.arousal}: X%\n`;
|
||||
instructions += 'Status: [Mood Emoji, Conditions (up to three traits)]\n';
|
||||
|
||||
// Add custom stats dynamically
|
||||
for (const stat of enabledStats) {
|
||||
instructions += `- ${stat.name}: X%\n`;
|
||||
}
|
||||
|
||||
// Add status section if enabled
|
||||
if (userStatsConfig?.statusSection?.enabled) {
|
||||
const statusFields = userStatsConfig.statusSection.customFields || [];
|
||||
const statusFieldsText = statusFields.map(f => `${f}`).join(', ');
|
||||
|
||||
if (userStatsConfig.statusSection.showMoodEmoji) {
|
||||
instructions += `Status: [Mood Emoji${statusFieldsText ? ', ' + statusFieldsText : ''}]\n`;
|
||||
} else if (statusFieldsText) {
|
||||
instructions += `Status: [${statusFieldsText}]\n`;
|
||||
}
|
||||
}
|
||||
|
||||
// Add skills section if enabled
|
||||
if (userStatsConfig?.skillsSection?.enabled) {
|
||||
const skillFields = userStatsConfig.skillsSection.customFields || [];
|
||||
const skillFieldsText = skillFields.map(f => `[${f}]`).join(', ');
|
||||
instructions += `Skills: [${skillFieldsText || 'Skill1, Skill2, etc.'}]\n`;
|
||||
}
|
||||
|
||||
// Add inventory format based on feature flag
|
||||
if (FEATURE_FLAGS.useNewInventory) {
|
||||
@@ -142,23 +155,90 @@ export function generateTrackerInstructions(includeHtmlPrompt = true, includeCon
|
||||
}
|
||||
|
||||
if (extensionSettings.showInfoBox) {
|
||||
const infoBoxConfig = trackerConfig?.infoBox;
|
||||
const widgets = infoBoxConfig?.widgets || {};
|
||||
|
||||
instructions += '```\n';
|
||||
instructions += 'Info Box\n';
|
||||
instructions += '---\n';
|
||||
|
||||
// Add only enabled widgets
|
||||
if (widgets.date?.enabled) {
|
||||
instructions += 'Date: [Weekday, Month, Year]\n';
|
||||
}
|
||||
if (widgets.weather?.enabled) {
|
||||
instructions += 'Weather: [Weather Emoji, Forecast]\n';
|
||||
instructions += 'Temperature: [Temperature in °C]\n';
|
||||
}
|
||||
if (widgets.temperature?.enabled) {
|
||||
const unit = widgets.temperature.unit === 'fahrenheit' ? '°F' : '°C';
|
||||
instructions += `Temperature: [Temperature in ${unit}]\n`;
|
||||
}
|
||||
if (widgets.time?.enabled) {
|
||||
instructions += 'Time: [Time Start → Time End]\n';
|
||||
}
|
||||
if (widgets.location?.enabled) {
|
||||
instructions += 'Location: [Location]\n';
|
||||
}
|
||||
if (widgets.recentEvents?.enabled) {
|
||||
instructions += 'Recent Events: [Up to three past events leading to the ongoing scene (short descriptors with no details, for example, "last-night date with Mary")]\n';
|
||||
}
|
||||
|
||||
instructions += '```\n\n';
|
||||
}
|
||||
|
||||
if (extensionSettings.showCharacterThoughts) {
|
||||
const presentCharsConfig = trackerConfig?.presentCharacters;
|
||||
const enabledFields = presentCharsConfig?.customFields?.filter(f => f && f.enabled && f.name) || [];
|
||||
const relationshipFields = presentCharsConfig?.relationshipFields || [];
|
||||
const thoughtsConfig = presentCharsConfig?.thoughts;
|
||||
const characterStats = presentCharsConfig?.characterStats;
|
||||
const enabledCharStats = characterStats?.enabled && characterStats?.customStats?.filter(s => s && s.enabled && s.name) || [];
|
||||
|
||||
instructions += '```\n';
|
||||
instructions += 'Present Characters\n';
|
||||
instructions += '---\n';
|
||||
instructions += `[Present Character's Emoji (do not include ${userName}; state "Unavailable" if no major characters are present in the scene)]: [Name, Visible Physical State (up to three traits), Observable Demeanor Cue (one trait)] | [Enemy/Neutral/Friend/Lover] | [Internal Monologue (in first person POV, up to three sentences long)]\n`;
|
||||
|
||||
// Build relationship placeholders (e.g., "Lover/Friend")
|
||||
const relationshipPlaceholders = relationshipFields
|
||||
.filter(r => r && r.trim())
|
||||
.map(r => `${r}`)
|
||||
.join('/');
|
||||
|
||||
// Build custom field placeholders (e.g., "[Appearance] | [Current Action]")
|
||||
const fieldPlaceholders = enabledFields
|
||||
.map(f => `[${f.name}]`)
|
||||
.join(' | ');
|
||||
|
||||
// Character block format
|
||||
instructions += `- [Name (do not include ${userName}; state "Unavailable" if no major characters are present in the scene)]\n`;
|
||||
|
||||
// Details line with emoji and custom fields
|
||||
if (fieldPlaceholders) {
|
||||
instructions += `Details: [Present Character's Emoji] | ${fieldPlaceholders}\n`;
|
||||
} else {
|
||||
instructions += `Details: [Present Character's Emoji]\n`;
|
||||
}
|
||||
|
||||
// Relationship line (only if relationships are enabled)
|
||||
if (relationshipPlaceholders) {
|
||||
instructions += `Relationship: [${relationshipPlaceholders}]\n`;
|
||||
}
|
||||
|
||||
// Stats line (if enabled)
|
||||
if (enabledCharStats.length > 0) {
|
||||
const statPlaceholders = enabledCharStats.map(s => `${s.name}: X%`).join(' | ');
|
||||
instructions += `Stats: ${statPlaceholders}\n`;
|
||||
}
|
||||
|
||||
// Thoughts line (if enabled)
|
||||
if (thoughtsConfig?.enabled) {
|
||||
const thoughtsName = thoughtsConfig.name || 'Thoughts';
|
||||
const thoughtsDescription = thoughtsConfig.description || 'Internal monologue (in first person POV, up to three sentences long)';
|
||||
instructions += `${thoughtsName}: [${thoughtsDescription}]\n`;
|
||||
}
|
||||
|
||||
instructions += `- … (Repeat the format above for every other present major character)\n`;
|
||||
|
||||
instructions += '```\n\n';
|
||||
}
|
||||
|
||||
@@ -197,7 +277,7 @@ export function generateTrackerInstructions(includeHtmlPrompt = true, includeCon
|
||||
|
||||
/**
|
||||
* Generates a formatted contextual summary for SEPARATE mode injection.
|
||||
* This creates a hybrid summary with clean formatting for main roleplay generation.
|
||||
* Includes the full tracker data in original format (without code fences and separators).
|
||||
* Uses COMMITTED data (not displayed data) for generation context.
|
||||
*
|
||||
* @returns {string} Formatted contextual summary
|
||||
@@ -207,122 +287,50 @@ export function generateContextualSummary() {
|
||||
const userName = getContext().name1;
|
||||
let summary = '';
|
||||
|
||||
// console.log('[RPG Companion] generateContextualSummary called');
|
||||
// console.log('[RPG Companion] committedTrackerData.userStats:', committedTrackerData.userStats);
|
||||
// console.log('[RPG Companion] extensionSettings.userStats:', JSON.stringify(extensionSettings.userStats));
|
||||
// Helper function to clean tracker data (remove code fences and separator lines)
|
||||
const cleanTrackerData = (data) => {
|
||||
if (!data) return '';
|
||||
return data
|
||||
.split('\n')
|
||||
.filter(line => {
|
||||
const trimmed = line.trim();
|
||||
return trimmed &&
|
||||
!trimmed.startsWith('```') &&
|
||||
trimmed !== '---';
|
||||
})
|
||||
.join('\n');
|
||||
};
|
||||
|
||||
// Parse the data into readable format
|
||||
// Add User Stats tracker data if enabled
|
||||
if (extensionSettings.showUserStats && committedTrackerData.userStats) {
|
||||
const stats = extensionSettings.userStats;
|
||||
// console.log('[RPG Companion] Building stats summary with:', stats);
|
||||
summary += `${userName}'s Stats:\n`;
|
||||
summary += `Condition: Health ${stats.health}%, Satiety ${stats.satiety}%, Energy ${stats.energy}%, Hygiene ${stats.hygiene}%, Arousal ${stats.arousal}% | ${stats.mood} ${stats.conditions}\n`;
|
||||
|
||||
// Add inventory summary using v2-aware builder
|
||||
if (stats.inventory) {
|
||||
const inventorySummary = buildInventorySummary(stats.inventory);
|
||||
if (inventorySummary && inventorySummary !== 'None') {
|
||||
summary += `${inventorySummary}\n`;
|
||||
const cleanedStats = cleanTrackerData(committedTrackerData.userStats);
|
||||
if (cleanedStats) {
|
||||
summary += cleanedStats + '\n\n';
|
||||
}
|
||||
}
|
||||
|
||||
// Add quests summary
|
||||
if (extensionSettings.quests) {
|
||||
if (extensionSettings.quests.main && extensionSettings.quests.main !== 'None') {
|
||||
summary += `Main Quests: ${extensionSettings.quests.main}\n`;
|
||||
}
|
||||
if (extensionSettings.quests.optional && extensionSettings.quests.optional.length > 0) {
|
||||
const optionalQuests = extensionSettings.quests.optional.filter(q => q && q !== 'None').join(', ');
|
||||
if (optionalQuests) {
|
||||
summary += `Optional Quests: ${optionalQuests}\n`;
|
||||
}
|
||||
// Add Info Box tracker data if enabled
|
||||
if (extensionSettings.showInfoBox && committedTrackerData.infoBox) {
|
||||
const cleanedInfoBox = cleanTrackerData(committedTrackerData.infoBox);
|
||||
if (cleanedInfoBox) {
|
||||
summary += cleanedInfoBox + '\n\n';
|
||||
}
|
||||
}
|
||||
|
||||
// Include classic stats (attributes) and dice roll only if there was a dice roll
|
||||
// Add Present Characters tracker data if enabled
|
||||
if (extensionSettings.showCharacterThoughts && committedTrackerData.characterThoughts) {
|
||||
const cleanedThoughts = cleanTrackerData(committedTrackerData.characterThoughts);
|
||||
if (cleanedThoughts) {
|
||||
summary += cleanedThoughts + '\n\n';
|
||||
}
|
||||
}
|
||||
|
||||
// Include attributes and dice roll only if there was a dice roll
|
||||
if (extensionSettings.lastDiceRoll) {
|
||||
const classicStats = extensionSettings.classicStats;
|
||||
const roll = extensionSettings.lastDiceRoll;
|
||||
summary += `Attributes: STR ${classicStats.str}, DEX ${classicStats.dex}, CON ${classicStats.con}, INT ${classicStats.int}, WIS ${classicStats.wis}, CHA ${classicStats.cha}, LVL ${extensionSettings.level}\n`;
|
||||
summary += `${userName} rolled ${roll.total} on the last ${roll.formula} roll. Based on their attributes, decide whether they succeed or fail the action they attempt.\n`;
|
||||
}
|
||||
summary += `\n`;
|
||||
}
|
||||
|
||||
if (extensionSettings.showInfoBox && committedTrackerData.infoBox) {
|
||||
// Parse info box data - support both new and legacy formats
|
||||
const lines = committedTrackerData.infoBox.split('\n');
|
||||
let date = '', weather = '', temp = '', time = '', location = '', recentEvents = '';
|
||||
|
||||
// console.log('[RPG Companion] 🔍 Parsing Info Box lines:', lines);
|
||||
|
||||
for (const line of lines) {
|
||||
// console.log('[RPG Companion] 🔍 Processing line:', line);
|
||||
|
||||
// New format with text labels
|
||||
if (line.startsWith('Date:')) {
|
||||
date = line.replace('Date:', '').trim();
|
||||
} else if (line.startsWith('Weather:')) {
|
||||
weather = line.replace('Weather:', '').trim();
|
||||
} else if (line.startsWith('Temperature:')) {
|
||||
temp = line.replace('Temperature:', '').trim();
|
||||
} else if (line.startsWith('Time:')) {
|
||||
time = line.replace('Time:', '').trim();
|
||||
} else if (line.startsWith('Location:')) {
|
||||
location = line.replace('Location:', '').trim();
|
||||
} else if (line.startsWith('Recent Events:')) {
|
||||
recentEvents = line.replace('Recent Events:', '').trim();
|
||||
}
|
||||
// Legacy format with emojis (for backward compatibility)
|
||||
else if (line.includes('🗓️:')) {
|
||||
date = line.replace('🗓️:', '').trim();
|
||||
} else if (line.includes('🌡️:')) {
|
||||
temp = line.replace('🌡️:', '').trim();
|
||||
} else if (line.includes('🕒:')) {
|
||||
time = line.replace('🕒:', '').trim();
|
||||
} else if (line.includes('🗺️:')) {
|
||||
location = line.replace('🗺️:', '').trim();
|
||||
} else {
|
||||
// Check for weather emojis in legacy format
|
||||
const weatherEmojis = ['🌤️', '☀️', '⛅', '🌦️', '🌧️', '⛈️', '🌩️', '🌨️', '❄️', '🌫️'];
|
||||
const startsWithWeatherEmoji = weatherEmojis.some(emoji => line.startsWith(emoji + ':'));
|
||||
if (startsWithWeatherEmoji && !line.includes('🌡️') && !line.includes('🗺️')) {
|
||||
weather = line.substring(line.indexOf(':') + 1).trim();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// console.log('[RPG Companion] 🔍 Parsed values - date:', date, 'weather:', weather, 'temp:', temp, 'time:', time, 'location:', location);
|
||||
|
||||
if (date || weather || temp || time || location || recentEvents) {
|
||||
summary += `Information:\n`;
|
||||
summary += `Scene: `;
|
||||
if (date) summary += `${date}`;
|
||||
if (location) summary += ` | ${location}`;
|
||||
if (time) summary += ` | ${time}`;
|
||||
if (weather) summary += ` | ${weather}`;
|
||||
if (temp) summary += ` | ${temp}`;
|
||||
summary += `\n`;
|
||||
if (recentEvents) summary += `Recent Events: ${recentEvents}\n`;
|
||||
summary += `\n`;
|
||||
}
|
||||
}
|
||||
|
||||
if (extensionSettings.showCharacterThoughts && committedTrackerData.characterThoughts) {
|
||||
const lines = committedTrackerData.characterThoughts.split('\n').filter(l => l.trim() && !l.includes('---') && !l.includes('Present Characters'));
|
||||
|
||||
if (lines.length > 0 && !lines[0].toLowerCase().includes('unavailable')) {
|
||||
summary += `Present Characters And Their Thoughts:\n`;
|
||||
for (const line of lines) {
|
||||
const parts = line.split('|').map(p => p.trim());
|
||||
if (parts.length >= 3) {
|
||||
const nameAndState = parts[0]; // Emoji, name, physical state, demeanor
|
||||
const relationship = parts[1];
|
||||
const thoughts = parts[2];
|
||||
summary += `${nameAndState} (${relationship}) | ${thoughts}\n`;
|
||||
}
|
||||
}
|
||||
}
|
||||
summary += `${userName}'s attributes: STR ${classicStats.str}, DEX ${classicStats.dex}, CON ${classicStats.con}, INT ${classicStats.int}, WIS ${classicStats.wis}, CHA ${classicStats.cha}, LVL ${extensionSettings.level}\n`;
|
||||
summary += `${userName} rolled ${roll.total} on the last ${roll.formula} roll. Based on their attributes, decide whether they succeeded or failed the action they attempted.\n\n`;
|
||||
}
|
||||
|
||||
return summary.trim();
|
||||
@@ -354,14 +362,10 @@ export function generateRPGPromptText() {
|
||||
if (extensionSettings.quests) {
|
||||
if (extensionSettings.quests.main && extensionSettings.quests.main !== 'None') {
|
||||
promptText += `Main Quests: ${extensionSettings.quests.main}\n`;
|
||||
} else {
|
||||
promptText += `Main Quests: None\n`;
|
||||
}
|
||||
if (extensionSettings.quests.optional && extensionSettings.quests.optional.length > 0) {
|
||||
const optionalQuests = extensionSettings.quests.optional.filter(q => q && q !== 'None').join(', ');
|
||||
promptText += `Optional Quests: ${optionalQuests || 'None'}\n`;
|
||||
} else {
|
||||
promptText += `Optional Quests: None\n`;
|
||||
}
|
||||
promptText += `\n`;
|
||||
}
|
||||
|
||||
@@ -270,42 +270,91 @@ export function renderInfoBox() {
|
||||
// location: data.location
|
||||
// });
|
||||
|
||||
// Get tracker configuration
|
||||
const config = extensionSettings.trackerConfig?.infoBox;
|
||||
|
||||
// Build visual dashboard HTML
|
||||
// Wrap all content in a scrollable container
|
||||
let html = '<div class="rpg-info-content">';
|
||||
|
||||
// Row 1: Date, Weather, Temperature, Time widgets
|
||||
html += '<div class="rpg-dashboard rpg-dashboard-row-1">';
|
||||
const row1Widgets = [];
|
||||
|
||||
// Calendar widget - always show (editable even if empty)
|
||||
// Display abbreviated version but allow editing full value
|
||||
const monthShort = data.month ? data.month.substring(0, 3).toUpperCase() : 'MON';
|
||||
const weekdayShort = data.weekday ? data.weekday.substring(0, 3).toUpperCase() : 'DAY';
|
||||
const yearDisplay = data.year || 'YEAR';
|
||||
html += `
|
||||
// Calendar widget - show if enabled
|
||||
if (config?.widgets?.date?.enabled) {
|
||||
// Apply date format conversion
|
||||
let monthDisplay = data.month || 'MON';
|
||||
let weekdayDisplay = data.weekday || 'DAY';
|
||||
let yearDisplay = data.year || 'YEAR';
|
||||
|
||||
// Apply format based on config
|
||||
const dateFormat = config.widgets.date.format || 'dd/mm/yy';
|
||||
if (dateFormat === 'dd/mm/yy') {
|
||||
monthDisplay = monthDisplay.substring(0, 3).toUpperCase();
|
||||
weekdayDisplay = weekdayDisplay.substring(0, 3).toUpperCase();
|
||||
} else if (dateFormat === 'mm/dd/yy') {
|
||||
// For US format, show month first, day second
|
||||
monthDisplay = monthDisplay.substring(0, 3).toUpperCase();
|
||||
weekdayDisplay = weekdayDisplay.substring(0, 3).toUpperCase();
|
||||
} else if (dateFormat === 'yyyy-mm-dd') {
|
||||
// ISO format - show full names
|
||||
monthDisplay = monthDisplay;
|
||||
weekdayDisplay = weekdayDisplay;
|
||||
}
|
||||
|
||||
row1Widgets.push(`
|
||||
<div class="rpg-dashboard-widget rpg-calendar-widget">
|
||||
<div class="rpg-calendar-top rpg-editable" contenteditable="true" data-field="month" data-full-value="${data.month || ''}" title="Click to edit">${monthShort}</div>
|
||||
<div class="rpg-calendar-day rpg-editable" contenteditable="true" data-field="weekday" data-full-value="${data.weekday || ''}" title="Click to edit">${weekdayShort}</div>
|
||||
<div class="rpg-calendar-top rpg-editable" contenteditable="true" data-field="month" data-full-value="${data.month || ''}" title="Click to edit">${monthDisplay}</div>
|
||||
<div class="rpg-calendar-day rpg-editable" contenteditable="true" data-field="weekday" data-full-value="${data.weekday || ''}" title="Click to edit">${weekdayDisplay}</div>
|
||||
<div class="rpg-calendar-year rpg-editable" contenteditable="true" data-field="year" data-full-value="${data.year || ''}" title="Click to edit">${yearDisplay}</div>
|
||||
</div>
|
||||
`;
|
||||
`);
|
||||
}
|
||||
|
||||
// Weather widget - always show (editable even if empty)
|
||||
// Weather widget - show if enabled
|
||||
if (config?.widgets?.weather?.enabled) {
|
||||
const weatherEmoji = data.weatherEmoji || '🌤️';
|
||||
const weatherForecast = data.weatherForecast || 'Weather';
|
||||
html += `
|
||||
row1Widgets.push(`
|
||||
<div class="rpg-dashboard-widget rpg-weather-widget">
|
||||
<div class="rpg-weather-icon rpg-editable" contenteditable="true" data-field="weatherEmoji" title="Click to edit emoji">${weatherEmoji}</div>
|
||||
<div class="rpg-weather-forecast rpg-editable" contenteditable="true" data-field="weatherForecast" title="Click to edit">${weatherForecast}</div>
|
||||
</div>
|
||||
`;
|
||||
`);
|
||||
}
|
||||
|
||||
// Temperature widget - show if enabled
|
||||
if (config?.widgets?.temperature?.enabled) {
|
||||
let tempDisplay = data.temperature || '20°C';
|
||||
let tempValue = data.tempValue || 20;
|
||||
|
||||
// Apply temperature unit conversion
|
||||
const preferredUnit = config.widgets.temperature.unit || 'celsius';
|
||||
if (data.temperature) {
|
||||
// Detect current unit in the data
|
||||
const isCelsius = tempDisplay.includes('°C');
|
||||
const isFahrenheit = tempDisplay.includes('°F');
|
||||
|
||||
if (preferredUnit === 'fahrenheit' && isCelsius) {
|
||||
// Convert C to F
|
||||
const fahrenheit = Math.round((tempValue * 9/5) + 32);
|
||||
tempDisplay = `${fahrenheit}°F`;
|
||||
tempValue = fahrenheit;
|
||||
} else if (preferredUnit === 'celsius' && isFahrenheit) {
|
||||
// Convert F to C
|
||||
const celsius = Math.round((tempValue - 32) * 5/9);
|
||||
tempDisplay = `${celsius}°C`;
|
||||
tempValue = celsius;
|
||||
}
|
||||
} else {
|
||||
// No data yet, use default for preferred unit
|
||||
tempDisplay = preferredUnit === 'fahrenheit' ? '68°F' : '20°C';
|
||||
tempValue = preferredUnit === 'fahrenheit' ? 68 : 20;
|
||||
}
|
||||
|
||||
// Temperature widget - always show (editable even if empty)
|
||||
const tempDisplay = data.temperature || '20°C';
|
||||
const tempValue = data.tempValue || 20;
|
||||
const tempPercent = Math.min(100, Math.max(0, ((tempValue + 20) / 60) * 100));
|
||||
const tempColor = tempValue < 10 ? '#4a90e2' : tempValue < 25 ? '#67c23a' : '#e94560';
|
||||
html += `
|
||||
row1Widgets.push(`
|
||||
<div class="rpg-dashboard-widget rpg-temp-widget">
|
||||
<div class="rpg-thermometer">
|
||||
<div class="rpg-thermometer-bulb"></div>
|
||||
@@ -315,10 +364,11 @@ export function renderInfoBox() {
|
||||
</div>
|
||||
<div class="rpg-temp-value rpg-editable" contenteditable="true" data-field="temperature" title="Click to edit">${tempDisplay}</div>
|
||||
</div>
|
||||
`;
|
||||
`);
|
||||
}
|
||||
|
||||
// Time widget - always show (editable even if empty)
|
||||
// Display the end time (second time in range) if available, otherwise start time
|
||||
// Time widget - show if enabled
|
||||
if (config?.widgets?.time?.enabled) {
|
||||
const timeDisplay = data.timeEnd || data.timeStart || '12:00';
|
||||
// Parse time for clock hands
|
||||
const timeMatch = timeDisplay.match(/(\d+):(\d+)/);
|
||||
@@ -330,7 +380,7 @@ export function renderInfoBox() {
|
||||
hourAngle = (hours % 12) * 30 + minutes * 0.5; // 30° per hour + 0.5° per minute
|
||||
minuteAngle = minutes * 6; // 6° per minute
|
||||
}
|
||||
html += `
|
||||
row1Widgets.push(`
|
||||
<div class="rpg-dashboard-widget rpg-clock-widget">
|
||||
<div class="rpg-clock">
|
||||
<div class="rpg-clock-face">
|
||||
@@ -341,11 +391,18 @@ export function renderInfoBox() {
|
||||
</div>
|
||||
<div class="rpg-time-value rpg-editable" contenteditable="true" data-field="timeStart" title="Click to edit">${timeDisplay}</div>
|
||||
</div>
|
||||
`;
|
||||
`);
|
||||
}
|
||||
|
||||
// Only create row 1 if there are widgets to show
|
||||
if (row1Widgets.length > 0) {
|
||||
html += '<div class="rpg-dashboard rpg-dashboard-row-1">';
|
||||
html += row1Widgets.join('');
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
// Row 2: Location widget (full width) - always show (editable even if empty)
|
||||
// Row 2: Location widget (full width) - show if enabled
|
||||
if (config?.widgets?.location?.enabled) {
|
||||
const locationDisplay = data.location || 'Location';
|
||||
html += `
|
||||
<div class="rpg-dashboard rpg-dashboard-row-2">
|
||||
@@ -357,8 +414,10 @@ export function renderInfoBox() {
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Row 3: Recent Events widget (notebook style) - dynamically show 1-3 events
|
||||
// Row 3: Recent Events widget (notebook style) - show if enabled
|
||||
if (config?.widgets?.recentEvents?.enabled) {
|
||||
// Parse Recent Events from infoBox string
|
||||
let recentEvents = [];
|
||||
if (committedTrackerData.infoBox) {
|
||||
@@ -415,6 +474,7 @@ export function renderInfoBox() {
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Close the scrollable content wrapper
|
||||
html += '</div>';
|
||||
|
||||
@@ -27,6 +27,40 @@ function debugLog(message, data = null) {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Interpolates color based on percentage value between low and high colors
|
||||
* @param {number} percentage - Value from 0-100
|
||||
* @param {string} lowColor - Hex color for low values (e.g., '#ff0000')
|
||||
* @param {string} highColor - Hex color for high values (e.g., '#00ff00')
|
||||
* @returns {string} Interpolated hex color
|
||||
*/
|
||||
function getStatColor(percentage, lowColor, highColor) {
|
||||
// Clamp percentage to 0-100
|
||||
const percent = Math.max(0, Math.min(100, percentage)) / 100;
|
||||
|
||||
// Parse hex colors
|
||||
const parsehex = (hex) => {
|
||||
const clean = hex.replace('#', '');
|
||||
return {
|
||||
r: parseInt(clean.substring(0, 2), 16),
|
||||
g: parseInt(clean.substring(2, 4), 16),
|
||||
b: parseInt(clean.substring(4, 6), 16)
|
||||
};
|
||||
};
|
||||
|
||||
const low = parsehex(lowColor);
|
||||
const high = parsehex(highColor);
|
||||
|
||||
// Interpolate each channel
|
||||
const r = Math.round(low.r + (high.r - low.r) * percent);
|
||||
const g = Math.round(low.g + (high.g - low.g) * percent);
|
||||
const b = Math.round(low.b + (high.b - low.b) * percent);
|
||||
|
||||
// Convert back to hex
|
||||
const toHex = (n) => n.toString(16).padStart(2, '0');
|
||||
return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fuzzy name matching that handles:
|
||||
* - Exact matches: "Sabrina" === "Sabrina"
|
||||
@@ -76,11 +110,21 @@ export function renderThoughts() {
|
||||
$thoughtsContainer.addClass('rpg-content-updating');
|
||||
}
|
||||
|
||||
// Get tracker configuration
|
||||
const config = extensionSettings.trackerConfig?.presentCharacters;
|
||||
const enabledFields = config?.customFields?.filter(f => f && f.enabled && f.name) || [];
|
||||
const characterStatsConfig = config?.characterStats;
|
||||
const enabledCharStats = characterStatsConfig?.enabled && characterStatsConfig?.customStats?.filter(s => s && s.enabled && s.name) || [];
|
||||
const relationshipFields = config?.relationshipFields || [];
|
||||
const hasRelationshipEnabled = relationshipFields.length > 0;
|
||||
|
||||
// Use committedTrackerData as fallback if lastGeneratedData is empty (e.g., after page refresh)
|
||||
const characterThoughtsData = lastGeneratedData.characterThoughts || committedTrackerData.characterThoughts || '';
|
||||
|
||||
debugLog('[RPG Thoughts] Raw characterThoughts data:', characterThoughtsData);
|
||||
debugLog('[RPG Thoughts] Data length:', characterThoughtsData.length + ' chars');
|
||||
debugLog('[RPG Thoughts] Enabled custom fields:', enabledFields.map(f => f.name));
|
||||
debugLog('[RPG Thoughts] Enabled character stats:', enabledCharStats.map(s => s.name));
|
||||
|
||||
const lines = characterThoughtsData.split('\n');
|
||||
const presentCharacters = [];
|
||||
@@ -88,88 +132,96 @@ export function renderThoughts() {
|
||||
debugLog('[RPG Thoughts] Split into lines count:', lines.length);
|
||||
debugLog('[RPG Thoughts] Lines:', lines);
|
||||
|
||||
// Parse format: [Emoji]: [Name, Status, Demeanor] | [Relationship] | [Thoughts]
|
||||
// Also supports 4-part format: [Emoji]: [Name, Status] | [Demeanor] | [Relationship] | [Thoughts]
|
||||
// Parse new multi-line format:
|
||||
// - [Name]
|
||||
// Details: [Emoji] | [Field1] | [Field2] | ...
|
||||
// Relationship: [Relationship]
|
||||
// Stats: Stat1: X% | Stat2: X% | ...
|
||||
// Thoughts: [Description]
|
||||
let lineNumber = 0;
|
||||
let currentCharacter = null;
|
||||
|
||||
for (const line of lines) {
|
||||
lineNumber++;
|
||||
|
||||
// Skip empty lines, headers, dividers, and code fences
|
||||
if (line.trim() &&
|
||||
!line.includes('Present Characters') &&
|
||||
!line.includes('---') &&
|
||||
!line.trim().startsWith('```')) {
|
||||
if (!line.trim() ||
|
||||
line.includes('Present Characters') ||
|
||||
line.includes('---') ||
|
||||
line.trim().startsWith('```') ||
|
||||
line.trim() === '- …' ||
|
||||
line.includes('(Repeat the format')) {
|
||||
continue;
|
||||
}
|
||||
|
||||
debugLog(`[RPG Thoughts] Processing line ${lineNumber}:`, line);
|
||||
|
||||
// Match the new format with pipes
|
||||
const parts = line.split('|').map(p => p.trim());
|
||||
debugLog(`[RPG Thoughts] Split into ${parts.length} parts:`, parts);
|
||||
|
||||
// Require at least 3 parts (Emoji:Name | Relationship | Thoughts)
|
||||
// This matches updateChatThoughts() and the current prompt format
|
||||
if (parts.length >= 3) {
|
||||
// First part: [Emoji]: [Name, Status, Demeanor]
|
||||
const firstPart = parts[0].trim();
|
||||
const emojiMatch = firstPart.match(/^(.+?):\s*(.+)$/);
|
||||
|
||||
if (emojiMatch) {
|
||||
const emoji = emojiMatch[1].trim();
|
||||
const info = emojiMatch[2].trim();
|
||||
|
||||
debugLog(`[RPG Thoughts] Emoji match found - emoji: "${emoji}", info: "${info}"`);
|
||||
|
||||
// Handle both 3-part and 4-part formats
|
||||
let relationship, thoughts, traits;
|
||||
|
||||
if (parts.length === 3) {
|
||||
// 3-part format: Emoji:Name,traits | Relationship | Thoughts
|
||||
relationship = parts[1].trim();
|
||||
thoughts = parts[2].trim();
|
||||
const infoParts = info.split(',').map(p => p.trim());
|
||||
traits = infoParts.slice(1).join(', ');
|
||||
debugLog('[RPG Thoughts] Parsed as 3-part format');
|
||||
} else {
|
||||
// 4-part format: Emoji:Name,traits | Demeanor | Relationship | Thoughts
|
||||
// Add the demeanor to traits and use last two parts for relationship/thoughts
|
||||
const demeanor = parts[1].trim();
|
||||
relationship = parts[2].trim();
|
||||
thoughts = parts[3].trim();
|
||||
const infoParts = info.split(',').map(p => p.trim());
|
||||
const baseTraits = infoParts.slice(1).join(', ');
|
||||
traits = baseTraits ? `${baseTraits}, ${demeanor}` : demeanor;
|
||||
debugLog('[RPG Thoughts] Parsed as 4-part format');
|
||||
}
|
||||
|
||||
// Parse name from info (first part before comma)
|
||||
const infoParts = info.split(',').map(p => p.trim());
|
||||
const name = infoParts[0] || '';
|
||||
|
||||
debugLog(`[RPG Thoughts] Extracted - name: "${name}", traits: "${traits}", relationship: "${relationship}", thoughts: "${thoughts}"`);
|
||||
// Check if this is a character name line (starts with "- ")
|
||||
if (line.trim().startsWith('- ')) {
|
||||
const name = line.trim().substring(2).trim();
|
||||
|
||||
if (name && name.toLowerCase() !== 'unavailable') {
|
||||
presentCharacters.push({ emoji, name, traits, relationship, thoughts });
|
||||
debugLog(`[RPG Thoughts] ✓ Added character: ${name}`);
|
||||
currentCharacter = { name };
|
||||
presentCharacters.push(currentCharacter);
|
||||
debugLog(`[RPG Thoughts] ✓ Started new character: ${name}`);
|
||||
} else {
|
||||
currentCharacter = null;
|
||||
debugLog(`[RPG Thoughts] ✗ Rejected character - name: "${name}" (unavailable or empty)`);
|
||||
}
|
||||
} else {
|
||||
debugLog('[RPG Thoughts] ✗ No emoji match found in first part');
|
||||
}
|
||||
} else {
|
||||
debugLog(`[RPG Thoughts] ✗ Not enough parts (${parts.length} < 3, need at least Emoji:Name | Relationship | Thoughts)`);
|
||||
// Check if this is a Details line
|
||||
else if (line.trim().startsWith('Details:') && currentCharacter) {
|
||||
const detailsContent = line.substring(line.indexOf(':') + 1).trim();
|
||||
const parts = detailsContent.split('|').map(p => p.trim());
|
||||
|
||||
// First part is the emoji
|
||||
if (parts.length > 0) {
|
||||
currentCharacter.emoji = parts[0];
|
||||
debugLog(`[RPG Thoughts] Parsed emoji: ${parts[0]}`);
|
||||
}
|
||||
|
||||
// Remaining parts are custom fields
|
||||
for (let i = 0; i < enabledFields.length && i + 1 < parts.length; i++) {
|
||||
const fieldName = enabledFields[i].name;
|
||||
currentCharacter[fieldName] = parts[i + 1];
|
||||
debugLog(`[RPG Thoughts] Parsed field ${fieldName}: ${parts[i + 1]}`);
|
||||
}
|
||||
}
|
||||
// Check if this is a Relationship line
|
||||
else if (line.trim().startsWith('Relationship:') && currentCharacter) {
|
||||
const relationship = line.substring(line.indexOf(':') + 1).trim();
|
||||
currentCharacter.Relationship = relationship;
|
||||
debugLog(`[RPG Thoughts] Parsed relationship: ${relationship}`);
|
||||
}
|
||||
// Check if this is a Stats line
|
||||
else if (line.trim().startsWith('Stats:') && currentCharacter && enabledCharStats.length > 0) {
|
||||
const statsContent = line.substring(line.indexOf(':') + 1).trim();
|
||||
const statParts = statsContent.split('|').map(p => p.trim());
|
||||
|
||||
for (const statPart of statParts) {
|
||||
const statMatch = statPart.match(/^(.+?):\s*(\d+)%$/);
|
||||
if (statMatch) {
|
||||
const statName = statMatch[1].trim();
|
||||
const statValue = parseInt(statMatch[2]);
|
||||
currentCharacter[statName] = statValue;
|
||||
debugLog(`[RPG Thoughts] Parsed stat: ${statName} = ${statValue}%`);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Check if this is a Thoughts line (handled separately for thought bubbles)
|
||||
else if (line.trim().match(/^[A-Z][a-z]+:/) && currentCharacter) {
|
||||
// This could be Thoughts, Feelings, etc. - skip for now, handled in thought bubble rendering
|
||||
debugLog(`[RPG Thoughts] Skipping thoughts/feelings line (handled in bubble rendering)`);
|
||||
}
|
||||
}
|
||||
|
||||
// Relationship status to emoji mapping
|
||||
// Relationship status to emoji mapping (for backward compatibility with old "relationship" field)
|
||||
const relationshipEmojis = {
|
||||
'Enemy': '⚔️',
|
||||
'Neutral': '⚖️',
|
||||
'Friend': '⭐',
|
||||
'Lover': '❤️'
|
||||
};
|
||||
|
||||
debugLog('[RPG Thoughts] ==================== PARSING COMPLETE ====================');
|
||||
debugLog('[RPG Thoughts] Total characters parsed:', presentCharacters.length);
|
||||
debugLog('[RPG Thoughts] Characters array:', presentCharacters);
|
||||
@@ -183,8 +235,7 @@ export function renderThoughts() {
|
||||
// If no characters parsed, show a placeholder editable card
|
||||
if (presentCharacters.length === 0) {
|
||||
debugLog('[RPG Thoughts] ⚠ No characters parsed - showing placeholder card');
|
||||
// Get default character portrait (try to use the current character if in 1-on-1 chat)
|
||||
// Use a base64-encoded SVG placeholder as fallback to avoid 400 errors
|
||||
// Get default character portrait
|
||||
let defaultPortrait = FALLBACK_AVATAR_DATA_URI;
|
||||
let defaultName = 'Character';
|
||||
|
||||
@@ -210,7 +261,17 @@ export function renderThoughts() {
|
||||
<span class="rpg-character-emoji rpg-editable" contenteditable="true" data-character="${defaultName}" data-field="emoji" title="Click to edit emoji">😊</span>
|
||||
<span class="rpg-character-name rpg-editable" contenteditable="true" data-character="${defaultName}" data-field="name" title="Click to edit name">${defaultName}</span>
|
||||
</div>
|
||||
<div class="rpg-character-traits rpg-editable" contenteditable="true" data-character="${defaultName}" data-field="traits" title="Click to edit traits">Traits</div>
|
||||
`;
|
||||
|
||||
// Add custom fields dynamically
|
||||
for (const field of enabledFields) {
|
||||
const fieldId = field.name.toLowerCase().replace(/\s+/g, '-');
|
||||
html += `
|
||||
<div class="rpg-character-field rpg-character-${fieldId} rpg-editable" contenteditable="true" data-character="${defaultName}" data-field="${field.name}" title="Click to edit ${field.name}"></div>
|
||||
`;
|
||||
}
|
||||
|
||||
html += `
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -286,8 +347,17 @@ export function renderThoughts() {
|
||||
|
||||
debugLog(`[RPG Thoughts] Final avatar for ${char.name}:`, characterPortrait.substring(0, 50) + '...');
|
||||
|
||||
// Get relationship emoji
|
||||
const relationshipEmoji = relationshipEmojis[char.relationship] || '⚖️';
|
||||
// Get relationship badge - only if relationships are enabled in config
|
||||
let relationshipBadge = '⚖️'; // Default
|
||||
let relationshipFieldName = 'Relationship';
|
||||
|
||||
if (hasRelationshipEnabled) {
|
||||
// In the new format, relationship is always stored in char.Relationship
|
||||
if (char.Relationship) {
|
||||
// Try to map text to emoji
|
||||
relationshipBadge = relationshipEmojis[char.Relationship] || char.Relationship;
|
||||
}
|
||||
}
|
||||
|
||||
debugLog(`[RPG Thoughts] Building HTML card for ${char.name}...`);
|
||||
|
||||
@@ -295,14 +365,45 @@ export function renderThoughts() {
|
||||
<div class="rpg-character-card" data-character-name="${char.name}">
|
||||
<div class="rpg-character-avatar">
|
||||
<img src="${characterPortrait}" alt="${char.name}" onerror="this.style.opacity='0.5';this.onerror=null;" />
|
||||
<div class="rpg-relationship-badge rpg-editable" contenteditable="true" data-character="${char.name}" data-field="relationship" title="Click to edit (use emoji: ⚔️ ⚖️ ⭐ ❤️)">${relationshipEmoji}</div>
|
||||
${hasRelationshipEnabled ? `<div class="rpg-relationship-badge rpg-editable" contenteditable="true" data-character="${char.name}" data-field="${relationshipFieldName}" title="Click to edit (use emoji: ⚔️ ⚖️ ⭐ ❤️)">${relationshipBadge}</div>` : ''}
|
||||
</div>
|
||||
<div class="rpg-character-content">
|
||||
<div class="rpg-character-info">
|
||||
<div class="rpg-character-header">
|
||||
<span class="rpg-character-emoji rpg-editable" contenteditable="true" data-character="${char.name}" data-field="emoji" title="Click to edit emoji">${char.emoji}</span>
|
||||
<span class="rpg-character-name rpg-editable" contenteditable="true" data-character="${char.name}" data-field="name" title="Click to edit name">${char.name}</span>
|
||||
</div>
|
||||
<div class="rpg-character-traits rpg-editable" contenteditable="true" data-character="${char.name}" data-field="traits" title="Click to edit traits">${char.traits}</div>
|
||||
`;
|
||||
|
||||
// Render custom fields dynamically
|
||||
for (const field of enabledFields) {
|
||||
const fieldValue = char[field.name] || '';
|
||||
const fieldId = field.name.toLowerCase().replace(/\s+/g, '-');
|
||||
html += `
|
||||
<div class="rpg-character-field rpg-character-${fieldId} rpg-editable" contenteditable="true" data-character="${char.name}" data-field="${field.name}" title="Click to edit ${field.name}">${fieldValue}</div>
|
||||
`;
|
||||
}
|
||||
|
||||
html += `
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Render character stats if enabled (outside rpg-character-info)
|
||||
if (enabledCharStats.length > 0) {
|
||||
html += `<div class="rpg-character-stats"><div class="rpg-character-stats-inner">`;
|
||||
for (const stat of enabledCharStats) {
|
||||
const statValue = char[stat.name] || 0;
|
||||
const statColor = getStatColor(statValue, extensionSettings.statBarColorLow, extensionSettings.statBarColorHigh);
|
||||
html += `
|
||||
<div class="rpg-character-stat">
|
||||
<span class="rpg-stat-name rpg-editable" contenteditable="true" data-character="${char.name}" data-field="${stat.name}" title="Click to edit ${stat.name}">${stat.name}: <span style="color: ${statColor}">${statValue}%</span></span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
html += `</div></div>`;
|
||||
}
|
||||
|
||||
html += `
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -523,50 +624,65 @@ export function updateChatThoughts() {
|
||||
// Parse the Present Characters data to get thoughts
|
||||
const lines = lastGeneratedData.characterThoughts.split('\n');
|
||||
const thoughtsArray = []; // Array of {name, emoji, thought}
|
||||
const thoughtsConfig = extensionSettings.trackerConfig?.presentCharacters?.thoughts;
|
||||
const thoughtsLabel = thoughtsConfig?.name || 'Thoughts';
|
||||
|
||||
// console.log('[RPG Companion] Parsing thoughts from lines:', lines);
|
||||
|
||||
for (const line of lines) {
|
||||
if (line.trim() &&
|
||||
!line.includes('Present Characters') &&
|
||||
!line.includes('---') &&
|
||||
!line.trim().startsWith('```')) {
|
||||
// Parse new format to build character map and thoughts
|
||||
let currentCharName = null;
|
||||
let currentCharEmoji = null;
|
||||
|
||||
const parts = line.split('|').map(p => p.trim());
|
||||
// console.log('[RPG Companion] Line parts:', parts);
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
const line = lines[i].trim();
|
||||
|
||||
// Handle both 3-part and 4-part formats
|
||||
if (parts.length >= 3) {
|
||||
const firstPart = parts[0].trim();
|
||||
const emojiMatch = firstPart.match(/^(.+?):\s*(.+)$/);
|
||||
|
||||
if (emojiMatch) {
|
||||
const emoji = emojiMatch[1].trim();
|
||||
const info = emojiMatch[2].trim();
|
||||
|
||||
let thoughts;
|
||||
if (parts.length === 3) {
|
||||
// 3-part format: Emoji:Name,traits | Relationship | Thoughts
|
||||
thoughts = parts[2].trim();
|
||||
} else if (parts.length >= 4) {
|
||||
// 4-part format: Emoji:Name,traits | Demeanor | Relationship | Thoughts
|
||||
thoughts = parts[3].trim();
|
||||
if (!line ||
|
||||
line.includes('Present Characters') ||
|
||||
line.includes('---') ||
|
||||
line.startsWith('```') ||
|
||||
line.trim() === '- …' ||
|
||||
line.includes('(Repeat the format')) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const infoParts = info.split(',').map(p => p.trim());
|
||||
const name = infoParts[0] || '';
|
||||
// Check if this is a character name line (starts with "- ")
|
||||
if (line.startsWith('- ')) {
|
||||
const name = line.substring(2).trim();
|
||||
if (name && name.toLowerCase() !== 'unavailable') {
|
||||
currentCharName = name;
|
||||
currentCharEmoji = null; // Reset emoji for new character
|
||||
} else {
|
||||
currentCharName = null;
|
||||
currentCharEmoji = null;
|
||||
}
|
||||
}
|
||||
// Check if this is a Details line (contains the emoji)
|
||||
else if (line.startsWith('Details:') && currentCharName) {
|
||||
const detailsContent = line.substring(line.indexOf(':') + 1).trim();
|
||||
const parts = detailsContent.split('|').map(p => p.trim());
|
||||
|
||||
// console.log('[RPG Companion] Parsed thought - Name:', name, 'Thought:', thoughts);
|
||||
// First part is the emoji
|
||||
if (parts.length > 0) {
|
||||
currentCharEmoji = parts[0];
|
||||
}
|
||||
}
|
||||
// Check if this is a Thoughts line
|
||||
else if (line.startsWith(thoughtsLabel + ':') && currentCharName && currentCharEmoji) {
|
||||
const thoughtContent = line.substring(thoughtsLabel.length + 1).trim();
|
||||
|
||||
if (name && thoughts && name.toLowerCase() !== 'unavailable') {
|
||||
thoughtsArray.push({ name: name.toLowerCase(), emoji, thought: thoughts });
|
||||
// console.log('[RPG Companion] Added to thoughtsArray:', name.toLowerCase());
|
||||
}
|
||||
}
|
||||
// The thought content is just the text (no emoji prefix in new format)
|
||||
if (thoughtContent) {
|
||||
thoughtsArray.push({
|
||||
name: currentCharName.toLowerCase(),
|
||||
emoji: currentCharEmoji,
|
||||
thought: thoughtContent
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
debugLog('[RPG Thoughts] Parsed thoughts:', thoughtsArray);
|
||||
|
||||
// If no thoughts parsed, return
|
||||
if (thoughtsArray.length === 0) {
|
||||
// console.log('[RPG Companion] No thoughts parsed, returning');
|
||||
|
||||
@@ -26,16 +26,45 @@ import { buildInventorySummary } from '../generation/promptBuilder.js';
|
||||
*/
|
||||
export function buildUserStatsText() {
|
||||
const stats = extensionSettings.userStats;
|
||||
const statNames = extensionSettings.statNames || {
|
||||
health: 'Health',
|
||||
satiety: 'Satiety',
|
||||
energy: 'Energy',
|
||||
hygiene: 'Hygiene',
|
||||
arousal: 'Arousal'
|
||||
const config = extensionSettings.trackerConfig?.userStats || {
|
||||
customStats: [
|
||||
{ id: 'health', name: 'Health', enabled: true },
|
||||
{ id: 'satiety', name: 'Satiety', enabled: true },
|
||||
{ id: 'energy', name: 'Energy', enabled: true },
|
||||
{ id: 'hygiene', name: 'Hygiene', enabled: true },
|
||||
{ id: 'arousal', name: 'Arousal', enabled: true }
|
||||
],
|
||||
statusSection: { enabled: true, showMoodEmoji: true, customFields: ['Conditions'] },
|
||||
skillsSection: { enabled: false, label: 'Skills' }
|
||||
};
|
||||
const inventorySummary = buildInventorySummary(stats.inventory);
|
||||
|
||||
return `${statNames.health}: ${stats.health}%\n${statNames.satiety}: ${stats.satiety}%\n${statNames.energy}: ${stats.energy}%\n${statNames.hygiene}: ${stats.hygiene}%\n${statNames.arousal}: ${stats.arousal}%\n${stats.mood}: ${stats.conditions}\n${inventorySummary}`;
|
||||
let text = '';
|
||||
|
||||
// Add enabled custom stats
|
||||
const enabledStats = config.customStats.filter(stat => stat && stat.enabled && stat.name && stat.id);
|
||||
for (const stat of enabledStats) {
|
||||
const value = stats[stat.id] !== undefined ? stats[stat.id] : 100;
|
||||
text += `${stat.name}: ${value}%\n`;
|
||||
}
|
||||
|
||||
// Add status section if enabled
|
||||
if (config.statusSection.enabled) {
|
||||
if (config.statusSection.showMoodEmoji) {
|
||||
text += `${stats.mood}: `;
|
||||
}
|
||||
text += `${stats.conditions || 'None'}\n`;
|
||||
}
|
||||
|
||||
// Add inventory summary
|
||||
const inventorySummary = buildInventorySummary(stats.inventory);
|
||||
text += inventorySummary;
|
||||
|
||||
// Add skills if enabled
|
||||
if (config.skillsSection.enabled && stats.skills) {
|
||||
text += `\n${config.skillsSection.label}: ${stats.skills}`;
|
||||
}
|
||||
|
||||
return text.trim();
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -49,12 +78,17 @@ export function renderUserStats() {
|
||||
}
|
||||
|
||||
const stats = extensionSettings.userStats;
|
||||
const statNames = extensionSettings.statNames || {
|
||||
health: 'Health',
|
||||
satiety: 'Satiety',
|
||||
energy: 'Energy',
|
||||
hygiene: 'Hygiene',
|
||||
arousal: 'Arousal'
|
||||
const config = extensionSettings.trackerConfig?.userStats || {
|
||||
customStats: [
|
||||
{ id: 'health', name: 'Health', enabled: true },
|
||||
{ id: 'satiety', name: 'Satiety', enabled: true },
|
||||
{ id: 'energy', name: 'Energy', enabled: true },
|
||||
{ id: 'hygiene', name: 'Hygiene', enabled: true },
|
||||
{ id: 'arousal', name: 'Arousal', enabled: true }
|
||||
],
|
||||
showRPGAttributes: true,
|
||||
statusSection: { enabled: true, showMoodEmoji: true, customFields: ['Conditions'] },
|
||||
skillsSection: { enabled: false, label: 'Skills' }
|
||||
};
|
||||
const userName = getContext().name1;
|
||||
|
||||
@@ -63,12 +97,9 @@ export function renderUserStats() {
|
||||
lastGeneratedData.userStats = buildUserStatsText();
|
||||
}
|
||||
|
||||
// Get user portrait - handle both default-user and custom persona folders
|
||||
// Use a base64-encoded SVG placeholder as fallback to avoid 400 errors
|
||||
// Get user portrait
|
||||
let userPortrait = FALLBACK_AVATAR_DATA_URI;
|
||||
|
||||
if (user_avatar) {
|
||||
// Try to get the thumbnail using our safe helper
|
||||
const thumbnailUrl = getSafeThumbnailUrl('persona', user_avatar);
|
||||
if (thumbnailUrl) {
|
||||
userPortrait = thumbnailUrl;
|
||||
@@ -78,9 +109,10 @@ export function renderUserStats() {
|
||||
// Create gradient from low to high color
|
||||
const gradient = `linear-gradient(to right, ${extensionSettings.statBarColorLow}, ${extensionSettings.statBarColorHigh})`;
|
||||
|
||||
const html = `
|
||||
<div class="rpg-stats-content">
|
||||
<div class="rpg-stats-left">
|
||||
let html = '<div class="rpg-stats-content"><div class="rpg-stats-left">';
|
||||
|
||||
// User info row
|
||||
html += `
|
||||
<div class="rpg-user-info-row">
|
||||
<img src="${userPortrait}" alt="${userName}" class="rpg-user-portrait" onerror="this.style.opacity='0.5';this.onerror=null;" />
|
||||
<span class="rpg-user-name">${userName}</span>
|
||||
@@ -88,54 +120,60 @@ export function renderUserStats() {
|
||||
<span class="rpg-level-label">LVL</span>
|
||||
<span class="rpg-level-value rpg-editable" contenteditable="true" data-field="level" title="Click to edit level">${extensionSettings.level}</span>
|
||||
</div>
|
||||
<div class="rpg-stats-grid">
|
||||
`;
|
||||
|
||||
// Dynamic stats grid - only show enabled stats
|
||||
html += '<div class="rpg-stats-grid">';
|
||||
const enabledStats = config.customStats.filter(stat => stat && stat.enabled && stat.name && stat.id);
|
||||
|
||||
for (const stat of enabledStats) {
|
||||
const value = stats[stat.id] !== undefined ? stats[stat.id] : 100;
|
||||
html += `
|
||||
<div class="rpg-stat-row">
|
||||
<span class="rpg-stat-label rpg-editable-stat-name" contenteditable="true" data-field="health" title="Click to edit stat name">${statNames.health}:</span>
|
||||
<span class="rpg-stat-label rpg-editable-stat-name" contenteditable="true" data-field="${stat.id}" title="Click to edit stat name">${stat.name}:</span>
|
||||
<div class="rpg-stat-bar" style="background: ${gradient}">
|
||||
<div class="rpg-stat-fill" style="width: ${100 - stats.health}%"></div>
|
||||
<div class="rpg-stat-fill" style="width: ${100 - value}%"></div>
|
||||
</div>
|
||||
<span class="rpg-stat-value rpg-editable-stat" contenteditable="true" data-field="health" title="Click to edit">${stats.health}%</span>
|
||||
<span class="rpg-stat-value rpg-editable-stat" contenteditable="true" data-field="${stat.id}" title="Click to edit">${value}%</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
html += '</div>';
|
||||
|
||||
<div class="rpg-stat-row">
|
||||
<span class="rpg-stat-label rpg-editable-stat-name" contenteditable="true" data-field="satiety" title="Click to edit stat name">${statNames.satiety}:</span>
|
||||
<div class="rpg-stat-bar" style="background: ${gradient}">
|
||||
<div class="rpg-stat-fill" style="width: ${100 - stats.satiety}%"></div>
|
||||
</div>
|
||||
<span class="rpg-stat-value rpg-editable-stat" contenteditable="true" data-field="satiety" title="Click to edit">${stats.satiety}%</span>
|
||||
</div>
|
||||
// Status section (conditionally rendered)
|
||||
if (config.statusSection.enabled) {
|
||||
html += '<div class="rpg-mood">';
|
||||
|
||||
<div class="rpg-stat-row">
|
||||
<span class="rpg-stat-label rpg-editable-stat-name" contenteditable="true" data-field="energy" title="Click to edit stat name">${statNames.energy}:</span>
|
||||
<div class="rpg-stat-bar" style="background: ${gradient}">
|
||||
<div class="rpg-stat-fill" style="width: ${100 - stats.energy}%"></div>
|
||||
</div>
|
||||
<span class="rpg-stat-value rpg-editable-stat" contenteditable="true" data-field="energy" title="Click to edit">${stats.energy}%</span>
|
||||
</div>
|
||||
if (config.statusSection.showMoodEmoji) {
|
||||
html += `<div class="rpg-mood-emoji rpg-editable" contenteditable="true" data-field="mood" title="Click to edit emoji">${stats.mood}</div>`;
|
||||
}
|
||||
|
||||
<div class="rpg-stat-row">
|
||||
<span class="rpg-stat-label rpg-editable-stat-name" contenteditable="true" data-field="hygiene" title="Click to edit stat name">${statNames.hygiene}:</span>
|
||||
<div class="rpg-stat-bar" style="background: ${gradient}">
|
||||
<div class="rpg-stat-fill" style="width: ${100 - stats.hygiene}%"></div>
|
||||
</div>
|
||||
<span class="rpg-stat-value rpg-editable-stat" contenteditable="true" data-field="hygiene" title="Click to edit">${stats.hygiene}%</span>
|
||||
</div>
|
||||
// Render custom status fields
|
||||
if (config.statusSection.customFields && config.statusSection.customFields.length > 0) {
|
||||
// For now, use first field as "conditions" for backward compatibility
|
||||
const conditionsValue = stats.conditions || 'None';
|
||||
html += `<div class="rpg-mood-conditions rpg-editable" contenteditable="true" data-field="conditions" title="Click to edit conditions">${conditionsValue}</div>`;
|
||||
}
|
||||
|
||||
<div class="rpg-stat-row">
|
||||
<span class="rpg-stat-label rpg-editable-stat-name" contenteditable="true" data-field="arousal" title="Click to edit stat name">${statNames.arousal}:</span>
|
||||
<div class="rpg-stat-bar" style="background: ${gradient}">
|
||||
<div class="rpg-stat-fill" style="width: ${100 - stats.arousal}%"></div>
|
||||
</div>
|
||||
<span class="rpg-stat-value rpg-editable-stat" contenteditable="true" data-field="arousal" title="Click to edit">${stats.arousal}%</span>
|
||||
</div>
|
||||
</div>
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
<div class="rpg-mood">
|
||||
<div class="rpg-mood-emoji rpg-editable" contenteditable="true" data-field="mood" title="Click to edit emoji">${stats.mood}</div>
|
||||
<div class="rpg-mood-conditions rpg-editable" contenteditable="true" data-field="conditions" title="Click to edit conditions">${stats.conditions}</div>
|
||||
</div>
|
||||
// Skills section (conditionally rendered)
|
||||
if (config.skillsSection.enabled) {
|
||||
const skillsValue = stats.skills || 'None';
|
||||
html += `
|
||||
<div class="rpg-skills-section">
|
||||
<span class="rpg-skills-label">${config.skillsSection.label}:</span>
|
||||
<div class="rpg-skills-value rpg-editable" contenteditable="true" data-field="skills" title="Click to edit skills">${skillsValue}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
html += '</div>'; // Close rpg-stats-left
|
||||
|
||||
// RPG Attributes section (conditionally rendered)
|
||||
if (config.showRPGAttributes) {
|
||||
html += `
|
||||
<div class="rpg-stats-right">
|
||||
<div class="rpg-classic-stats">
|
||||
<div class="rpg-classic-stats-grid">
|
||||
@@ -190,8 +228,10 @@ export function renderUserStats() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
html += '</div>'; // Close rpg-stats-content
|
||||
|
||||
$userStatsContainer.html(html);
|
||||
|
||||
|
||||
@@ -0,0 +1,708 @@
|
||||
/**
|
||||
* Tracker Editor Module
|
||||
* Provides UI for customizing tracker configurations
|
||||
*/
|
||||
|
||||
import { extensionSettings } from '../../core/state.js';
|
||||
import { saveSettings } from '../../core/persistence.js';
|
||||
import { renderUserStats } from '../rendering/userStats.js';
|
||||
import { renderInfoBox } from '../rendering/infoBox.js';
|
||||
import { renderThoughts } from '../rendering/thoughts.js';
|
||||
|
||||
let $editorModal = null;
|
||||
let activeTab = 'userStats';
|
||||
let tempConfig = null; // Temporary config for cancel functionality
|
||||
|
||||
/**
|
||||
* Initialize the tracker editor modal
|
||||
*/
|
||||
export function initTrackerEditor() {
|
||||
// Modal will be in template.html, just set up event listeners
|
||||
$editorModal = $('#rpg-tracker-editor-popup');
|
||||
|
||||
if (!$editorModal.length) {
|
||||
console.error('[RPG Companion] Tracker editor modal not found in template');
|
||||
return;
|
||||
}
|
||||
|
||||
// Tab switching
|
||||
$(document).on('click', '.rpg-editor-tab', function() {
|
||||
$('.rpg-editor-tab').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
|
||||
activeTab = $(this).data('tab');
|
||||
$('.rpg-editor-tab-content').hide();
|
||||
$(`#rpg-editor-tab-${activeTab}`).show();
|
||||
});
|
||||
|
||||
// Save button
|
||||
$(document).on('click', '#rpg-editor-save', function() {
|
||||
applyTrackerConfig();
|
||||
closeTrackerEditor();
|
||||
});
|
||||
|
||||
// Cancel button
|
||||
$(document).on('click', '#rpg-editor-cancel', function() {
|
||||
closeTrackerEditor();
|
||||
});
|
||||
|
||||
// Close X button
|
||||
$(document).on('click', '#rpg-close-tracker-editor', function() {
|
||||
closeTrackerEditor();
|
||||
});
|
||||
|
||||
// Reset button
|
||||
$(document).on('click', '#rpg-editor-reset', function() {
|
||||
resetToDefaults();
|
||||
renderEditorUI();
|
||||
});
|
||||
|
||||
// Close on background click
|
||||
$(document).on('click', '#rpg-tracker-editor-popup', function(e) {
|
||||
if (e.target.id === 'rpg-tracker-editor-popup') {
|
||||
closeTrackerEditor();
|
||||
}
|
||||
});
|
||||
|
||||
// Open button
|
||||
$(document).on('click', '#rpg-open-tracker-editor', function() {
|
||||
openTrackerEditor();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Open the tracker editor modal
|
||||
*/
|
||||
function openTrackerEditor() {
|
||||
// Create temporary copy for cancel functionality
|
||||
tempConfig = JSON.parse(JSON.stringify(extensionSettings.trackerConfig));
|
||||
|
||||
// Set theme to match current extension theme
|
||||
const theme = extensionSettings.theme || 'modern';
|
||||
$editorModal.attr('data-theme', theme);
|
||||
|
||||
renderEditorUI();
|
||||
$editorModal.addClass('is-open').css('display', '');
|
||||
}
|
||||
|
||||
/**
|
||||
* Close the tracker editor modal
|
||||
*/
|
||||
function closeTrackerEditor() {
|
||||
// Restore from temp if canceling
|
||||
if (tempConfig) {
|
||||
extensionSettings.trackerConfig = tempConfig;
|
||||
tempConfig = null;
|
||||
}
|
||||
|
||||
$editorModal.removeClass('is-open').addClass('is-closing');
|
||||
setTimeout(() => {
|
||||
$editorModal.removeClass('is-closing').hide();
|
||||
}, 200);
|
||||
}
|
||||
|
||||
/**
|
||||
* Apply the tracker configuration and refresh all trackers
|
||||
*/
|
||||
function applyTrackerConfig() {
|
||||
tempConfig = null; // Clear temp config
|
||||
saveSettings();
|
||||
|
||||
// Re-render all trackers with new config
|
||||
renderUserStats();
|
||||
renderInfoBox();
|
||||
renderThoughts();
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset configuration to defaults
|
||||
*/
|
||||
function resetToDefaults() {
|
||||
extensionSettings.trackerConfig = {
|
||||
userStats: {
|
||||
customStats: [
|
||||
{ id: 'health', name: 'Health', enabled: true },
|
||||
{ id: 'satiety', name: 'Satiety', enabled: true },
|
||||
{ id: 'energy', name: 'Energy', enabled: true },
|
||||
{ id: 'hygiene', name: 'Hygiene', enabled: true },
|
||||
{ id: 'arousal', name: 'Arousal', enabled: true }
|
||||
],
|
||||
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,
|
||||
relationshipFields: ['Lover', 'Friend', 'Ally', 'Enemy', 'Neutral'],
|
||||
relationshipEmojis: {
|
||||
'Lover': '❤️',
|
||||
'Friend': '⭐',
|
||||
'Ally': '🤝',
|
||||
'Enemy': '⚔️',
|
||||
'Neutral': '⚖️'
|
||||
},
|
||||
customFields: [
|
||||
{ id: 'appearance', name: 'Appearance', enabled: true, description: 'Visible physical appearance (clothing, hair, notable features)' },
|
||||
{ id: 'demeanor', name: 'Demeanor', enabled: true, description: 'Observable demeanor or emotional state' }
|
||||
],
|
||||
thoughts: {
|
||||
enabled: true,
|
||||
name: 'Thoughts',
|
||||
description: 'Internal monologue (in first person POV, up to three sentences long)'
|
||||
},
|
||||
characterStats: {
|
||||
enabled: false,
|
||||
customStats: [
|
||||
{ id: 'health', name: 'Health', enabled: true, colorLow: '#ff4444', colorHigh: '#44ff44' },
|
||||
{ id: 'energy', name: 'Energy', enabled: true, colorLow: '#ffaa00', colorHigh: '#44ffff' }
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the editor UI based on current config
|
||||
*/
|
||||
function renderEditorUI() {
|
||||
renderUserStatsTab();
|
||||
renderInfoBoxTab();
|
||||
renderPresentCharactersTab();
|
||||
}
|
||||
|
||||
/**
|
||||
* Render User Stats configuration tab
|
||||
*/
|
||||
function renderUserStatsTab() {
|
||||
const config = extensionSettings.trackerConfig.userStats;
|
||||
let html = '<div class="rpg-editor-section">';
|
||||
|
||||
// Custom Stats section
|
||||
html += '<h4><i class="fa-solid fa-heart-pulse"></i> Custom Stats</h4>';
|
||||
html += '<div class="rpg-editor-stats-list" id="rpg-editor-stats-list">';
|
||||
|
||||
config.customStats.forEach((stat, index) => {
|
||||
html += `
|
||||
<div class="rpg-editor-stat-item" data-index="${index}">
|
||||
<input type="checkbox" ${stat.enabled ? 'checked' : ''} class="rpg-stat-toggle" data-index="${index}">
|
||||
<input type="text" value="${stat.name}" class="rpg-stat-name" data-index="${index}" placeholder="Stat Name">
|
||||
<button class="rpg-stat-remove" data-index="${index}" title="Remove stat"><i class="fa-solid fa-trash"></i></button>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
html += '</div>';
|
||||
html += '<button class="rpg-btn-secondary" id="rpg-add-stat"><i class="fa-solid fa-plus"></i> Add Custom Stat</button>';
|
||||
|
||||
// RPG Attributes toggle
|
||||
html += '<div class="rpg-editor-toggle-row">';
|
||||
html += `<input type="checkbox" id="rpg-show-rpg-attrs" ${config.showRPGAttributes ? 'checked' : ''}>`;
|
||||
html += '<label for="rpg-show-rpg-attrs">Show RPG Attributes (STR, DEX, etc.)</label>';
|
||||
html += '</div>';
|
||||
|
||||
// Status Section
|
||||
html += '<h4><i class="fa-solid fa-face-smile"></i> Status Section</h4>';
|
||||
html += '<div class="rpg-editor-toggle-row">';
|
||||
html += `<input type="checkbox" id="rpg-status-enabled" ${config.statusSection.enabled ? 'checked' : ''}>`;
|
||||
html += '<label for="rpg-status-enabled">Enable Status Section</label>';
|
||||
html += '</div>';
|
||||
|
||||
html += '<div class="rpg-editor-toggle-row">';
|
||||
html += `<input type="checkbox" id="rpg-mood-emoji" ${config.statusSection.showMoodEmoji ? 'checked' : ''}>`;
|
||||
html += '<label for="rpg-mood-emoji">Show Mood Emoji</label>';
|
||||
html += '</div>';
|
||||
|
||||
html += '<label>Status Fields (comma-separated):</label>';
|
||||
html += `<input type="text" id="rpg-status-fields" value="${config.statusSection.customFields.join(', ')}" class="rpg-text-input" placeholder="e.g., Conditions, Appearance">`;
|
||||
|
||||
// Skills Section
|
||||
html += '<h4><i class="fa-solid fa-star"></i> Skills Section</h4>';
|
||||
html += '<div class="rpg-editor-toggle-row">';
|
||||
html += `<input type="checkbox" id="rpg-skills-enabled" ${config.skillsSection.enabled ? 'checked' : ''}>`;
|
||||
html += '<label for="rpg-skills-enabled">Enable Skills Section</label>';
|
||||
html += '</div>';
|
||||
|
||||
html += '<label>Skills Label:</label>';
|
||||
html += `<input type="text" id="rpg-skills-label" value="${config.skillsSection.label}" class="rpg-text-input" placeholder="Skills">`;
|
||||
|
||||
html += '</div>';
|
||||
|
||||
$('#rpg-editor-tab-userStats').html(html);
|
||||
setupUserStatsListeners();
|
||||
}
|
||||
|
||||
/**
|
||||
* Set up event listeners for User Stats tab
|
||||
*/
|
||||
function setupUserStatsListeners() {
|
||||
// Add stat
|
||||
$('#rpg-add-stat').off('click').on('click', function() {
|
||||
const newId = 'custom_' + Date.now();
|
||||
extensionSettings.trackerConfig.userStats.customStats.push({
|
||||
id: newId,
|
||||
name: 'New Stat',
|
||||
enabled: true
|
||||
});
|
||||
// Initialize value if doesn't exist
|
||||
if (extensionSettings.userStats[newId] === undefined) {
|
||||
extensionSettings.userStats[newId] = 100;
|
||||
}
|
||||
renderUserStatsTab();
|
||||
});
|
||||
|
||||
// Remove stat
|
||||
$('.rpg-stat-remove').off('click').on('click', function() {
|
||||
const index = $(this).data('index');
|
||||
extensionSettings.trackerConfig.userStats.customStats.splice(index, 1);
|
||||
renderUserStatsTab();
|
||||
});
|
||||
|
||||
// Toggle stat
|
||||
$('.rpg-stat-toggle').off('change').on('change', function() {
|
||||
const index = $(this).data('index');
|
||||
extensionSettings.trackerConfig.userStats.customStats[index].enabled = $(this).is(':checked');
|
||||
});
|
||||
|
||||
// Rename stat
|
||||
$('.rpg-stat-name').off('blur').on('blur', function() {
|
||||
const index = $(this).data('index');
|
||||
extensionSettings.trackerConfig.userStats.customStats[index].name = $(this).val();
|
||||
});
|
||||
|
||||
// RPG attributes toggle
|
||||
$('#rpg-show-rpg-attrs').off('change').on('change', function() {
|
||||
extensionSettings.trackerConfig.userStats.showRPGAttributes = $(this).is(':checked');
|
||||
});
|
||||
|
||||
// Status section toggles
|
||||
$('#rpg-status-enabled').off('change').on('change', function() {
|
||||
extensionSettings.trackerConfig.userStats.statusSection.enabled = $(this).is(':checked');
|
||||
});
|
||||
|
||||
$('#rpg-mood-emoji').off('change').on('change', function() {
|
||||
extensionSettings.trackerConfig.userStats.statusSection.showMoodEmoji = $(this).is(':checked');
|
||||
});
|
||||
|
||||
$('#rpg-status-fields').off('blur').on('blur', function() {
|
||||
const fields = $(this).val().split(',').map(f => f.trim()).filter(f => f);
|
||||
extensionSettings.trackerConfig.userStats.statusSection.customFields = fields;
|
||||
});
|
||||
|
||||
// Skills section toggles
|
||||
$('#rpg-skills-enabled').off('change').on('change', function() {
|
||||
extensionSettings.trackerConfig.userStats.skillsSection.enabled = $(this).is(':checked');
|
||||
});
|
||||
|
||||
$('#rpg-skills-label').off('blur').on('blur', function() {
|
||||
extensionSettings.trackerConfig.userStats.skillsSection.label = $(this).val();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Render Info Box configuration tab
|
||||
*/
|
||||
function renderInfoBoxTab() {
|
||||
const config = extensionSettings.trackerConfig.infoBox;
|
||||
let html = '<div class="rpg-editor-section">';
|
||||
|
||||
html += '<h4><i class="fa-solid fa-info-circle"></i> Widgets</h4>';
|
||||
|
||||
// Date widget
|
||||
html += '<div class="rpg-editor-widget-row">';
|
||||
html += `<input type="checkbox" id="rpg-widget-date" ${config.widgets.date.enabled ? 'checked' : ''}>`;
|
||||
html += '<label for="rpg-widget-date">Date</label>';
|
||||
html += '<select id="rpg-date-format" class="rpg-select-mini">';
|
||||
html += `<option value="Weekday, Month, Year" ${config.widgets.date.format === 'Weekday, Month, Year' ? 'selected' : ''}>Weekday, Month, Year</option>`;
|
||||
html += `<option value="dd/mm/yyyy" ${config.widgets.date.format === 'dd/mm/yyyy' ? 'selected' : ''}>dd/mm/yyyy</option>`;
|
||||
html += `<option value="mm/dd/yyyy" ${config.widgets.date.format === 'mm/dd/yyyy' ? 'selected' : ''}>mm/dd/yyyy</option>`;
|
||||
html += `<option value="yyyy-mm-dd" ${config.widgets.date.format === 'yyyy-mm-dd' ? 'selected' : ''}>yyyy-mm-dd</option>`;
|
||||
html += '</select>';
|
||||
html += '</div>';
|
||||
|
||||
// Weather widget
|
||||
html += '<div class="rpg-editor-widget-row">';
|
||||
html += `<input type="checkbox" id="rpg-widget-weather" ${config.widgets.weather.enabled ? 'checked' : ''}>`;
|
||||
html += '<label for="rpg-widget-weather">Weather</label>';
|
||||
html += '</div>';
|
||||
|
||||
// Temperature widget
|
||||
html += '<div class="rpg-editor-widget-row">';
|
||||
html += `<input type="checkbox" id="rpg-widget-temperature" ${config.widgets.temperature.enabled ? 'checked' : ''}>`;
|
||||
html += '<label for="rpg-widget-temperature">Temperature</label>';
|
||||
html += '<div class="rpg-radio-group">';
|
||||
html += `<label><input type="radio" name="temp-unit" value="C" ${config.widgets.temperature.unit === 'C' ? 'checked' : ''}> °C</label>`;
|
||||
html += `<label><input type="radio" name="temp-unit" value="F" ${config.widgets.temperature.unit === 'F' ? 'checked' : ''}> °F</label>`;
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
|
||||
// Time widget
|
||||
html += '<div class="rpg-editor-widget-row">';
|
||||
html += `<input type="checkbox" id="rpg-widget-time" ${config.widgets.time.enabled ? 'checked' : ''}>`;
|
||||
html += '<label for="rpg-widget-time">Time</label>';
|
||||
html += '</div>';
|
||||
|
||||
// Location widget
|
||||
html += '<div class="rpg-editor-widget-row">';
|
||||
html += `<input type="checkbox" id="rpg-widget-location" ${config.widgets.location.enabled ? 'checked' : ''}>`;
|
||||
html += '<label for="rpg-widget-location">Location</label>';
|
||||
html += '</div>';
|
||||
|
||||
// Recent Events widget
|
||||
html += '<div class="rpg-editor-widget-row">';
|
||||
html += `<input type="checkbox" id="rpg-widget-events" ${config.widgets.recentEvents.enabled ? 'checked' : ''}>`;
|
||||
html += '<label for="rpg-widget-events">Recent Events</label>';
|
||||
html += '</div>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
$('#rpg-editor-tab-infoBox').html(html);
|
||||
setupInfoBoxListeners();
|
||||
}
|
||||
|
||||
/**
|
||||
* Set up event listeners for Info Box tab
|
||||
*/
|
||||
function setupInfoBoxListeners() {
|
||||
const widgets = extensionSettings.trackerConfig.infoBox.widgets;
|
||||
|
||||
$('#rpg-widget-date').off('change').on('change', function() {
|
||||
widgets.date.enabled = $(this).is(':checked');
|
||||
});
|
||||
|
||||
$('#rpg-date-format').off('change').on('change', function() {
|
||||
widgets.date.format = $(this).val();
|
||||
});
|
||||
|
||||
$('#rpg-widget-weather').off('change').on('change', function() {
|
||||
widgets.weather.enabled = $(this).is(':checked');
|
||||
});
|
||||
|
||||
$('#rpg-widget-temperature').off('change').on('change', function() {
|
||||
widgets.temperature.enabled = $(this).is(':checked');
|
||||
});
|
||||
|
||||
$('input[name="temp-unit"]').off('change').on('change', function() {
|
||||
widgets.temperature.unit = $(this).val();
|
||||
});
|
||||
|
||||
$('#rpg-widget-time').off('change').on('change', function() {
|
||||
widgets.time.enabled = $(this).is(':checked');
|
||||
});
|
||||
|
||||
$('#rpg-widget-location').off('change').on('change', function() {
|
||||
widgets.location.enabled = $(this).is(':checked');
|
||||
});
|
||||
|
||||
$('#rpg-widget-events').off('change').on('change', function() {
|
||||
widgets.recentEvents.enabled = $(this).is(':checked');
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Render Present Characters configuration tab
|
||||
*/
|
||||
function renderPresentCharactersTab() {
|
||||
const config = extensionSettings.trackerConfig.presentCharacters;
|
||||
let html = '<div class="rpg-editor-section">';
|
||||
|
||||
// Relationship Fields Section
|
||||
html += '<h4><i class="fa-solid fa-heart"></i> Relationship Status Fields</h4>';
|
||||
html += '<p class="rpg-editor-hint">Define relationship types with corresponding emojis shown on character portraits</p>';
|
||||
|
||||
html += '<div class="rpg-relationship-mapping-list" id="rpg-relationship-mapping-list">';
|
||||
// Show existing relationships as field → emoji pairs
|
||||
const relationshipEmojis = config.relationshipEmojis || {
|
||||
'Lover': '❤️',
|
||||
'Friend': '⭐',
|
||||
'Ally': '🤝',
|
||||
'Enemy': '⚔️',
|
||||
'Neutral': '⚖️'
|
||||
};
|
||||
|
||||
for (const [relationship, emoji] of Object.entries(relationshipEmojis)) {
|
||||
html += `
|
||||
<div class="rpg-relationship-item">
|
||||
<input type="text" value="${relationship}" class="rpg-relationship-name" placeholder="Relationship type">
|
||||
<span class="rpg-arrow">→</span>
|
||||
<input type="text" value="${emoji}" class="rpg-relationship-emoji" placeholder="Emoji" maxlength="4">
|
||||
<button class="rpg-field-remove rpg-remove-relationship" data-relationship="${relationship}" title="Remove"><i class="fa-solid fa-trash"></i></button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
html += '</div>';
|
||||
html += '<button class="rpg-btn-secondary" id="rpg-add-relationship"><i class="fa-solid fa-plus"></i> New Relationship</button>';
|
||||
|
||||
// Custom Fields Section
|
||||
html += '<h4><i class="fa-solid fa-list"></i> Appearance/Demeanor Fields</h4>';
|
||||
html += '<p class="rpg-editor-hint">Fields shown below character name, separated by |</p>';
|
||||
|
||||
html += '<div class="rpg-editor-fields-list" id="rpg-editor-fields-list">';
|
||||
|
||||
config.customFields.forEach((field, index) => {
|
||||
html += `
|
||||
<div class="rpg-editor-field-item" data-index="${index}">
|
||||
<div class="rpg-field-controls">
|
||||
<button class="rpg-field-move-up" data-index="${index}" ${index === 0 ? 'disabled' : ''} title="Move up"><i class="fa-solid fa-arrow-up"></i></button>
|
||||
<button class="rpg-field-move-down" data-index="${index}" ${index === config.customFields.length - 1 ? 'disabled' : ''} title="Move down"><i class="fa-solid fa-arrow-down"></i></button>
|
||||
</div>
|
||||
<input type="checkbox" ${field.enabled ? 'checked' : ''} class="rpg-field-toggle" data-index="${index}">
|
||||
<input type="text" value="${field.name}" class="rpg-field-label" data-index="${index}" placeholder="Field Name">
|
||||
<input type="text" value="${field.description || ''}" class="rpg-field-placeholder" data-index="${index}" placeholder="AI Instruction">
|
||||
<button class="rpg-field-remove" data-index="${index}" title="Remove field"><i class="fa-solid fa-trash"></i></button>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
html += '</div>';
|
||||
html += '<button class="rpg-btn-secondary" id="rpg-add-field"><i class="fa-solid fa-plus"></i> Add Custom Field</button>';
|
||||
|
||||
// Thoughts Section
|
||||
html += '<h4><i class="fa-solid fa-comment-dots"></i> Thoughts Configuration</h4>';
|
||||
html += '<div class="rpg-editor-toggle-row">';
|
||||
html += `<input type="checkbox" id="rpg-thoughts-enabled" ${config.thoughts?.enabled ? 'checked' : ''}>`;
|
||||
html += '<label for="rpg-thoughts-enabled">Enable Character Thoughts</label>';
|
||||
html += '</div>';
|
||||
|
||||
html += '<div class="rpg-thoughts-config">';
|
||||
html += '<div class="rpg-editor-input-group">';
|
||||
html += '<label>Thoughts Label:</label>';
|
||||
html += `<input type="text" id="rpg-thoughts-name" value="${config.thoughts?.name || 'Thoughts'}" placeholder="e.g., Thoughts, Inner Voice, Feelings">`;
|
||||
html += '</div>';
|
||||
html += '<div class="rpg-editor-input-group">';
|
||||
html += '<label>AI Instruction:</label>';
|
||||
html += `<input type="text" id="rpg-thoughts-description" value="${config.thoughts?.description || 'Internal monologue (in first person POV, up to three sentences long)'}" placeholder="Description of what to generate">`;
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
|
||||
// Character Stats
|
||||
html += '<h4><i class="fa-solid fa-chart-bar"></i> Character Stats</h4>';
|
||||
html += '<div class="rpg-editor-toggle-row">';
|
||||
html += `<input type="checkbox" id="rpg-char-stats-enabled" ${config.characterStats?.enabled ? 'checked' : ''}>`;
|
||||
html += '<label for="rpg-char-stats-enabled">Track Character Stats</label>';
|
||||
html += '</div>';
|
||||
|
||||
html += '<p class="rpg-editor-hint">Create stats to track for each character (displayed as colored bars)</p>';
|
||||
html += '<div class="rpg-editor-fields-list" id="rpg-char-stats-list">';
|
||||
|
||||
const charStats = config.characterStats?.customStats || [];
|
||||
charStats.forEach((stat, index) => {
|
||||
html += `
|
||||
<div class="rpg-editor-field-item" data-index="${index}">
|
||||
<input type="checkbox" ${stat.enabled ? 'checked' : ''} class="rpg-char-stat-toggle" data-index="${index}">
|
||||
<input type="text" value="${stat.name}" class="rpg-char-stat-label" data-index="${index}" placeholder="Stat Name (e.g., Health)">
|
||||
<button class="rpg-field-remove rpg-char-stat-remove" data-index="${index}" title="Remove stat"><i class="fa-solid fa-trash"></i></button>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
html += '</div>';
|
||||
html += '<button class="rpg-btn-secondary" id="rpg-add-char-stat"><i class="fa-solid fa-plus"></i> Add Character Stat</button>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
$('#rpg-editor-tab-presentCharacters').html(html);
|
||||
setupPresentCharactersListeners();
|
||||
}
|
||||
|
||||
/**
|
||||
* Set up event listeners for Present Characters tab
|
||||
*/
|
||||
function setupPresentCharactersListeners() {
|
||||
// Add new relationship
|
||||
$('#rpg-add-relationship').off('click').on('click', function() {
|
||||
if (!extensionSettings.trackerConfig.presentCharacters.relationshipEmojis) {
|
||||
extensionSettings.trackerConfig.presentCharacters.relationshipEmojis = {};
|
||||
}
|
||||
extensionSettings.trackerConfig.presentCharacters.relationshipEmojis['New Relationship'] = '😊';
|
||||
|
||||
// Sync relationshipFields
|
||||
extensionSettings.trackerConfig.presentCharacters.relationshipFields =
|
||||
Object.keys(extensionSettings.trackerConfig.presentCharacters.relationshipEmojis);
|
||||
|
||||
renderPresentCharactersTab();
|
||||
});
|
||||
|
||||
// Remove relationship
|
||||
$('.rpg-remove-relationship').off('click').on('click', function() {
|
||||
const relationship = $(this).data('relationship');
|
||||
if (extensionSettings.trackerConfig.presentCharacters.relationshipEmojis) {
|
||||
delete extensionSettings.trackerConfig.presentCharacters.relationshipEmojis[relationship];
|
||||
}
|
||||
|
||||
// Sync relationshipFields
|
||||
extensionSettings.trackerConfig.presentCharacters.relationshipFields =
|
||||
Object.keys(extensionSettings.trackerConfig.presentCharacters.relationshipEmojis);
|
||||
|
||||
renderPresentCharactersTab();
|
||||
});
|
||||
|
||||
// Update relationship name
|
||||
$('.rpg-relationship-name').off('blur').on('blur', function() {
|
||||
const newName = $(this).val();
|
||||
const $item = $(this).closest('.rpg-relationship-item');
|
||||
const emoji = $item.find('.rpg-relationship-emoji').val();
|
||||
|
||||
// Find the old name by matching the emoji
|
||||
const oldName = Object.keys(extensionSettings.trackerConfig.presentCharacters.relationshipEmojis).find(
|
||||
key => extensionSettings.trackerConfig.presentCharacters.relationshipEmojis[key] === emoji &&
|
||||
key !== newName
|
||||
);
|
||||
|
||||
if (oldName && oldName !== newName) {
|
||||
delete extensionSettings.trackerConfig.presentCharacters.relationshipEmojis[oldName];
|
||||
extensionSettings.trackerConfig.presentCharacters.relationshipEmojis[newName] = emoji;
|
||||
|
||||
// Sync relationshipFields
|
||||
extensionSettings.trackerConfig.presentCharacters.relationshipFields =
|
||||
Object.keys(extensionSettings.trackerConfig.presentCharacters.relationshipEmojis);
|
||||
}
|
||||
});
|
||||
|
||||
// Update relationship emoji
|
||||
$('.rpg-relationship-emoji').off('blur').on('blur', function() {
|
||||
const name = $(this).closest('.rpg-relationship-item').find('.rpg-relationship-name').val();
|
||||
if (!extensionSettings.trackerConfig.presentCharacters.relationshipEmojis) {
|
||||
extensionSettings.trackerConfig.presentCharacters.relationshipEmojis = {};
|
||||
}
|
||||
extensionSettings.trackerConfig.presentCharacters.relationshipEmojis[name] = $(this).val();
|
||||
});
|
||||
|
||||
// Thoughts configuration
|
||||
$('#rpg-thoughts-enabled').off('change').on('change', function() {
|
||||
if (!extensionSettings.trackerConfig.presentCharacters.thoughts) {
|
||||
extensionSettings.trackerConfig.presentCharacters.thoughts = {};
|
||||
}
|
||||
extensionSettings.trackerConfig.presentCharacters.thoughts.enabled = $(this).is(':checked');
|
||||
});
|
||||
|
||||
$('#rpg-thoughts-name').off('blur').on('blur', function() {
|
||||
if (!extensionSettings.trackerConfig.presentCharacters.thoughts) {
|
||||
extensionSettings.trackerConfig.presentCharacters.thoughts = {};
|
||||
}
|
||||
extensionSettings.trackerConfig.presentCharacters.thoughts.name = $(this).val();
|
||||
});
|
||||
|
||||
$('#rpg-thoughts-description').off('blur').on('blur', function() {
|
||||
if (!extensionSettings.trackerConfig.presentCharacters.thoughts) {
|
||||
extensionSettings.trackerConfig.presentCharacters.thoughts = {};
|
||||
}
|
||||
extensionSettings.trackerConfig.presentCharacters.thoughts.description = $(this).val();
|
||||
});
|
||||
|
||||
// Add field
|
||||
$('#rpg-add-field').off('click').on('click', function() {
|
||||
extensionSettings.trackerConfig.presentCharacters.customFields.push({
|
||||
id: 'custom_' + Date.now(),
|
||||
name: 'New Field',
|
||||
enabled: true,
|
||||
description: 'Description for AI'
|
||||
});
|
||||
renderPresentCharactersTab();
|
||||
});
|
||||
|
||||
// Remove field
|
||||
$('.rpg-field-remove').off('click').on('click', function() {
|
||||
const index = $(this).data('index');
|
||||
extensionSettings.trackerConfig.presentCharacters.customFields.splice(index, 1);
|
||||
renderPresentCharactersTab();
|
||||
});
|
||||
|
||||
// Move field up
|
||||
$('.rpg-field-move-up').off('click').on('click', function() {
|
||||
const index = $(this).data('index');
|
||||
if (index > 0) {
|
||||
const fields = extensionSettings.trackerConfig.presentCharacters.customFields;
|
||||
[fields[index - 1], fields[index]] = [fields[index], fields[index - 1]];
|
||||
renderPresentCharactersTab();
|
||||
}
|
||||
});
|
||||
|
||||
// Move field down
|
||||
$('.rpg-field-move-down').off('click').on('click', function() {
|
||||
const index = $(this).data('index');
|
||||
const fields = extensionSettings.trackerConfig.presentCharacters.customFields;
|
||||
if (index < fields.length - 1) {
|
||||
[fields[index], fields[index + 1]] = [fields[index + 1], fields[index]];
|
||||
renderPresentCharactersTab();
|
||||
}
|
||||
});
|
||||
|
||||
// Toggle field
|
||||
$('.rpg-field-toggle').off('change').on('change', function() {
|
||||
const index = $(this).data('index');
|
||||
extensionSettings.trackerConfig.presentCharacters.customFields[index].enabled = $(this).is(':checked');
|
||||
});
|
||||
|
||||
// Rename field
|
||||
$('.rpg-field-label').off('blur').on('blur', function() {
|
||||
const index = $(this).data('index');
|
||||
extensionSettings.trackerConfig.presentCharacters.customFields[index].name = $(this).val();
|
||||
});
|
||||
|
||||
// Update description
|
||||
$('.rpg-field-placeholder').off('blur').on('blur', function() {
|
||||
const index = $(this).data('index');
|
||||
extensionSettings.trackerConfig.presentCharacters.customFields[index].description = $(this).val();
|
||||
});
|
||||
|
||||
// Character stats toggle
|
||||
$('#rpg-char-stats-enabled').off('change').on('change', function() {
|
||||
if (!extensionSettings.trackerConfig.presentCharacters.characterStats) {
|
||||
extensionSettings.trackerConfig.presentCharacters.characterStats = { enabled: false, customStats: [] };
|
||||
}
|
||||
extensionSettings.trackerConfig.presentCharacters.characterStats.enabled = $(this).is(':checked');
|
||||
});
|
||||
|
||||
// Add character stat
|
||||
$('#rpg-add-char-stat').off('click').on('click', function() {
|
||||
if (!extensionSettings.trackerConfig.presentCharacters.characterStats) {
|
||||
extensionSettings.trackerConfig.presentCharacters.characterStats = { enabled: false, customStats: [] };
|
||||
}
|
||||
if (!extensionSettings.trackerConfig.presentCharacters.characterStats.customStats) {
|
||||
extensionSettings.trackerConfig.presentCharacters.characterStats.customStats = [];
|
||||
}
|
||||
extensionSettings.trackerConfig.presentCharacters.characterStats.customStats.push({
|
||||
id: `stat-${Date.now()}`,
|
||||
name: 'New Stat',
|
||||
enabled: true
|
||||
});
|
||||
renderPresentCharactersTab();
|
||||
});
|
||||
|
||||
// Remove character stat
|
||||
$('.rpg-char-stat-remove').off('click').on('click', function() {
|
||||
const index = $(this).data('index');
|
||||
extensionSettings.trackerConfig.presentCharacters.characterStats.customStats.splice(index, 1);
|
||||
renderPresentCharactersTab();
|
||||
});
|
||||
|
||||
// Toggle character stat
|
||||
$('.rpg-char-stat-toggle').off('change').on('change', function() {
|
||||
const index = $(this).data('index');
|
||||
extensionSettings.trackerConfig.presentCharacters.characterStats.customStats[index].enabled = $(this).is(':checked');
|
||||
});
|
||||
|
||||
// Rename character stat
|
||||
$('.rpg-char-stat-label').off('blur').on('blur', function() {
|
||||
const index = $(this).data('index');
|
||||
extensionSettings.trackerConfig.presentCharacters.characterStats.customStats[index].name = $(this).val();
|
||||
});
|
||||
}
|
||||
@@ -19,7 +19,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
--rpg-accent: var(--black30a, rgba(22, 33, 62, 0.9));
|
||||
--rpg-text: var(--SmartThemeBodyColor, #eaeaea);
|
||||
--rpg-highlight: var(--SmartThemeQuoteColor, #e94560);
|
||||
--rpg-border: var(--SmartThemeBorderColor, #0f3460);
|
||||
--rpg-border: var(--SmartThemeBorderColor, #4a7ba7);
|
||||
--rpg-shadow: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
@@ -938,6 +938,34 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Skills Section */
|
||||
.rpg-skills-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375em;
|
||||
font-size: clamp(0.4vw, 0.5vw, 0.6vw);
|
||||
padding: clamp(4px, 0.6vh, 6px) 0.375em;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 0.25em;
|
||||
border: 1px solid var(--rpg-border);
|
||||
flex-shrink: 0;
|
||||
margin-top: 0.375em;
|
||||
}
|
||||
|
||||
.rpg-skills-label {
|
||||
font-weight: 700;
|
||||
color: var(--rpg-highlight);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.rpg-skills-value {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
line-height: 1.2;
|
||||
color: var(--rpg-text);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Classic RPG Stats - Will match height of stats box automatically */
|
||||
.rpg-classic-stats {
|
||||
display: flex;
|
||||
@@ -1185,7 +1213,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
.rpg-calendar-day {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: var(--rpg-text);
|
||||
font-size: clamp(0.8vw, 1vw, 1.2vw);
|
||||
font-size: clamp(0.5vw, 0.7vw, 0.85vw);
|
||||
font-weight: bold;
|
||||
padding: 0.25em;
|
||||
width: 100%;
|
||||
@@ -1196,6 +1224,10 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.rpg-calendar-year {
|
||||
@@ -1783,8 +1815,31 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
transition: all 0.2s ease;
|
||||
width: 100%; /* Ensure cards take full width */
|
||||
max-height: clamp(120px, 18vh, 200px);
|
||||
box-sizing: border-box; /* Include padding and border in width calculation */
|
||||
flex-shrink: 0; /* Prevent cards from shrinking */
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--rpg-border) transparent;
|
||||
}
|
||||
|
||||
.rpg-character-card::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.rpg-character-card::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.rpg-character-card::-webkit-scrollbar-thumb {
|
||||
background: var(--rpg-border);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.rpg-character-card::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--rpg-highlight);
|
||||
}
|
||||
|
||||
.rpg-character-card:hover {
|
||||
@@ -1825,9 +1880,15 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
}
|
||||
|
||||
/* Character info section */
|
||||
.rpg-character-info {
|
||||
.rpg-character-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.rpg-character-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: clamp(3px, 0.5vh, 5px);
|
||||
@@ -1858,8 +1919,9 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* Character traits/status line */
|
||||
.rpg-character-traits {
|
||||
/* Character traits/status line and custom fields */
|
||||
.rpg-character-traits,
|
||||
.rpg-character-field {
|
||||
font-size: clamp(0.6vw, 0.7vw, 0.8vw);
|
||||
color: var(--rpg-text);
|
||||
opacity: 0.8;
|
||||
@@ -1868,6 +1930,69 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/* Placeholder for empty editable character fields */
|
||||
.rpg-character-field.rpg-editable:empty::before {
|
||||
content: 'Click to edit...';
|
||||
color: var(--rpg-highlight);
|
||||
opacity: 0.5;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Character stats display */
|
||||
.rpg-character-stats {
|
||||
width: 100%;
|
||||
max-height: clamp(50px, 7vh, 70px);
|
||||
margin-top: clamp(3px, 0.5vh, 5px);
|
||||
padding: clamp(3px, 0.4vh, 5px) clamp(4px, 0.5vw, 6px);
|
||||
background: var(--rpg-bg);
|
||||
border: 1px solid var(--rpg-border);
|
||||
border-radius: clamp(2px, 0.3vh, 4px);
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--rpg-border) transparent;
|
||||
}
|
||||
|
||||
.rpg-character-stats::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.rpg-character-stats::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.rpg-character-stats::-webkit-scrollbar-thumb {
|
||||
background: var(--rpg-border);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.rpg-character-stats::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--rpg-highlight);
|
||||
}
|
||||
|
||||
.rpg-character-stats-inner {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: clamp(6px, 1vw, 12px);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.rpg-character-stat {
|
||||
flex-shrink: 0;
|
||||
font-size: clamp(0.5vw, 0.6vw, 0.7vw) !important;
|
||||
font-weight: 600 !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
.rpg-character-stat .rpg-stat-label {
|
||||
color: var(--rpg-text) !important;
|
||||
}
|
||||
|
||||
.rpg-character-stat .rpg-stat-value {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
/* Placeholder styles for empty sections */
|
||||
.rpg-thoughts-placeholder,
|
||||
.rpg-placeholder-widget {
|
||||
@@ -3437,6 +3562,433 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Settings buttons row (Edit Trackers + Settings side by side) */
|
||||
.rpg-settings-buttons-row {
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.rpg-btn-half {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
TRACKER EDITOR MODAL
|
||||
============================================ */
|
||||
|
||||
/* Editor tabs */
|
||||
.rpg-editor-tabs {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
border-bottom: 2px solid var(--rpg-border);
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.rpg-editor-tab {
|
||||
flex: 1;
|
||||
padding: 0.75em 1em;
|
||||
background: var(--rpg-accent);
|
||||
border: none;
|
||||
border-bottom: 3px solid transparent;
|
||||
color: var(--rpg-text);
|
||||
font-size: 0.9em;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
.rpg-editor-tab:hover {
|
||||
background: var(--rpg-bg);
|
||||
}
|
||||
|
||||
.rpg-editor-tab.active {
|
||||
background: var(--rpg-bg);
|
||||
border-bottom-color: var(--rpg-highlight);
|
||||
}
|
||||
|
||||
.rpg-editor-tab-content {
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.rpg-editor-section {
|
||||
padding: 1em 0;
|
||||
}
|
||||
|
||||
.rpg-editor-section h4 {
|
||||
color: var(--rpg-highlight);
|
||||
margin: 1em 0 0.5em 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
.rpg-editor-section h4:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.rpg-editor-hint {
|
||||
font-size: 0.9em;
|
||||
color: var(--rpg-text);
|
||||
opacity: 0.7;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
/* Stats list */
|
||||
.rpg-editor-stats-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.rpg-editor-stat-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5em;
|
||||
padding: 0.5em;
|
||||
background: var(--rpg-accent);
|
||||
border: 1px solid var(--rpg-border);
|
||||
border-radius: 0.375em;
|
||||
}
|
||||
|
||||
.rpg-stat-toggle {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.rpg-stat-name {
|
||||
flex: 1;
|
||||
padding: 0.375em 0.5em;
|
||||
background: var(--rpg-bg);
|
||||
border: 1px solid var(--rpg-border);
|
||||
border-radius: 0.25em;
|
||||
color: var(--rpg-text);
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
.rpg-stat-remove {
|
||||
flex-shrink: 0;
|
||||
padding: 0.375em 0.625em;
|
||||
background: var(--rpg-highlight);
|
||||
border: none;
|
||||
border-radius: 0.25em;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.rpg-stat-remove:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Toggle rows */
|
||||
.rpg-editor-toggle-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5em;
|
||||
margin: 0.75em 0;
|
||||
}
|
||||
|
||||
.rpg-editor-toggle-row input[type="checkbox"] {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.rpg-editor-toggle-row label {
|
||||
flex: 1;
|
||||
color: var(--rpg-text);
|
||||
}
|
||||
|
||||
/* Text inputs */
|
||||
.rpg-text-input {
|
||||
width: 100%;
|
||||
padding: 0.5em;
|
||||
background: var(--rpg-bg);
|
||||
border: 1px solid var(--rpg-border);
|
||||
border-radius: 0.375em;
|
||||
color: var(--rpg-text);
|
||||
font-size: 0.95em;
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
|
||||
/* Widget rows */
|
||||
.rpg-editor-widget-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75em;
|
||||
padding: 0.625em;
|
||||
background: var(--rpg-accent);
|
||||
border: 1px solid var(--rpg-border);
|
||||
border-radius: 0.375em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.rpg-editor-widget-row input[type="checkbox"] {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.rpg-editor-widget-row label {
|
||||
flex: 1;
|
||||
color: var(--rpg-text);
|
||||
}
|
||||
|
||||
.rpg-select-mini {
|
||||
padding: 0.375em 0.5em;
|
||||
background: var(--rpg-bg);
|
||||
border: 1px solid var(--rpg-border);
|
||||
border-radius: 0.25em;
|
||||
color: var(--rpg-text);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.rpg-radio-group {
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
.rpg-radio-group label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375em;
|
||||
color: var(--rpg-text);
|
||||
}
|
||||
|
||||
/* Character fields list */
|
||||
.rpg-editor-fields-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
/* Relationship Mapping Styles */
|
||||
.rpg-relationship-mapping-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.rpg-relationship-item {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 80px auto;
|
||||
align-items: center;
|
||||
gap: 0.75em;
|
||||
padding: 0.5em;
|
||||
background: var(--rpg-accent);
|
||||
border: 1px solid var(--rpg-border);
|
||||
border-radius: 0.375em;
|
||||
}
|
||||
|
||||
.rpg-relationship-name,
|
||||
.rpg-relationship-emoji {
|
||||
padding: 0.375em 0.5em;
|
||||
background: var(--rpg-bg);
|
||||
border: 1px solid var(--rpg-border);
|
||||
border-radius: 0.25em;
|
||||
color: var(--rpg-text);
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
.rpg-relationship-emoji {
|
||||
text-align: center;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.rpg-arrow {
|
||||
color: var(--rpg-highlight);
|
||||
font-weight: bold;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
/* Thoughts Configuration Input Groups */
|
||||
.rpg-thoughts-config {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1em;
|
||||
margin-top: 0.75em;
|
||||
}
|
||||
|
||||
.rpg-editor-input-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.375em;
|
||||
}
|
||||
|
||||
.rpg-editor-input-group label {
|
||||
font-size: 0.9em;
|
||||
color: var(--rpg-text);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.rpg-editor-input-group input[type="text"] {
|
||||
width: 100%;
|
||||
padding: 0.5em;
|
||||
background: var(--rpg-accent);
|
||||
border: 1px solid var(--rpg-border);
|
||||
border-radius: 0.25em;
|
||||
color: var(--rpg-text);
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
.rpg-editor-field-item {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto 1fr 2fr auto;
|
||||
align-items: center;
|
||||
gap: 0.5em;
|
||||
padding: 0.5em;
|
||||
background: var(--rpg-accent);
|
||||
border: 1px solid var(--rpg-border);
|
||||
border-radius: 0.375em;
|
||||
}
|
||||
|
||||
.rpg-field-controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25em;
|
||||
}
|
||||
|
||||
.rpg-field-move-up,
|
||||
.rpg-field-move-down {
|
||||
padding: 0.125em 0.375em;
|
||||
background: var(--rpg-bg);
|
||||
border: 1px solid var(--rpg-border);
|
||||
border-radius: 0.25em;
|
||||
color: var(--rpg-text);
|
||||
cursor: pointer;
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
.rpg-field-move-up:disabled,
|
||||
.rpg-field-move-down:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.rpg-field-toggle {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.rpg-field-label,
|
||||
.rpg-char-stat-label,
|
||||
.rpg-field-placeholder {
|
||||
padding: 0.375em 0.5em;
|
||||
background: var(--rpg-bg);
|
||||
border: 1px solid var(--rpg-border);
|
||||
border-radius: 0.25em;
|
||||
color: var(--rpg-text);
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
.rpg-field-remove {
|
||||
flex-shrink: 0;
|
||||
padding: 0.375em 0.625em;
|
||||
background: var(--rpg-highlight);
|
||||
border: none;
|
||||
border-radius: 0.25em;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.rpg-field-remove:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Character stats checkboxes */
|
||||
.rpg-char-stats-checkboxes {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1em;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
.rpg-char-stats-checkboxes label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375em;
|
||||
color: var(--rpg-text);
|
||||
}
|
||||
|
||||
/* Footer buttons */
|
||||
.rpg-settings-popup-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1em;
|
||||
border-top: 2px solid var(--rpg-border);
|
||||
gap: 1em;
|
||||
background: var(--rpg-accent);
|
||||
}
|
||||
|
||||
.rpg-footer-right {
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
/* Editor buttons */
|
||||
.rpg-btn-primary,
|
||||
.rpg-btn-secondary,
|
||||
.rpg-btn-cancel,
|
||||
.rpg-btn-reset {
|
||||
padding: 0.625em 1.25em;
|
||||
border: 1px solid var(--rpg-border);
|
||||
border-radius: 0.375em;
|
||||
cursor: pointer;
|
||||
font-size: 0.95em;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.rpg-btn-primary {
|
||||
background: var(--rpg-highlight);
|
||||
color: white;
|
||||
border-color: var(--rpg-highlight);
|
||||
}
|
||||
|
||||
.rpg-btn-primary:hover {
|
||||
opacity: 0.9;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.rpg-btn-secondary {
|
||||
background: var(--rpg-bg);
|
||||
color: var(--rpg-text);
|
||||
border-color: var(--rpg-border);
|
||||
}
|
||||
|
||||
.rpg-btn-secondary:hover {
|
||||
background: var(--rpg-accent);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.rpg-btn-cancel {
|
||||
background: var(--rpg-accent);
|
||||
color: var(--rpg-text);
|
||||
border-color: var(--rpg-border);
|
||||
}
|
||||
|
||||
.rpg-btn-cancel:hover {
|
||||
background: var(--rpg-bg);
|
||||
}
|
||||
|
||||
.rpg-btn-reset {
|
||||
background: transparent;
|
||||
color: var(--rpg-text);
|
||||
border-color: var(--rpg-border);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.rpg-btn-reset:hover {
|
||||
opacity: 1;
|
||||
background: var(--rpg-accent);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
SETTINGS MODAL - MOBILE FIRST
|
||||
============================================ */
|
||||
@@ -3561,6 +4113,8 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* Settings Groups */
|
||||
@@ -3584,13 +4138,24 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Theme Support */
|
||||
/* Theme Support - Default Theme (no data-theme attribute) */
|
||||
.rpg-settings-popup-content {
|
||||
--rpg-bg: var(--SmartThemeBlurTintColor, rgba(26, 26, 46, 0.9));
|
||||
--rpg-accent: var(--black30a, rgba(22, 33, 62, 0.9));
|
||||
--rpg-text: var(--SmartThemeBodyColor, #eaeaea);
|
||||
--rpg-highlight: var(--SmartThemeQuoteColor, #e94560);
|
||||
--rpg-border: #6b9fd4;
|
||||
}
|
||||
|
||||
/* Theme Support - Settings Modal */
|
||||
#rpg-settings-popup[data-theme="sci-fi"] .rpg-settings-popup-content {
|
||||
--rpg-bg: #0a0e27;
|
||||
--rpg-accent: #1a1f3a;
|
||||
--rpg-text: #00ffff;
|
||||
--rpg-highlight: #ff00ff;
|
||||
--rpg-border: #00ffff;
|
||||
background: rgba(10, 14, 39, 0.95);
|
||||
color: #00ffff;
|
||||
}
|
||||
|
||||
#rpg-settings-popup[data-theme="fantasy"] .rpg-settings-popup-content {
|
||||
@@ -3599,6 +4164,8 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
--rpg-text: #f4e4c1;
|
||||
--rpg-highlight: #d4af37;
|
||||
--rpg-border: #8b6914;
|
||||
background: rgba(43, 24, 16, 0.95);
|
||||
color: #f4e4c1;
|
||||
}
|
||||
|
||||
#rpg-settings-popup[data-theme="cyberpunk"] .rpg-settings-popup-content {
|
||||
@@ -3607,6 +4174,39 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
--rpg-text: #00ff9f;
|
||||
--rpg-highlight: #ff00ff;
|
||||
--rpg-border: #ff00ff;
|
||||
background: rgba(13, 2, 33, 0.95);
|
||||
color: #00ff9f;
|
||||
}
|
||||
|
||||
/* Theme Support - Tracker Editor Modal */
|
||||
#rpg-tracker-editor-popup[data-theme="sci-fi"] .rpg-settings-popup-content {
|
||||
--rpg-bg: #0a0e27;
|
||||
--rpg-accent: #1a1f3a;
|
||||
--rpg-text: #00ffff;
|
||||
--rpg-highlight: #ff00ff;
|
||||
--rpg-border: #00ffff;
|
||||
background: rgba(10, 14, 39, 0.95);
|
||||
color: #00ffff;
|
||||
}
|
||||
|
||||
#rpg-tracker-editor-popup[data-theme="fantasy"] .rpg-settings-popup-content {
|
||||
--rpg-bg: #2b1810;
|
||||
--rpg-accent: #3d2516;
|
||||
--rpg-text: #f4e4c1;
|
||||
--rpg-highlight: #d4af37;
|
||||
--rpg-border: #8b6914;
|
||||
background: rgba(43, 24, 16, 0.95);
|
||||
color: #f4e4c1;
|
||||
}
|
||||
|
||||
#rpg-tracker-editor-popup[data-theme="cyberpunk"] .rpg-settings-popup-content {
|
||||
--rpg-bg: #0d0221;
|
||||
--rpg-accent: #1a0b2e;
|
||||
--rpg-text: #00ff9f;
|
||||
--rpg-highlight: #ff00ff;
|
||||
--rpg-border: #ff00ff;
|
||||
background: rgba(13, 2, 33, 0.95);
|
||||
color: #00ff9f;
|
||||
}
|
||||
|
||||
/* Desktop Enhancement (1001px+) */
|
||||
@@ -4167,6 +4767,8 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
margin: -12px -12px 16px -12px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
/* Tab container at top of panel */
|
||||
@@ -4309,7 +4911,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
}
|
||||
|
||||
.rpg-calendar-day {
|
||||
font-size: clamp(11px, 2.9vw, 14px) !important;
|
||||
font-size: clamp(10px, 2.9vw, 14px) !important;
|
||||
}
|
||||
|
||||
.rpg-calendar-year {
|
||||
@@ -4611,8 +5213,9 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
font-size: clamp(12px, 3.1vw, 16px) !important;
|
||||
}
|
||||
|
||||
/* Readable character traits on mobile */
|
||||
.rpg-character-traits {
|
||||
/* Readable character traits and custom fields on mobile */
|
||||
.rpg-character-traits,
|
||||
.rpg-character-field {
|
||||
font-size: clamp(11px, 2.8vw, 14px) !important;
|
||||
}
|
||||
|
||||
|
||||
+52
-2
@@ -73,12 +73,17 @@
|
||||
<i class="fa-solid fa-sync"></i> Refresh RPG Info
|
||||
</button>
|
||||
|
||||
<!-- Settings Button -->
|
||||
<button id="rpg-open-settings" class="rpg-btn-settings">
|
||||
<!-- Settings and Edit Trackers Buttons Row -->
|
||||
<div class="rpg-settings-buttons-row">
|
||||
<button id="rpg-open-tracker-editor" class="rpg-btn-settings rpg-btn-half">
|
||||
<i class="fa-solid fa-sliders"></i> Edit Trackers
|
||||
</button>
|
||||
<button id="rpg-open-settings" class="rpg-btn-settings rpg-btn-half">
|
||||
<i class="fa-solid fa-gear"></i> Settings
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Settings Modal -->
|
||||
@@ -321,3 +326,48 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tracker Editor Modal -->
|
||||
<div id="rpg-tracker-editor-popup" class="rpg-settings-popup" role="dialog" aria-modal="true" aria-labelledby="rpg-editor-title" style="display: none;">
|
||||
<div class="rpg-settings-popup-content">
|
||||
<header class="rpg-settings-popup-header">
|
||||
<h3 id="rpg-editor-title">
|
||||
<i class="fa-solid fa-sliders" aria-hidden="true"></i>
|
||||
<span>Edit Trackers</span>
|
||||
</h3>
|
||||
<button id="rpg-close-tracker-editor" class="rpg-popup-close" type="button" aria-label="Close tracker editor">×</button>
|
||||
</header>
|
||||
|
||||
<!-- Tabs -->
|
||||
<div class="rpg-editor-tabs">
|
||||
<button class="rpg-editor-tab active" data-tab="userStats">
|
||||
<i class="fa-solid fa-heart-pulse"></i> User Stats
|
||||
</button>
|
||||
<button class="rpg-editor-tab" data-tab="infoBox">
|
||||
<i class="fa-solid fa-info-circle"></i> Info Box
|
||||
</button>
|
||||
<button class="rpg-editor-tab" data-tab="presentCharacters">
|
||||
<i class="fa-solid fa-users"></i> Present Characters
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="rpg-settings-popup-body">
|
||||
<!-- Tab contents will be rendered by JavaScript -->
|
||||
<div id="rpg-editor-tab-userStats" class="rpg-editor-tab-content"></div>
|
||||
<div id="rpg-editor-tab-infoBox" class="rpg-editor-tab-content" style="display: none;"></div>
|
||||
<div id="rpg-editor-tab-presentCharacters" class="rpg-editor-tab-content" style="display: none;"></div>
|
||||
</div>
|
||||
|
||||
<footer class="rpg-settings-popup-footer">
|
||||
<button id="rpg-editor-reset" class="rpg-btn-secondary" type="button">
|
||||
<i class="fa-solid fa-rotate-left"></i> Reset to Defaults
|
||||
</button>
|
||||
<div class="rpg-footer-right">
|
||||
<button id="rpg-editor-cancel" class="rpg-btn-secondary" type="button">Cancel</button>
|
||||
<button id="rpg-editor-save" class="rpg-btn-primary" type="button">
|
||||
<i class="fa-solid fa-save"></i> Save & Apply
|
||||
</button>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user