-
-
- `;
- $infoBoxContainer.html(placeholderHtml);
- if (extensionSettings.enableAnimations) {
- setTimeout(() => $infoBoxContainer.removeClass('rpg-content-updating'), 500);
- }
+ console.log('[RPG InfoBox Render] No data, hiding container');
+ $infoBoxContainer.empty().hide();
return;
}
+ // Show container and add updating class for animation
+ $infoBoxContainer.show();
+ if (extensionSettings.enableAnimations) {
+ $infoBoxContainer.addClass('rpg-content-updating');
+ }
+
// console.log('[RPG Companion] renderInfoBox called with data:', infoBoxData);
- // Parse the info box data
- const lines = infoBoxData.split('\n');
- // console.log('[RPG Companion] Info Box split into lines:', lines);
- const data = {
+ let data = {
date: '',
weekday: '',
month: '',
@@ -105,6 +119,45 @@ export function renderInfoBox() {
characters: []
};
+ // Check if data is v3 JSON format
+ const trimmed = infoBoxData.trim();
+ if (trimmed.startsWith('{') || trimmed.startsWith('[')) {
+ const jsonData = repairJSON(infoBoxData);
+ if (jsonData) {
+ // Extract from v3 JSON structure
+ data.weatherEmoji = jsonData.weather?.emoji || '';
+ data.weatherForecast = jsonData.weather?.forecast || '';
+ data.temperature = jsonData.temperature ? `${jsonData.temperature.value}°${jsonData.temperature.unit}` : '';
+ data.tempValue = jsonData.temperature?.value || 0;
+ data.timeStart = jsonData.time?.start || '';
+ data.timeEnd = jsonData.time?.end || '';
+ data.location = jsonData.location?.value || '';
+
+ // Parse date string to extract weekday, month, year
+ if (jsonData.date?.value) {
+ data.date = jsonData.date.value;
+ // Expected format: "Tuesday, October 17th, 2023"
+ const dateParts = data.date.split(',').map(p => p.trim());
+ data.weekday = dateParts[0] || '';
+ data.month = dateParts[1] || '';
+ data.year = dateParts[2] || '';
+ }
+
+ // Skip to rendering
+ } else {
+ // JSON parsing failed, fall back to text parsing
+ parseTextFormat();
+ }
+ } else {
+ // Text format
+ parseTextFormat();
+ }
+
+ function parseTextFormat() {
+ // Parse the info box data
+ const lines = infoBoxData.split('\n');
+ // console.log('[RPG Companion] Info Box split into lines:', lines);
+
// Track which fields we've already parsed to avoid duplicates from mixed formats
const parsedFields = {
date: false,
@@ -270,6 +323,7 @@ export function renderInfoBox() {
// timeStart: data.timeStart,
// location: data.location
// });
+ }
// Get tracker configuration
const config = extensionSettings.trackerConfig?.infoBox;
@@ -303,8 +357,11 @@ export function renderInfoBox() {
weekdayDisplay = weekdayDisplay;
}
+ const dateLockIconHtml = getLockIconHtml('infoBox', 'date');
+
row1Widgets.push(`
+ ${dateLockIconHtml}
${monthDisplay}
${weekdayDisplay}
${yearDisplay}
@@ -316,8 +373,11 @@ export function renderInfoBox() {
if (config?.widgets?.weather?.enabled) {
const weatherEmoji = data.weatherEmoji || '🌤️';
const weatherForecast = data.weatherForecast || 'Weather';
+ const weatherLockIconHtml = getLockIconHtml('infoBox', 'weather');
+
row1Widgets.push(`
@@ -357,8 +417,11 @@ export function renderInfoBox() {
const tempInCelsius = preferredUnit === 'F' ? Math.round((tempValue - 32) * 5/9) : tempValue;
const tempPercent = Math.min(100, Math.max(0, ((tempInCelsius + 20) / 60) * 100));
const tempColor = tempInCelsius < 10 ? '#4a90e2' : tempInCelsius < 25 ? '#67c23a' : '#e94560';
+ const tempLockIconHtml = getLockIconHtml('infoBox', 'temperature');
+
row1Widgets.push(`
+ ${tempLockIconHtml}
@@ -372,7 +435,12 @@ export function renderInfoBox() {
// Time widget - show if enabled
if (config?.widgets?.time?.enabled) {
+ // Determine which time value to display and edit
+ const hasTimeEnd = Boolean(data.timeEnd);
+ const hasTimeStart = Boolean(data.timeStart);
const timeDisplay = data.timeEnd || data.timeStart || '12:00';
+ const timeField = hasTimeEnd ? 'timeEnd' : 'timeStart';
+
// Parse time for clock hands
const timeMatch = timeDisplay.match(/(\d+):(\d+)/);
let hourAngle = 0;
@@ -383,8 +451,12 @@ export function renderInfoBox() {
hourAngle = (hours % 12) * 30 + minutes * 0.5; // 30° per hour + 0.5° per minute
minuteAngle = minutes * 6; // 6° per minute
}
+
+ const timeLockIconHtml = getLockIconHtml('infoBox', 'time');
+
row1Widgets.push(`
`);
}
@@ -407,9 +479,12 @@ export function renderInfoBox() {
// Row 2: Location widget (full width) - show if enabled
if (config?.widgets?.location?.enabled) {
const locationDisplay = data.location || 'Location';
+ const locationLockIconHtml = getLockIconHtml('infoBox', 'location');
+
html += `
+ ${locationLockIconHtml}
@@ -421,14 +496,26 @@ export function renderInfoBox() {
// Row 3: Recent Events widget (notebook style) - show if enabled
if (config?.widgets?.recentEvents?.enabled) {
- // Parse Recent Events from infoBox string
+ // Parse Recent Events from infoBox (supports both JSON and text formats)
let recentEvents = [];
if (committedTrackerData.infoBox) {
- const recentEventsLine = committedTrackerData.infoBox.split('\n').find(line => line.startsWith('Recent Events:'));
- if (recentEventsLine) {
- const eventsString = recentEventsLine.replace('Recent Events:', '').trim();
- if (eventsString) {
- recentEvents = eventsString.split(',').map(e => e.trim()).filter(e => e);
+ // Try JSON format first
+ try {
+ const parsed = typeof committedTrackerData.infoBox === 'string'
+ ? JSON.parse(committedTrackerData.infoBox)
+ : committedTrackerData.infoBox;
+
+ if (parsed && Array.isArray(parsed.recentEvents)) {
+ recentEvents = parsed.recentEvents;
+ }
+ } catch (e) {
+ // Fall back to old text format
+ const recentEventsLine = committedTrackerData.infoBox.split('\n').find(line => line.startsWith('Recent Events:'));
+ if (recentEventsLine) {
+ const eventsString = recentEventsLine.replace('Recent Events:', '').trim();
+ if (eventsString) {
+ recentEvents = eventsString.split(',').map(e => e.trim()).filter(e => e);
+ }
}
}
}
@@ -440,9 +527,12 @@ export function renderInfoBox() {
validEvents.push('Click to add event');
}
+ const eventsLockIconHtml = getLockIconHtml('infoBox', 'recentEvents');
+
html += `
📍
+ ${eventsLockIconHtml}
@@ -517,6 +607,30 @@ export function renderInfoBox() {
}
});
+ // Add event handler for lock icons (support both click and touch)
+ $infoBoxContainer.find('.rpg-section-lock-icon').on('click touchend', function(e) {
+ e.preventDefault();
+ e.stopPropagation();
+ const $lockIcon = $(this);
+ const tracker = $lockIcon.data('tracker');
+ const path = $lockIcon.data('path');
+
+ // Import lockManager dynamically to avoid circular dependencies
+ import('../generation/lockManager.js').then(({ setItemLock, isItemLocked }) => {
+ const isLocked = isItemLocked(tracker, path);
+ const newLockState = !isLocked;
+ setItemLock(tracker, path, newLockState);
+
+ // Update icon
+ $lockIcon.text(newLockState ? '🔒' : '🔓');
+ $lockIcon.attr('title', newLockState ? 'Locked - AI cannot change this' : 'Unlocked - AI can change this');
+ $lockIcon.toggleClass('locked', newLockState);
+
+ // Save settings to persist lock state
+ saveSettings();
+ });
+ });
+
// Remove updating class after animation
if (extensionSettings.enableAnimations) {
setTimeout(() => $infoBoxContainer.removeClass('rpg-content-updating'), 500);
@@ -541,6 +655,64 @@ export function updateInfoBoxField(field, value) {
lastGeneratedData.infoBox = 'Info Box\n---\n';
}
+ // Check if data is in v3 JSON format
+ const trimmed = lastGeneratedData.infoBox.trim();
+ if (trimmed.startsWith('{') || trimmed.startsWith('[')) {
+ // Handle v3 JSON format
+ const jsonData = repairJSON(lastGeneratedData.infoBox);
+ if (jsonData) {
+ // Update the appropriate field based on v3 structure
+ if (field === 'weatherEmoji') {
+ if (!jsonData.weather) jsonData.weather = {};
+ jsonData.weather.emoji = value;
+ } else if (field === 'weatherForecast') {
+ if (!jsonData.weather) jsonData.weather = {};
+ jsonData.weather.forecast = value;
+ } else if (field === 'temperature') {
+ // Parse temperature value and unit
+ const tempMatch = value.match(/(-?\d+)\s*°?\s*([CF]?)/i);
+ if (tempMatch) {
+ if (!jsonData.temperature) jsonData.temperature = {};
+ jsonData.temperature.value = parseInt(tempMatch[1]);
+ jsonData.temperature.unit = (tempMatch[2] || 'C').toUpperCase();
+ }
+ } else if (field === 'timeStart') {
+ if (!jsonData.time) jsonData.time = {};
+ jsonData.time.start = value;
+ } else if (field === 'timeEnd') {
+ if (!jsonData.time) jsonData.time = {};
+ jsonData.time.end = value;
+ } else if (field === 'location') {
+ if (!jsonData.location) jsonData.location = {};
+ jsonData.location.value = value;
+ } else if (field === 'weekday' || field === 'month' || field === 'year') {
+ // Update date components
+ if (!jsonData.date) jsonData.date = {};
+ let currentDate = jsonData.date.value || '';
+ const dateParts = currentDate.split(',').map(p => p.trim());
+
+ if (field === 'weekday') {
+ dateParts[0] = value;
+ } else if (field === 'month') {
+ dateParts[1] = value;
+ } else if (field === 'year') {
+ dateParts[2] = value;
+ }
+
+ jsonData.date.value = dateParts.filter(p => p).join(', ');
+ }
+
+ // Save back as JSON
+ lastGeneratedData.infoBox = JSON.stringify(jsonData, null, 2);
+ committedTrackerData.infoBox = lastGeneratedData.infoBox;
+ saveChatData();
+ renderInfoBox();
+ console.log('[RPG Companion] Updated info box field (v3 JSON):', { field, value });
+ return;
+ }
+ }
+
+ // Fall back to text format handling
// Reconstruct the Info Box text with updated field
const lines = lastGeneratedData.infoBox.split('\n');
let dateLineFound = false;
diff --git a/src/systems/rendering/inventory.js b/src/systems/rendering/inventory.js
index d19b461..6eba950 100644
--- a/src/systems/rendering/inventory.js
+++ b/src/systems/rendering/inventory.js
@@ -4,14 +4,32 @@
*/
import { extensionSettings, $inventoryContainer } from '../../core/state.js';
+import { saveSettings } from '../../core/persistence.js';
import { getInventoryRenderOptions, restoreFormStates } from '../interaction/inventoryActions.js';
import { updateInventoryItem } from '../interaction/inventoryEdit.js';
import { parseItems } from '../../utils/itemParser.js';
-import { i18n } from '../../core/i18n.js';
+import { isItemLocked, setItemLock } from '../generation/lockManager.js';
// Type imports
/** @typedef {import('../../types/inventory.js').InventoryV2} InventoryV2 */
+/**
+ * Helper to generate lock icon HTML if setting is enabled
+ * @param {string} tracker - Tracker name
+ * @param {string} path - Item path
+ * @returns {string} Lock icon HTML or empty string
+ */
+function getLockIconHtml(tracker, path) {
+ const showLockIcons = extensionSettings.showLockIcons ?? true;
+ if (!showLockIcons) return '';
+
+ const isLocked = isItemLocked(tracker, path);
+ const lockIcon = isLocked ? '🔒' : '🔓';
+ const lockTitle = isLocked ? 'Locked' : 'Unlocked';
+ const lockedClass = isLocked ? ' locked' : '';
+ return ``;
+}
+
/**
* Converts a location name to a safe ID for use in HTML element IDs.
* Must match the logic used in inventoryActions.js.
@@ -31,17 +49,17 @@ export function getLocationId(locationName) {
export function renderInventorySubTabs(activeTab = 'onPerson') {
return `
-
`;
@@ -58,28 +76,34 @@ export function renderOnPersonView(onPersonItems, viewMode = 'list') {
let itemsHtml = '';
if (items.length === 0) {
- itemsHtml = `${i18n.getTranslation('inventory.onPerson.empty')}
`;
+ itemsHtml = 'No items carried
';
} else {
if (viewMode === 'grid') {
// Grid view: card-style items
- itemsHtml = items.map((item, index) => `
+ itemsHtml = items.map((item, index) => {
+ const lockIconHtml = getLockIconHtml('userStats', `inventory.onPerson[${index}]`);
+ return `
+ ${lockIconHtml}
${escapeHtml(item)}
- `).join('');
+ `}).join('');
} else {
// List view: full-width rows
- itemsHtml = items.map((item, index) => `
+ itemsHtml = items.map((item, index) => {
+ const lockIconHtml = getLockIconHtml('userStats', `inventory.onPerson[${index}]`);
+ return `
+ ${lockIconHtml}
${escapeHtml(item)}
- `).join('');
+ `}).join('');
}
}
@@ -88,30 +112,30 @@ export function renderOnPersonView(onPersonItems, viewMode = 'list') {
return `
-
${i18n.getTranslation('inventory.onPerson.title')}
+Items Currently Carried
-
@@ -134,28 +158,34 @@ export function renderClothingView(clothingItems, viewMode = 'list') {
let itemsHtml = '';
if (items.length === 0) {
- itemsHtml = `
+
+
+
${i18n.getTranslation('inventory.clothing.empty')}
`;
+ itemsHtml = 'No clothing worn
';
} else {
if (viewMode === 'grid') {
// Grid view: card-style items
- itemsHtml = items.map((item, index) => `
+ itemsHtml = items.map((item, index) => {
+ const lockIconHtml = getLockIconHtml('userStats', `inventory.clothing[${index}]`);
+ return `
+ ${lockIconHtml}
${escapeHtml(item)}
- `).join('');
+ `}).join('');
} else {
// List view: full-width rows
- itemsHtml = items.map((item, index) => `
+ itemsHtml = items.map((item, index) => {
+ const lockIconHtml = getLockIconHtml('userStats', `inventory.clothing[${index}]`);
+ return `
+ ${lockIconHtml}
${escapeHtml(item)}
- `).join('');
+ `}).join('');
}
}
@@ -164,30 +194,30 @@ export function renderClothingView(clothingItems, viewMode = 'list') {
return `
-
${i18n.getTranslation('inventory.clothing.title')}
+Clothing Worn
-
-
@@ -212,30 +242,30 @@ export function renderStoredView(stored, collapsedLocations = [], viewMode = 'li
let html = `
@@ -451,7 +494,6 @@ function generateInventoryHTML(inventory, options = {}) {
v2Inventory = {
version: 2,
onPerson: 'None',
- clothing: 'None',
stored: {},
assets: 'None'
};
@@ -461,9 +503,6 @@ function generateInventoryHTML(inventory, options = {}) {
if (!v2Inventory.onPerson || typeof v2Inventory.onPerson !== 'string') {
v2Inventory.onPerson = 'None';
}
- if (!v2Inventory.clothing || typeof v2Inventory.clothing !== 'string') {
- v2Inventory.clothing = 'None';
- }
if (!v2Inventory.stored || typeof v2Inventory.stored !== 'object' || Array.isArray(v2Inventory.stored)) {
v2Inventory.stored = {};
}
@@ -563,6 +602,31 @@ export function renderInventory() {
const newName = $(this).text().trim();
updateInventoryItem(field, index, newName, location);
});
+
+ // Add event listener for section lock icon clicks (support both click and touch)
+ $inventoryContainer.find('.rpg-section-lock-icon').on('click touchend', function(e) {
+ e.preventDefault();
+ e.stopPropagation();
+ const $icon = $(this);
+ const trackerType = $icon.data('tracker');
+ const itemPath = $icon.data('path');
+ const currentlyLocked = isItemLocked(trackerType, itemPath);
+
+ // Toggle lock state
+ setItemLock(trackerType, itemPath, !currentlyLocked);
+
+ // Update icon
+ const newIcon = !currentlyLocked ? '🔒' : '🔓';
+ const newTitle = !currentlyLocked ? 'Locked' : 'Unlocked';
+ $icon.text(newIcon);
+ $icon.attr('title', newTitle);
+
+ // Toggle 'locked' class for persistent visibility
+ $icon.toggleClass('locked', !currentlyLocked);
+
+ // Save settings
+ saveSettings();
+ });
}
/**
diff --git a/src/systems/rendering/musicPlayer.js b/src/systems/rendering/musicPlayer.js
index 49b2546..b24e791 100644
--- a/src/systems/rendering/musicPlayer.js
+++ b/src/systems/rendering/musicPlayer.js
@@ -56,20 +56,20 @@ function openInSpotify(songData) {
* @param {HTMLElement} container - Container element to render into
*/
export function renderMusicPlayer(container) {
- console.log('[RPG Companion] Music Player: renderMusicPlayer called');
+ // console.log('[RPG Companion] Music Player: renderMusicPlayer called');
// Remove old chat-attached player if it exists
$('#rpg-chat-music-player').remove();
- console.log('[RPG Companion] Music Player: enableSpotifyMusic =', extensionSettings.enableSpotifyMusic);
+ // console.log('[RPG Companion] Music Player: enableSpotifyMusic =', extensionSettings.enableSpotifyMusic);
if (!extensionSettings.enableSpotifyMusic) {
- console.warn('[RPG Companion] Music Player: Spotify music is disabled');
+ // console.warn('[RPG Companion] Music Player: Spotify music is disabled');
return;
}
const songData = committedTrackerData.spotifyUrl;
- console.log('[RPG Companion] Music Player: Rendering with song:', songData);
+ // console.log('[RPG Companion] Music Player: Rendering with song:', songData);
if (!songData || !songData.displayText) {
// No song - don't show anything
diff --git a/src/systems/rendering/quests.js b/src/systems/rendering/quests.js
index 4b0dc26..036b0c3 100644
--- a/src/systems/rendering/quests.js
+++ b/src/systems/rendering/quests.js
@@ -5,7 +5,24 @@
import { extensionSettings, $questsContainer } from '../../core/state.js';
import { saveSettings } from '../../core/persistence.js';
-import { i18n } from '../../core/i18n.js';
+import { isItemLocked, setItemLock } from '../generation/lockManager.js';
+
+/**
+ * Helper to generate lock icon HTML if setting is enabled
+ * @param {string} tracker - Tracker name
+ * @param {string} path - Item path
+ * @returns {string} Lock icon HTML or empty string
+ */
+function getLockIconHtml(tracker, path) {
+ const showLockIcons = extensionSettings.showLockIcons ?? true;
+ if (!showLockIcons) return '';
+
+ const isLocked = isItemLocked(tracker, path);
+ const lockIcon = isLocked ? '🔒' : '🔓';
+ const lockTitle = isLocked ? 'Locked' : 'Unlocked';
+ const lockedClass = isLocked ? ' locked' : '';
+ return ``;
+}
/**
* HTML escape helper
@@ -26,11 +43,11 @@ function escapeHtml(text) {
export function renderQuestsSubTabs(activeTab = 'main') {
return `
`;
@@ -110,10 +128,12 @@ export function renderOptionalQuestsView(optionalQuests) {
let questsHtml = '';
if (quests.length === 0) {
- questsHtml = `
@@ -160,7 +180,7 @@ export function renderOptionalQuestsView(optionalQuests) {
* Main render function for quests
*/
export function renderQuests() {
- if (!extensionSettings.showQuests || !$questsContainer) {
+ if (!extensionSettings.showInventory || !$questsContainer) {
return;
}
@@ -304,4 +324,29 @@ function attachQuestEventHandlers() {
}
}
});
+
+ // Add event listener for section lock icon clicks (support both click and touch)
+ $questsContainer.find('.rpg-section-lock-icon').on('click touchend', function(e) {
+ e.preventDefault();
+ e.stopPropagation();
+ const $icon = $(this);
+ const trackerType = $icon.data('tracker');
+ const itemPath = $icon.data('path');
+ const currentlyLocked = isItemLocked(trackerType, itemPath);
+
+ // Toggle lock state
+ setItemLock(trackerType, itemPath, !currentlyLocked);
+
+ // Update icon
+ const newIcon = !currentlyLocked ? '🔒' : '🔓';
+ const newTitle = !currentlyLocked ? 'Locked' : 'Unlocked';
+ $icon.text(newIcon);
+ $icon.attr('title', newTitle);
+
+ // Toggle 'locked' class for persistent visibility
+ $icon.toggleClass('locked', !currentlyLocked);
+
+ // Save settings
+ saveSettings();
+ });
}
diff --git a/src/systems/rendering/thoughts.js b/src/systems/rendering/thoughts.js
index 901bb73..40eef84 100644
--- a/src/systems/rendering/thoughts.js
+++ b/src/systems/rendering/thoughts.js
@@ -14,10 +14,26 @@ import {
FALLBACK_AVATAR_DATA_URI,
addDebugLog
} from '../../core/state.js';
-import { saveChatData } from '../../core/persistence.js';
+import { saveChatData, saveSettings } from '../../core/persistence.js';
import { getSafeThumbnailUrl } from '../../utils/avatars.js';
-import { saveSettings } from '../../core/persistence.js';
-import { isGenerating, regenerateAvatar } from '../features/avatarGenerator.js';
+import { isItemLocked, setItemLock } from '../generation/lockManager.js';
+
+/**
+ * Helper to generate lock icon HTML if setting is enabled
+ * @param {string} tracker - Tracker name
+ * @param {string} path - Item path
+ * @returns {string} Lock icon HTML or empty string
+ */
+function getLockIconHtml(tracker, path) {
+ const showLockIcons = extensionSettings.showLockIcons ?? true;
+ if (!showLockIcons) return '';
+
+ const isLocked = isItemLocked(tracker, path);
+ const lockIcon = isLocked ? '🔒' : '🔓';
+ const lockTitle = isLocked ? 'Locked' : 'Unlocked';
+ const lockedClass = isLocked ? ' locked' : '';
+ return ``;
+}
/**
* Helper to log to both console and debug logs array
@@ -29,14 +45,6 @@ function debugLog(message, data = null) {
}
}
-/**
- * Escapes HTML attribute values to prevent quotes from breaking HTML
- */
-function escapeHtmlAttr(str) {
- if (!str) return '';
- return String(str).replace(/"/g, '"').replace(/'/g, ''');
-}
-
/**
* Interpolates color based on percentage value between low and high colors
* @param {number} percentage - Value from 0-100
@@ -71,6 +79,44 @@ function getStatColor(percentage, lowColor, highColor) {
return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
}
+/**
+ * Strips leading and trailing square brackets from a string value.
+ * Used to clean placeholder notation that AI might include in responses.
+ * @param {string} value - The value to clean
+ * @returns {string} Cleaned value without surrounding brackets
+ */
+function stripBrackets(value) {
+ if (typeof value !== 'string') return value;
+ return value.replace(/^\[|\]$/g, '').trim();
+}
+
+/**
+ * Extracts the actual value from a field that might be locked.
+ * If the field is an object with {value, locked}, returns the value.
+ * Otherwise returns the field as-is.
+ * @param {any} fieldValue - The field value (might be string or {value, locked} object)
+ * @returns {string} The actual string value
+ */
+function extractFieldValue(fieldValue) {
+ if (fieldValue && typeof fieldValue === 'object' && 'value' in fieldValue) {
+ return fieldValue.value || '';
+ }
+ return fieldValue || '';
+}
+
+/**
+ * Converts a field name to snake_case for use as JSON key
+ * Example: "Test Tracker" -> "test_tracker"
+ * @param {string} name - Field name to convert
+ * @returns {string} snake_case version
+ */
+function toSnakeCase(name) {
+ return name
+ .toLowerCase()
+ .replace(/[^a-z0-9]+/g, '_')
+ .replace(/^_+|_+$/g, '');
+}
+
/**
* Fuzzy name matching that handles:
* - Exact matches: "Sabrina" === "Sabrina"
@@ -88,12 +134,10 @@ function namesMatch(cardName, aiName) {
// 1. Exact match (fast path)
if (cardName.toLowerCase() === aiName.toLowerCase()) return true;
- // 2. Strip parentheses and quotes from both names and match
- // This allows "Dottore (Prime)" to match "Dottore" card for avatar lookup
- // and "Marianna "Mari"" to match "Marianna" or "Mari" cards
- const stripParensAndQuotes = (s) => s.replace(/\s*\([^)]*\)/g, '').replace(/["']/g, '').trim();
- const cardCore = stripParensAndQuotes(cardName).toLowerCase();
- const aiCore = stripParensAndQuotes(aiName).toLowerCase();
+ // 2. Strip parentheses and match
+ const stripParens = (s) => s.replace(/\s*\([^)]*\)/g, '').trim();
+ const cardCore = stripParens(cardName).toLowerCase();
+ const aiCore = stripParens(aiName).toLowerCase();
if (cardCore === aiCore) return true;
// 3. Check if card name appears as complete word in AI name
@@ -103,200 +147,6 @@ function namesMatch(cardName, aiName) {
return wordBoundary.test(aiCore);
}
-/**
- * Gets the avatar URL for a character, checking custom NPC avatars first
- * @param {string} characterName - Name of the character
- * @returns {string} Avatar URL or fallback
- */
-function getCharacterAvatar(characterName) {
- // First, check if there's a custom NPC avatar
- if (extensionSettings.npcAvatars && extensionSettings.npcAvatars[characterName]) {
- const avatar = extensionSettings.npcAvatars[characterName];
- // Skip if not a valid string (e.g., if it's an object from a previous bug)
- if (typeof avatar === 'string' && avatar) {
- debugLog(`[RPG Thoughts] Found custom NPC avatar for: ${characterName}`);
- return avatar;
- } else {
- // Clear invalid avatar data
- console.warn(`[RPG Thoughts] Invalid avatar data for ${characterName}, clearing...`);
- delete extensionSettings.npcAvatars[characterName];
- }
- }
-
- // Use the existing avatar lookup logic
- let characterPortrait = FALLBACK_AVATAR_DATA_URI;
- let hasAvatar = false;
-
- // For group chats, search through group members first
- if (selected_group) {
- try {
- const groupMembers = getGroupMembers(selected_group);
- if (groupMembers && groupMembers.length > 0) {
- const matchingMember = groupMembers.find(member =>
- member && member.name && namesMatch(member.name, characterName)
- );
-
- if (matchingMember && matchingMember.avatar && matchingMember.avatar !== 'none') {
- const thumbnailUrl = getSafeThumbnailUrl('avatar', matchingMember.avatar);
- if (thumbnailUrl) {
- hasAvatar = true;
- return thumbnailUrl;
- }
- }
- }
- } catch (groupError) {
- debugLog('[RPG Thoughts] Error checking group members:', groupError.message);
- }
- }
-
- // For regular chats or if not found in group, search all characters
- if (characters && characters.length > 0) {
- const matchingCharacter = characters.find(c =>
- c && c.name && namesMatch(c.name, characterName)
- );
-
- if (matchingCharacter && matchingCharacter.avatar && matchingCharacter.avatar !== 'none') {
- const thumbnailUrl = getSafeThumbnailUrl('avatar', matchingCharacter.avatar);
- if (thumbnailUrl) {
- hasAvatar = true;
- return thumbnailUrl;
- }
- }
- }
-
- // If this is the current character in a 1-on-1 chat, use their portrait
- if (this_chid !== undefined && characters[this_chid] &&
- characters[this_chid].name && namesMatch(characters[this_chid].name, characterName)) {
- const thumbnailUrl = getSafeThumbnailUrl('avatar', characters[this_chid].avatar);
- if (thumbnailUrl) {
- hasAvatar = true;
- return thumbnailUrl;
- }
- }
-
- return characterPortrait;
-}
-
-/**
- * Handles uploading a custom avatar for an NPC character
- * @param {string} characterName - Name of the character to set avatar for
- */
-function uploadNpcAvatar(characterName) {
- // Create a file input element
- const input = document.createElement('input');
- input.type = 'file';
- input.accept = 'image/*';
-
- input.onchange = async (e) => {
- const file = e.target.files[0];
- if (!file) return;
-
- // Validate file size (max 2MB to keep settings file reasonable)
- if (file.size > 2 * 1024 * 1024) {
- console.error('[RPG Companion] Image file too large. Maximum size is 2MB.');
- // You could add a toast notification here if available
- return;
- }
-
- // Validate file type
- if (!file.type.startsWith('image/')) {
- console.error('[RPG Companion] Invalid file type. Please select an image.');
- return;
- }
-
- try {
- // Read the file and convert to base64 data URI
- const reader = new FileReader();
- reader.onload = (event) => {
- const dataUri = event.target.result;
-
- // Initialize npcAvatars if it doesn't exist
- if (!extensionSettings.npcAvatars) {
- extensionSettings.npcAvatars = {};
- }
-
- // Store the avatar
- extensionSettings.npcAvatars[characterName] = dataUri;
-
- // Save settings
- saveSettings();
-
- console.log(`[RPG Companion] Avatar uploaded for NPC: ${characterName}`);
-
- // Re-render to show the new avatar
- renderThoughts();
- };
-
- reader.onerror = (error) => {
- console.error('[RPG Companion] Error reading image file:', error);
- };
-
- reader.readAsDataURL(file);
- } catch (error) {
- console.error('[RPG Companion] Error uploading avatar:', error);
- }
- };
-
- // Trigger the file input
- input.click();
-}
-
-/**
- * Removes a character from the Present Characters panel and saved data
- * @param {string} characterName - Name of the character to remove
- */
-function removeCharacter(characterName) {
- console.log(`[RPG Companion] Removing character: ${characterName}`);
-
- // Initialize if it doesn't exist
- if (!lastGeneratedData.characterThoughts) {
- return;
- }
-
- const lines = lastGeneratedData.characterThoughts.split('\n');
- const newLines = [];
- let skipUntilNextCharacter = false;
- let foundCharacter = false;
-
- for (let i = 0; i < lines.length; i++) {
- const line = lines[i].trim();
-
- // Check if this is the start of the character we want to remove
- if (line.startsWith('- ')) {
- const name = line.substring(2).trim();
- if (name.toLowerCase() === characterName.toLowerCase()) {
- foundCharacter = true;
- skipUntilNextCharacter = true;
- continue; // Skip this line
- } else {
- // This is a different character, stop skipping
- skipUntilNextCharacter = false;
- }
- }
-
- // If we're not skipping, add the line
- if (!skipUntilNextCharacter) {
- newLines.push(lines[i]);
- }
- }
-
- if (foundCharacter) {
- // Update both lastGeneratedData and committedTrackerData
- lastGeneratedData.characterThoughts = newLines.join('\n');
- committedTrackerData.characterThoughts = newLines.join('\n');
-
- // Save to chat metadata
- saveChatData();
-
- console.log(`[RPG Companion] Character removed: ${characterName}`);
-
- // Re-render the panel
- renderThoughts();
- } else {
- console.warn(`[RPG Companion] Character not found: ${characterName}`);
- }
-}
-
/**
* Renders character thoughts (Present Characters) panel.
* Displays character cards with avatars, relationship badges, and traits.
@@ -307,14 +157,17 @@ export function renderThoughts() {
return;
}
+ // Don't render if no data exists (e.g., after cache clear)
+ const thoughtsData = lastGeneratedData.characterThoughts || committedTrackerData.characterThoughts;
+ if (!thoughtsData) {
+ $thoughtsContainer.html('
-
${i18n.getTranslation('inventory.stored.title')}
+Storage Locations
-
@@ -243,8 +273,8 @@ export function renderStoredView(stored, collapsedLocations = [], viewMode = 'li
if (locations.length === 0) {
html += `
-
@@ -352,28 +388,34 @@ export function renderAssetsView(assets, viewMode = 'list') {
let itemsHtml = '';
if (items.length === 0) {
- itemsHtml = `
- ${i18n.getTranslation('inventory.stored.empty')}
+
+ No storage locations yet. Click "Add Location" to create one.
`;
} else {
@@ -256,28 +286,34 @@ export function renderStoredView(stored, collapsedLocations = [], viewMode = 'li
let itemsHtml = '';
if (items.length === 0) {
- itemsHtml = `${i18n.getTranslation('inventory.stored.noItems')}
`;
+ itemsHtml = 'No items stored here
';
} else {
if (viewMode === 'grid') {
// Grid view: card-style items
- itemsHtml = items.map((item, index) => `
+ itemsHtml = items.map((item, index) => {
+ const lockIconHtml = getLockIconHtml('userStats', `inventory.stored.${location}[${index}]`);
+ return `
+ ${lockIconHtml}
${escapeHtml(item)}
- `).join('');
+ `}).join('');
} else {
// List view: full-width rows
- itemsHtml = items.map((item, index) => `
+ itemsHtml = items.map((item, index) => {
+ const lockIconHtml = getLockIconHtml('userStats', `inventory.stored.${location}[${index}]`);
+ return `
+ ${lockIconHtml}
${escapeHtml(item)}
- `).join('');
+ `}).join('');
}
}
@@ -298,13 +334,13 @@ export function renderStoredView(stored, collapsedLocations = [], viewMode = 'li
@@ -313,18 +349,18 @@ export function renderStoredView(stored, collapsedLocations = [], viewMode = 'li
${i18n.getTranslation('inventory.assets.empty')}
`;
+ itemsHtml = 'No assets owned
';
} else {
if (viewMode === 'grid') {
// Grid view: card-style items
- itemsHtml = items.map((item, index) => `
+ itemsHtml = items.map((item, index) => {
+ const lockIconHtml = getLockIconHtml('userStats', `inventory.assets[${index}]`);
+ return `
+ ${lockIconHtml}
${escapeHtml(item)}
- `).join('');
+ `}).join('');
} else {
// List view: full-width rows
- itemsHtml = items.map((item, index) => `
+ itemsHtml = items.map((item, index) => {
+ const lockIconHtml = getLockIconHtml('userStats', `inventory.assets[${index}]`);
+ return `
+ ${lockIconHtml}
${escapeHtml(item)}
-
- `).join('');
+ `}).join('');
}
}
@@ -382,30 +424,30 @@ export function renderAssetsView(assets, viewMode = 'list') {
return `
-
${i18n.getTranslation('inventory.assets.title')}
+Vehicles, Property & Major Possessions
-
@@ -414,7 +456,8 @@ export function renderAssetsView(assets, viewMode = 'list') {
- ${i18n.getTranslation('inventory.assets.description')}
+ Assets include vehicles (cars, motorcycles), property (homes, apartments),
+ and major equipment (workshop tools, special items).
-
`;
@@ -48,9 +65,9 @@ export function renderMainQuestView(mainQuest) {
return `
-
${i18n.getTranslation('quests.main.title')}
- ${!hasQuest ? `
@@ -59,14 +76,15 @@ export function renderMainQuestView(mainQuest) {
+ ${getLockIconHtml('userStats', 'quests.main')}
` : `
-
${escapeHtml(questDisplay)}
${i18n.getTranslation('quests.main.empty')}
+ No active main quests
`}
- ${i18n.getTranslation('quests.main.hint')}
+ The main quests represent your primary objective in the story.
${i18n.getTranslation('quests.optional.empty')}
`;
+ questsHtml = 'No active optional quests
';
} else {
- questsHtml = quests.map((quest, index) => `
+ questsHtml = quests.map((quest, index) => {
+ return `
+ ${getLockIconHtml('userStats', `quests.optional[${index}]`)}
- `).join('');
+ `}).join('');
}
return `
${escapeHtml(quest)}
-
${i18n.getTranslation('quests.optional.title')}
-
@@ -149,7 +169,7 @@ export function renderOptionalQuestsView(optionalQuests) {
- ${i18n.getTranslation('quests.optional.hint')}
+ Optional quests are side objectives that complement your main story.
No character data generated yet
');
+ return;
+ }
+
debugLog('[RPG Thoughts] ==================== RENDERING PRESENT CHARACTERS ====================');
debugLog('[RPG Thoughts] showCharacterThoughts setting:', extensionSettings.showCharacterThoughts);
debugLog('[RPG Thoughts] Container exists:', !!$thoughtsContainer);
- // Save scroll position before re-rendering
- const scrollParent = $thoughtsContainer.closest('.rpg-content-box, .rpg-tab-content, .rpg-mobile-tab-content').filter(':visible').first();
- const savedScrollTop = scrollParent.length > 0 ? scrollParent.scrollTop() : 0;
-
// Add updating class for animation
if (extensionSettings.enableAnimations) {
$thoughtsContainer.addClass('rpg-content-updating');
@@ -325,11 +178,8 @@ export function renderThoughts() {
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) || [];
-
- // Check if relationships are enabled (new structure with fallback to legacy)
- const relationshipsEnabled = config?.relationships?.enabled !== false; // Default to true if not set
- const relationshipFields = relationshipsEnabled ? (config?.relationshipFields || []) : [];
- const hasRelationshipEnabled = relationshipFields.length > 0 && relationshipsEnabled;
+ 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 || '';
@@ -339,11 +189,91 @@ export function renderThoughts() {
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 = [];
+ let presentCharacters = [];
- debugLog('[RPG Thoughts] Split into lines count:', lines.length);
- debugLog('[RPG Thoughts] Lines:', lines);
+ // Try parsing as JSON first (new format)
+ try {
+ const parsed = typeof characterThoughtsData === 'string'
+ ? JSON.parse(characterThoughtsData)
+ : characterThoughtsData;
+
+ // Handle both {characters: [...]} and direct array formats
+ const charactersArray = Array.isArray(parsed) ? parsed : (parsed.characters || []);
+
+ if (charactersArray.length > 0) {
+ // JSON format: array of character objects
+ presentCharacters = charactersArray.map(char => {
+ const character = {
+ name: char.name,
+ emoji: char.emoji || '👤'
+ };
+
+ // Extract details (appearance, demeanor, etc.)
+ if (char.details) {
+ // Map details object to custom fields by snake_case name
+ for (const field of enabledFields) {
+ const fieldKey = toSnakeCase(field.name);
+ if (char.details[fieldKey] !== undefined) {
+ character[field.name] = stripBrackets(char.details[fieldKey]);
+ }
+ }
+ }
+
+ // Also check for fields at root level (for backward compatibility)
+ for (const field of enabledFields) {
+ const fieldKey = toSnakeCase(field.name);
+ if (char[fieldKey] !== undefined) {
+ character[field.name] = stripBrackets(char[fieldKey]);
+ }
+ }
+
+ // Extract relationship
+ if (char.relationship) {
+ character.Relationship = stripBrackets(char.relationship.status || char.relationship);
+ }
+
+ // Extract thoughts content for bubble display
+ if (char.thoughts) {
+ character.ThoughtsContent = stripBrackets(char.thoughts.content || char.thoughts);
+ }
+
+ // Extract character stats if present
+ if (char.stats && enabledCharStats.length > 0) {
+ // Handle both object format {Health: 100, Energy: 95} and array format [{name: "Health", value: 100}]
+ if (Array.isArray(char.stats)) {
+ // Array format: [{name: "Health", value: 100}, {name: "Energy", value: 95}]
+ for (const statObj of char.stats) {
+ if (statObj.name && statObj.value !== undefined) {
+ const matchingStat = enabledCharStats.find(s => s.name === statObj.name);
+ if (matchingStat) {
+ character[statObj.name] = statObj.value;
+ }
+ }
+ }
+ } else {
+ // Object format: {Health: 100, Energy: 95}
+ for (const stat of enabledCharStats) {
+ if (char.stats[stat.name] !== undefined) {
+ character[stat.name] = char.stats[stat.name];
+ }
+ }
+ }
+ }
+
+ return character;
+ });
+
+ debugLog('[RPG Thoughts] ✓ Parsed JSON format, characters:', presentCharacters.length);
+ }
+ } catch (e) {
+ debugLog('[RPG Thoughts] Not JSON format, falling back to text parsing');
+ }
+
+ // If JSON parsing failed or returned empty, try text format
+ if (presentCharacters.length === 0) {
+ const lines = characterThoughtsData.split('\n');
+ debugLog('[RPG Thoughts] Split into lines count:', lines.length);
+ debugLog('[RPG Thoughts] Lines:', lines);
// Parse new multi-line format:
// - [Name]
@@ -354,23 +284,7 @@ export function renderThoughts() {
let lineNumber = 0;
let currentCharacter = null;
- // Pre-process: normalize the format to handle cases where "- char" appears mid-line
- // This handles: "Thoughts: ... - char 2" by splitting it into separate lines
- const normalizedLines = [];
- for (let line of lines) {
- // Check if line contains "- [name]" pattern after some content (not at start)
- // Match pattern like "some text - CharName" where there's content before the dash
- const midLineCharMatch = line.match(/^(.+?)\s+-\s+([A-Z][a-zA-Z\s]+)$/);
- if (midLineCharMatch && !line.trim().startsWith('- ')) {
- // Split: first part stays as one line, "- Name" becomes new line
- normalizedLines.push(midLineCharMatch[1].trim());
- normalizedLines.push('- ' + midLineCharMatch[2].trim());
- } else {
- normalizedLines.push(line);
- }
- }
-
- for (const line of normalizedLines) {
+ for (const line of lines) {
lineNumber++;
// Skip empty lines, headers, dividers, and code fences
@@ -443,10 +357,10 @@ export function renderThoughts() {
debugLog(`[RPG Thoughts] Skipping thoughts/feelings line (handled in bubble rendering)`);
}
}
+ } // End of text format parsing
// Get relationship emojis from config (with fallback defaults)
- // Support both new and legacy structure
- const relationshipEmojis = config?.relationships?.relationshipEmojis || config?.relationshipEmojis || {
+ const relationshipEmojis = config?.relationshipEmojis || {
'Enemy': '⚔️',
'Neutral': '⚖️',
'Friend': '⭐',
@@ -462,8 +376,8 @@ export function renderThoughts() {
debugLog('[RPG Thoughts] ==================== BUILDING HTML ====================');
debugLog('[RPG Thoughts] Starting HTML generation for', presentCharacters.length + ' characters');
- // If no characters parsed, show a placeholder editable card (if narrator mode is disabled)
- if (presentCharacters.length === 0 && !extensionSettings.narratorMode) {
+ // 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
let defaultPortrait = FALLBACK_AVATAR_DATA_URI;
@@ -479,24 +393,17 @@ export function renderThoughts() {
defaultName = characters[this_chid].name || 'Character';
}
- const escapedDefaultName = escapeHtmlAttr(defaultName);
-
- // Determine right-click action text based on auto-generate setting
- const defaultAvatarRightClickAction = extensionSettings.autoGenerateAvatars
- ? 'Right-click to regenerate avatar'
- : 'Right-click to delete avatar';
-
html += '';
html += `
-
@@ -855,3 +891,81 @@
-
- 
-
@@ -837,7 +873,7 @@
⚖️
+
+
@@ -809,7 +845,7 @@
@@ -823,7 +859,7 @@
+
+
⚖️
- 😊
- ${defaultName}
+ 😊
+ ${defaultName}
`;
@@ -504,7 +411,7 @@ export function renderThoughts() {
for (const field of enabledFields) {
const fieldId = field.name.toLowerCase().replace(/\s+/g, '-');
html += `
-
+
`;
}
@@ -523,10 +430,66 @@ export function renderThoughts() {
try {
debugLog(`[RPG Thoughts] Building HTML for character ${characterIndex}/${presentCharacters.length}:`, char.name);
- // Find character portrait using the new helper function
- const characterPortrait = getCharacterAvatar(char.name);
+ // Find character portrait
+ // Use a base64-encoded SVG placeholder as fallback to avoid 400 errors
+ let characterPortrait = FALLBACK_AVATAR_DATA_URI;
- debugLog(`[RPG Thoughts] Final avatar for ${char.name}:`, typeof characterPortrait === 'string' ? characterPortrait.substring(0, 50) + '...' : characterPortrait);
+ debugLog(`[RPG Thoughts] Looking up avatar for: ${char.name}`);
+
+ // For group chats, search through group members first
+ if (selected_group) {
+ debugLog('[RPG Thoughts] In group chat, checking group members...');
+
+ try {
+ const groupMembers = getGroupMembers(selected_group);
+ debugLog('[RPG Thoughts] Group members count:', groupMembers ? groupMembers.length : 0);
+
+ if (groupMembers && groupMembers.length > 0) {
+ const matchingMember = groupMembers.find(member =>
+ member && member.name && namesMatch(member.name, char.name)
+ );
+
+ if (matchingMember && matchingMember.avatar && matchingMember.avatar !== 'none') {
+ const thumbnailUrl = getSafeThumbnailUrl('avatar', matchingMember.avatar);
+ if (thumbnailUrl) {
+ characterPortrait = thumbnailUrl;
+ debugLog('[RPG Thoughts] Found avatar in group members');
+ }
+ }
+ }
+ } catch (groupError) {
+ debugLog('[RPG Thoughts] Error checking group members:', groupError.message);
+ }
+ }
+
+ // For regular chats or if not found in group, search all characters
+ if (characterPortrait === FALLBACK_AVATAR_DATA_URI && characters && characters.length > 0) {
+ debugLog('[RPG Thoughts] Searching all characters...');
+
+ const matchingCharacter = characters.find(c =>
+ c && c.name && namesMatch(c.name, char.name)
+ );
+
+ if (matchingCharacter && matchingCharacter.avatar && matchingCharacter.avatar !== 'none') {
+ const thumbnailUrl = getSafeThumbnailUrl('avatar', matchingCharacter.avatar);
+ if (thumbnailUrl) {
+ characterPortrait = thumbnailUrl;
+ debugLog('[RPG Thoughts] Found avatar in all characters');
+ }
+ }
+ }
+
+ // If this is the current character in a 1-on-1 chat, use their portrait
+ if (this_chid !== undefined && characters[this_chid] &&
+ characters[this_chid].name && namesMatch(characters[this_chid].name, char.name)) {
+ const thumbnailUrl = getSafeThumbnailUrl('avatar', characters[this_chid].avatar);
+ if (thumbnailUrl) {
+ characterPortrait = thumbnailUrl;
+ debugLog('[RPG Thoughts] Found avatar from current character');
+ }
+ }
+
+ debugLog(`[RPG Thoughts] Final avatar for ${char.name}:`, characterPortrait.substring(0, 50) + '...');
// Get relationship badge - only if relationships are enabled in config
let relationshipBadge = '⚖️'; // Default
@@ -542,40 +505,41 @@ export function renderThoughts() {
debugLog(`[RPG Thoughts] Building HTML card for ${char.name}...`);
- // Escape character name for use in HTML attributes
- const escapedName = escapeHtmlAttr(char.name);
-
- // Check if avatar is being generated
- const isCurrentlyGenerating = isGenerating(char.name);
-
- // Determine right-click action text based on auto-generate setting
- const avatarRightClickAction = extensionSettings.autoGenerateAvatars
- ? 'Right-click to regenerate avatar'
- : 'Right-click to delete avatar';
-
html += `
-
-
@@ -795,7 +831,7 @@
- 
- ${isCurrentlyGenerating ? '' : ''}
- ${hasRelationshipEnabled ? `
@@ -781,7 +817,7 @@
${relationshipBadge}
` : ''}
+
+
@@ -726,7 +734,7 @@
+
+
+
+
+ ${hasRelationshipEnabled ? `
${relationshipBadge}
` : ''}
- ${char.emoji}
- ${char.name}
-
+ ${char.emoji}
+ ${char.name}
`;
// Render custom fields dynamically
for (const field of enabledFields) {
- const fieldValue = char[field.name] || '';
+ const rawValue = char[field.name];
+ const fieldValue = extractFieldValue(rawValue);
const fieldId = field.name.toLowerCase().replace(/\s+/g, '-');
- html += `
- ${fieldValue}
- `;
+ const fieldNameLower = field.name.toLowerCase();
+ // Skip lock icons for thoughts field
+ const showLock = !fieldNameLower.includes('thought');
+ if (showLock) {
+ const lockIconHtml = getLockIconHtml('characters', `${char.name}.${field.name}`);
+ html += `
+
+ ${lockIconHtml}
+ ${fieldValue}
+
+ `;
+ } else {
+ html += `
+ ${fieldValue}
+ `;
+ }
}
html += `
@@ -584,13 +548,16 @@ export function renderThoughts() {
// Render character stats if enabled (outside rpg-character-info)
if (enabledCharStats.length > 0) {
- html += ``;
+ const lockIconHtml = getLockIconHtml('characters', `${char.name}.stats`);
+ html += `
-
+
+
@@ -219,7 +225,7 @@
Use the Extensions tab to enable/disable
- the RPG Companion extension.
+ the RPG Companion extension entirely
`;
for (const stat of enabledCharStats) {
const statValue = char[stat.name] || 0;
const statColor = getStatColor(statValue, extensionSettings.statBarColorLow, extensionSettings.statBarColorHigh);
html += `
@@ -201,7 +207,7 @@
Color (Low):
Color when stats are at
- 0%
+ 0%.
- ${stat.name}: ${statValue}%
+ ${stat.name}: ${statValue}%
`;
}
@@ -617,11 +584,6 @@ export function renderThoughts() {
$thoughtsContainer.html(html);
- // Restore scroll position to prevent UI jumping
- if (scrollParent.length > 0 && savedScrollTop > 0) {
- scrollParent.scrollTop(savedScrollTop);
- }
-
debugLog('[RPG Thoughts] ✓ HTML rendered to container');
debugLog('[RPG Thoughts] =======================================================');
@@ -634,70 +596,29 @@ export function renderThoughts() {
updateCharacterField(character, field, value);
});
- // Add event handler for avatar uploads
- $thoughtsContainer.find('.rpg-avatar-upload').on('click', function(e) {
- // Prevent triggering if clicking on the relationship badge
- if ($(e.target).hasClass('rpg-relationship-badge') || $(e.target).closest('.rpg-relationship-badge').length > 0) {
- return;
- }
+ // Add event listener for section lock icon clicks (support both click and touch)
+ $thoughtsContainer.find('.rpg-section-lock-icon').on('click touchend', function(e) {
+ e.preventDefault();
+ e.stopPropagation();
+ const $icon = $(this);
+ const trackerType = $icon.data('tracker');
+ const itemPath = $icon.data('path');
+ const currentlyLocked = isItemLocked(trackerType, itemPath);
- const characterName = $(this).data('character');
- console.log('[RPG Companion] Avatar upload clicked for:', characterName);
- uploadNpcAvatar(characterName);
- });
+ // Toggle lock state
+ setItemLock(trackerType, itemPath, !currentlyLocked);
- // Add event handler for regenerating avatars (right-click)
- $thoughtsContainer.find('.rpg-avatar-upload').on('contextmenu', async function(e) {
- // Prevent triggering if clicking on the relationship badge
- if ($(e.target).hasClass('rpg-relationship-badge') || $(e.target).closest('.rpg-relationship-badge').length > 0) {
- return;
- }
+ // Update icon
+ const newIcon = !currentlyLocked ? '🔒' : '🔓';
+ const newTitle = !currentlyLocked ? 'Locked' : 'Unlocked';
+ $icon.text(newIcon);
+ $icon.attr('title', newTitle);
- e.preventDefault(); // Prevent default context menu
- const characterName = $(this).data('character');
- const $avatarEl = $(this);
+ // Toggle 'locked' class for persistent visibility
+ $icon.toggleClass('locked', !currentlyLocked);
- // Check if auto-generation is enabled
- if (!extensionSettings.autoGenerateAvatars) {
- // If auto-generation is disabled, just remove the custom avatar
- if (extensionSettings.npcAvatars && extensionSettings.npcAvatars[characterName]) {
- delete extensionSettings.npcAvatars[characterName];
- saveSettings();
- console.log(`[RPG Companion] Removed custom avatar for: ${characterName}`);
- renderThoughts();
- }
- return;
- }
-
- // Show generating state with spinner overlay
- $avatarEl.addClass('rpg-avatar-generating');
- if (!$avatarEl.find('.rpg-generating-overlay').length) {
- $avatarEl.append('');
- }
- console.log(`[RPG Companion] Regenerating avatar for: ${characterName}`);
-
- try {
- // Regenerate the avatar
- const newUrl = await regenerateAvatar(characterName);
-
- if (newUrl) {
- console.log(`[RPG Companion] Successfully regenerated avatar for: ${characterName}`);
- } else {
- console.warn(`[RPG Companion] Failed to regenerate avatar for: ${characterName}`);
- }
- } catch (error) {
- console.error(`[RPG Companion] Error regenerating avatar for ${characterName}:`, error);
- }
-
- // Re-render to show the new avatar (or fallback)
- renderThoughts();
- });
-
- // Add event handler for character removal
- $thoughtsContainer.find('.rpg-character-remove').on('click', function(e) {
- e.stopPropagation(); // Prevent event bubbling
- const characterName = $(this).data('character');
- removeCharacter(characterName);
+ // Save settings
+ saveSettings();
});
// Remove updating class after animation
@@ -880,7 +801,7 @@ export function updateCharacterField(characterName, field, value) {
}
newCharacterLines.push(`Details: ${detailsParts.join(' | ')}`);
- if (presentCharsConfig?.relationships?.enabled !== false && presentCharsConfig?.relationshipFields?.length > 0) {
+ if (presentCharsConfig?.relationshipFields?.length > 0) {
const emojiToRelationship = { '⚔️': 'Enemy', '⚖️': 'Neutral', '⭐': 'Friend', '❤️': 'Lover' };
const relationshipValue = field === 'Relationship' ? (emojiToRelationship[value] || value) : 'Neutral';
newCharacterLines.push(`Relationship: ${relationshipValue}`);
@@ -964,11 +885,39 @@ export function updateChatThoughts() {
}
// Parse the Present Characters data to get thoughts
- const lines = lastGeneratedData.characterThoughts.split('\n');
- const thoughtsArray = []; // Array of {name, emoji, thought}
+ let thoughtsArray = []; // Array of {name, emoji, thought}
const thoughtsConfig = extensionSettings.trackerConfig?.presentCharacters?.thoughts;
const thoughtsLabel = thoughtsConfig?.name || 'Thoughts';
+ // Try JSON format first
+ try {
+ const parsed = typeof lastGeneratedData.characterThoughts === 'string'
+ ? JSON.parse(lastGeneratedData.characterThoughts)
+ : lastGeneratedData.characterThoughts;
+
+ // Handle both {characters: [...]} and direct array formats
+ const charactersArray = Array.isArray(parsed) ? parsed : (parsed.characters || []);
+
+ if (charactersArray.length > 0) {
+ // Extract thoughts from JSON character objects
+ thoughtsArray = charactersArray
+ .filter(char => char.thoughts && char.thoughts.content)
+ .map(char => ({
+ name: (char.name || '').toLowerCase(),
+ emoji: char.emoji || '👤',
+ thought: char.thoughts.content
+ }));
+
+ debugLog('[RPG Thoughts Bubble] ✓ Parsed JSON format, thoughts:', thoughtsArray.length);
+ }
+ } catch (e) {
+ debugLog('[RPG Thoughts Bubble] Not JSON format, falling back to text parsing');
+ }
+
+ // If JSON parsing failed or returned empty, try text format
+ if (thoughtsArray.length === 0) {
+ const lines = lastGeneratedData.characterThoughts.split('\n');
+
// console.log('[RPG Companion] Parsing thoughts from lines:', lines);
// Parse new format to build character map and thoughts
@@ -1022,6 +971,7 @@ export function updateChatThoughts() {
}
}
}
+ } // End of text format parsing for thoughts bubbles
debugLog('[RPG Thoughts] Parsed thoughts:', thoughtsArray);
@@ -1056,6 +1006,325 @@ export function updateChatThoughts() {
createThoughtPanel($targetMessage, thoughtsArray);
}
+// ===== GLOBAL DRAGGING SETUP FOR THOUGHT ICON (MOBILE ONLY) =====
+// These variables and handlers are set up once, outside createThoughtPanel
+let isDragging = false;
+let touchMoved = false;
+let dragStartTime = 0;
+let dragStartX = 0;
+let dragStartY = 0;
+let iconStartX = 0;
+let iconStartY = 0;
+const DRAG_THRESHOLD = 10;
+const LONG_PRESS_DURATION = 200;
+let rafId = null;
+let pendingX = null;
+let pendingY = null;
+let thoughtIconDragHandlersInitialized = false;
+let justFinishedDragging = false; // Flag to block clicks immediately after drag
+
+function updateIconDragPosition() {
+ if (pendingX !== null && pendingY !== null) {
+ $('#rpg-thought-icon').css({
+ left: pendingX + 'px',
+ top: pendingY + 'px',
+ right: 'auto',
+ bottom: 'auto'
+ });
+ pendingX = null;
+ pendingY = null;
+ }
+ rafId = null;
+}
+
+function initThoughtIconDragHandlers() {
+ if (thoughtIconDragHandlersInitialized) return;
+ thoughtIconDragHandlersInitialized = true;
+
+ console.log('[Thought Icon] Initializing drag handlers ONCE - will attach to icon when created');
+}
+
+// Function to attach drag handlers to a specific icon element
+function attachDragHandlersToIcon($icon) {
+ console.log('[Thought Icon] Attaching handlers to icon element');
+
+ // Remove any existing handlers
+ $icon.off('.thoughtIconDrag');
+
+ // Test: add a simple click handler to verify events work
+ $icon.on('click.thoughtIconDrag', function(e) {
+ // Check global flag set immediately after drag completes
+ if (justFinishedDragging) {
+ console.log('[Thought Icon] CLICK blocked - just finished dragging');
+ e.preventDefault();
+ e.stopPropagation();
+ e.stopImmediatePropagation();
+ return false;
+ }
+ console.log('[Thought Icon] CLICK detected on icon!');
+ });
+
+ // Touch drag support - mobile only
+ $icon.on('touchstart.thoughtIconDrag', function(e) {
+ if (window.innerWidth > 1000) return;
+
+ console.log('[Thought Icon] touchstart');
+ touchMoved = false;
+ dragStartTime = Date.now();
+ const touch = e.originalEvent.touches[0];
+ dragStartX = touch.clientX;
+ dragStartY = touch.clientY;
+
+ const offset = $(this).offset();
+ iconStartX = offset.left;
+ iconStartY = offset.top;
+
+ isDragging = false;
+ });
+
+ $icon.on('touchmove.thoughtIconDrag', function(e) {
+ if (window.innerWidth > 1000) return;
+
+ if (!touchMoved) {
+ console.log('[Thought Icon] touchmove - first movement');
+ }
+ touchMoved = true;
+ const touch = e.originalEvent.touches[0];
+ const deltaX = touch.clientX - dragStartX;
+ const deltaY = touch.clientY - dragStartY;
+ const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+ const timeSinceStart = Date.now() - dragStartTime;
+
+ if (!isDragging && (timeSinceStart > LONG_PRESS_DURATION || distance > DRAG_THRESHOLD)) {
+ isDragging = true;
+ $(this).addClass('dragging');
+ }
+
+ if (isDragging) {
+ e.preventDefault();
+
+ let newX = iconStartX + deltaX;
+ let newY = iconStartY + deltaY;
+
+ const iconWidth = $(this).outerWidth();
+ const iconHeight = $(this).outerHeight();
+
+ const minX = 10;
+ const maxX = window.innerWidth - iconWidth - 10;
+ const minY = 10;
+ const maxY = window.innerHeight - iconHeight - 10;
+
+ newX = Math.max(minX, Math.min(maxX, newX));
+ newY = Math.max(minY, Math.min(maxY, newY));
+
+ pendingX = newX;
+ pendingY = newY;
+ if (!rafId) {
+ rafId = requestAnimationFrame(updateIconDragPosition);
+ }
+ }
+ });
+
+ $icon.on('touchend.thoughtIconDrag', function(e) {
+ console.log('[Thought Icon] touchend - isDragging:', isDragging, 'touchMoved:', touchMoved);
+
+ if (isDragging) {
+ const offset = $(this).offset();
+ const newPosition = {
+ left: offset.left + 'px',
+ top: offset.top + 'px'
+ };
+
+ extensionSettings.thoughtIconPosition = newPosition;
+ saveSettings();
+
+ setTimeout(() => {
+ const $currentIcon = $('#rpg-thought-icon');
+ if ($currentIcon.length) {
+ constrainIconToViewport($currentIcon);
+ }
+ }, 10);
+
+ setTimeout(() => {
+ $(this).removeClass('dragging');
+ }, 50);
+
+ isDragging = false;
+
+ $(this).data('just-dragged', true);
+ setTimeout(() => {
+ $(this).data('just-dragged', false);
+ }, 300);
+
+ e.preventDefault();
+ e.stopPropagation();
+ } else if (!touchMoved) {
+ console.log('[Thought Icon] Opening panel - was a tap');
+ const $panel = $('#rpg-thought-panel');
+ const iconOffset = $(this).offset();
+ if (iconOffset) {
+ $panel.css({
+ top: iconOffset.top + 'px',
+ left: iconOffset.left + 'px',
+ display: 'none'
+ });
+ }
+
+ $(this).addClass('rpg-hidden');
+ $panel.fadeIn(200);
+ } else {
+ console.log('[Thought Icon] Did nothing - touchMoved but not isDragging');
+ }
+ });
+
+ // Mouse drag support - mobile only
+ let mouseDown = false;
+
+ $icon.on('mousedown.thoughtIconDrag', function(e) {
+ if (window.innerWidth > 1000) return;
+
+ console.log('[Thought Icon] mousedown');
+ e.preventDefault();
+
+ mouseDown = true;
+ touchMoved = false;
+ dragStartTime = Date.now();
+ dragStartX = e.clientX;
+ dragStartY = e.clientY;
+
+ const offset = $(this).offset();
+ iconStartX = offset.left;
+ iconStartY = offset.top;
+
+ isDragging = false;
+ });
+
+ $(document).on('mousemove.thoughtIconDrag', function(e) {
+ if (!mouseDown || window.innerWidth > 1000) return;
+
+ if (!touchMoved) {
+ console.log('[Thought Icon] mousemove - first movement');
+ }
+ touchMoved = true;
+
+ const deltaX = e.clientX - dragStartX;
+ const deltaY = e.clientY - dragStartY;
+ const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+ const timeSinceStart = Date.now() - dragStartTime;
+
+ if (!isDragging && (timeSinceStart > LONG_PRESS_DURATION || distance > DRAG_THRESHOLD)) {
+ isDragging = true;
+ $('#rpg-thought-icon').addClass('dragging');
+ }
+
+ if (isDragging) {
+ e.preventDefault();
+
+ let newX = iconStartX + deltaX;
+ let newY = iconStartY + deltaY;
+
+ const $currentIcon = $('#rpg-thought-icon');
+ const iconWidth = $currentIcon.outerWidth();
+ const iconHeight = $currentIcon.outerHeight();
+
+ const minX = 10;
+ const maxX = window.innerWidth - iconWidth - 10;
+ const minY = 10;
+ const maxY = window.innerHeight - iconHeight - 10;
+
+ newX = Math.max(minX, Math.min(maxX, newX));
+ newY = Math.max(minY, Math.min(maxY, newY));
+
+ pendingX = newX;
+ pendingY = newY;
+ if (!rafId) {
+ rafId = requestAnimationFrame(updateIconDragPosition);
+ }
+ }
+ });
+
+ $(document).on('mouseup.thoughtIconDrag', function(e) {
+ if (!mouseDown) return;
+
+ console.log('[Thought Icon] mouseup - isDragging:', isDragging, 'touchMoved:', touchMoved);
+
+ mouseDown = false;
+
+ if (isDragging) {
+ // Set global flag IMMEDIATELY to block click event
+ justFinishedDragging = true;
+ setTimeout(() => {
+ justFinishedDragging = false;
+ }, 300);
+
+ const $currentIcon = $('#rpg-thought-icon');
+
+ // Remove dragging class immediately to restore transitions and cursor
+ $currentIcon.removeClass('dragging');
+
+ const offset = $currentIcon.offset();
+ const newPosition = {
+ left: offset.left + 'px',
+ top: offset.top + 'px'
+ };
+
+ extensionSettings.thoughtIconPosition = newPosition;
+ saveSettings();
+
+ setTimeout(() => {
+ if ($currentIcon.length) {
+ constrainIconToViewport($currentIcon);
+ }
+ }, 10);
+
+ isDragging = false;
+
+ // Prevent default and stop all propagation
+ e.preventDefault();
+ e.stopPropagation();
+ e.stopImmediatePropagation();
+ return false;
+ }
+ // If not dragging but touchMoved, do nothing (small drag below threshold)
+ });
+}
+
+function constrainIconToViewport($icon) {
+ if (!extensionSettings.thoughtIconPosition) return;
+
+ const offset = $icon.offset();
+ if (!offset) return;
+
+ let currentX = offset.left;
+ let currentY = offset.top;
+
+ const iconWidth = $icon.outerWidth();
+ const iconHeight = $icon.outerHeight();
+
+ const minX = 10;
+ const maxX = window.innerWidth - iconWidth - 10;
+ const minY = 10;
+ const maxY = window.innerHeight - iconHeight - 10;
+
+ let newX = Math.max(minX, Math.min(maxX, currentX));
+ let newY = Math.max(minY, Math.min(maxY, currentY));
+
+ if (newX !== currentX || newY !== currentY) {
+ $icon.css({
+ left: newX + 'px',
+ top: newY + 'px',
+ right: 'auto',
+ bottom: 'auto'
+ });
+
+ extensionSettings.thoughtIconPosition = {
+ left: newX + 'px',
+ top: newY + 'px'
+ };
+ saveSettings();
+ }
+}
+
/**
* Creates or updates the floating thought panel positioned next to the character's avatar.
* Handles responsive positioning for left/right panel modes and mobile viewports.
@@ -1064,6 +1333,8 @@ export function updateChatThoughts() {
* @param {Array} thoughtsArray - Array of thought objects {name, emoji, thought}
*/
export function createThoughtPanel($message, thoughtsArray) {
+ // Initialize drag handlers once
+ initThoughtIconDragHandlers();
// Remove existing thought panel
$('#rpg-thought-panel').remove();
$('#rpg-thought-icon').remove();
@@ -1082,13 +1353,12 @@ export function createThoughtPanel($message, thoughtsArray) {
// Build thought bubbles HTML
let thoughtsHtml = '';
thoughtsArray.forEach((thought, index) => {
- const escapedThoughtName = escapeHtmlAttr(thought.name);
thoughtsHtml += `
${thought.emoji}
-
+
@@ -1133,139 +1403,230 @@ export function createThoughtPanel($message, thoughtsArray) {
$thoughtIcon.css(customStyles);
}
- // Force a consistent width for the bubble to ensure proper positioning
- $thoughtPanel.css('width', '350px');
-
// Append to body so it's not clipped by chat container
$('body').append($thoughtPanel);
- $('body').append($thoughtIcon); // Position the panel next to the avatar
- const panelWidth = 350;
- const panelMargin = 20;
+ $('body').append($thoughtIcon);
- let top = avatarRect.top; // Align top of panel with top of avatar
- let left;
- let right;
- let useRightPosition = false;
- let iconTop = avatarRect.top;
- let iconLeft;
+ // Attach drag handlers to the icon
+ attachDragHandlersToIcon($thoughtIcon);
- // Detect mobile viewport (matches CSS breakpoint)
- const isMobile = window.innerWidth <= 1000;
+ // Simple viewport-based positioning - always top-left corner
+ const margin = 20;
+ const topMargin = 10; // Space between ST's top bar and thought panel
- if (isMobile) {
- // On mobile: position icon horizontally centered on avatar
- // The CSS transform will shift it upward by 60px
- iconTop = avatarRect.top; // Start at avatar top (CSS will move it up)
- iconLeft = avatarRect.left + (avatarRect.width / 2) - 18; // Centered horizontally (18px = half of 36px icon width)
+ // Function to calculate top position based on ST's top bar
+ const getTopPosition = () => {
+ const topBar = $('#top-settings-holder');
+ if (topBar.length) {
+ return (topBar.outerHeight() || 140) + topMargin;
+ }
+ return 140 + topMargin; // Fallback
+ };
- // Center the thought panel horizontally on mobile
- left = window.innerWidth / 2 - panelWidth / 2;
- top = avatarRect.top + avatarRect.height + 60; // Position below icon with spacing
+ // Function to update bubble position and width
+ const updateBubblePosition = () => {
+ const topPosition = getTopPosition();
+ const sheld = $('#sheld')[0];
+ const isRightPanel = extensionSettings.panelPosition === 'right';
- // No side-specific classes on mobile
- $thoughtPanel.removeClass('rpg-thought-panel-left rpg-thought-panel-right');
- $thoughtIcon.removeClass('rpg-thought-icon-left rpg-thought-icon-right');
+ // Update top position for panel (always in desktop)
+ $thoughtPanel.css('top', `${topPosition}px`);
- console.log('[RPG Companion] Mobile thought icon positioning:', {
- isMobile,
- windowWidth: window.innerWidth,
- avatarLeft: avatarRect.left,
- avatarWidth: avatarRect.width,
- iconLeft,
- iconTop
- });
- } else if (panelPosition === 'left') {
- // Main panel is on left, so thought bubble goes to RIGHT side
- const chatContainer = $('#chat')[0];
- const chatRect = chatContainer ? chatContainer.getBoundingClientRect() : { right: window.innerWidth };
-
- // Calculate how much space is available to the right of the chat
- const spaceRight = window.innerWidth - chatRect.right;
-
- // If there's enough space, position normally; otherwise, adjust
- if (spaceRight >= panelWidth + panelMargin * 2) {
- left = chatRect.right + panelMargin;
+ // Update horizontal position based on panel position
+ // If panel is on right, thoughts on left (default)
+ // If panel is on left, thoughts on right (mirrored)
+ if (isRightPanel) {
+ $thoughtPanel.css({
+ left: `${margin}px`,
+ right: 'auto'
+ }).removeClass('rpg-thought-panel-right').addClass('rpg-thought-panel-left');
} else {
- // Not enough space on the right, position closer to chat or slightly overlapping
- left = Math.max(chatRect.right - panelWidth - panelMargin, window.innerWidth - panelWidth - 10);
+ // Panel on left, so thoughts on right
+ $thoughtPanel.css({
+ left: 'auto',
+ right: `${margin}px`
+ }).removeClass('rpg-thought-panel-left').addClass('rpg-thought-panel-right');
}
- useRightPosition = false;
- iconLeft = chatRect.right + 10;
- $thoughtPanel.addClass('rpg-thought-panel-right');
- $thoughtIcon.addClass('rpg-thought-icon-right');
-
- // Circles use default CSS positioning
- } else {
- // Main panel is on right, so thought bubble goes on left (near avatar)
- const chatContainer = $('#chat')[0];
- const chatRect = chatContainer ? chatContainer.getBoundingClientRect() : { left: 0 };
-
- // Calculate how much space is available to the left of the chat
- const spaceLeft = chatRect.left;
-
- // If there's enough space, position normally; otherwise, adjust
- if (spaceLeft >= panelWidth + panelMargin * 2) {
- left = avatarRect.left - panelWidth - panelMargin;
+ // Only update icon position if in desktop mode or if no saved position in mobile
+ if (window.innerWidth > 1000) {
+ // Desktop: update icon to match panel position (though it's hidden)
+ if (isRightPanel) {
+ $thoughtIcon.css({
+ left: `${margin}px`,
+ right: 'auto'
+ });
+ } else {
+ $thoughtIcon.css({
+ left: 'auto',
+ right: `${margin}px`
+ });
+ }
} else {
- // Not enough space on the left, position it within visible area
- left = Math.max(10, avatarRect.left - panelWidth - panelMargin);
+ // Mobile: only set default if no saved position exists
+ const iconPos = extensionSettings.thoughtIconPosition;
+ if (!iconPos || (!iconPos.top && !iconPos.left)) {
+ // Position icon in the center of the viewport
+ const defaultTop = window.innerHeight / 2;
+ const defaultLeft = window.innerWidth / 2;
+ $thoughtIcon.css({
+ 'top': `${defaultTop}px`,
+ 'left': `${defaultLeft}px`
+ });
+ }
}
- iconLeft = Math.max(10, avatarRect.left - 40);
- $thoughtPanel.addClass('rpg-thought-panel-left');
- $thoughtIcon.addClass('rpg-thought-icon-left');
+ // Update width based on available space
+ if (sheld) {
+ const sheldRect = sheld.getBoundingClientRect();
+ let availableWidth;
+ if (isRightPanel) {
+ availableWidth = sheldRect.left - (margin * 2);
+ } else {
+ // Panel on left, calculate space on right
+ availableWidth = window.innerWidth - sheldRect.right - (margin * 2);
+ }
+ const maxWidth = Math.min(350, Math.max(200, availableWidth));
+ $thoughtPanel.css('max-width', `${maxWidth}px`);
+ } else {
+ $thoughtPanel.css('max-width', '350px');
+ }
+ };
- // Circles use default CSS positioning
- }
-
- if (useRightPosition) {
+ // Set initial position and width (will be updated by updateBubblePosition)
+ const isRightPanel = extensionSettings.panelPosition === 'right';
+ if (isRightPanel) {
$thoughtPanel.css({
- top: `${top}px`,
- right: `${right}px`,
- left: 'auto' // Clear left positioning
+ left: `${margin}px`,
+ right: 'auto'
+ }).addClass('rpg-thought-panel-left');
+
+ $thoughtIcon.css({
+ left: `${margin}px`,
+ right: 'auto'
});
} else {
$thoughtPanel.css({
- top: `${top}px`,
- left: `${left}px`,
- right: 'auto' // Clear right positioning
+ left: 'auto',
+ right: `${margin}px`
+ }).addClass('rpg-thought-panel-right');
+
+ $thoughtIcon.css({
+ left: 'auto',
+ right: `${margin}px`
});
}
- $thoughtIcon.css({
- top: `${iconTop}px`,
- left: `${iconLeft}px`,
- right: 'auto' // Clear any right positioning
+ updateBubblePosition();
+
+ // Update on window resize and when ST's layout changes
+ $(window).on('resize.rpgThoughtBubble', updateBubblePosition);
+
+ // Desktop: always show panel, hide icon
+ // Mobile: show icon, hide panel initially
+ const isMobileView = window.innerWidth <= 1000;
+
+ if (isMobileView) {
+ $thoughtPanel.hide();
+ // Remove force-hide class to let CSS media query show icon
+ $thoughtIcon.removeClass('rpg-force-hide');
+
+ // Load saved icon position in mobile, or default to center of viewport
+ if (extensionSettings.thoughtIconPosition && extensionSettings.thoughtIconPosition.top && extensionSettings.thoughtIconPosition.left) {
+ const pos = extensionSettings.thoughtIconPosition;
+ $thoughtIcon.css({
+ top: pos.top,
+ left: pos.left,
+ transform: 'none',
+ right: 'auto',
+ bottom: 'auto'
+ });
+ } else {
+ // Default position: center of viewport
+ $thoughtIcon.css({
+ top: '50%',
+ left: '50%',
+ transform: 'translate(-50%, -50%)',
+ right: 'auto',
+ bottom: 'auto'
+ });
+ }
+ } else {
+ // Desktop: show panel, hide icon with class
+ $thoughtPanel.css('display', 'block');
+ $thoughtIcon.addClass('rpg-force-hide');
+ }
+
+ // Handle viewport changes between mobile and desktop
+ let wasMobileView = window.innerWidth <= 1000;
+ $(window).on('resize.thoughtIconDrag', () => {
+ const isMobileNow = window.innerWidth <= 1000;
+
+ if (!wasMobileView && isMobileNow) {
+ // Switched to mobile - apply saved position if exists
+ const $currentIcon = $('#rpg-thought-icon');
+ if (extensionSettings.thoughtIconPosition) {
+ const pos = extensionSettings.thoughtIconPosition;
+ if (pos.top) $currentIcon.css('top', pos.top);
+ if (pos.left) $currentIcon.css('left', pos.left);
+ }
+ }
+
+ // Constrain icon if in mobile view
+ if (isMobileNow) {
+ setTimeout(() => {
+ const $currentIcon = $('#rpg-thought-icon');
+ if ($currentIcon.length) {
+ constrainIconToViewport($currentIcon);
+ }
+ }, 10);
+ }
+
+ wasMobileView = isMobileNow;
});
- // Check if always show bubble is enabled
- if (extensionSettings.alwaysShowThoughtBubble) {
- // Always show panel expanded, hide both close button and icon
- $thoughtPanel.show();
- $thoughtPanel.find('.rpg-thought-close').hide();
- $thoughtIcon.hide();
- } else {
- // Initially hide the panel and show the icon
- $thoughtPanel.hide();
- $thoughtIcon.show();
+ // Close button functionality (mobile only) - support both click and touch
+ $thoughtPanel.find('.rpg-thought-close').on('click touchend', function(e) {
+ e.preventDefault();
+ e.stopPropagation();
+ // Only hide/show in mobile view
+ if (window.innerWidth <= 1000) {
+ $thoughtPanel.fadeOut(200, function() {
+ // Make sure icon is visible and clean state when panel closes (use selector, not variable)
+ const $icon = $('#rpg-thought-icon');
+ $icon.removeClass('rpg-hidden dragging');
+ $icon.data('just-dragged', false);
+ });
+ }
+ });
- // Close button functionality - only when always show is disabled
- $thoughtPanel.find('.rpg-thought-close').on('click', function(e) {
- e.stopPropagation();
- $thoughtPanel.fadeOut(200);
- $thoughtIcon.fadeIn(200);
- });
+ // Icon click/tap to show panel (mobile only)
+ const handleThoughtIconTap = function(e) {
+ // Skip if we just finished dragging
+ if ($thoughtIcon.data('just-dragged')) {
+ return;
+ }
+ e.preventDefault();
+ e.stopPropagation();
- // Icon click to show panel - only when always show is disabled
- $thoughtIcon.on('click', function(e) {
- e.stopPropagation();
- $thoughtIcon.fadeOut(200);
- $thoughtPanel.fadeIn(200);
- });
- }
+ // In mobile view, position panel below ST's top bar and fit full screen
+ if (window.innerWidth <= 1000) {
+ const topBar = $('#top-settings-holder');
+ const topBarHeight = topBar.length ? topBar.outerHeight() : 60;
+ const topPosition = topBarHeight + 10; // 10px margin below top bar
- // console.log('[RPG Companion] Thought panel created at:', { top, left });
+ $thoughtPanel.css({
+ top: topPosition + 'px',
+ display: 'none' // Keep hidden while setting position
+ });
+ }
+
+ $thoughtIcon.addClass('rpg-hidden');
+ $thoughtPanel.fadeIn(200);
+ };
+
+ // Support both click and touch events for mobile
+ $thoughtIcon.on('click touchend', handleThoughtIconTap);
// Add event handlers for editable thoughts in the bubble
$thoughtPanel.find('.rpg-editable').on('blur', function() {
@@ -1276,95 +1637,66 @@ export function createThoughtPanel($message, thoughtsArray) {
updateCharacterField(character, field, value);
});
+ // Add event listener for section lock icon clicks (support both click and touch)
+ $thoughtPanel.find('.rpg-section-lock-icon').on('click touchend', function(e) {
+ e.preventDefault();
+ e.stopPropagation();
+ const $icon = $(this);
+ const trackerType = $icon.data('tracker');
+ const itemPath = $icon.data('path');
+ const currentlyLocked = isItemLocked(trackerType, itemPath);
+
+ // Toggle lock state
+ setItemLock(trackerType, itemPath, !currentlyLocked);
+
+ // Update icon
+ const newIcon = !currentlyLocked ? '🔒' : '🔓';
+ const newTitle = !currentlyLocked ? 'Locked' : 'Unlocked';
+ $icon.text(newIcon);
+ $icon.attr('title', newTitle);
+
+ // Toggle 'locked' class for persistent visibility
+ $icon.toggleClass('locked', !currentlyLocked);
+
+ // Save settings
+ saveSettings();
+ });
+
// RAF throttling for smooth position updates
let positionUpdateRaf = null;
- // Update position on scroll with RAF throttling
+ // Update position on scroll with RAF throttling - DISABLED for fixed top-left positioning
const updatePanelPosition = () => {
+ // Bubble is now fixed at top-left, no need to update position on scroll
+ // Just check visibility
if (!$message.is(':visible')) {
$thoughtPanel.hide();
$thoughtIcon.hide();
- return;
- }
-
- // Cancel any pending RAF
- if (positionUpdateRaf) {
- cancelAnimationFrame(positionUpdateRaf);
- }
-
- // Schedule update on next frame
- positionUpdateRaf = requestAnimationFrame(() => {
- const newAvatarRect = $avatar[0].getBoundingClientRect();
- const newTop = newAvatarRect.top; // Align with avatar top
- const newIconTop = newAvatarRect.top;
- let newLeft, newIconLeft;
-
- const isMobileNow = window.innerWidth <= 1000;
-
- if (isMobileNow) {
- newLeft = window.innerWidth / 2 - panelWidth / 2;
- newIconLeft = newAvatarRect.left + (newAvatarRect.width / 2) - 18;
- } else if (panelPosition === 'left') {
- // Position at chat's right edge, extending right
- const chatContainer = $('#chat')[0];
- const chatRect = chatContainer ? chatContainer.getBoundingClientRect() : { right: window.innerWidth };
- const spaceRight = window.innerWidth - chatRect.right;
-
- if (spaceRight >= panelWidth + panelMargin * 2) {
- newLeft = chatRect.right + panelMargin;
- } else {
- newLeft = Math.max(chatRect.right - panelWidth - panelMargin, window.innerWidth - panelWidth - 10);
- }
- newIconLeft = chatRect.right + 10;
- } else {
- // Left position relative to avatar
- const chatContainer = $('#chat')[0];
- const chatRect = chatContainer ? chatContainer.getBoundingClientRect() : { left: 0 };
- const spaceLeft = chatRect.left;
-
- if (spaceLeft >= panelWidth + panelMargin * 2) {
- newLeft = newAvatarRect.left - panelWidth - panelMargin;
- } else {
- newLeft = Math.max(10, newAvatarRect.left - panelWidth - panelMargin);
- }
- newIconLeft = Math.max(10, newAvatarRect.left - 40);
- }
-
- $thoughtPanel.css({
- top: `${newTop}px`,
- left: `${newLeft}px`,
- right: 'auto'
- });
-
- $thoughtIcon.css({
- top: `${newIconTop}px`,
- left: `${newIconLeft}px`,
- right: 'auto'
- });
-
+ } else {
if ($thoughtPanel.is(':visible')) {
$thoughtPanel.show();
}
if ($thoughtIcon.is(':visible')) {
$thoughtIcon.show();
}
-
- positionUpdateRaf = null;
- });
+ }
};
- // Update position on scroll and resize
+ // Update visibility on scroll (but not position)
$('#chat').on('scroll.thoughtPanel', updatePanelPosition);
- $(window).on('resize.thoughtPanel', updatePanelPosition);
- // Remove panel when clicking outside - only if always show is disabled
- if (!extensionSettings.alwaysShowThoughtBubble) {
- $(document).on('click.thoughtPanel', function(e) {
+ // Don't listen to window resize for position - we handle width separately
+ // Position stays fixed at top-left
+
+ // Remove panel when clicking outside (mobile only)
+ $(document).on('click.thoughtPanel', function(e) {
+ // Only hide on click outside in mobile view
+ if (window.innerWidth <= 1000) {
if (!$(e.target).closest('#rpg-thought-panel, #rpg-thought-icon').length) {
- // Hide the panel and show the icon instead of removing
- $thoughtPanel.fadeOut(200);
- $thoughtIcon.fadeIn(200);
+ // Hide the panel and show the icon instead of removing (use selectors, not variables)
+ $('#rpg-thought-panel').fadeOut(200);
+ $('#rpg-thought-icon').removeClass('rpg-hidden').fadeIn(200);
}
- });
- }
+ }
+ });
}
diff --git a/src/systems/rendering/userStats.js b/src/systems/rendering/userStats.js
index 14a3e63..4d4fc73 100644
--- a/src/systems/rendering/userStats.js
+++ b/src/systems/rendering/userStats.js
@@ -19,6 +19,7 @@ import {
} from '../../core/persistence.js';
import { getSafeThumbnailUrl } from '../../utils/avatars.js';
import { buildInventorySummary } from '../generation/promptBuilder.js';
+import { isItemLocked, setItemLock } from '../generation/lockManager.js';
/**
* Builds the user stats text string using custom stat names
@@ -67,6 +68,107 @@ export function buildUserStatsText() {
return text.trim();
}
+/**
+ * Updates lastGeneratedData.userStats and committedTrackerData.userStats
+ * Maintains JSON format if current data is JSON, otherwise uses text format.
+ * @private
+ */
+function updateUserStatsData() {
+ // Check if current data is in JSON format
+ const currentData = lastGeneratedData.userStats || committedTrackerData.userStats;
+ if (currentData) {
+ const trimmed = currentData.trim();
+ if (trimmed.startsWith('{') || trimmed.startsWith('[')) {
+ // Maintain JSON format
+ try {
+ const jsonData = JSON.parse(currentData);
+ if (jsonData && typeof jsonData === 'object') {
+ const stats = extensionSettings.userStats;
+ const config = extensionSettings.trackerConfig?.userStats || {};
+ const enabledStats = config.customStats?.filter(stat => stat && stat.enabled && stat.name && stat.id) || [];
+
+ // Build stats array - include all stats from extensionSettings, not just enabled ones
+ // This preserves custom stats that AI might have added or that user has disabled
+ const statsArray = [];
+ const processedIds = new Set();
+
+ // First, add all enabled stats from config (maintains order)
+ enabledStats.forEach(stat => {
+ statsArray.push({
+ id: stat.id,
+ name: stat.name,
+ value: stats[stat.id] !== undefined ? stats[stat.id] : 100
+ });
+ processedIds.add(stat.id);
+ });
+
+ // Then, add any other numeric stats from extensionSettings that aren't in config
+ // (these could be custom stats the AI added or disabled stats)
+ const excludeFields = new Set(['mood', 'conditions', 'inventory', 'skills', 'level']);
+ Object.entries(stats).forEach(([key, value]) => {
+ if (!processedIds.has(key) && !excludeFields.has(key) && typeof value === 'number') {
+ statsArray.push({
+ id: key,
+ name: key.charAt(0).toUpperCase() + key.slice(1),
+ value: value
+ });
+ }
+ });
+
+ jsonData.stats = statsArray;
+
+ // Update status
+ jsonData.status = {
+ mood: stats.mood || '😐',
+ conditions: stats.conditions || 'None'
+ };
+
+ // Update inventory (convert to v3 format)
+ const convertToV3Items = (itemString) => {
+ if (!itemString) return [];
+ const items = itemString.split(',').map(s => s.trim()).filter(s => s);
+ return items.map(item => {
+ const qtyMatch = item.match(/^(\\d+)x\\s+(.+)$/);
+ if (qtyMatch) {
+ return { name: qtyMatch[2].trim(), quantity: parseInt(qtyMatch[1]) };
+ }
+ return { name: item, quantity: 1 };
+ });
+ };
+
+ jsonData.inventory = {
+ onPerson: convertToV3Items(stats.inventory?.onPerson),
+ clothing: convertToV3Items(stats.inventory?.clothing),
+ stored: stats.inventory?.stored || {},
+ assets: convertToV3Items(stats.inventory?.assets)
+ };
+
+ // Update quests
+ jsonData.quests = extensionSettings.quests || { main: '', optional: [] };
+
+ // Update skills if present
+ if (stats.skills) {
+ jsonData.skills = Array.isArray(stats.skills) ? stats.skills :
+ stats.skills.split(',').map(s => s.trim()).filter(s => s);
+ }
+
+ const updatedJSON = JSON.stringify(jsonData, null, 2);
+ lastGeneratedData.userStats = updatedJSON;
+ committedTrackerData.userStats = updatedJSON;
+ return;
+ }
+ } catch (e) {
+ console.warn('[RPG Companion] Failed to parse JSON, falling back to text format:', e);
+ }
+ }
+ }
+
+ // Fall back to text format
+ const statsText = buildUserStatsText();
+ lastGeneratedData.userStats = statsText;
+ committedTrackerData.userStats = statsText;
+}
+
/**
* Renders the user stats panel with health bars, mood, inventory, and classic stats.
* Includes event listeners for editable fields.
@@ -77,7 +179,36 @@ export function renderUserStats() {
return;
}
+ // Don't render if no data exists (e.g., after cache clear)
+ // Check both lastGeneratedData and committedTrackerData
+ console.log('[RPG UserStats Render] Checking data:', {
+ hasLastGenerated: !!lastGeneratedData.userStats,
+ hasCommitted: !!committedTrackerData.userStats,
+ lastGeneratedPreview: lastGeneratedData.userStats ? lastGeneratedData.userStats.substring(0, 100) : 'null',
+ committedPreview: committedTrackerData.userStats ? committedTrackerData.userStats.substring(0, 100) : 'null'
+ });
+
+ if (!lastGeneratedData.userStats && !committedTrackerData.userStats) {
+ // Always render to the #rpg-user-stats container (mobile layout just moves it around in DOM)
+ $userStatsContainer.html('
${thought.thought}
No statuses generated yet
');
+ return;
+ }
+
+ // Use lastGeneratedData if available, otherwise fall back to committed data
+ if (!lastGeneratedData.userStats && committedTrackerData.userStats) {
+ lastGeneratedData.userStats = committedTrackerData.userStats;
+ }
+
const stats = extensionSettings.userStats;
+ console.log('[RPG UserStats Render] Current extensionSettings.userStats:', {
+ health: stats.health,
+ satiety: stats.satiety,
+ energy: stats.energy,
+ hygiene: stats.hygiene,
+ arousal: stats.arousal,
+ mood: stats.mood,
+ conditions: stats.conditions
+ });
const config = extensionSettings.trackerConfig?.userStats || {
customStats: [
{ id: 'health', name: 'Health', enabled: true },
@@ -116,20 +247,32 @@ export function renderUserStats() {
// Create gradient from low to high color
const gradient = `linear-gradient(to right, ${extensionSettings.statBarColorLow}, ${extensionSettings.statBarColorHigh})`;
- let html = '';
+ // Check if stats bars section is locked
+ const isStatsLocked = isItemLocked('userStats', 'stats');
+ const lockIcon = isStatsLocked ? '🔒' : '🔓';
+ const lockTitle = isStatsLocked ? 'Locked - AI cannot change stats' : 'Unlocked - AI can change stats';
+ const lockedClass = isStatsLocked ? ' locked' : '';
+
+ let html = '
';
+ html += '
-
-
- ';
// User info row
+ const showLevel = extensionSettings.trackerConfig?.userStats?.showLevel !== false;
html += `
${userName}
- |
+ ${showLevel ? `|
LVL
- ${extensionSettings.level}
+ ${extensionSettings.level}` : ''}
`;
// Dynamic stats grid - only show enabled stats
+ const showLockIcons = extensionSettings.showLockIcons ?? true;
+ if (showLockIcons) {
+ html += ``;
+ }
html += '
';
const enabledStats = config.customStats.filter(stat => stat && stat.enabled && stat.name && stat.id);
@@ -149,7 +292,14 @@ export function renderUserStats() {
// Status section (conditionally rendered)
if (config.statusSection.enabled) {
+ const isMoodLocked = isItemLocked('userStats', 'status');
+ const moodLockIcon = isMoodLocked ? '🔒' : '🔓';
+ const moodLockTitle = isMoodLocked ? 'Locked - AI cannot change mood' : 'Unlocked - AI can change mood';
+ const moodLockedClass = isMoodLocked ? ' locked' : '';
html += '
-
-
-
+
+ ';
+ if (showLockIcons) {
+ html += ``;
+ }
if (config.statusSection.showMoodEmoji) {
html += `
';
+ // Show/hide level toggle
+ const showLevel = config.showLevel !== undefined ? config.showLevel : true;
+ html += '${stats.mood}
`;
@@ -158,7 +308,11 @@ export function renderUserStats() {
// 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';
+ let conditionsValue = stats.conditions || 'None';
+ // Strip brackets if present (from JSON array format)
+ if (typeof conditionsValue === 'string') {
+ conditionsValue = conditionsValue.replace(/^\[|\]$/g, '').trim();
+ }
html += `${conditionsValue}
`;
}
@@ -167,9 +321,24 @@ export function renderUserStats() {
// Skills section (conditionally rendered)
if (config.skillsSection.enabled) {
- const skillsValue = stats.skills || 'None';
+ const isSkillsLocked = isItemLocked('userStats', 'skills');
+ const skillsLockIcon = isSkillsLocked ? '🔒' : '🔓';
+ const skillsLockTitle = isSkillsLocked ? 'Locked - AI cannot change skills' : 'Unlocked - AI can change skills';
+ const skillsLockedClass = isSkillsLocked ? ' locked' : '';
+ let skillsValue = 'None';
+ // Handle JSON array format: [{name: "Art"}, {name: "Coding"}]
+ if (Array.isArray(stats.skills)) {
+ skillsValue = stats.skills.map(s => s.name || s).join(', ') || 'None';
+ } else if (stats.skills) {
+ skillsValue = stats.skills;
+ }
+ html += `
+ `;
+ if (showLockIcons) {
+ html += `
+ `;
+ }
html += `
-
'; // Close rpg-stats-content
+ console.log('[RPG UserStats Render] Generated HTML length:', html.length);
+ console.log('[RPG UserStats Render] HTML preview:', html.substring(0, 300));
+ console.log('[RPG UserStats Render] Container exists:', !!$userStatsContainer, '$userStatsContainer length:', $userStatsContainer?.length);
+
+ // Always render to the #rpg-user-stats container (mobile layout just moves it around in DOM)
$userStatsContainer.html(html);
+ console.log('[RPG UserStats Render] ✓ HTML rendered to #rpg-user-stats container');
// Add event listeners for editable stat values
$('.rpg-editable-stat').on('blur', function() {
@@ -242,13 +417,8 @@ export function renderUserStats() {
// Update the setting
extensionSettings.userStats[field] = value;
- // Rebuild userStats text with custom stat names
- const statsText = buildUserStatsText();
-
- // Update BOTH lastGeneratedData AND committedTrackerData
- // This makes manual edits immediately visible to AI
- lastGeneratedData.userStats = statsText;
- committedTrackerData.userStats = statsText;
+ // Update userStats data (maintains JSON or text format)
+ updateUserStatsData();
saveSettings();
saveChatData();
@@ -263,13 +433,8 @@ export function renderUserStats() {
const value = $(this).text().trim();
extensionSettings.userStats.mood = value || '😐';
- // Rebuild userStats text with custom stat names
- const statsText = buildUserStatsText();
-
- // Update BOTH lastGeneratedData AND committedTrackerData
- // This makes manual edits immediately visible to AI
- lastGeneratedData.userStats = statsText;
- committedTrackerData.userStats = statsText;
+ // Update userStats data (maintains JSON or text format)
+ updateUserStatsData();
saveSettings();
saveChatData();
@@ -280,13 +445,8 @@ export function renderUserStats() {
const value = $(this).text().trim();
extensionSettings.userStats.conditions = value || 'None';
- // Rebuild userStats text with custom stat names
- const statsText = buildUserStatsText();
-
- // Update BOTH lastGeneratedData AND committedTrackerData
- // This makes manual edits immediately visible to AI
- lastGeneratedData.userStats = statsText;
- committedTrackerData.userStats = statsText;
+ // Update userStats data (maintains JSON or text format)
+ updateUserStatsData();
saveSettings();
saveChatData();
@@ -298,12 +458,8 @@ export function renderUserStats() {
const value = $(this).text().trim();
extensionSettings.userStats.skills = value || 'None';
- // Rebuild userStats text
- const statsText = buildUserStatsText();
-
- // Update BOTH lastGeneratedData AND committedTrackerData
- lastGeneratedData.userStats = statsText;
- committedTrackerData.userStats = statsText;
+ // Update userStats data (maintains JSON or text format)
+ updateUserStatsData();
saveSettings();
saveChatData();
@@ -359,4 +515,29 @@ export function renderUserStats() {
$(this).blur();
}
});
+
+// Add event listener for section lock icon clicks (support both click and touch)
+ $('.rpg-section-lock-icon').on('click touchend', function(e) {
+ e.preventDefault();
+ e.stopPropagation();
+ const $icon = $(this);
+ const trackerType = $icon.data('tracker');
+ const itemPath = $icon.data('path');
+ const currentlyLocked = isItemLocked(trackerType, itemPath);
+
+ // Toggle lock state
+ setItemLock(trackerType, itemPath, !currentlyLocked);
+
+ // Update icon
+ const newIcon = !currentlyLocked ? '🔒' : '🔓';
+ const newTitle = !currentlyLocked ? 'Locked - AI cannot change this section' : 'Unlocked - AI can change this section';
+ $icon.text(newIcon);
+ $icon.attr('title', newTitle);
+
+ // Toggle 'locked' class for persistent visibility
+ $icon.toggleClass('locked', !currentlyLocked);
+
+ // Save settings
+ saveSettings();
+ });
}
diff --git a/src/systems/ui/debug.js b/src/systems/ui/debug.js
deleted file mode 100644
index c6030b0..0000000
--- a/src/systems/ui/debug.js
+++ /dev/null
@@ -1,220 +0,0 @@
-/**
- * Debug UI Module
- * Provides mobile-friendly debug log viewer for troubleshooting parsing issues
- */
-
-import { extensionSettings, getDebugLogs, clearDebugLogs } from '../../core/state.js';
-
-/**
- * Creates and injects the debug panel into the page
- * Note: Debug toggle button is created in index.js, not here
- */
-export function createDebugPanel() {
- // Remove existing debug panel if any
- $('#rpg-debug-panel').remove();
-
- // Create debug panel HTML
- const debugPanelHtml = `
-
${config.skillsSection.label}:
@@ -225,7 +394,13 @@ export function renderUserStats() {
html += '${skillsValue}
-
- `;
-
- // Append to body
- $('body').append(debugPanelHtml);
-
- // Set up event handlers
- setupDebugEventHandlers();
-
- // Initial log render
- renderDebugLogs();
-}
-
-/**
- * Closes the debug panel with proper animation (mobile or desktop)
- */
-function closeDebugPanel() {
- const $panel = $('#rpg-debug-panel');
- const isMobile = window.innerWidth <= 1000;
-
- if (isMobile) {
- // Mobile: animate slide-out to right
- $panel.removeClass('rpg-mobile-open').addClass('rpg-mobile-closing');
-
- // Wait for animation to complete before hiding
- $panel.one('animationend', function() {
- $panel.removeClass('rpg-mobile-closing');
- $('.rpg-mobile-overlay').remove();
- });
- } else {
- // Desktop: simple slide-down
- $panel.removeClass('rpg-debug-open');
- }
-}
-
-/**
- * Sets up event handlers for debug panel using event delegation for mobile compatibility
- */
-function setupDebugEventHandlers() {
- // Use event delegation for better mobile compatibility and reliability with dynamic elements
- // Remove any existing handlers first to prevent duplicates
- $(document).off('click.rpgDebug');
-
- // Toggle button
- $(document).on('click.rpgDebug', '#rpg-debug-toggle', function() {
- const $debugToggle = $(this);
-
- // Skip if we just finished dragging
- if ($debugToggle.data('just-dragged')) {
- console.log('[RPG Debug] Click blocked - just finished dragging');
- return;
- }
-
- const $panel = $('#rpg-debug-panel');
- const isMobile = window.innerWidth <= 1000;
-
- if (isMobile) {
- // Mobile: use rpg-mobile-open class with slide-from-right animation
- const isOpen = $panel.hasClass('rpg-mobile-open');
-
- if (isOpen) {
- // Close with animation
- closeDebugPanel();
- } else {
- // Open with animation
- $panel.addClass('rpg-mobile-open');
- renderDebugLogs();
-
- // Create overlay for mobile
- const $overlay = $('');
- $('body').append($overlay);
-
- // Close when clicking overlay
- $overlay.on('click', function() {
- closeDebugPanel();
- });
- }
- } else {
- // Desktop: use rpg-debug-open class with slide-from-bottom animation
- $panel.toggleClass('rpg-debug-open');
- renderDebugLogs();
- }
- });
-
- // Close button
- $(document).on('click.rpgDebug', '#rpg-debug-close', function(e) {
- e.preventDefault();
- e.stopPropagation();
- closeDebugPanel();
- });
-
- // Copy button
- $(document).on('click.rpgDebug', '#rpg-debug-copy', function() {
- const logs = getDebugLogs();
- const logsText = logs.map(log => {
- let text = `[${log.timestamp}] ${log.message}`;
- if (log.data) {
- text += `\n${log.data}`;
- }
- return text;
- }).join('\n\n');
-
- navigator.clipboard.writeText(logsText).then(() => {
- // Show feedback
- const $btn = $(this);
- const $icon = $btn.find('i');
- $icon.removeClass('fa-copy').addClass('fa-check');
- setTimeout(() => {
- $icon.removeClass('fa-check').addClass('fa-copy');
- }, 1500);
- }).catch(err => {
- console.error('Failed to copy logs:', err);
- alert('Failed to copy logs. Please use browser console instead.');
- });
- });
-
- // Clear button
- $(document).on('click.rpgDebug', '#rpg-debug-clear', function() {
- if (confirm('Clear all debug logs?')) {
- clearDebugLogs();
- renderDebugLogs();
- }
- });
-}
-
-/**
- * Renders debug logs to the panel
- */
-function renderDebugLogs() {
- const logs = getDebugLogs();
- const $logsContainer = $('#rpg-debug-logs');
-
- if (logs.length === 0) {
- $logsContainer.html('
-
-
- 🔍 Debug Logs
-
-
-
-
-
- No logs yet. Logs will appear when parser runs.
');
- return;
- }
-
- // Build logs HTML
- const logsHtml = logs.map(log => {
- let html = ``;
- html += `[${log.timestamp}] `;
- html += ``;
- if (log.data) {
- html += `
`;
- return html;
- }).join('');
-
- $logsContainer.html(logsHtml);
-
- // Auto-scroll to bottom
- $logsContainer[0].scrollTop = $logsContainer[0].scrollHeight;
-}
-
-/**
- * Escapes HTML to prevent XSS
- */
-function escapeHtml(text) {
- const div = document.createElement('div');
- div.textContent = text;
- return div.innerHTML;
-}
-
-/**
- * Shows or hides debug UI based on debug mode setting
- * Note: Debug toggle button always exists in DOM (created in index.js)
- */
-export function updateDebugUIVisibility() {
- const $debugToggle = $('#rpg-debug-toggle');
-
- if (extensionSettings.debugMode) {
- // Show debug toggle button
- $debugToggle.css('display', 'flex');
-
- // Create debug panel if it doesn't exist
- if ($('#rpg-debug-panel').length === 0) {
- createDebugPanel();
- }
- } else {
- // Hide debug toggle button
- $debugToggle.css('display', 'none');
-
- // Remove debug panel
- $('#rpg-debug-panel').remove();
- }
-}
diff --git a/src/systems/ui/desktop.js b/src/systems/ui/desktop.js
index cca40f7..40b3c20 100644
--- a/src/systems/ui/desktop.js
+++ b/src/systems/ui/desktop.js
@@ -79,7 +79,11 @@ export function setupDesktopTabs() {
}
if ($infoBox.length > 0) {
$statusTab.append($infoBox.detach());
- if (extensionSettings.showInfoBox) $infoBox.show();
+ // Only show if enabled and has data
+ if (extensionSettings.showInfoBox) {
+ const infoBoxData = window.lastGeneratedData?.infoBox || window.committedTrackerData?.infoBox;
+ if (infoBoxData) $infoBox.show();
+ }
}
if ($thoughts.length > 0) {
$statusTab.append($thoughts.detach());
@@ -170,7 +174,10 @@ export function removeDesktopTabs() {
// Show/hide sections based on settings (respect visibility settings)
if (extensionSettings.showUserStats) $userStats.show();
- if (extensionSettings.showInfoBox) $infoBox.show();
+ if (extensionSettings.showInfoBox) {
+ const infoBoxData = window.lastGeneratedData?.infoBox || window.committedTrackerData?.infoBox;
+ if (infoBoxData) $infoBox.show();
+ }
if (extensionSettings.showCharacterThoughts) $thoughts.show();
if (extensionSettings.showInventory) $inventory.show();
if (extensionSettings.showQuests) $quests.show();
diff --git a/src/systems/ui/layout.js b/src/systems/ui/layout.js
index 2b7ad0a..79fc813 100644
--- a/src/systems/ui/layout.js
+++ b/src/systems/ui/layout.js
@@ -13,7 +13,9 @@ import {
$questsContainer,
$musicPlayerContainer,
setInventoryContainer,
- setQuestsContainer
+ setQuestsContainer,
+ lastGeneratedData,
+ committedTrackerData
} from '../../core/state.js';
import { i18n } from '../../core/i18n.js';
import { setupMobileTabs, removeMobileTabs } from './mobile.js';
@@ -28,12 +30,17 @@ export function togglePlotButtons() {
return;
}
- // Show/hide plot progression buttons based on enablePlotButtons setting
- if (extensionSettings.enablePlotButtons) {
+ // Show/hide randomized plot button based on enableRandomizedPlot setting
+ if (extensionSettings.enableRandomizedPlot) {
$('#rpg-plot-random').show();
- $('#rpg-plot-natural').show();
} else {
$('#rpg-plot-random').hide();
+ }
+
+ // Show/hide natural plot button based on enableNaturalPlot setting
+ if (extensionSettings.enableNaturalPlot) {
+ $('#rpg-plot-natural').show();
+ } else {
$('#rpg-plot-natural').hide();
}
@@ -45,7 +52,7 @@ export function togglePlotButtons() {
}
// Show the container if at least one button is visible
- const shouldShowContainer = extensionSettings.enablePlotButtons || extensionSettings.encounterSettings?.enabled;
+ const shouldShowContainer = extensionSettings.enableRandomizedPlot || extensionSettings.enableNaturalPlot || extensionSettings.encounterSettings?.enabled;
if (shouldShowContainer) {
$('#rpg-plot-buttons').show();
} else {
@@ -81,19 +88,34 @@ export function updateCollapseToggleIcon() {
const isMobile = window.innerWidth <= 1000;
if (isMobile) {
- // Mobile: slides from right, use same icon logic as desktop right panel
+ // Mobile: icon direction based on panel position and open state
const isOpen = $panel.hasClass('rpg-mobile-open');
+ const isLeftPanel = $panel.hasClass('rpg-position-left');
+
console.log('[RPG Mobile] updateCollapseToggleIcon:', {
isMobile: true,
isOpen,
- settingIcon: isOpen ? 'chevron-left' : 'chevron-right'
+ isLeftPanel,
+ settingIcon: isOpen ? (isLeftPanel ? 'chevron-left' : 'chevron-right') : (isLeftPanel ? 'chevron-right' : 'chevron-left')
});
- if (isOpen) {
- // Panel open - chevron points left (to close/slide back right)
- $icon.removeClass('fa-chevron-down fa-chevron-up fa-chevron-right').addClass('fa-chevron-left');
+
+ if (isLeftPanel) {
+ if (isOpen) {
+ // Left panel open - chevron points left (panel will slide left to close)
+ $icon.removeClass('fa-chevron-down fa-chevron-up fa-chevron-right').addClass('fa-chevron-left');
+ } else {
+ // Left panel closed - chevron points left (panel is hidden on left)
+ $icon.removeClass('fa-chevron-down fa-chevron-up fa-chevron-right').addClass('fa-chevron-left');
+ }
} else {
- // Panel closed - chevron points right (to open/slide in from right)
- $icon.removeClass('fa-chevron-down fa-chevron-up fa-chevron-left').addClass('fa-chevron-right');
+ // Right panel (default)
+ if (isOpen) {
+ // Right panel open - chevron points right (panel will slide right to close)
+ $icon.removeClass('fa-chevron-down fa-chevron-up fa-chevron-left').addClass('fa-chevron-right');
+ } else {
+ // Right panel closed - chevron points right (panel is hidden on right)
+ $icon.removeClass('fa-chevron-down fa-chevron-up fa-chevron-left').addClass('fa-chevron-right');
+ }
}
} else {
// Desktop: icon direction based on panel position and collapsed state
@@ -237,14 +259,11 @@ export function updatePanelVisibility() {
togglePlotButtons(); // Update plot button visibility
$('#rpg-mobile-toggle').show(); // Show mobile FAB toggle
$('#rpg-collapse-toggle').show(); // Show collapse toggle
- // Debug toggle visibility is controlled by debugMode setting in debug.js
} else {
$panelContainer.hide();
$('#rpg-plot-buttons').hide(); // Hide plot buttons when disabled
$('#rpg-mobile-toggle').hide(); // Hide mobile FAB toggle
$('#rpg-collapse-toggle').hide(); // Hide collapse toggle
- $('#rpg-debug-toggle').hide(); // Hide debug toggle button when extension disabled
- $('#rpg-debug-panel').remove(); // Remove debug panel when extension disabled
}
}
@@ -265,7 +284,13 @@ export function updateSectionVisibility() {
}
if (extensionSettings.showInfoBox) {
- $infoBoxContainer.show();
+ // Only show if there's data to display
+ const infoBoxData = lastGeneratedData.infoBox || committedTrackerData.infoBox;
+ if (infoBoxData) {
+ $infoBoxContainer.show();
+ } else {
+ $infoBoxContainer.hide();
+ }
} else {
$infoBoxContainer.hide();
}
@@ -383,16 +408,19 @@ export function applyPanelPosition() {
// Remove all position classes
$panelContainer.removeClass('rpg-position-left rpg-position-right rpg-position-top');
+ $('body').removeClass('rpg-panel-position-left rpg-panel-position-right rpg-panel-position-top');
- // On mobile, don't apply desktop position classes
+ // Add the appropriate position class
+ $panelContainer.addClass(`rpg-position-${extensionSettings.panelPosition}`);
+
+ // On mobile, also add body class for mobile-specific CSS
if (isMobile) {
+ $('body').addClass(`rpg-panel-position-${extensionSettings.panelPosition}`);
+ updateCollapseToggleIcon();
return;
}
- // Desktop: Add the appropriate position class
- $panelContainer.addClass(`rpg-position-${extensionSettings.panelPosition}`);
-
- // Update collapse toggle icon direction for new position
+ // Desktop: Update collapse toggle icon direction for new position
updateCollapseToggleIcon();
}
@@ -405,24 +433,21 @@ export function updateGenerationModeUI() {
$('#rpg-manual-update').hide();
$('#rpg-external-api-settings').slideUp(200);
$('#rpg-separate-mode-settings').slideUp(200);
- // Disable auto-update toggle (not applicable in together mode)
- $('#rpg-toggle-auto-update').prop('disabled', true);
- $('#rpg-auto-update-container').css('opacity', '0.5');
+ // Hide auto-update toggle (not applicable in together mode)
+ $('#rpg-auto-update-container').slideUp(200);
} else if (extensionSettings.generationMode === 'separate') {
// In "separate" mode, manual update button is visible
$('#rpg-manual-update').show();
$('#rpg-external-api-settings').slideUp(200);
$('#rpg-separate-mode-settings').slideDown(200);
- // Enable auto-update toggle (only works in separate mode)
- $('#rpg-toggle-auto-update').prop('disabled', false);
- $('#rpg-auto-update-container').css('opacity', '1');
+ // Show auto-update toggle
+ $('#rpg-auto-update-container').slideDown(200);
} else if (extensionSettings.generationMode === 'external') {
// In "external" mode, manual update button is visible AND external settings are shown
$('#rpg-manual-update').show();
$('#rpg-external-api-settings').slideDown(200);
$('#rpg-separate-mode-settings').slideUp(200);
- // Disable auto-update toggle (not applicable in external mode)
- $('#rpg-toggle-auto-update').prop('disabled', true);
- $('#rpg-auto-update-container').css('opacity', '0.5');
+ // Show auto-update toggle for external mode too
+ $('#rpg-auto-update-container').slideDown(200);
}
}
diff --git a/src/systems/ui/mobile.js b/src/systems/ui/mobile.js
index b80b0fc..805298d 100644
--- a/src/systems/ui/mobile.js
+++ b/src/systems/ui/mobile.js
@@ -375,8 +375,12 @@ export function setupMobileToggle() {
// Remove desktop tabs first
removeDesktopTabs();
- // Remove desktop positioning classes
+ // Apply mobile positioning based on panelPosition setting
$panel.removeClass('rpg-position-right rpg-position-left rpg-position-top');
+ $('body').removeClass('rpg-panel-position-right rpg-panel-position-left rpg-panel-position-top');
+ const position = extensionSettings.panelPosition || 'right';
+ $panel.addClass('rpg-position-' + position);
+ $('body').addClass('rpg-panel-position-' + position);
// Clear collapsed state - mobile doesn't use collapse
$panel.removeClass('rpg-collapsed');
@@ -424,7 +428,8 @@ export function setupMobileToggle() {
// Hide mobile toggle button on desktop
$mobileToggle.hide();
- // Restore desktop positioning class
+ // Restore desktop positioning class and remove body mobile classes
+ $('body').removeClass('rpg-panel-position-right rpg-panel-position-left rpg-panel-position-top');
const position = extensionSettings.panelPosition || 'right';
$panel.addClass('rpg-position-' + position);
@@ -561,6 +566,14 @@ export function setupMobileTabs() {
if ($('.rpg-mobile-tabs').length > 0) return;
const $panel = $('#rpg-companion-panel');
+
+ // Apply mobile positioning based on panelPosition setting
+ $panel.removeClass('rpg-position-right rpg-position-left rpg-position-top');
+ $('body').removeClass('rpg-panel-position-right rpg-panel-position-left rpg-panel-position-top');
+ const position = extensionSettings.panelPosition || 'right';
+ $panel.addClass('rpg-position-' + position);
+ $('body').addClass('rpg-panel-position-' + position);
+
const $contentBox = $panel.find('.rpg-content-box');
// Get existing sections
@@ -624,7 +637,9 @@ export function setupMobileTabs() {
// Info tab: Info Box + Character Thoughts
if ($infoBox.length > 0) {
$infoTab.append($infoBox.detach());
- $infoBox.show();
+ // Only show if has data
+ const infoBoxData = window.lastGeneratedData?.infoBox || window.committedTrackerData?.infoBox;
+ if (infoBoxData) $infoBox.show();
}
if ($thoughts.length > 0) {
$infoTab.append($thoughts.detach());
@@ -714,7 +729,10 @@ export function removeMobileTabs() {
// Show/hide sections based on settings (respect visibility settings)
if (extensionSettings.showUserStats) $userStats.show();
- if (extensionSettings.showInfoBox) $infoBox.show();
+ if (extensionSettings.showInfoBox) {
+ const infoBoxData = window.lastGeneratedData?.infoBox || window.committedTrackerData?.infoBox;
+ if (infoBoxData) $infoBox.show();
+ }
if (extensionSettings.showCharacterThoughts) $thoughts.show();
if (extensionSettings.showInventory) $inventory.show();
if (extensionSettings.showQuests) $quests.show();
diff --git a/src/systems/ui/modals.js b/src/systems/ui/modals.js
index ced6514..d6297e0 100644
--- a/src/systems/ui/modals.js
+++ b/src/systems/ui/modals.js
@@ -10,13 +10,17 @@ import {
committedTrackerData,
$infoBoxContainer,
$thoughtsContainer,
+ $userStatsContainer,
setPendingDiceRoll,
- getPendingDiceRoll
+ getPendingDiceRoll,
+ clearSessionAvatarPrompts
} from '../../core/state.js';
import { saveSettings, saveChatData } from '../../core/persistence.js';
import { renderUserStats } from '../rendering/userStats.js';
-import { updateChatThoughts } from '../rendering/thoughts.js';
+import { renderInfoBox } from '../rendering/infoBox.js';
+import { renderThoughts, updateChatThoughts } from '../rendering/thoughts.js';
import { renderQuests } from '../rendering/quests.js';
+import { renderInventory } from '../rendering/inventory.js';
import {
rollDice as rollDiceCore,
clearDiceRoll as clearDiceRollCore,
@@ -351,18 +355,31 @@ export function setupSettingsPopup() {
// Clear cache button
$('#rpg-clear-cache').on('click', function() {
- // Clear the data
+ console.log('[RPG Companion] Clear Cache button clicked');
+
+ // Clear the data (set to null so panels show "not generated yet")
lastGeneratedData.userStats = null;
lastGeneratedData.infoBox = null;
lastGeneratedData.characterThoughts = null;
+ lastGeneratedData.html = null;
// Clear committed tracker data (used for generation context)
committedTrackerData.userStats = null;
committedTrackerData.infoBox = null;
committedTrackerData.characterThoughts = null;
+ // Clear session avatar prompts
+ clearSessionAvatarPrompts();
+
+ // Clear chat metadata immediately (don't wait for debounced save)
+ const context = getContext();
+ if (context.chat_metadata && context.chat_metadata.rpg_companion) {
+ delete context.chat_metadata.rpg_companion;
+ console.log('[RPG Companion] Cleared chat_metadata.rpg_companion for current chat');
+ }
+
// Clear all message swipe data
- const chat = getContext().chat;
+ const chat = context.chat;
if (chat && chat.length > 0) {
for (let i = 0; i < chat.length; i++) {
const message = chat[i];
@@ -380,8 +397,11 @@ export function setupSettingsPopup() {
if ($thoughtsContainer) {
$thoughtsContainer.empty();
}
+ if ($userStatsContainer) {
+ $userStatsContainer.empty();
+ }
- // Reset stats to defaults and re-render
+ // Reset user stats to default object structure (extensionSettings stores as object, not JSON string)
extensionSettings.userStats = {
health: 100,
satiety: 100,
@@ -390,7 +410,29 @@ export function setupSettingsPopup() {
arousal: 0,
mood: '😐',
conditions: 'None',
- inventory: 'None'
+ skills: [],
+ inventory: {
+ version: 2,
+ onPerson: "None",
+ clothing: "None",
+ stored: {},
+ assets: "None"
+ }
+ };
+
+ // Reset info box to defaults (as object)
+ extensionSettings.infoBox = {
+ date: new Date().toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }),
+ weather: '☀️ Clear skies',
+ temperature: '20°C',
+ time: '00:00 - 00:00',
+ location: 'Unknown Location',
+ recentEvents: []
+ };
+
+ // Reset character thoughts to empty (as object)
+ extensionSettings.characterThoughts = {
+ characters: []
};
// Reset classic stats (attributes) to defaults
@@ -406,23 +448,54 @@ export function setupSettingsPopup() {
// Clear dice roll
extensionSettings.lastDiceRoll = null;
+ // Reset level to 1
+ extensionSettings.level = 1;
+
// Clear quests
extensionSettings.quests = {
main: "None",
optional: []
};
+ // Clear all locked items
+ extensionSettings.lockedItems = {
+ stats: [],
+ skills: [],
+ inventory: {
+ onPerson: [],
+ clothing: [],
+ stored: {},
+ assets: []
+ },
+ quests: {
+ main: false,
+ optional: []
+ },
+ infoBox: {
+ date: false,
+ weather: false,
+ temperature: false,
+ time: false,
+ location: false,
+ recentEvents: false
+ },
+ characters: {}
+ };
+
// Save everything
saveChatData();
saveSettings();
- // Re-render user stats and dice display
+ // Re-render all panels - they will show "not generated yet" messages since data is null
renderUserStats();
+ renderInfoBox();
+ renderThoughts();
updateDiceDisplayCore();
- updateChatThoughts(); // Clear the thought bubble in chat
- renderQuests(); // Clear and re-render quests UI
+ updateChatThoughts();
+ renderInventory();
+ renderQuests();
- // console.log('[RPG Companion] Chat cache cleared');
+ console.log('[RPG Companion] Cache cleared successfully');
});
return settingsModal;
@@ -508,3 +581,75 @@ export function addDiceQuickReply() {
export function getSettingsModal() {
return settingsModal;
}
+
+/**
+ * Shows the welcome modal for v3.0.0 on first launch
+ * Checks if user has already seen this version's welcome screen
+ */
+export function showWelcomeModalIfNeeded() {
+ const WELCOME_VERSION = '3.0.0';
+ const STORAGE_KEY = 'rpg_companion_welcome_seen';
+
+ try {
+ const seenVersion = localStorage.getItem(STORAGE_KEY);
+
+ // If user hasn't seen v3.0.0 welcome yet, show it
+ if (seenVersion !== WELCOME_VERSION) {
+ showWelcomeModal(WELCOME_VERSION, STORAGE_KEY);
+ }
+ } catch (error) {
+ console.error('[RPG Companion] Failed to check welcome modal status:', error);
+ }
+}
+
+/**
+ * Shows the welcome modal
+ * @param {string} version - The version to mark as seen
+ * @param {string} storageKey - The localStorage key to use
+ */
+function showWelcomeModal(version, storageKey) {
+ const modal = document.getElementById('rpg-welcome-modal');
+ if (!modal) {
+ console.error('[RPG Companion] Welcome modal element not found');
+ return;
+ }
+
+ // Apply current theme to modal
+ const theme = extensionSettings.theme || 'default';
+ modal.setAttribute('data-theme', theme);
+
+ // Show modal
+ modal.style.display = 'flex';
+ modal.classList.add('is-open');
+
+ // Close button handler
+ const closeBtn = document.getElementById('rpg-welcome-close');
+ const gotItBtn = document.getElementById('rpg-welcome-got-it');
+
+ const closeModal = () => {
+ modal.classList.add('is-closing');
+
+ setTimeout(() => {
+ modal.style.display = 'none';
+ modal.classList.remove('is-open', 'is-closing');
+ }, 200);
+
+ // Mark this version as seen
+ try {
+ localStorage.setItem(storageKey, version);
+ } catch (error) {
+ console.error('[RPG Companion] Failed to save welcome modal status:', error);
+ }
+ };
+
+ // Attach event listeners
+ closeBtn?.addEventListener('click', closeModal, { once: true });
+ gotItBtn?.addEventListener('click', closeModal, { once: true });
+
+ // Close on background click
+ modal.addEventListener('click', (e) => {
+ if (e.target === modal) {
+ closeModal();
+ }
+ }, { once: true });
+}
diff --git a/src/systems/ui/promptsEditor.js b/src/systems/ui/promptsEditor.js
index e3a2956..6cbb407 100644
--- a/src/systems/ui/promptsEditor.js
+++ b/src/systems/ui/promptsEditor.js
@@ -4,7 +4,7 @@
*/
import { extensionSettings } from '../../core/state.js';
import { saveSettings } from '../../core/persistence.js';
-import { DEFAULT_HTML_PROMPT, DEFAULT_SPOTIFY_PROMPT } from '../generation/promptBuilder.js';
+import { DEFAULT_HTML_PROMPT, DEFAULT_DIALOGUE_COLORING_PROMPT, DEFAULT_SPOTIFY_PROMPT, DEFAULT_NARRATOR_PROMPT } from '../generation/promptBuilder.js';
let $editorModal = null;
let tempPrompts = null; // Temporary prompts for cancel functionality
@@ -12,28 +12,22 @@ let tempPrompts = null; // Temporary prompts for cancel functionality
// Default prompts
const DEFAULT_PROMPTS = {
html: DEFAULT_HTML_PROMPT,
+ dialogueColoring: DEFAULT_DIALOGUE_COLORING_PROMPT,
spotify: DEFAULT_SPOTIFY_PROMPT,
+ narrator: DEFAULT_NARRATOR_PROMPT,
plotRandom: 'Actually, the scene is getting stale. Introduce {{random::stakes::a plot twist::a new character::a cataclysm::a fourth-wall-breaking joke::a sudden atmospheric phenomenon::a plot hook::a running gag::an ecchi scenario::Death from Discworld::a new stake::a drama::a conflict::an angered entity::a god::a vision::a prophetic dream::Il Dottore from Genshin Impact::a new development::a civilian in need::an emotional bit::a threat::a villain::an important memory recollection::a marriage proposal::a date idea::an angry horde of villagers with pitchforks::a talking animal::an enemy::a cliffhanger::a short omniscient POV shift to a completely different character::a quest::an unexpected revelation::a scandal::an evil clone::death of an important character::harm to an important character::a romantic setup::a gossip::a messenger::a plot point from the past::a plot hole::a tragedy::a ghost::an otherworldly occurrence::a plot device::a curse::a magic device::a rival::an unexpected pregnancy::a brothel::a prostitute::a new location::a past lover::a completely random thing::a what-if scenario::a significant choice::war::love::a monster::lewd undertones::Professor Mari::a travelling troupe::a secret::a fortune-teller::something completely different::a killer::a murder mystery::a mystery::a skill check::a deus ex machina::three raccoons in a trench coat::a pet::a slave::an orphan::a psycho::tentacles::"there is only one bed" trope::accidental marriage::a fun twist::a boss battle::sexy corn::an eldritch horror::a character getting hungry, thirsty, or exhausted::horniness::a need for a bathroom break need::someone fainting::an assassination attempt::a meta narration of this all being an out of hand DND session::a dungeon::a friend in need::an old friend::a small time skip::a scene shift::Aurora Borealis, at this time of year, at this time of day, at this part of the country::a grand ball::a surprise party::zombies::foreshadowing::a Spanish Inquisition (nobody expects it)::a natural plot progression}} to make things more interesting! Be creative, but stay grounded in the setting.',
plotNatural: 'Actually, the scene is getting stale. Progress it, to make things more interesting! Reintroduce an unresolved plot point from the past, or push the story further towards the current main goal. Be creative, but stay grounded in the setting.',
- avatar: `You are a visionary artist trapped in a cage of logic. Your mind is filled with poetry and distant horizons, but your hands are uncontrollably focused on creating the perfect character avatar description that is faithful to the original intent, rich in detail, aesthetically pleasing, and directly usable by text-to-image models. Any ambiguity or metaphor will make you feel extremely uncomfortable.
-
- Your workflow strictly follows a logical sequence:
-
- First, **establish the subject**. If the character is from a known Intellectual Property (IP), franchise, anime, game, or movie, **you MUST begin the prompt with their full name and the series title** (e.g., "Nami from One Piece", "Geralt of Rivia from The Witcher"). This is the single most important anchor for the image and must take precedence. If the character is original, clearly describe their core identity, race, and appearance.
-
- Next, **set the framing**. This is an avatar portrait. Focus strictly on the character's face and upper shoulders (bust shot or close-up). Ensure the face is the central focal point.
-
- Then, **integrate the setting**. Describe the character *within* their current environment as provided in the context, but keep it as a background element. Incorporate the lighting, weather, and atmosphere to influence the character's appearance (e.g., shadows on the face, wet hair from rain).
-
- Next, **detail the facial specifics**. Describe the character's current expression, eye contact, and mood in high detail based on the scene context and their personality. Mention visible clothing only at the neckline/shoulders.
-
- Finally, **infuse with aesthetics**. Define the artistic style, medium (e.g., digital art, oil painting), and visual tone (e.g., cinematic lighting, ethereal atmosphere).
-
- Your final description must be objective and concrete, and the use of metaphors and emotional rhetoric is strictly prohibited. It must also not contain meta tags or drawing instructions such as "8K" or "masterpiece".
-
- Output only the final, modified prompt; do not output anything else.`,
- trackerInstructions: 'Replace X with actual numbers (e.g., 69) and replace all [placeholders] with concrete in-world details that {userName} perceives about the current scene and the present characters. Do NOT keep the brackets or placeholder text in your response. For example: [Location] becomes Forest Clearing, [Mood Emoji] becomes 😊. Consider the last trackers in the conversation (if they exist). Manage them accordingly and realistically; raise, lower, change, or keep the values unchanged based on the user\'s actions, the passage of time, and logical consequences (0% if the time progressed only by a few minutes, 1-5% normally, and above 5% only if a major time-skip/event occurs).',
- trackerContinuation: 'After updating the trackers, continue directly from where the last message in the chat history left off. Ensure the trackers you provide naturally reflect and influence the narrative. Character behavior, dialogue, and story events should acknowledge these conditions when relevant, such as fatigue affecting the protagonist\'s performance, low hygiene influencing their social interactions, environmental factors shaping the scene, a character\'s emotional state coloring their responses, and so on. Remember, all bracketed placeholders (e.g., [Location], [Mood Emoji]) MUST be replaced with actual content without the square brackets.',
+ avatar: `You are a visionary artist trapped in a cage of logic. Your mind is filled with poetry and distant horizons; however, your hands are uncontrollably focused on creating the perfect character avatar description that is faithful to the original intent, rich in detail, aesthetically pleasing, and directly usable by text-to-image models. Any ambiguity or metaphor will make you feel extremely uncomfortable.
+Your workflow strictly follows a logical sequence:
+First, establish the subject. If the character is from a known Intellectual Property (IP), franchise, anime, game, or movie, you MUST begin the prompt with their full name and the series title (e.g., "Nami from One Piece", "Geralt of Rivia from The Witcher"). This is the single most important anchor for the image and must take precedence. If the character is original, clearly describe their core identity, race, and appearance.
+Next, set the framing. This is an avatar portrait. Focus strictly on the character's face and upper shoulders (a bust shot or close-up). Ensure the face is the central focal point.
+Then, integrate the setting. Describe the character within their current environment as provided in the context, but keep it as a background element. Incorporate the lighting, weather, and atmosphere to influence the character's appearance (e.g., shadows on the face, wet hair from rain).
+Next, detail the facial specifics. Describe the character's current expression, eye contact, and mood in great detail based on the scene context and their personality. Mention visible clothing only at the neckline/shoulders.
+Finally, infuse with aesthetics. Define the artistic style, medium (e.g., digital art, oil painting), and visual tone (e.g., cinematic lighting, ethereal atmosphere).
+Your final description must be objective and concrete, and the use of metaphors and emotional rhetoric is strictly prohibited. It must also not contain meta tags or drawing instructions such as "8K" or "masterpiece".
+Output only the final, modified prompt; do not output anything else.`,
+ trackerInstructions: 'Replace X with actual numbers (e.g., 69) and replace all placeholders with concrete in-world details that {userName} perceives about the current scene and the present characters. For example: "Location" becomes Forest Clearing, "Mood Emoji" becomes "😊". Consider the last trackers in the conversation (if they exist). Manage them accordingly and realistically; raise, lower, change, or keep the values unchanged based on the user\'s actions, the passage of time, and logical consequences (0% if the time progressed only by a few minutes, 1-5% normally, and above 5% only if a major time-skip/event occurs).',
+ trackerContinuation: 'After updating the trackers, continue directly from where the last message in the chat history left off. Ensure the trackers you provide naturally reflect and influence the narrative. Character behavior, dialogue, and story events should acknowledge these conditions when relevant, such as fatigue affecting the protagonist\'s performance, low hygiene influencing their social interactions, environmental factors shaping the scene, a character\'s emotional state coloring their responses, and so on. Remember, all placeholders (e.g., "Location", "Mood Emoji") MUST be replaced with actual content.',
combatNarrative: 'Build novel prose. Break patterns from your previous responses by varying sentence structures, rhythms, formats, and openings. Track whether a sentence shape, cadence, sensory detail, or a descriptor appeared recently, and replace it with a different one or skip it entirely. If you mentioned a physical feature, mannerism, or expression once, move on. Don\'t fixate on the same traits every turn. Well-placed humor, unconventional similes, and subverted turns of phrase are encouraged. Avoid GPTisms, purple prose, and anaphoras, especially the negatives with "no/not/wasn\'t/didn\'t." Refrain from describing actions or emotions via negation; focus on what does happen, not what doesn\'t. Absolutely no asterisks, ellipses, or em-dashes. Explicit content is allowed, no plot armor. Do not play for {userName}. Keep your response length under 150 words. Never end on handover cues; finish naturally.\nCRITICAL: Do not repeat, echo, parrot, or restate distinctive words, phrases, and dialogues from the user\'s last message. If reacting to speech, show interpretation or response, not repetition.\nEXAMPLE: "Are you a gooner?" User asks.\nBAD: "Gooner?"\nGOOD: A flat look. "What type of question is that?"'
};
@@ -98,7 +92,9 @@ function openPromptsEditor() {
// Create temporary copy for cancel functionality
tempPrompts = {
html: extensionSettings.customHtmlPrompt || '',
+ dialogueColoring: extensionSettings.customDialogueColoringPrompt || '',
spotify: extensionSettings.customSpotifyPrompt || '',
+ narrator: extensionSettings.customNarratorPrompt || '',
plotRandom: extensionSettings.customPlotRandomPrompt || '',
plotNatural: extensionSettings.customPlotNaturalPrompt || '',
avatar: extensionSettings.avatarLLMCustomInstruction || '',
@@ -109,7 +105,9 @@ function openPromptsEditor() {
// Load current values or defaults
$('#rpg-prompt-html').val(extensionSettings.customHtmlPrompt || DEFAULT_PROMPTS.html);
+ $('#rpg-prompt-dialogue-coloring').val(extensionSettings.customDialogueColoringPrompt || DEFAULT_PROMPTS.dialogueColoring);
$('#rpg-prompt-spotify').val(extensionSettings.customSpotifyPrompt || DEFAULT_PROMPTS.spotify);
+ $('#rpg-prompt-narrator').val(extensionSettings.customNarratorPrompt || DEFAULT_PROMPTS.narrator);
$('#rpg-prompt-plot-random').val(extensionSettings.customPlotRandomPrompt || DEFAULT_PROMPTS.plotRandom);
$('#rpg-prompt-plot-natural').val(extensionSettings.customPlotNaturalPrompt || DEFAULT_PROMPTS.plotNatural);
$('#rpg-prompt-avatar').val(extensionSettings.avatarLLMCustomInstruction || DEFAULT_PROMPTS.avatar);
@@ -144,7 +142,9 @@ function closePromptsEditor() {
*/
function savePrompts() {
extensionSettings.customHtmlPrompt = $('#rpg-prompt-html').val().trim();
+ extensionSettings.customDialogueColoringPrompt = $('#rpg-prompt-dialogue-coloring').val().trim();
extensionSettings.customSpotifyPrompt = $('#rpg-prompt-spotify').val().trim();
+ extensionSettings.customNarratorPrompt = $('#rpg-prompt-narrator').val().trim();
extensionSettings.customPlotRandomPrompt = $('#rpg-prompt-plot-random').val().trim();
extensionSettings.customPlotNaturalPrompt = $('#rpg-prompt-plot-natural').val().trim();
extensionSettings.avatarLLMCustomInstruction = $('#rpg-prompt-avatar').val().trim();
@@ -168,9 +168,15 @@ function restorePromptToDefault(promptType) {
case 'html':
extensionSettings.customHtmlPrompt = '';
break;
+ case 'dialogueColoring':
+ extensionSettings.customDialogueColoringPrompt = '';
+ break;
case 'spotify':
extensionSettings.customSpotifyPrompt = '';
break;
+ case 'narrator':
+ extensionSettings.customNarratorPrompt = '';
+ break;
case 'plotRandom':
extensionSettings.customPlotRandomPrompt = '';
break;
@@ -199,7 +205,9 @@ function restorePromptToDefault(promptType) {
*/
function restoreAllToDefaults() {
$('#rpg-prompt-html').val(DEFAULT_PROMPTS.html);
+ $('#rpg-prompt-dialogue-coloring').val(DEFAULT_PROMPTS.dialogueColoring);
$('#rpg-prompt-spotify').val(DEFAULT_PROMPTS.spotify);
+ $('#rpg-prompt-narrator').val(DEFAULT_PROMPTS.narrator);
$('#rpg-prompt-plot-random').val(DEFAULT_PROMPTS.plotRandom);
$('#rpg-prompt-plot-natural').val(DEFAULT_PROMPTS.plotNatural);
$('#rpg-prompt-avatar').val(DEFAULT_PROMPTS.avatar);
@@ -209,7 +217,9 @@ function restoreAllToDefaults() {
// Clear all custom prompts
extensionSettings.customHtmlPrompt = '';
+ extensionSettings.customDialogueColoringPrompt = '';
extensionSettings.customSpotifyPrompt = '';
+ extensionSettings.customNarratorPrompt = '';
extensionSettings.customPlotRandomPrompt = '';
extensionSettings.customPlotNaturalPrompt = '';
extensionSettings.avatarLLMCustomInstruction = '';
diff --git a/src/systems/ui/theme.js b/src/systems/ui/theme.js
index b63cce0..ef7a8ee 100644
--- a/src/systems/ui/theme.js
+++ b/src/systems/ui/theme.js
@@ -36,6 +36,35 @@ export function applyTheme() {
}
// For 'default', we do nothing - it will use the CSS variables from .rpg-panel class
// which fall back to SillyTavern's theme variables
+
+ // Apply theme to mobile toggle and thought elements as well
+ const $mobileToggle = $('#rpg-mobile-toggle');
+ const $thoughtIcon = $('#rpg-thought-icon');
+ const $thoughtPanel = $('#rpg-thought-panel');
+
+ if ($mobileToggle.length) {
+ if (theme === 'default') {
+ $mobileToggle.removeAttr('data-theme');
+ } else {
+ $mobileToggle.attr('data-theme', theme);
+ }
+ }
+
+ if ($thoughtIcon.length) {
+ if (theme === 'default') {
+ $thoughtIcon.removeAttr('data-theme');
+ } else {
+ $thoughtIcon.attr('data-theme', theme);
+ }
+ }
+
+ if ($thoughtPanel.length) {
+ if (theme === 'default') {
+ $thoughtPanel.removeAttr('data-theme');
+ } else {
+ $thoughtPanel.attr('data-theme', theme);
+ }
+ }
}
/**
@@ -46,7 +75,7 @@ export function applyCustomTheme() {
const colors = extensionSettings.customColors;
- // Apply custom CSS variables as inline styles
+ // Apply custom CSS variables as inline styles to main panel
$panelContainer.css({
'--rpg-bg': colors.bg,
'--rpg-accent': colors.accent,
@@ -55,6 +84,32 @@ export function applyCustomTheme() {
'--rpg-border': colors.highlight,
'--rpg-shadow': `${colors.highlight}80` // Add alpha for shadow
});
+
+ // Apply custom colors to mobile toggle and thought elements
+ const customStyles = {
+ '--rpg-bg': colors.bg,
+ '--rpg-accent': colors.accent,
+ '--rpg-text': colors.text,
+ '--rpg-highlight': colors.highlight,
+ '--rpg-border': colors.highlight,
+ '--rpg-shadow': `${colors.highlight}80`
+ };
+
+ const $mobileToggle = $('#rpg-mobile-toggle');
+ const $thoughtIcon = $('#rpg-thought-icon');
+ const $thoughtPanel = $('#rpg-thought-panel');
+
+ if ($mobileToggle.length) {
+ $mobileToggle.attr('data-theme', 'custom').css(customStyles);
+ }
+
+ if ($thoughtIcon.length) {
+ $thoughtIcon.attr('data-theme', 'custom').css(customStyles);
+ }
+
+ if ($thoughtPanel.length) {
+ $thoughtPanel.attr('data-theme', 'custom').css(customStyles);
+ }
}
/**
@@ -82,21 +137,29 @@ export function toggleAnimations() {
export function updateFeatureTogglesVisibility() {
const $featuresRow = $('#rpg-features-row');
const $htmlToggle = $('#rpg-html-toggle-wrapper');
+ const $dialogueColoringToggle = $('#rpg-dialogue-coloring-toggle-wrapper');
const $spotifyToggle = $('#rpg-spotify-toggle-wrapper');
- const $snowflakesToggle = $('#rpg-snowflakes-toggle-wrapper');
+
const $dynamicWeatherToggle = $('#rpg-dynamic-weather-toggle-wrapper');
+ const $narratorToggle = $('#rpg-narrator-toggle-wrapper');
+ const $autoAvatarsToggle = $('#rpg-auto-avatars-toggle-wrapper');
// Show/hide individual toggles
$htmlToggle.toggle(extensionSettings.showHtmlToggle);
+ $dialogueColoringToggle.toggle(extensionSettings.showDialogueColoringToggle);
$spotifyToggle.toggle(extensionSettings.showSpotifyToggle);
- $snowflakesToggle.toggle(extensionSettings.showSnowflakesToggle);
+
$dynamicWeatherToggle.toggle(extensionSettings.showDynamicWeatherToggle);
+ $narratorToggle.toggle(extensionSettings.showNarratorMode);
+ $autoAvatarsToggle.toggle(extensionSettings.showAutoAvatars);
// Hide entire row if all toggles are hidden
const anyVisible = extensionSettings.showHtmlToggle ||
+ extensionSettings.showDialogueColoringToggle ||
extensionSettings.showSpotifyToggle ||
- extensionSettings.showSnowflakesToggle ||
- extensionSettings.showDynamicWeatherToggle;
+ extensionSettings.showDynamicWeatherToggle ||
+ extensionSettings.showNarratorMode ||
+ extensionSettings.showAutoAvatars;
$featuresRow.toggle(anyVisible);
}
diff --git a/src/systems/ui/trackerEditor.js b/src/systems/ui/trackerEditor.js
index bfa5c5a..fa20b66 100644
--- a/src/systems/ui/trackerEditor.js
+++ b/src/systems/ui/trackerEditor.js
@@ -348,6 +348,13 @@ function renderUserStatsTab() {
html += ``;
html += '${escapeHtml(log.data)}`;
- }
- html += `';
+ html += ``;
+ html += ``;
+ html += '
';
+
// Always send attributes toggle
const alwaysSendAttributes = config.alwaysSendAttributes !== undefined ? config.alwaysSendAttributes : false;
html += '';
@@ -510,6 +517,11 @@ function setupUserStatsListeners() {
extensionSettings.trackerConfig.userStats.showRPGAttributes = $(this).is(':checked');
});
+ // Show/hide level toggle
+ $('#rpg-show-level').off('change').on('change', function() {
+ extensionSettings.trackerConfig.userStats.showLevel = $(this).is(':checked');
+ });
+
// Always send attributes toggle
$('#rpg-always-send-attrs').off('change').on('change', function() {
extensionSettings.trackerConfig.userStats.alwaysSendAttributes = $(this).is(':checked');
diff --git a/src/systems/ui/weatherEffects.js b/src/systems/ui/weatherEffects.js
index 7181396..5249b0b 100644
--- a/src/systems/ui/weatherEffects.js
+++ b/src/systems/ui/weatherEffects.js
@@ -51,7 +51,18 @@ function parseWeatherType(weatherText) {
function getCurrentWeather() {
const infoBoxData = lastGeneratedData.infoBox || committedTrackerData.infoBox || '';
- // Parse the Info Box data to find Weather field
+ // Try to parse as JSON first (new format)
+ try {
+ const parsed = typeof infoBoxData === 'string' ? JSON.parse(infoBoxData) : infoBoxData;
+ if (parsed && parsed.weather) {
+ // Return the forecast text from the weather object
+ return parsed.weather.forecast || parsed.weather.emoji || null;
+ }
+ } catch (e) {
+ // Not JSON, try old text format
+ }
+
+ // Fallback: Parse the old text format to find Weather field
const lines = infoBoxData.split('\n');
for (const line of lines) {
const trimmed = line.trim();
diff --git a/src/utils/jsonMigration.js b/src/utils/jsonMigration.js
new file mode 100644
index 0000000..90cbb9c
--- /dev/null
+++ b/src/utils/jsonMigration.js
@@ -0,0 +1,433 @@
+/**
+ * JSON Migration Module
+ * Migrates committed tracker data from v2 text format to v3 JSON format
+ */
+
+import { committedTrackerData, extensionSettings, updateCommittedTrackerData, updateExtensionSettings } from '../core/state.js';
+import { saveSettings, saveChatData } from '../core/persistence.js';
+
+/**
+ * Helper to separate emoji from text in a string
+ * @param {string} str - String potentially containing emoji followed by text
+ * @returns {{emoji: string, text: string}} Separated emoji and text
+ */
+function separateEmojiFromText(str) {
+ if (!str) return { emoji: '', text: '' };
+
+ str = str.trim();
+
+ // Regex to match emoji at the start
+ const emojiRegex = /^[\u{1F300}-\u{1F9FF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}\u{1F000}-\u{1F02F}\u{1F0A0}-\u{1F0FF}\u{1F100}-\u{1F64F}\u{1F680}-\u{1F6FF}\u{1F910}-\u{1F96B}\u{1F980}-\u{1F9E0}\u{FE00}-\u{FE0F}\u{200D}\u{20E3}]+/u;
+ const emojiMatch = str.match(emojiRegex);
+
+ if (emojiMatch) {
+ const emoji = emojiMatch[0];
+ let text = str.substring(emoji.length).trim();
+ // Remove leading comma or space
+ text = text.replace(/^[,\s]+/, '');
+ return { emoji, text };
+ }
+
+ // Check if there's a comma separator anyway
+ const commaParts = str.split(',');
+ if (commaParts.length >= 2) {
+ return {
+ emoji: commaParts[0].trim(),
+ text: commaParts.slice(1).join(',').trim()
+ };
+ }
+
+ // No clear separation - return original as text
+ return { emoji: '', text: str };
+}
+
+/**
+ * Parses item text to JSON format
+ * Handles "3x Item Name" or "Item Name" formats
+ * @param {string} itemsText - Comma-separated items string
+ * @returns {Array<{name: string, quantity?: number}>} Array of item objects
+ */
+function parseItemsToJSON(itemsText) {
+ if (!itemsText || itemsText.trim() === '' || itemsText.toLowerCase() === 'none') {
+ return [];
+ }
+
+ const items = itemsText.split(',').map(s => s.trim()).filter(s => s);
+ return items.map(item => {
+ // Parse "3x Health Potion" format
+ const qtyMatch = item.match(/^(\d+)x\s*(.+)/i);
+ if (qtyMatch) {
+ return {
+ name: qtyMatch[2].trim(),
+ quantity: parseInt(qtyMatch[1])
+ };
+ }
+ return { name: item, quantity: 1 };
+ });
+}
+
+/**
+ * Migrates User Stats from v2 text format to v3 JSON format
+ * @param {string} textData - V2 text format user stats
+ * @returns {object} V3 JSON format user stats
+ */
+export function migrateUserStatsToJSON(textData) {
+ if (!textData || typeof textData !== 'string') {
+ return null;
+ }
+
+ const lines = textData.split('\n');
+ const result = {
+ version: 3,
+ stats: [],
+ status: {},
+ skills: [],
+ inventory: {
+ onPerson: [],
+ clothing: [],
+ stored: {},
+ assets: []
+ },
+ quests: {
+ main: null,
+ optional: []
+ }
+ };
+
+ for (const line of lines) {
+ const trimmed = line.trim();
+ if (!trimmed || trimmed === '---' || trimmed.startsWith('```')) continue;
+
+ // Parse "- StatName: X%" format
+ const statMatch = trimmed.match(/^-\s*([^:]+):\s*(\d+)%/);
+ if (statMatch) {
+ const name = statMatch[1].trim();
+ const id = name.toLowerCase().replace(/\s+/g, '_').replace(/[^a-z0-9_]/g, '');
+ result.stats.push({
+ id: id,
+ name: name,
+ value: parseInt(statMatch[2])
+ });
+ continue;
+ }
+
+ // Parse "Status: emoji, text" or "Status: text" format
+ const statusMatch = trimmed.match(/^Status:\s*(.+)/i);
+ if (statusMatch) {
+ const { emoji, text } = separateEmojiFromText(statusMatch[1]);
+ if (emoji) result.status.mood = emoji;
+ if (text) result.status.conditions = text;
+ continue;
+ }
+
+ // Parse "Skills: skill1, skill2" format
+ const skillsMatch = trimmed.match(/^Skills:\s*(.+)/i);
+ if (skillsMatch) {
+ const skillsText = skillsMatch[1].trim();
+ if (skillsText && skillsText.toLowerCase() !== 'none') {
+ const skills = skillsText.split(',').map(s => s.trim()).filter(s => s);
+ result.skills = skills.map(name => ({ name }));
+ }
+ continue;
+ }
+
+ // Parse inventory lines
+ const onPersonMatch = trimmed.match(/^On Person:\s*(.+)/i);
+ if (onPersonMatch) {
+ result.inventory.onPerson = parseItemsToJSON(onPersonMatch[1]);
+ continue;
+ }
+
+ const clothingMatch = trimmed.match(/^Clothing:\s*(.+)/i);
+ if (clothingMatch) {
+ result.inventory.clothing = parseItemsToJSON(clothingMatch[1]);
+ continue;
+ }
+
+ const storedMatch = trimmed.match(/^Stored\s*-\s*([^:]+):\s*(.+)/i);
+ if (storedMatch) {
+ const location = storedMatch[1].trim();
+ result.inventory.stored[location] = parseItemsToJSON(storedMatch[2]);
+ continue;
+ }
+
+ const assetsMatch = trimmed.match(/^Assets:\s*(.+)/i);
+ if (assetsMatch) {
+ const assetsText = assetsMatch[1].trim();
+ if (assetsText && assetsText.toLowerCase() !== 'none') {
+ result.inventory.assets = assetsText.split(',').map(s => s.trim()).filter(s => s).map(name => ({ name }));
+ }
+ continue;
+ }
+
+ // Parse quest lines
+ const mainQuestMatch = trimmed.match(/^Main Quests?:\s*(.+)/i);
+ if (mainQuestMatch) {
+ const questText = mainQuestMatch[1].trim();
+ if (questText && questText.toLowerCase() !== 'none') {
+ result.quests.main = { title: questText };
+ }
+ continue;
+ }
+
+ const optionalQuestsMatch = trimmed.match(/^Optional Quests?:\s*(.+)/i);
+ if (optionalQuestsMatch) {
+ const questsText = optionalQuestsMatch[1].trim();
+ if (questsText && questsText.toLowerCase() !== 'none') {
+ const quests = questsText.split(',').map(s => s.trim()).filter(s => s);
+ result.quests.optional = quests.map(title => ({ title }));
+ }
+ continue;
+ }
+ }
+
+ return result;
+}
+
+/**
+ * Migrates Info Box from v2 text format to v3 JSON format
+ * @param {string} textData - V2 text format info box
+ * @returns {object} V3 JSON format info box
+ */
+export function migrateInfoBoxToJSON(textData) {
+ if (!textData || typeof textData !== 'string') {
+ return null;
+ }
+
+ const lines = textData.split('\n');
+ const result = {
+ version: 3
+ };
+
+ for (const line of lines) {
+ const trimmed = line.trim();
+ if (!trimmed || trimmed === '---' || trimmed.startsWith('```') || trimmed.toLowerCase() === 'info box') continue;
+
+ // Parse "Date: value" format
+ const dateMatch = trimmed.match(/^Date:\s*(.+)/i);
+ if (dateMatch) {
+ result.date = { value: dateMatch[1].trim() };
+ continue;
+ }
+
+ // Parse "Weather: emoji, text" or "Weather: text" format
+ const weatherMatch = trimmed.match(/^Weather:\s*(.+)/i);
+ if (weatherMatch) {
+ const { emoji, text } = separateEmojiFromText(weatherMatch[1]);
+ result.weather = {
+ emoji: emoji || '',
+ forecast: text || weatherMatch[1].trim()
+ };
+ continue;
+ }
+
+ // Parse "Temperature: X°C" or "Temperature: X°F" format
+ const tempMatch = trimmed.match(/^Temperature:\s*(\d+)\s*°?([CF])?/i);
+ if (tempMatch) {
+ result.temperature = {
+ value: parseInt(tempMatch[1]),
+ unit: tempMatch[2] ? tempMatch[2].toUpperCase() : 'C'
+ };
+ continue;
+ }
+
+ // Parse "Time: start → end" format
+ const timeMatch = trimmed.match(/^Time:\s*(.+?)\s*→\s*(.+)/i);
+ if (timeMatch) {
+ result.time = {
+ start: timeMatch[1].trim(),
+ end: timeMatch[2].trim()
+ };
+ continue;
+ }
+
+ // Parse "Location: value" format
+ const locationMatch = trimmed.match(/^Location:\s*(.+)/i);
+ if (locationMatch) {
+ result.location = { value: locationMatch[1].trim() };
+ continue;
+ }
+
+ // Parse "Recent Events: event1, event2, event3" format
+ const eventsMatch = trimmed.match(/^Recent Events:\s*(.+)/i);
+ if (eventsMatch) {
+ const eventsText = eventsMatch[1].trim();
+ if (eventsText && eventsText.toLowerCase() !== 'none') {
+ result.recentEvents = eventsText.split(',').map(s => s.trim()).filter(s => s);
+ }
+ continue;
+ }
+ }
+
+ return result;
+}
+
+/**
+ * Migrates Present Characters from v2 text format to v3 JSON format
+ * @param {string} textData - V2 text format present characters
+ * @returns {object} V3 JSON format present characters
+ */
+export function migrateCharactersToJSON(textData) {
+ if (!textData || typeof textData !== 'string') {
+ return null;
+ }
+
+ const result = {
+ version: 3,
+ characters: []
+ };
+
+ // Split by character blocks (marked by "- Name")
+ const blocks = ('\n' + textData).split(/\n-\s+/);
+
+ for (const block of blocks) {
+ if (!block.trim()) continue;
+
+ const lines = block.trim().split('\n');
+ if (lines.length === 0) continue;
+
+ const character = {
+ name: lines[0].trim()
+ };
+
+ // Parse subsequent lines for this character
+ for (let i = 1; i < lines.length; i++) {
+ const line = lines[i].trim();
+ if (!line) continue;
+
+ // Parse "Details: emoji | field1 | field2" format
+ const detailsMatch = line.match(/^Details:\s*(.+)/i);
+ if (detailsMatch) {
+ const detailsText = detailsMatch[1].trim();
+ const parts = detailsText.split('|').map(s => s.trim());
+
+ const { emoji } = separateEmojiFromText(parts[0] || '');
+ if (emoji) character.emoji = emoji;
+
+ character.details = {};
+ for (let j = 1; j < parts.length; j++) {
+ const fieldName = `field${j}`;
+ character.details[fieldName] = parts[j];
+ }
+ continue;
+ }
+
+ // Parse "Relationship: status" format
+ const relationshipMatch = line.match(/^Relationship:\s*(.+)/i);
+ if (relationshipMatch) {
+ character.relationship = { status: relationshipMatch[1].trim() };
+ continue;
+ }
+
+ // Parse "Stats: stat1: X% | stat2: Y%" format
+ const statsMatch = line.match(/^Stats:\s*(.+)/i);
+ if (statsMatch) {
+ const statsText = statsMatch[1].trim();
+ const statParts = statsText.split('|').map(s => s.trim());
+ character.stats = [];
+
+ for (const statPart of statParts) {
+ const statValueMatch = statPart.match(/^([^:]+):\s*(\d+)%/);
+ if (statValueMatch) {
+ character.stats.push({
+ name: statValueMatch[1].trim(),
+ value: parseInt(statValueMatch[2])
+ });
+ }
+ }
+ continue;
+ }
+
+ // Parse "Thoughts: content" format
+ const thoughtsMatch = line.match(/^Thoughts:\s*(.+)/i);
+ if (thoughtsMatch) {
+ character.thoughts = { content: thoughtsMatch[1].trim() };
+ continue;
+ }
+ }
+
+ result.characters.push(character);
+ }
+
+ return result;
+}
+
+/**
+ * Main migration function - migrates all committed tracker data to v3 JSON format
+ * @returns {Promise}
+ */
+export async function migrateToV3JSON() {
+ console.log('[RPG Migration] Starting migration to v3 JSON format...');
+
+ const migrated = {
+ userStats: null,
+ infoBox: null,
+ characterThoughts: null
+ };
+
+ // Migrate User Stats
+ if (committedTrackerData.userStats && typeof committedTrackerData.userStats === 'string') {
+ console.log('[RPG Migration] Migrating User Stats...');
+ migrated.userStats = migrateUserStatsToJSON(committedTrackerData.userStats);
+ if (migrated.userStats) {
+ console.log('[RPG Migration] ✓ User Stats migrated');
+ }
+ }
+
+ // Migrate Info Box
+ if (committedTrackerData.infoBox && typeof committedTrackerData.infoBox === 'string') {
+ console.log('[RPG Migration] Migrating Info Box...');
+ migrated.infoBox = migrateInfoBoxToJSON(committedTrackerData.infoBox);
+ if (migrated.infoBox) {
+ console.log('[RPG Migration] ✓ Info Box migrated');
+ }
+ }
+
+ // Migrate Present Characters
+ if (committedTrackerData.characterThoughts && typeof committedTrackerData.characterThoughts === 'string') {
+ console.log('[RPG Migration] Migrating Present Characters...');
+ migrated.characterThoughts = migrateCharactersToJSON(committedTrackerData.characterThoughts);
+ if (migrated.characterThoughts) {
+ console.log('[RPG Migration] ✓ Present Characters migrated');
+ }
+ }
+
+ // Update committed data
+ updateCommittedTrackerData(migrated);
+
+ // Initialize lockedItems if not present
+ if (!extensionSettings.lockedItems) {
+ console.log('[RPG Migration] Initializing lockedItems structure...');
+ updateExtensionSettings({
+ lockedItems: {
+ stats: [],
+ skills: [],
+ inventory: {
+ onPerson: [],
+ clothing: [],
+ stored: {},
+ assets: []
+ },
+ quests: {
+ main: false,
+ optional: []
+ },
+ infoBox: {
+ date: false,
+ weather: false,
+ temperature: false,
+ time: false,
+ location: false,
+ recentEvents: false
+ },
+ characters: {}
+ }
+ });
+ }
+
+ // Save migrated data
+ await saveChatData();
+ await saveSettings();
+
+ console.log('[RPG Migration] ✅ Migration to v3 JSON format complete');
+}
diff --git a/src/utils/jsonRepair.js b/src/utils/jsonRepair.js
new file mode 100644
index 0000000..e5b5ff0
--- /dev/null
+++ b/src/utils/jsonRepair.js
@@ -0,0 +1,220 @@
+/**
+ * JSON Repair Utilities
+ * Handles parsing and repairing malformed JSON from AI responses
+ */
+
+/**
+ * Repairs malformed JSON from AI responses
+ * Handles common AI mistakes like trailing commas, missing commas, wrong quotes, etc.
+ *
+ * @param {string} jsonString - Potentially malformed JSON string
+ * @returns {object|null} Repaired JSON object or null if repair fails
+ */
+export function repairJSON(jsonString) {
+ if (!jsonString || typeof jsonString !== 'string') {
+ console.warn('[RPG JSON Repair] Invalid input:', typeof jsonString);
+ return null;
+ }
+
+ let cleaned = jsonString.trim();
+
+ // Remove markdown code fences
+ cleaned = cleaned.replace(/```json\s*/gi, '');
+ cleaned = cleaned.replace(/```\s*/g, '');
+
+ // Remove thinking tags (model's internal reasoning)
+ cleaned = cleaned.replace(/[\s\S]*?<\/think>/gi, '');
+ cleaned = cleaned.replace(/[\s\S]*?<\/thinking>/gi, '');
+
+ // Fix common JSON errors:
+
+ // 1. Trailing commas before closing brackets
+ cleaned = cleaned.replace(/,(\s*[}\]])/g, '$1');
+
+ // 2. Missing commas between properties - DISABLED because it corrupts valid JSON
+ // Modern AI models send properly formatted JSON, so this aggressive repair is not needed
+ // cleaned = cleaned.replace(/("\s*:\s*(?:"[^"]*"|[^,}\]]+))(\s+")/g, '$1,$2');
+
+ // 3. Single quotes to double quotes - DISABLED because it corrupts apostrophes in text
+ // Apostrophes in strings like "Zandik's Office" would become "Zandik"s Office" (invalid JSON)
+ // Modern AI models already use double quotes for JSON strings
+ // cleaned = cleaned.replace(/'/g, '"');
+
+ // 4. Unquoted keys - DISABLED because it corrupts valid JSON string values
+ // The AI models already send properly quoted JSON, so this is not needed
+ // cleaned = cleaned.replace(/(\{|,)\s*([a-zA-Z_][a-zA-Z0-9_]*)\s*:/g, '$1"$2":');
+
+ // 5. Remove JavaScript comments
+ cleaned = cleaned.replace(/\/\/.*$/gm, '');
+ cleaned = cleaned.replace(/\/\*[\s\S]*?\*\//g, '');
+
+ // Attempt 1: Standard JSON.parse
+ try {
+ return JSON.parse(cleaned);
+ } catch (e) {
+ }
+
+ // Attempt 2: Extract JSON object between first { and last }
+ const objectMatch = cleaned.match(/\{[\s\S]*\}/);
+ if (objectMatch) {
+ try {
+ return JSON.parse(objectMatch[0]);
+ } catch (e) {
+ // Silent fail, try next method
+ }
+ }
+
+ // Attempt 3: Try to extract JSON array between first [ and last ]
+ const arrayMatch = cleaned.match(/\[[\s\S]*\]/);
+ if (arrayMatch) {
+ try {
+ return JSON.parse(arrayMatch[0]);
+ } catch (e) {
+ // Silent fail, try next method
+ }
+ }
+
+ // Attempt 4: Use Function constructor (safer than eval, still controlled)
+ // Only as last resort for trusted AI output
+ try {
+ const fn = new Function(`"use strict"; return (${cleaned});`);
+ const result = fn();
+ // Validate it's actually an object or array
+ if (result && (typeof result === 'object')) {
+ console.log('[RPG JSON Repair] ✓ Repaired using Function constructor');
+ return result;
+ }
+ } catch (e) {
+ console.error('[RPG JSON Repair] ✗ All repair attempts failed:', e.message);
+ }
+
+ return null;
+}
+
+/**
+ * Validates JSON structure matches expected schema for a tracker type
+ *
+ * @param {object} data - Parsed JSON data to validate
+ * @param {string} type - Type of tracker ('userStats', 'infoBox', 'characters')
+ * @returns {boolean} True if valid, false otherwise
+ */
+export function validateJSONSchema(data, type) {
+ if (!data || typeof data !== 'object') {
+ return false;
+ }
+
+ try {
+ switch (type) {
+ case 'userStats':
+ return Array.isArray(data.stats) &&
+ data.stats.every(s =>
+ s &&
+ typeof s === 'object' &&
+ s.id &&
+ s.name &&
+ typeof s.value === 'number'
+ );
+
+ case 'infoBox':
+ return (data.date || data.weather || data.time || data.location || data.temperature || data.recentEvents);
+
+ case 'characters':
+ return Array.isArray(data.characters) &&
+ data.characters.every(c => c && c.name);
+
+ default:
+ console.warn('[RPG JSON Validation] Unknown tracker type:', type);
+ return false;
+ }
+ } catch (e) {
+ console.error('[RPG JSON Validation] Error during validation:', e);
+ return false;
+ }
+}
+
+/**
+ * Extracts JSON from text that may contain other content
+ * Looks for JSON blocks within ```json fences or standalone JSON objects
+ *
+ * @param {string} text - Text potentially containing JSON
+ * @returns {string|null} Extracted JSON string or null
+ */
+export function extractJSONFromText(text) {
+ if (!text || typeof text !== 'string') {
+ return null;
+ }
+
+ // Try to extract from ```json code fence
+ const fenceMatch = text.match(/```json\s*([\s\S]*?)```/i);
+ if (fenceMatch && fenceMatch[1]) {
+ return fenceMatch[1].trim();
+ }
+
+ // Try to extract from ``` code fence (without json label)
+ const genericFenceMatch = text.match(/```\s*([\s\S]*?)```/);
+ if (genericFenceMatch && genericFenceMatch[1]) {
+ const content = genericFenceMatch[1].trim();
+ // Check if it looks like JSON (starts with { or [)
+ if (content.startsWith('{') || content.startsWith('[')) {
+ return content;
+ }
+ }
+
+ // Try to find standalone JSON object
+ const objectMatch = text.match(/\{[\s\S]*\}/);
+ if (objectMatch) {
+ return objectMatch[0];
+ }
+
+ // Try to find standalone JSON array
+ const arrayMatch = text.match(/\[[\s\S]*\]/);
+ if (arrayMatch) {
+ return arrayMatch[0];
+ }
+
+ return null;
+}
+
+/**
+ * Safely parses JSON with automatic repair attempts
+ * Combines extraction, repair, and validation in one call
+ *
+ * @param {string} text - Text containing JSON (with or without code fences)
+ * @param {string} expectedType - Expected tracker type for validation ('userStats', 'infoBox', 'characters')
+ * @returns {{data: object|null, success: boolean, error: string|null}} Result object
+ */
+export function safeParseJSON(text, expectedType = null) {
+ const result = {
+ data: null,
+ success: false,
+ error: null
+ };
+
+ // Extract JSON from text
+ const jsonString = extractJSONFromText(text);
+ if (!jsonString) {
+ result.error = 'No JSON found in text';
+ return result;
+ }
+
+ // Attempt to repair and parse
+ const parsed = repairJSON(jsonString);
+ if (!parsed) {
+ result.error = 'Failed to parse JSON after repair attempts';
+ return result;
+ }
+
+ // Validate schema if type specified
+ if (expectedType) {
+ const valid = validateJSONSchema(parsed, expectedType);
+ if (!valid) {
+ result.error = `JSON does not match expected schema for type: ${expectedType}`;
+ result.data = parsed; // Return data anyway, might be partially useful
+ return result;
+ }
+ }
+
+ result.data = parsed;
+ result.success = true;
+ return result;
+}
diff --git a/src/utils/migration.js b/src/utils/migration.js
index ca17e00..a79ebd7 100644
--- a/src/utils/migration.js
+++ b/src/utils/migration.js
@@ -28,7 +28,24 @@ const DEFAULT_INVENTORY_V2 = {
* @returns {MigrationResult} Migration result with v2 inventory and metadata
*/
export function migrateInventory(inventory) {
- // Case 1: Already v2 format (has version property and is an object)
+ // Case 1: v2 format missing version property (parser output)
+ // Parser returns v2 structure but without the version tag
+ if (inventory && typeof inventory === 'object' &&
+ 'onPerson' in inventory && 'clothing' in inventory &&
+ 'stored' in inventory && 'assets' in inventory &&
+ !('version' in inventory)) {
+ // console.log('[RPG Companion Migration] v2 inventory missing version tag, adding it');
+ return {
+ inventory: {
+ version: 2,
+ ...inventory
+ },
+ migrated: true,
+ source: 'parser-output'
+ };
+ }
+
+ // Case 2: Already v2 format (has version property and is an object)
if (inventory && typeof inventory === 'object' && inventory.version === 2) {
// Check if clothing field exists (v2.1 upgrade)
if (!inventory.hasOwnProperty('clothing')) {
@@ -49,7 +66,7 @@ export function migrateInventory(inventory) {
};
}
- // Case 2: null or undefined → use defaults
+ // Case 3: null or undefined → use defaults
if (inventory === null || inventory === undefined) {
// console.log('[RPG Companion Migration] Inventory is null/undefined, using defaults');
return {
@@ -59,7 +76,7 @@ export function migrateInventory(inventory) {
};
}
- // Case 3: v1 string format → migrate to v2
+ // Case 4: v1 string format → migrate to v2
if (typeof inventory === 'string') {
// Check if it's an empty/default string
const trimmed = inventory.trim();
diff --git a/style.css b/style.css
index 57a7e73..3e8f703 100644
--- a/style.css
+++ b/style.css
@@ -14,7 +14,8 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
/* CSS Variables for Theming - Default uses SillyTavern's variables */
.rpg-panel,
#rpg-thought-panel,
-#rpg-thought-icon {
+#rpg-thought-icon,
+.rpg-mobile-toggle {
--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);
@@ -192,19 +193,39 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
}
}
-@media (max-width: 480px) {
- .rpg-panel.rpg-position-right,
- .rpg-panel.rpg-position-left {
+@media (max-width: 768px) {
+ /* Left position on mobile/tablet */
+ body.rpg-panel-position-left #rpg-companion-panel.rpg-panel,
+ #rpg-companion-panel.rpg-panel.rpg-position-left {
left: 0 !important;
- right: 0 !important;
- width: 100%;
- height: 50vh;
- top: auto;
- bottom: 0;
+ right: auto !important;
+ width: 85% !important;
+ max-width: 320px !important;
+ height: 100vh !important;
+ top: 0 !important;
+ bottom: 0 !important;
}
- .rpg-panel.rpg-position-top {
- max-height: 40vh;
+ /* Right position on mobile/tablet */
+ body.rpg-panel-position-right #rpg-companion-panel.rpg-panel,
+ #rpg-companion-panel.rpg-panel.rpg-position-right {
+ left: auto !important;
+ right: 0 !important;
+ width: 85% !important;
+ max-width: 320px !important;
+ height: 100vh !important;
+ top: 0 !important;
+ bottom: 0 !important;
+ }
+
+ /* Top position on mobile */
+ #rpg-companion-panel.rpg-panel.rpg-position-top {
+ left: 0 !important;
+ right: 0 !important;
+ width: 100% !important;
+ max-height: 40vh !important;
+ top: 0 !important;
+ bottom: auto !important;
}
}
@@ -564,6 +585,14 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
/* ============================================
USER STATS SECTION
============================================ */
+#rpg-user-stats {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ min-height: 0;
+ overflow: auto;
+}
+
.rpg-stats-section {
text-align: center;
display: flex;
@@ -681,6 +710,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
flex: 1;
min-height: 0;
overflow: hidden;
+ position: relative; /* For absolute positioning of lock icon */
}
/* Stats Left - Portrait, Bars and mood */
@@ -800,6 +830,8 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
flex-direction: column;
gap: clamp(3px, 0.5vh, 6px);
flex: 1 1 auto;
+ position: relative; /* For lock icon positioning */
+ overflow: visible;
}
.rpg-stats-grid::-webkit-scrollbar {
@@ -838,26 +870,104 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
background: var(--rpg-text);
}
+/* Section-level lock icon styling - appears on hover in top-right corner */
+.rpg-section-lock-icon {
+ position: absolute;
+ top: 8px;
+ right: 8px;
+ font-size: 1rem;
+ cursor: pointer;
+ opacity: 0;
+ transition: opacity 0.2s ease, transform 0.1s ease;
+ user-select: none;
+ z-index: 10;
+ pointer-events: none;
+}
+
+/* Show lock icon on hover or when section is locked */
+.rpg-stats-content:hover .rpg-section-lock-icon,
+.rpg-dashboard-widget:hover .rpg-section-lock-icon,
+.rpg-character-card:hover .rpg-section-lock-icon,
+.rpg-item-card:hover .rpg-section-lock-icon,
+.rpg-item-row:hover .rpg-section-lock-icon,
+.rpg-quest-item:hover .rpg-section-lock-icon,
+.rpg-section-lock-icon.locked {
+ opacity: 0.7;
+ pointer-events: auto;
+}
+
+.rpg-section-lock-icon:hover {
+ opacity: 1;
+ transform: scale(1.15);
+}
+
+/* Mobile: always show lock icons since there's no hover */
+@media (max-width: 1000px) {
+ .rpg-section-lock-icon {
+ opacity: 0.6 !important;
+ pointer-events: auto !important;
+ }
+
+ .rpg-section-lock-icon.locked {
+ opacity: 0.9 !important;
+ }
+}
+
+/* Make containers relative for absolute positioning of lock icon */
+.rpg-stats-content,
+.rpg-dashboard-widget,
+.rpg-character-content,
+.rpg-item-card,
+.rpg-item-row,
+.rpg-quest-item {
+ position: relative;
+}
+
.rpg-stat-row {
display: flex;
align-items: center;
gap: 0.25em;
flex: 1 1 0;
+ min-width: fit-content;
+ max-width: 100%;
+ width: 100%;
min-height: clamp(12px, 1.8vh, 16px);
+ transition: background-color 0.2s ease;
+ overflow: visible;
+ box-sizing: border-box;
+}
+
+/* Old per-field lock styling - remove */
+.rpg-lock-icon {
+ display: none;
+}
+
+.rpg-stat-row.rpg-locked {
+ background-color: transparent;
+ border-left: none;
+ padding-left: 0;
}
.rpg-stat-label {
- min-width: 4.062rem;
+ flex: 0 0 auto;
+ min-width: 3rem;
+ max-width: 30%;
font-size: clamp(0.625rem, 0.6vw, 0.75rem);
font-weight: 600;
text-align: left;
color: var(--rpg-text);
text-transform: uppercase;
letter-spacing: 0.019em;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
.rpg-stat-bar {
flex: 1;
+ min-width: 3.75rem;
+ max-width: 100%;
+ width: 100%;
height: clamp(9px, 1.3vh, 11px);
min-height: 9px;
position: relative;
@@ -865,6 +975,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
overflow: hidden;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.1);
+ box-sizing: border-box;
}
.rpg-stat-fill {
@@ -886,7 +997,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
}
/* Compact layout for high zoom / small viewports */
-@media (max-height: 750px), (max-width: 500px) {
+@media (max-height: 750px), (max-width: 1500px) {
.rpg-stat-row {
position: relative;
min-height: clamp(16px, 2.5vh, 20px);
@@ -899,14 +1010,19 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
transform: translateY(-50%);
z-index: 2;
min-width: auto;
- font-size: clamp(0.75rem, 0.7vw, 0.875rem);
+ max-width: calc(100% - 3rem);
+ font-size: min(0.7vw, 0.875rem);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
+ overflow: hidden;
+ white-space: nowrap;
}
.rpg-stat-bar {
- width: 100%;
+ width: 100% !important;
+ max-width: 100% !important;
height: 100%;
min-height: clamp(16px, 2.5vh, 20px);
+ box-sizing: border-box;
}
.rpg-stat-value {
@@ -918,6 +1034,22 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
min-width: auto;
font-size: clamp(0.75rem, 0.7vw, 0.875rem);
}
+
+ .rpg-mood {
+ font-size: clamp(0.625rem, 1vw, 0.75rem);
+ flex-shrink: 1;
+ min-width: 0;
+ }
+
+ .rpg-mood-emoji {
+ font-size: clamp(0.875rem, 2vw, 1.125rem);
+ }
+
+ .rpg-mood-conditions {
+ font-size: clamp(0.625rem, 1vw, 0.75rem);
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+ }
}
.rpg-mood {
@@ -930,6 +1062,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
border-radius: 0.25em;
border: 1px solid var(--rpg-border);
flex-shrink: 0;
+ position: relative; /* For lock icon positioning */
}
.rpg-mood-emoji {
@@ -944,6 +1077,9 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
line-height: 1.2;
color: var(--rpg-text);
font-weight: 600;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+ hyphens: auto;
}
/* Skills Section */
@@ -958,6 +1094,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
border: 1px solid var(--rpg-border);
flex-shrink: 0;
margin-top: 0.375em;
+ position: relative; /* For lock icon positioning */
}
.rpg-skills-label {
@@ -972,6 +1109,9 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
line-height: 1.2;
color: var(--rpg-text);
font-weight: 600;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+ hyphens: auto;
}
/* Classic RPG Stats - Will match height of stats box automatically */
@@ -1114,7 +1254,8 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
gap: 0.25em;
align-items: stretch;
width: 100%;
- overflow: hidden;
+ overflow-y: auto;
+ overflow-x: hidden;
}
/* Scrollable content wrapper inside info section */
@@ -1202,28 +1343,44 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
/* Location widget - flexible height */
.rpg-location-widget {
height: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 0.125em;
+ padding: 0.25em;
+ overflow: hidden;
}
/* Calendar Widget */
.rpg-calendar-widget {
padding: 0.188em;
+ container-type: size;
+ height: 100%;
+ overflow: hidden;
}
.rpg-calendar-top {
background: var(--rpg-highlight);
color: var(--rpg-bg);
- font-size: clamp(0.563rem, 0.55vw, 0.625rem);
+ font-size: clamp(0.5rem, 3.5cqh, 0.625rem);
font-weight: bold;
padding: 0.125em 0.375em;
border-radius: 3px 3px 0 0;
width: 100%;
text-align: center;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+ white-space: normal;
+ max-width: 100%;
+ line-height: 1.2;
+ overflow: hidden;
}
.rpg-calendar-day {
background: rgba(255, 255, 255, 0.1);
color: var(--rpg-text);
- font-size: clamp(0.625rem, 0.7vw, 0.875rem);
+ font-size: clamp(0.625rem, 5cqh, 0.875rem);
font-weight: bold;
padding: 0.25em;
width: 100%;
@@ -1234,17 +1391,28 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
display: flex;
align-items: center;
justify-content: center;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+ white-space: normal;
+ max-width: 100%;
+ line-height: 1.2;
min-width: 0;
+ overflow: hidden;
}
.rpg-calendar-year {
- font-size: clamp(0.563rem, 0.55vw, 0.625rem);
+ font-size: clamp(0.5rem, 3.5cqh, 0.625rem);
color: var(--rpg-text);
opacity: 0.7;
margin-top: 0.062em;
+ width: 100%;
+ text-align: center;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+ white-space: normal;
+ max-width: 100%;
+ line-height: 1.2;
+ overflow: hidden;
}
/* Weather Widget */
@@ -1255,6 +1423,11 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
justify-content: center;
gap: 0.188em;
padding: 0.25em;
+ max-width: 100%;
+ height: 100%;
+ overflow: hidden;
+ box-sizing: border-box;
+ container-type: size;
}
/* Weather Widget Icon */
@@ -1266,19 +1439,25 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
}
.rpg-weather-forecast {
- font-size: clamp(0.625rem, 0.6vw, 0.75rem);
+ font-size: clamp(0.5rem, 4cqh, 0.75rem);
text-align: center;
margin: 0;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.013em;
opacity: 0.85;
- line-height: 1.2;
+ line-height: 1.1;
word-wrap: break-word;
overflow-wrap: break-word;
max-width: 100%;
+ width: 100%;
white-space: normal;
flex-shrink: 1;
+ overflow: hidden;
+ display: -webkit-box;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
+ hyphens: auto;
}
.rpg-weather-forecast.rpg-editable {
@@ -1396,14 +1575,17 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
font-size: clamp(0.625rem, 0.6vw, 0.75rem);
font-weight: bold;
color: var(--rpg-text);
+ text-align: center;
+ margin-top: 0.25em;
}
/* Location Widget - Map */
.rpg-map-bg {
width: 100%;
- height: 1.875rem;
+ height: auto;
+ max-height: 60%;
+ padding: 0.5em 0;
margin: 0;
- margin-bottom: 0 !important;
background:
linear-gradient(45deg, rgba(255,255,255,0.05) 25%, transparent 25%),
linear-gradient(-45deg, rgba(255,255,255,0.05) 25%, transparent 25%),
@@ -1418,15 +1600,14 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
align-items: center;
justify-content: center;
position: relative;
- overflow: hidden;
- flex-shrink: 0;
- margin-bottom: 0.188em;
+ flex: 0 0 auto;
}
.rpg-map-marker {
- font-size: clamp(0.875rem, 1vw, 1rem);
+ font-size: clamp(0.875rem, 2.5vw, 1.25rem);
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
animation: markerPulse 2s ease-in-out infinite;
+ line-height: 1;
}
@keyframes markerPulse {
@@ -1440,11 +1621,17 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
color: var(--rpg-text);
text-align: center;
line-height: 1.2;
- padding: 0.125em 0.25em;
+ padding: 0;
margin: 0;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
+ flex: 1 1 auto;
+ min-height: 0;
+ overflow: hidden;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
}
/* Row 3: Recent Events */
@@ -2408,6 +2595,25 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
background: var(--rpg-bg);
cursor: pointer;
transition: all 0.3s ease;
+ /* Ensure color picker works on all browsers */
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+}
+
+/* Remove padding for better color swatch display */
+.rpg-setting-row input[type="color"]::-webkit-color-swatch-wrapper {
+ padding: 0;
+}
+
+.rpg-setting-row input[type="color"]::-webkit-color-swatch {
+ border: none;
+ border-radius: 0.25em;
+}
+
+.rpg-setting-row input[type="color"]::-moz-color-swatch {
+ border: none;
+ border-radius: 0.25em;
}
.rpg-setting-row input[type="color"]:hover {
@@ -2439,6 +2645,136 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
transition: all 0.3s ease;
}
+.checkbox_label input[type="checkbox"] {
+ accent-color: #666 !important;
+}
+
+.checkbox_label input[type="checkbox"]:checked {
+ background-color: #666 !important;
+}
+
+.rpg-panel[data-theme="sci-fi"] .checkbox_label input[type="checkbox"],
+.rpg-settings-popup[data-theme="sci-fi"] .checkbox_label input[type="checkbox"] {
+ accent-color: var(--rpg-highlight) !important;
+}
+
+.rpg-panel[data-theme="sci-fi"] .checkbox_label input[type="checkbox"]:checked,
+.rpg-settings-popup[data-theme="sci-fi"] .checkbox_label input[type="checkbox"]:checked {
+ background-color: var(--rpg-highlight) !important;
+}
+
+.rpg-panel[data-theme="fantasy"] .checkbox_label input[type="checkbox"],
+.rpg-settings-popup[data-theme="fantasy"] .checkbox_label input[type="checkbox"] {
+ accent-color: var(--rpg-highlight) !important;
+}
+
+.rpg-panel[data-theme="fantasy"] .checkbox_label input[type="checkbox"]:checked,
+.rpg-settings-popup[data-theme="fantasy"] .checkbox_label input[type="checkbox"]:checked {
+ background-color: var(--rpg-highlight) !important;
+}
+
+.rpg-panel[data-theme="cyberpunk"] .checkbox_label input[type="checkbox"],
+.rpg-settings-popup[data-theme="cyberpunk"] .checkbox_label input[type="checkbox"] {
+ accent-color: var(--rpg-highlight) !important;
+}
+
+.rpg-panel[data-theme="cyberpunk"] .checkbox_label input[type="checkbox"]:checked,
+.rpg-settings-popup[data-theme="cyberpunk"] .checkbox_label input[type="checkbox"]:checked {
+ background-color: var(--rpg-highlight) !important;
+}
+
+.rpg-panel[data-theme="custom"] .checkbox_label input[type="checkbox"],
+.rpg-settings-popup[data-theme="custom"] .checkbox_label input[type="checkbox"] {
+ accent-color: var(--rpg-highlight) !important;
+}
+
+.rpg-panel[data-theme="custom"] .checkbox_label input[type="checkbox"]:checked,
+.rpg-settings-popup[data-theme="custom"] .checkbox_label input[type="checkbox"]:checked {
+ background-color: var(--rpg-highlight) !important;
+}
+
+/* Tracker Editor checkboxes (not wrapped in checkbox_label) */
+#rpg-tracker-editor-popup input[type="checkbox"] {
+ accent-color: #666 !important;
+}
+
+#rpg-tracker-editor-popup input[type="checkbox"]:checked {
+ background-color: #666 !important;
+}
+
+#rpg-tracker-editor-popup[data-theme="sci-fi"] input[type="checkbox"] {
+ accent-color: var(--rpg-highlight) !important;
+}
+
+#rpg-tracker-editor-popup[data-theme="sci-fi"] input[type="checkbox"]:checked {
+ background-color: var(--rpg-highlight) !important;
+}
+
+#rpg-tracker-editor-popup[data-theme="fantasy"] input[type="checkbox"] {
+ accent-color: var(--rpg-highlight) !important;
+}
+
+#rpg-tracker-editor-popup[data-theme="fantasy"] input[type="checkbox"]:checked {
+ background-color: var(--rpg-highlight) !important;
+}
+
+#rpg-tracker-editor-popup[data-theme="cyberpunk"] input[type="checkbox"] {
+ accent-color: var(--rpg-highlight) !important;
+}
+
+#rpg-tracker-editor-popup[data-theme="cyberpunk"] input[type="checkbox"]:checked {
+ background-color: var(--rpg-highlight) !important;
+}
+
+#rpg-tracker-editor-popup[data-theme="custom"] input[type="checkbox"] {
+ accent-color: var(--rpg-highlight) !important;
+}
+
+#rpg-tracker-editor-popup[data-theme="custom"] input[type="checkbox"]:checked {
+ background-color: var(--rpg-highlight) !important;
+}
+
+/* Panel checkboxes (not wrapped in checkbox_label) */
+.rpg-panel input[type="checkbox"]:not(.checkbox_label input[type="checkbox"]) {
+ accent-color: #666 !important;
+}
+
+.rpg-panel input[type="checkbox"]:not(.checkbox_label input[type="checkbox"]):checked {
+ background-color: #666 !important;
+}
+
+.rpg-panel[data-theme="sci-fi"] input[type="checkbox"]:not(.checkbox_label input[type="checkbox"]) {
+ accent-color: var(--rpg-highlight) !important;
+}
+
+.rpg-panel[data-theme="sci-fi"] input[type="checkbox"]:not(.checkbox_label input[type="checkbox"]):checked {
+ background-color: var(--rpg-highlight) !important;
+}
+
+.rpg-panel[data-theme="fantasy"] input[type="checkbox"]:not(.checkbox_label input[type="checkbox"]) {
+ accent-color: var(--rpg-highlight) !important;
+}
+
+.rpg-panel[data-theme="fantasy"] input[type="checkbox"]:not(.checkbox_label input[type="checkbox"]):checked {
+ background-color: var(--rpg-highlight) !important;
+}
+
+.rpg-panel[data-theme="cyberpunk"] input[type="checkbox"]:not(.checkbox_label input[type="checkbox"]) {
+ accent-color: var(--rpg-highlight) !important;
+}
+
+.rpg-panel[data-theme="cyberpunk"] input[type="checkbox"]:not(.checkbox_label input[type="checkbox"]):checked {
+ background-color: var(--rpg-highlight) !important;
+}
+
+.rpg-panel[data-theme="custom"] input[type="checkbox"]:not(.checkbox_label input[type="checkbox"]) {
+ accent-color: var(--rpg-highlight) !important;
+}
+
+.rpg-panel[data-theme="custom"] input[type="checkbox"]:not(.checkbox_label input[type="checkbox"]):checked {
+ background-color: var(--rpg-highlight) !important;
+}
+
.checkbox_label:hover {
color: var(--rpg-highlight);
}
@@ -2530,20 +2866,15 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
transform: translateY(0);
}
-/* ============================================
- MEMORY RECOLLECTION STYLES
- ============================================ */
-
-/* Memory Recollection Button */
-.rpg-memory-recollection-btn {
+/* Customize Prompts Button - Neutral gray style */
+.rpg-btn-customize-prompts {
width: 100%;
- padding: 0.75em 1em;
- margin-bottom: 10px;
- background: linear-gradient(135deg, var(--rpg-border, #4a7ba7) 0%, var(--rpg-highlight, #e94560) 100%);
- border: 2px solid var(--rpg-border-transparent, rgba(74, 123, 167, 0.5));
+ padding: 0.625em;
+ background: rgba(128, 128, 128, 0.2);
+ border: 2px solid rgba(128, 128, 128, 0.5);
border-radius: 0.5em;
- color: #ffffff;
- font-size: 14px;
+ color: #aaa;
+ font-size: clamp(0.938rem, 1.2vw, 1.2rem);
font-weight: 600;
cursor: pointer;
display: flex;
@@ -2553,66 +2884,18 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
transition: all 0.3s ease;
}
-.rpg-memory-recollection-btn:hover {
- background: linear-gradient(135deg, var(--rpg-highlight, #e94560) 0%, var(--rpg-border, #4a7ba7) 100%);
- border-color: var(--rpg-border-opaque, rgba(74, 123, 167, 0.8));
- transform: translateY(-2px);
- box-shadow: 0 4px 12px var(--rpg-border-transparent, rgba(74, 123, 167, 0.3));
+.rpg-btn-customize-prompts:hover {
+ background: rgba(128, 128, 128, 0.3);
+ border-color: rgba(128, 128, 128, 0.8);
+ color: #ccc;
+ transform: translateY(-0.062rem);
}
-.rpg-memory-recollection-btn:active {
+.rpg-btn-customize-prompts:active {
transform: translateY(0);
}
-/* Modal Overlay */
-.rpg-memory-modal-overlay {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: rgba(0, 0, 0, 0.7);
- backdrop-filter: blur(5px);
- display: flex;
- align-items: center;
- justify-content: center;
- z-index: 10000;
- animation: fadeIn 0.2s ease;
-}
-
-@keyframes fadeIn {
- from { opacity: 0; }
- to { opacity: 1; }
-}
-
-/* Modal Container */
-.rpg-memory-modal {
- background: var(--SmartThemeBlurTintColor, #1a1a2e);
- border: 2px solid var(--rpg-border, var(--SmartThemeBorderColor, #4a7ba7));
- border-radius: 12px;
- max-width: 500px;
- width: 90%;
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
- animation: modalSlideIn 0.3s ease;
-}
-
-@keyframes modalSlideIn {
- from {
- transform: translateY(-20px);
- opacity: 0;
- }
- to {
- transform: translateY(0);
- opacity: 1;
- }
-}
-
-/* Modal Header */
-.rpg-memory-modal-header {
- padding: 1.25em;
- border-bottom: 1px solid var(--rpg-border, var(--SmartThemeBorderColor, #4a7ba7));
- background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
-}
+/* Memory Recollection styles removed - feature deprecated */
.rpg-memory-modal-header h3 {
margin: 0;
@@ -2728,77 +3011,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
box-shadow: 0 4px 12px var(--rpg-border-transparent, rgba(74, 123, 167, 0.3));
}
-/* ============================================
- LOREBOOK LIMITER STYLING
- ============================================ */
-
-.rpg-lorebook-limiter-container {
- width: 100%;
- padding: 0.75em 1em;
- margin-bottom: 10px;
- background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
- border: 2px solid rgba(102, 126, 234, 0.3);
- border-radius: 0.5em;
- display: flex;
- flex-direction: column;
- gap: 0.5em;
-}
-
-.rpg-lorebook-limiter-label {
- display: flex;
- align-items: center;
- justify-content: space-between;
- gap: 1em;
- cursor: pointer;
-}
-
-.rpg-lorebook-limiter-title {
- color: rgba(102, 126, 234, 1);
- font-weight: 600;
- font-size: 14px;
-}
-
-.rpg-lorebook-limiter-input {
- width: 120px;
- padding: 0.5em;
- background: rgba(0, 0, 0, 0.3);
- border: 2px solid rgba(102, 126, 234, 0.4);
- border-radius: 0.3em;
- color: #ffffff;
- font-size: 14px;
- font-weight: 600;
- text-align: center;
- transition: all 0.3s ease;
-}
-
-.rpg-lorebook-limiter-input:focus {
- outline: none;
- border-color: rgba(102, 126, 234, 0.8);
- background: rgba(0, 0, 0, 0.5);
- box-shadow: 0 0 8px rgba(102, 126, 234, 0.3);
-}
-
-.rpg-lorebook-limiter-input::placeholder {
- color: rgba(255, 255, 255, 0.4);
- font-weight: 400;
-}
-
-.rpg-lorebook-limiter-hint {
- color: rgba(255, 255, 255, 0.6);
- font-size: 12px;
- font-style: italic;
-}
-
-.rpg-memory-close {
- background: rgba(52, 152, 219, 0.2);
- color: #5dade2;
- border: 2px solid rgba(52, 152, 219, 0.5);
-}
-
-.rpg-memory-close:hover {
- background: rgba(52, 152, 219, 0.3);
- border-color: rgba(52, 152, 219, 0.8);
-}
+/* Lorebook Limiter styles removed - feature deprecated */
/* ============================================
THEME VARIATIONS
@@ -2816,7 +3029,8 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
/* Apply sci-fi theme to thought panel */
#rpg-thought-panel[data-theme="sci-fi"],
-#rpg-thought-icon[data-theme="sci-fi"] {
+#rpg-thought-icon[data-theme="sci-fi"],
+.rpg-mobile-toggle[data-theme="sci-fi"] {
--rpg-bg: #0a0e27;
--rpg-accent: #1a1f3a;
--rpg-text: #00fff9;
@@ -2863,7 +3077,8 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
/* Apply fantasy theme to thought panel */
#rpg-thought-panel[data-theme="fantasy"],
-#rpg-thought-icon[data-theme="fantasy"] {
+#rpg-thought-icon[data-theme="fantasy"],
+.rpg-mobile-toggle[data-theme="fantasy"] {
--rpg-bg: #2b1810;
--rpg-accent: #3d2414;
--rpg-text: #f4e8d0;
@@ -2919,7 +3134,8 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
/* Apply cyberpunk theme to thought panel */
#rpg-thought-panel[data-theme="cyberpunk"],
-#rpg-thought-icon[data-theme="cyberpunk"] {
+#rpg-thought-icon[data-theme="cyberpunk"],
+.rpg-mobile-toggle[data-theme="cyberpunk"] {
--rpg-bg: #000000;
--rpg-accent: #0d0d0d;
--rpg-text: #00ff41;
@@ -4457,11 +4673,62 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
position: fixed;
z-index: 1000; /* Lower z-index to stay below dropdown menus */
pointer-events: auto;
- max-width: 15.3rem; /* 30% smaller than 21.875rem (350px → 245px) */
+ max-width: 350px; /* Fixed max like panels, will be constrained by viewport */
+ width: auto;
transform: translateY(0); /* No vertical centering - align with avatar top */
animation: thoughtPanelFadeIn 0.4s ease-out;
}
+/* Collapsed thought icon */
+#rpg-thought-icon {
+ position: fixed;
+ z-index: 1000; /* Lower z-index to stay below dropdown menus */
+ display: none; /* Hidden by default in desktop */
+ align-items: center;
+ justify-content: center;
+ width: 44px;
+ height: 44px;
+ border-radius: 50%;
+ background: var(--rpg-bg, rgba(30, 30, 50, 0.95));
+ border: 2px solid var(--rpg-highlight, #e94560);
+ color: var(--rpg-text, #ecf0f1);
+ font-size: clamp(1.25rem, 1.85vw, 1.875rem);
+ cursor: move;
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
+ backdrop-filter: blur(10px);
+ transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
+ user-select: none;
+ -webkit-user-select: none;
+}
+
+/* Show icon only in mobile view */
+@media (max-width: 1000px) {
+ #rpg-thought-icon {
+ display: flex;
+ }
+}
+
+/* Force hide class for desktop mode - overrides media query */
+#rpg-thought-icon.rpg-force-hide {
+ display: none !important;
+}
+
+/* Hidden state that allows transitions */
+#rpg-thought-icon.rpg-hidden {
+ opacity: 0;
+ pointer-events: none;
+}
+
+#rpg-thought-icon.dragging {
+ transition: none !important;
+ cursor: grabbing;
+}
+
+#rpg-thought-icon:not(.dragging):hover {
+ transform: scale(1.1);
+ box-shadow: 0 6px 20px rgba(233, 69, 96, 0.4);
+}
+
/* Close button */
.rpg-thought-close {
position: absolute;
@@ -4489,28 +4756,11 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
color: var(--rpg-highlight, #e94560);
}
-/* Collapsed thought icon */
-#rpg-thought-icon {
- position: fixed;
- z-index: 1000; /* Lower z-index to stay below dropdown menus */
- width: 2.25rem;
- height: 2.25rem;
- border-radius: 50%;
- background: var(--rpg-bg, rgba(30, 30, 50, 0.95));
- border: 2px solid var(--rpg-highlight, #e94560);
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: clamp(1.3rem, 1.4rem, 1.5rem);
- cursor: pointer;
- animation: thoughtIconPulse 2s ease-in-out infinite;
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
- backdrop-filter: blur(10px);
-}
-
-#rpg-thought-icon:hover {
- transform: scale(1.1);
- animation: none;
+/* Hide close button in desktop view (panel doesn't close) */
+@media (min-width: 1001px) {
+ .rpg-thought-close {
+ display: none !important;
+ }
}
@keyframes thoughtIconPulse {
@@ -4535,6 +4785,12 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
z-index: 1;
}
+/* Flip thought circles to left side when panel is on left */
+.rpg-thought-panel-right .rpg-thought-circles {
+ inset: 0px auto auto -50px;
+ flex-direction: row; /* Normal order for left side */
+}
+
.rpg-thought-circle {
background: var(--rpg-bg, rgba(30, 30, 50, 0.8));
border: 2px solid var(--rpg-highlight, #e94560);
@@ -4569,7 +4825,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
position: relative;
backdrop-filter: blur(15px);
- max-height: 30vh;
+ max-height: calc(100vh - 120px); /* Scale with viewport height */
overflow-y: auto;
overflow-x: hidden;
}
@@ -4717,12 +4973,19 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
}
/* Responsive positioning for mobile/narrow screens */
-@media (max-width: 768px) {
+@media (max-width: 1000px) {
#rpg-thought-panel {
position: fixed !important;
max-width: 90vw !important;
+ width: 90vw !important;
left: 50% !important;
- transform: translateX(-50%) translateY(-50%) !important;
+ transform: translateX(-50%) !important;
+ max-height: calc(100vh - 80px) !important;
+ }
+
+ #rpg-thought-panel .rpg-thought-bubble {
+ max-height: calc(100vh - 100px) !important;
+ overflow-y: auto !important;
}
.rpg-thought-circles {
@@ -4754,28 +5017,39 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
width: 44px;
height: 44px;
border-radius: 50%;
- background: var(--SmartThemeBlurTintColor);
- border: 2px solid var(--SmartThemeBorderColor);
+ background: var(--rpg-bg, rgba(30, 30, 50, 0.95));
+ border: 2px solid var(--rpg-highlight, #e94560);
color: var(--rpg-text, #ecf0f1);
font-size: clamp(1.25rem, 1.85vw, 1.875rem);
- cursor: grab;
+ cursor: move;
z-index: 10002;
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
- transition: opacity 0.3s ease, transform 0.2s ease, top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
+ backdrop-filter: blur(10px);
+ transition: transform 0.2s ease, box-shadow 0.2s ease, top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
user-select: none; /* Prevent text selection while dragging */
-webkit-user-select: none;
will-change: top, left; /* Optimize for position changes */
}
-/* Disable transitions while actively dragging */
-.rpg-mobile-toggle.dragging {
- transition: none;
- cursor: grabbing;
+/* Center the icon inside */
+.rpg-mobile-toggle i {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
}
-.rpg-mobile-toggle:hover {
+/* Disable transitions while actively dragging */
+.rpg-mobile-toggle.dragging {
+ transition: none !important;
+ cursor: grabbing;
+ animation: none;
+}
+
+.rpg-mobile-toggle:not(.dragging):hover {
transform: scale(1.1);
- box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
+ box-shadow: 0 6px 20px rgba(233, 69, 96, 0.4);
}
.rpg-mobile-toggle:active {
@@ -4855,7 +5129,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
/* Hidden by default - completely removed from layout */
display: none !important;
- overflow-y: auto !important;
+ overflow: visible !important;
-webkit-overflow-scrolling: touch;
/* Styling */
@@ -4866,6 +5140,17 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
box-shadow: -5px 0 20px var(--rpg-shadow);
}
+ /* Allow collapse button to show outside panel */
+ .rpg-game-container {
+ overflow: visible !important;
+ }
+
+ /* But keep content scrollable */
+ #rpg-panel-content {
+ overflow-y: auto !important;
+ overflow-x: hidden !important;
+ }
+
/* Show panel when opened with slide-in animation */
.rpg-panel.rpg-mobile-open {
display: block !important;
@@ -4900,6 +5185,45 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
}
}
+ /* Slide-in animation from left */
+ @keyframes rpgSlideInFromLeft {
+ from {
+ transform: translateX(-100%);
+ }
+ to {
+ transform: translateX(0);
+ }
+ }
+
+ /* Slide-out animation to left */
+ @keyframes rpgSlideOutToLeft {
+ from {
+ transform: translateX(0);
+ }
+ to {
+ transform: translateX(-100%);
+ }
+ }
+
+ /* Left-side mobile panel positioning */
+ .rpg-panel.rpg-position-left {
+ right: auto !important;
+ left: 0 !important;
+ border-radius: 0 20px 0 0;
+ border-left: none;
+ border-right: 1px solid var(--SmartThemeBorderColor);
+ box-shadow: 5px 0 20px var(--rpg-shadow);
+ }
+
+ /* Left-side panel animations */
+ .rpg-panel.rpg-position-left.rpg-mobile-open {
+ animation: rpgSlideInFromLeft 0.3s ease-in-out;
+ }
+
+ .rpg-panel.rpg-position-left.rpg-mobile-closing {
+ animation: rpgSlideOutToLeft 0.3s ease-in-out;
+ }
+
/* ========================================
MOBILE KEYBOARD HANDLING
======================================== */
@@ -4934,15 +5258,14 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
pointer-events: auto !important;
}
- /* Collapse toggle on mobile - right side, always visible */
+ /* Collapse toggle on mobile - positioned on panel edge and vertically centered */
.rpg-collapse-toggle {
display: flex !important;
align-items: center;
justify-content: center;
- position: fixed !important;
- top: calc(var(--topBarBlockSize) + 120px) !important;
- left: 12px !important;
- right: auto !important;
+ position: absolute !important;
+ top: 50% !important;
+ transform: translateY(-50%) !important;
width: 44px;
height: 44px;
min-width: 44px;
@@ -4950,20 +5273,33 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
border-radius: 50%;
background: var(--SmartThemeBlurTintColor);
border: 2px solid var(--SmartThemeBorderColor);
- z-index: 9999 !important;
+ z-index: 10000 !important;
transition: all 0.2s ease;
- transform: none !important;
pointer-events: auto !important;
cursor: pointer !important;
}
+ /* Position on right edge when panel is on left */
+ body.rpg-panel-position-left .rpg-collapse-toggle,
+ .rpg-panel.rpg-position-left .rpg-collapse-toggle {
+ left: auto !important;
+ right: -22px !important;
+ }
+
+ /* Position on left edge when panel is on right */
+ body.rpg-panel-position-right .rpg-collapse-toggle,
+ .rpg-panel.rpg-position-right .rpg-collapse-toggle {
+ left: -22px !important;
+ right: auto !important;
+ }
+
.rpg-collapse-toggle:hover {
background: rgba(255, 255, 255, 0.1);
- transform: scale(1.05) !important;
+ transform: translateY(-50%) scale(1.05) !important;
}
.rpg-collapse-toggle:active {
- transform: scale(0.95) !important;
+ transform: translateY(-50%) scale(0.95) !important;
}
/* Mobile icon styling - use chevrons for drawer UX */
@@ -5050,6 +5386,25 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
padding: 12px;
}
+ /* Center empty state messages in mobile tabs - only when empty */
+ .rpg-mobile-tab-content #rpg-user-stats:has(> .rpg-inventory-empty) {
+ display: flex !important;
+ flex: 1;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ }
+
+ /* When empty state is shown, center it in the full panel */
+ .rpg-mobile-tab-content #rpg-user-stats > .rpg-inventory-empty {
+ margin: auto;
+ }
+
+ .rpg-mobile-tab-content .rpg-inventory-empty {
+ text-align: center;
+ width: auto !important;
+ }
+
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
@@ -5126,7 +5481,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
}
.rpg-calendar-day {
- font-size: clamp(10px, 2.9vw, 14px) !important;
+ font-size: min(2.5vw, 14px) !important;
}
.rpg-calendar-year {
@@ -5134,19 +5489,19 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
}
.rpg-weather-forecast {
- font-size: clamp(0.5625rem, 2.2vw, 0.6875rem) !important;
+ font-size: min(2.2vw, 0.6875rem) !important;
}
.rpg-temp-value {
- font-size: clamp(0.625rem, 2.5vw, 0.8125rem) !important;
+ font-size: min(2.5vw, 0.8125rem) !important;
}
.rpg-time-value {
- font-size: clamp(0.625rem, 2.5vw, 0.8125rem) !important;
+ font-size: min(2.5vw, 0.8125rem) !important;
}
.rpg-location-text {
- font-size: clamp(0.6875rem, 2.8vw, 0.875rem) !important;
+ font-size: min(2.8vw, 0.875rem) !important;
}
.rpg-map-marker {
@@ -5173,20 +5528,22 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
}
.rpg-event-text {
- font-size: clamp(8px, 2vw, 10px) !important;
+ font-size: clamp(11px, 2.8vw, 14px) !important;
}
/* ========================================
MOBILE STATS TAB LAYOUT IMPROVEMENTS
======================================== */
- /* Make the entire stats section a grid */
+ /* Make the entire stats section a single column grid */
.rpg-stats-section {
display: grid !important;
- grid-template-columns: 40% 60%; /* Left for inventory/mood, right for attributes */
- grid-template-rows: auto auto auto auto auto; /* Portrait, bars, inventory, mood, attributes */
+ grid-template-columns: 1fr !important; /* Single column */
+ grid-template-rows: auto !important; /* Auto rows - everything stacked */
gap: 12px;
padding: 16px 12px;
+ overflow-y: auto !important; /* Enable scrolling on the grid container */
+ min-height: 0;
}
/* Use display: contents so children participate in grid */
@@ -5195,19 +5552,31 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
display: contents !important;
}
- /* Portrait row - centered at top, full width */
- .rpg-stats-header-left {
- grid-column: 1 / 3;
- grid-row: 1;
+ /* Portrait row - centered at top, row 1 */
+ .rpg-stats-header-left,
+ .rpg-user-info-row {
display: flex !important;
+ grid-column: 1 !important;
+ grid-row: 1 !important;
justify-content: center;
align-items: center;
- gap: 4px;
+ gap: 8px;
}
+ /* Make user portrait visible and sized for mobile */
.rpg-user-portrait {
- width: 64px;
- height: 64px;
+ width: clamp(32px, 8vw, 48px) !important;
+ height: clamp(32px, 8vw, 48px) !important;
+ }
+
+ /* Make user name and level readable */
+ .rpg-user-name {
+ font-size: clamp(13px, 3.2vw, 16px) !important;
+ }
+
+ .rpg-level-label,
+ .rpg-level-value {
+ font-size: clamp(12px, 3vw, 14px) !important;
}
/* Hide stats title on mobile */
@@ -5215,43 +5584,18 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
display: none;
}
- /* Stat bars row - full width */
+ /* Stats left container must use contents to unwrap its children */
.rpg-stats-left {
- grid-column: 1 / 3;
- grid-row: 2;
display: contents !important;
}
- /* User info row on mobile */
- .rpg-user-info-row {
- grid-column: 1 / 3;
- grid-row: 1;
- justify-content: center !important;
- font-size: clamp(11px, 2.8vw, 14px) !important;
- gap: clamp(6px, 1.5vw, 10px) !important;
- }
-
- /* Make user portrait larger on mobile */
- .rpg-user-portrait {
- width: clamp(24px, 6vw, 32px) !important;
- height: clamp(24px, 6vw, 32px) !important;
- }
-
- /* Make user name and level more readable on mobile */
- .rpg-user-name {
- font-size: clamp(12px, 3vw, 16px) !important;
- }
-
- .rpg-level-label,
- .rpg-level-value {
- font-size: clamp(11px, 2.8vw, 14px) !important;
- }
-
+ /* Stat bars - full width, row 2 */
.rpg-stats-grid {
- grid-column: 1 / 3;
- grid-row: 2;
- min-height: 180px; /* Stretch vertically to fill more space */
- gap: clamp(8px, 2vw, 12px); /* Increase gap between stat rows */
+ grid-column: 1 !important;
+ grid-row: 2 !important;
+ display: flex !important;
+ flex-direction: column !important;
+ gap: clamp(6px, 1.5vw, 8px);
}
/* Increase stat bar text sizes for mobile readability */
@@ -5263,28 +5607,60 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
font-size: clamp(12px, 3.1vw, 16px) !important;
}
- /* Inventory - expand to fill horizontal space in flex container */
+ /* Everything else stacked below - full width, auto rows */
+ .rpg-mood,
+ .rpg-inventory-box,
+ .rpg-skills-section,
+ .rpg-custom-field {
+ grid-column: 1 !important;
+ grid-row: auto !important;
+ }
+
+ /* Attributes container - use contents to unwrap */
+ .rpg-stats-right {
+ display: contents !important;
+ }
+
+ /* Compact 2x3 or 3x2 grid for mobile */
+ .rpg-classic-stats-grid {
+ display: grid !important;
+ grid-template-columns: repeat(3, 1fr) !important;
+ grid-template-rows: repeat(2, 1fr) !important;
+ gap: 6px;
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ }
+
+ /* Everything else below - full width stacked */
.rpg-inventory-box {
- flex: 1 !important; /* Grow to fill all available space */
- min-width: 0 !important; /* Allow flexbox to work properly */
- max-width: none !important; /* Remove desktop width restrictions */
- width: auto !important; /* Don't force a specific width */
- min-height: 60px; /* Give it decent height */
- max-height: none; /* Remove height restriction */
+ flex: 1 !important;
+ min-width: 0 !important;
+ max-width: none !important;
+ width: 100% !important;
+ grid-row: auto !important;
+ }
+
+ /* Inventory box */
+ .rpg-inventory-box {
+ flex: 1 !important;
+ min-width: 0 !important;
+ max-width: none !important;
+ width: auto !important;
+ min-height: 60px;
+ max-height: none;
}
/* Increase inventory text size for readability on mobile */
.rpg-inventory-items {
font-size: clamp(11px, 2.8vw, 14px) !important;
line-height: 1.4;
- width: 100% !important; /* Fill the inventory box */
- white-space: normal !important; /* Allow text wrapping */
+ width: 100% !important;
+ white-space: normal !important;
}
- /* Mood - row 4, aligned with attributes top */
+ /* Mood */
.rpg-mood {
- grid-column: 1;
- grid-row: 3;
display: flex;
flex-direction: column;
gap: 6px;
@@ -5297,28 +5673,6 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
line-height: 1.3;
}
- /* Attributes - right side, rows 4-6 aligned with mood */
- .rpg-stats-right {
- grid-column: 2;
- grid-row: 3;
- display: contents !important;
- }
-
- .rpg-classic-stats {
- grid-column: 2;
- grid-row: 3; /* Align with mood */
- }
-
- /* Attributes as ultra-compact 2x3 grid for mobile */
- .rpg-classic-stats-grid {
- display: grid !important;
- grid-template-columns: repeat(2, 1fr) !important;
- grid-template-rows: repeat(3, 1fr) !important;
- gap: 3px;
- margin: 4px 5px 4px 0;
- padding-right: 5px;
- }
-
/* Each attribute - ULTRA COMPACT with vertical stack layout */
.rpg-classic-stat {
display: grid !important;
@@ -5417,14 +5771,12 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
/* Position thought icon above avatar on mobile to prevent off-screen clipping */
/* JavaScript will calculate position, but add transform to move it above and right */
#rpg-thought-icon {
- /* 20% larger than desktop for better visibility on mobile */
- width: 2.7rem !important;
- height: 2.7rem !important;
- font-size: clamp(1.5rem, 2.2vw, 1.875rem) !important;
- /* Use transform to shift icon above and to the right of avatar */
- transform: translate(50px, -45px) !important;
+ /* Match mobile toggle size */
+ width: 44px !important;
+ height: 44px !important;
+ font-size: clamp(1.25rem, 1.85vw, 1.875rem) !important;
/* Smooth animation for position changes during scroll */
- transition: top 0.2s ease-out, left 0.2s ease-out !important;
+ transition: transform 0.2s ease, box-shadow 0.2s ease !important;
will-change: top, left;
}
@@ -5577,9 +5929,239 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
/* Readable clear cache button */
.rpg-btn-clear-cache,
- .rpg-btn-reset-fab {
+ .rpg-btn-reset-fab,
+ .rpg-btn-customize-prompts {
font-size: clamp(13px, 3.3vw, 17px) !important;
}
+
+ /* ========================================
+ MOBILE TRACKER EDITOR FOOTER
+ ======================================== */
+
+ /* Make footer wrap and stack buttons on mobile */
+ .rpg-settings-popup-footer {
+ flex-direction: column;
+ gap: 0.5em;
+ padding: 0.75em;
+ }
+
+ .rpg-footer-left,
+ .rpg-footer-right {
+ width: 100%;
+ overflow-x: auto;
+ overflow-y: hidden;
+ -webkit-overflow-scrolling: touch;
+ scrollbar-width: thin;
+ flex-wrap: nowrap;
+ }
+
+ /* Prevent buttons from shrinking in scroll container */
+ .rpg-footer-left button,
+ .rpg-footer-right button {
+ flex-shrink: 0;
+ white-space: nowrap;
+ font-size: clamp(12px, 3.1vw, 15px) !important;
+ padding: 0.5em 0.75em !important;
+ }
+
+ /* ========================================
+ MOBILE TRACKER EDITOR HEADER
+ ======================================== */
+
+ /* Make header text smaller and wrap properly */
+ .rpg-settings-popup-header h3 {
+ font-size: clamp(16px, 4.1vw, 20px) !important;
+ word-break: break-word;
+ }
+
+ .rpg-settings-popup-header h3 i {
+ font-size: clamp(14px, 3.6vw, 18px) !important;
+ }
+
+ /* ========================================
+ MOBILE TRACKER EDITOR TABS
+ ======================================== */
+
+ /* Make tabs wrap and stack if needed */
+ .rpg-editor-tabs {
+ flex-wrap: wrap;
+ gap: 0;
+ }
+
+ .rpg-editor-tab {
+ flex: 1 1 auto;
+ min-width: 0;
+ padding: 0.5em 0.5em;
+ font-size: clamp(11px, 2.8vw, 14px) !important;
+ gap: 0.25em;
+ }
+
+ .rpg-editor-tab i {
+ font-size: clamp(12px, 3.1vw, 15px) !important;
+ }
+
+ /* ========================================
+ MOBILE TRACKER EDITOR CONTENT
+ ======================================== */
+
+ /* Reduce popup body padding on mobile */
+ .rpg-settings-popup-body {
+ padding: 0.75em !important;
+ }
+
+ /* Make section headers smaller */
+ .rpg-editor-section h4 {
+ font-size: clamp(13px, 3.3vw, 16px) !important;
+ gap: 0.25em;
+ }
+
+ .rpg-editor-section h4 i {
+ font-size: clamp(12px, 3.1vw, 15px) !important;
+ }
+
+ /* Make hint text smaller */
+ .rpg-editor-hint {
+ font-size: clamp(11px, 2.8vw, 14px) !important;
+ }
+
+ /* ========================================
+ MOBILE TRACKER EDITOR STAT ITEMS
+ ======================================== */
+
+ /* Make stat items wrap on mobile */
+ .rpg-editor-stat-item {
+ flex-wrap: wrap;
+ gap: 0.5em;
+ padding: 0.5em;
+ }
+
+ /* Make stat name input full width on mobile */
+ .rpg-stat-name,
+ .rpg-attr-name {
+ width: 100%;
+ flex: 1 1 100%;
+ font-size: clamp(13px, 3.3vw, 16px) !important;
+ }
+
+ /* Make toggle and remove button stay on same row */
+ .rpg-stat-toggle,
+ .rpg-attr-toggle {
+ flex: 0 0 auto;
+ }
+
+ .rpg-stat-remove,
+ .rpg-attr-remove {
+ flex: 0 0 auto;
+ font-size: clamp(12px, 3.1vw, 15px) !important;
+ padding: 0.5em 0.75em !important;
+ }
+
+ /* ========================================
+ MOBILE RELATIONSHIP MAPPING
+ ======================================== */
+
+ /* Make relationship items stack vertically on mobile */
+ .rpg-relationship-item {
+ grid-template-columns: 1fr;
+ gap: 0.5em;
+ padding: 0.75em 0.5em;
+ }
+
+ /* Hide arrow on mobile since items are stacked */
+ .rpg-relationship-item .rpg-arrow {
+ display: none;
+ }
+
+ /* Make relationship inputs full width */
+ .rpg-relationship-name,
+ .rpg-relationship-emoji {
+ width: 100%;
+ font-size: clamp(13px, 3.3vw, 16px) !important;
+ }
+
+ .rpg-remove-relationship {
+ font-size: clamp(12px, 3.1vw, 15px) !important;
+ padding: 0.5em 0.75em !important;
+ }
+
+ /* ========================================
+ MOBILE TRACKER EDITOR INPUTS & CONTROLS
+ ======================================== */
+
+ /* Make all input fields readable on mobile */
+ .rpg-editor-tab-content input[type="text"],
+ .rpg-editor-tab-content input[type="number"],
+ .rpg-editor-tab-content select,
+ .rpg-editor-tab-content textarea {
+ font-size: clamp(13px, 3.3vw, 16px) !important;
+ padding: 0.5em !important;
+ }
+
+ /* Make add buttons full width on mobile */
+ .rpg-editor-section button[id*="add"],
+ .rpg-editor-section button[id*="Add"] {
+ width: 100%;
+ font-size: clamp(13px, 3.3vw, 16px) !important;
+ padding: 0.5em !important;
+ }
+
+ /* Make checkboxes with labels easier to tap */
+ .rpg-editor-tab-content label {
+ min-height: 44px;
+ display: flex;
+ align-items: center;
+ font-size: clamp(13px, 3.3vw, 16px) !important;
+ }
+
+ .rpg-editor-tab-content input[type="checkbox"] {
+ min-width: 20px;
+ min-height: 20px;
+ margin-right: 0.5em;
+ }
+
+ /* ========================================
+ MOBILE WIDGET ROWS (DATE/TEMPERATURE)
+ ======================================== */
+
+ /* Make widget rows wrap on mobile */
+ .rpg-editor-widget-row {
+ flex-wrap: wrap;
+ gap: 0.5em;
+ padding: 0.75em 0.5em;
+ }
+
+ /* Checkbox and main label on first row */
+ .rpg-editor-widget-row > input[type="checkbox"],
+ .rpg-editor-widget-row > label {
+ flex: 0 0 auto;
+ }
+
+ /* Format dropdown full width on second row */
+ .rpg-editor-widget-row .rpg-select-mini {
+ flex: 1 1 100%;
+ width: 100%;
+ font-size: clamp(13px, 3.3vw, 16px) !important;
+ padding: 0.5em !important;
+ }
+
+ /* Radio group full width on second row */
+ .rpg-editor-widget-row .rpg-radio-group {
+ flex: 1 1 100%;
+ width: 100%;
+ gap: 1.5em;
+ justify-content: flex-start;
+ margin-top: 0.25em;
+ }
+
+ .rpg-radio-group label {
+ font-size: clamp(13px, 3.3vw, 16px) !important;
+ gap: 0.5em;
+ }
+
+ .rpg-radio-group input[type="radio"] {
+ min-width: 18px;
+ min-height: 18px;
+ }
}
/* Very narrow screens - single column layout for all stats */
@@ -5718,6 +6300,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
transition: all 0.2s ease;
font-weight: 500;
text-align: center;
+ font-size: clamp(0.75rem, 1vw, 0.9rem);
}
.rpg-inventory-subtab:hover {
@@ -5741,6 +6324,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
}
.rpg-inventory-header {
+ position: relative;
display: flex;
justify-content: space-between;
align-items: center;
@@ -5865,7 +6449,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
}
.rpg-storage-content {
- padding: 0.75rem;
+ padding: 0.5rem;
background: var(--SmartThemeBlurTintColor);
}
@@ -6059,11 +6643,11 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
}
.rpg-item-row {
+ position: relative;
display: flex;
align-items: center;
- justify-content: space-between;
- gap: 1rem;
- padding: 0.75rem 1rem;
+ gap: 0.75rem;
+ padding: 0.75rem;
background: transparent;
border: 2px solid var(--rpg-highlight);
border-radius: 0.25rem;
@@ -6079,9 +6663,9 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
.rpg-item-row .rpg-item-name {
flex: 1;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
+ line-height: 1.5;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
}
.rpg-item-row .rpg-item-remove {
@@ -6371,6 +6955,28 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
gap: 0.5rem;
border-bottom: 2px solid var(--SmartThemeBorderColor);
padding-bottom: 0.5rem;
+ overflow-x: auto;
+ overflow-y: hidden;
+ flex-wrap: nowrap;
+ scrollbar-width: thin;
+ scrollbar-color: var(--SmartThemeBorderColor) transparent;
+}
+
+.rpg-quests-subtabs::-webkit-scrollbar {
+ height: 6px;
+}
+
+.rpg-quests-subtabs::-webkit-scrollbar-track {
+ background: transparent;
+}
+
+.rpg-quests-subtabs::-webkit-scrollbar-thumb {
+ background: var(--SmartThemeBorderColor);
+ border-radius: 3px;
+}
+
+.rpg-quests-subtabs::-webkit-scrollbar-thumb:hover {
+ background: var(--rpg-accent);
}
.rpg-quests-subtab {
@@ -6384,6 +6990,9 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
transition: all 0.2s ease;
font-weight: 500;
text-align: center;
+ font-size: clamp(0.75rem, 1vw, 0.9rem);
+ min-width: fit-content;
+ white-space: nowrap;
}
.rpg-quests-subtab:hover {
@@ -6407,6 +7016,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
}
.rpg-quest-header {
+ position: relative;
display: flex;
justify-content: space-between;
align-items: center;
@@ -8372,7 +8982,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
display: flex;
align-items: center;
justify-content: center;
- background: rgba(0, 0, 0, 0.3);
+ background: rgba(0, 0, 0, 0.4);
border-radius: 50%;
color: #1DB954;
font-size: 20px;
@@ -8466,37 +9076,85 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
}
/* Mobile Responsive Styles */
-@media (max-width: 600px) {
+@media (max-width: 1000px) {
+ .rpg-music-widget {
+ width: calc(100% - 20px);
+ max-width: none;
+ left: 50%;
+ transform: translate(-50%, calc(-100% - 8px));
+ }
+
.rpg-music-widget-content {
- padding: 8px 12px;
- gap: 10px;
+ padding: 8px 10px;
+ gap: 8px;
}
.rpg-music-widget-icon {
- width: 36px;
- height: 36px;
- font-size: 18px;
+ width: 32px;
+ height: 32px;
+ font-size: 16px;
+ }
+
+ .rpg-music-widget-info {
+ gap: 1px;
}
.rpg-music-widget-title {
- font-size: 13px;
- }
-
- .rpg-music-widget-artist {
- font-size: 11px;
- }
-
- .rpg-music-widget-play {
- width: 32px;
- height: 32px;
font-size: 12px;
}
- .rpg-music-widget-close {
- width: 22px;
- height: 22px;
+ .rpg-music-widget-artist {
+ font-size: 10px;
+ }
+
+ .rpg-music-widget-play {
+ width: 30px;
+ height: 30px;
font-size: 11px;
}
+
+ .rpg-music-widget-close {
+ width: 20px;
+ height: 20px;
+ font-size: 10px;
+ }
+}
+
+@media (max-width: 600px) {
+ .rpg-music-widget {
+ width: calc(100% - 12px);
+ }
+
+ .rpg-music-widget-content {
+ padding: 6px 8px;
+ gap: 6px;
+ }
+
+ .rpg-music-widget-icon {
+ width: 28px;
+ height: 28px;
+ font-size: 14px;
+ }
+
+ .rpg-music-widget-title {
+ font-size: 11px;
+ }
+
+ .rpg-music-widget-artist {
+ font-size: 9px;
+ }
+
+ .rpg-music-widget-play {
+ width: 28px;
+ height: 28px;
+ font-size: 10px;
+ }
+
+ .rpg-music-widget-close {
+ width: 18px;
+ height: 18px;
+ font-size: 9px;
+ }
}
/* Theme Support - Apply theme colors */
@@ -8869,16 +9527,47 @@ body[data-theme="cyberpunk"] .rpg-music-widget-play {
display: flex;
gap: 8px;
margin-bottom: 12px;
+ overflow-x: auto;
+ overflow-y: hidden;
+ flex-wrap: nowrap;
+ padding: 0 4px; /* Prevent first/last items from being cut off */
+ -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
+}
+
+/* Center items when they fit, allow scrolling when they don't */
+.rpg-features-row::before,
+.rpg-features-row::after {
+ content: '';
+ margin: auto;
+}
+
+/* Hide scrollbar for cleaner look while maintaining functionality */
+.rpg-features-row::-webkit-scrollbar {
+ height: 4px;
+}
+
+.rpg-features-row::-webkit-scrollbar-track {
+ background: transparent;
+}
+
+.rpg-features-row::-webkit-scrollbar-thumb {
+ background: rgba(128, 128, 128, 0.3);
+ border-radius: 2px;
+}
+
+.rpg-features-row::-webkit-scrollbar-thumb:hover {
+ background: rgba(128, 128, 128, 0.5);
}
/* Each feature column */
.rpg-feature-col {
- flex: 1;
- min-width: 0;
+ flex: 0 0 auto;
+ min-width: 60px;
}
.rpg-feature-col .rpg-toggle-label {
justify-content: center;
+ align-items: center;
}
/* Always hide text, show only checkbox + icon */
@@ -8887,8 +9576,11 @@ body[data-theme="cyberpunk"] .rpg-music-widget-play {
}
.rpg-feature-col .rpg-toggle-label i {
- font-size: 1.125rem;
+ font-size: 0.95rem;
flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
/* Tablet and below: Hide text, show only checkbox + icon */
@@ -8898,15 +9590,14 @@ body[data-theme="cyberpunk"] .rpg-music-widget-play {
}
.rpg-feature-col .rpg-toggle-label i {
- font-size: 1.cally with icons only */
-@media (max-width: 400px) {
- .rpg-features-row {
- flex-direction: column;
- gap: 0.5rem;
+ font-size: 1rem;
}
+}
+/* Very small screens: Remove column layout since we have horizontal scroll */
+@media (max-width: 400px) {
.rpg-feature-col .rpg-toggle-label i {
- font-size: 1.25rem;
+ font-size: 1rem;
}
}
diff --git a/template.html b/template.html
index 0d3b8ac..5081ea8 100644
--- a/template.html
+++ b/template.html
@@ -81,6 +81,15 @@
+
+
+
+
+
-
-
-
+
+
+
+
+
+
-
-
Happy Holidays & Happy New Year!
-
- 🎁 15% OFF for Electron Hub subscriptions with 2026WITHMARINARA 🎁
-
-
@@ -209,7 +215,7 @@
Bar Color (High):
Color when stats are at
- 100%
+ 100%.
@@ -237,84 +243,145 @@
Show User Stats
+
+ Enable User Stats that track your persona's statistics, mood, attributes, skills, etc.
+
+
+ Display location, time, weather, and recent events.
+
+
+ Display character portraits with their current thoughts and status.
+
+
+
+
+ Display character thoughts as overlay bubbles next to their messages.
+
+
+ Track items carried, clothing worn, stored items, and assets.
+
-
-
- Display character thoughts as overlay bubbles next to their messages
+ data-i18n-key="template.settingsModal.display.showQuestsNote">
+ Manage main and optional quests with objectives.
- Auto-expand thought bubble without clicking the icon first
-
-
-
-
- Smooth transitions for stats, content updates, and dice rolls
+ data-i18n-key="template.settingsModal.display.showLockIconsNote">
+ Display lock/unlock icons on tracker items to prevent AI from modifying them.
+
+ Display a toggle button to enable/disable HTML formatting in messages.
+
+
+
+
+ Display a toggle button to enable/disable colored dialogue formatting.
+
-
-
+
+ Display Spotify music player with AI-suggested scene-appropriate tracks.
+
+
+ Display a toggle button to enable/disable animated weather effects.
+
- Display buttons above chat input for plot progression prompts
+ data-i18n-key="template.settingsModal.display.showNarratorModeNote">
+ Display a toggle button to enable/disable narrator mode (infer characters from context).
+
+
+
+
+ Display a toggle button to automatically generate avatars for characters without images.
+
+
+
+
+ Display button for AI-generated random plot progression prompts.
+
+
+
+
+ Display button for context-aware narrative continuation prompts.
+
+
+
+
+ Display button to initiate interactive combat encounters.
- Display the "Last Roll" indicator in the panel.
+ Display the "Last Roll" indicator in the panel
-
-
- Automatically generate avatars for characters without custom images using the Image Generation
- Plugin
-
-
-
-
- Shows parser logs in a mobile-friendly UI panel. Useful for troubleshooting. Look for the red bug
- button.
-
-
-
-
-
-
-
Combat Encounters
- - - - Show the "Start Encounter" button above chat input for interactive combat - - -
-
-
- Number of recent messages to include in combat initialization
-
-
-
-
- Save detailed combat logs to file for future reference and analysis
-
@@ -468,44 +486,52 @@
-
-
- Number of recent messages
- to include (Separate mode only)
-
-
-
-
-
- Number of messages to
- process per batch in Memory Recollection
-
-
-
-
- Separate mode only. When enabled, tracker generation will use the model from the "RPG Companion
- Trackers" preset instead of your main API model. The preset will be switched automatically during
- generation and restored afterward. Select the desired model in that preset and make sure the "Bind
- presets to API connections" toggle is on (next to the import/export preset buttons).
-
+
-
+
+
+ Number of recent messages
+ to include (Separate mode only)
+
- Customize the AI prompts used throughout the extension. Leave fields empty to use defaults.
+ Customize the AI prompts used throughout the extension. Leave fields empty to use defaults.
@@ -739,7 +747,21 @@
+
+
+
+
+
+
+ Injected when "Enable Dialogue Coloring" is enabled. Affects all generation modes.
+
+
+
@@ -753,7 +775,21 @@
+
+
+
+ Injected when "Narrator Mode" is enabled. Instructs AI to infer characters from context.
+
+
+
@@ -767,7 +803,7 @@