diff --git a/README.md b/README.md index db88ca9..2433cf7 100644 --- a/README.md +++ b/README.md @@ -7,11 +7,13 @@ An immersive RPG extension for browsers that tracks character stats, scene infor ## 🆕 What's New -### v3.6.1 +### v3.7.0 -- Fixed the bugs in the encounter system where you couldn't use the buttons after performing any custom action. -- Improved combat actions and made them dynamic, depending on the current situation. -- Added Russian as a supported language. +- Added omniscience filter. +- Added opacity to the color selector. +- Overwritten SillyTavern's dumb-ahh trim logic when joining prompts. +- Fixed custom attributes not allowing value increase/decrease. +- Various bug fixes. **Special thanks to all the other contributors for this project:** Paperboygold, Munimunigamer, Subarashimo, Lilminzyu, Claude, IDeathByte, Chungchandev, Joenunezb, Amauragis, and Tomt610. diff --git a/index.js b/index.js index 7eb82d5..e8f89e9 100644 --- a/index.js +++ b/index.js @@ -816,12 +816,30 @@ async function initUI() { renderUserStats(); // Re-render with new colors }); + $('#rpg-stat-bar-color-low-opacity').on('input', function() { + const opacity = Number($(this).val()); + extensionSettings.statBarColorLowOpacity = opacity; + $('#rpg-stat-bar-color-low-opacity-value').text(opacity + '%'); + renderUserStats(); + }).on('change', function() { + saveSettings(); + }); + $('#rpg-stat-bar-color-high').on('change', function() { extensionSettings.statBarColorHigh = String($(this).val()); saveSettings(); renderUserStats(); // Re-render with new colors }); + $('#rpg-stat-bar-color-high-opacity').on('input', function() { + const opacity = Number($(this).val()); + extensionSettings.statBarColorHighOpacity = opacity; + $('#rpg-stat-bar-color-high-opacity-value').text(opacity + '%'); + renderUserStats(); + }).on('change', function() { + saveSettings(); + }); + // Theme selection $('#rpg-theme-select').on('change', function() { extensionSettings.theme = String($(this).val()); @@ -843,6 +861,19 @@ async function initUI() { } }); + $('#rpg-custom-bg-opacity').on('input', function() { + const opacity = Number($(this).val()); + extensionSettings.customColors.bgOpacity = opacity; + $('#rpg-custom-bg-opacity-value').text(opacity + '%'); + if (extensionSettings.theme === 'custom') { + applyCustomTheme(); + updateSettingsPopupTheme(getSettingsModal()); + updateChatThoughts(); + } + }).on('change', function() { + saveSettings(); + }); + $('#rpg-custom-accent').on('change', function() { extensionSettings.customColors.accent = String($(this).val()); saveSettings(); @@ -853,6 +884,19 @@ async function initUI() { } }); + $('#rpg-custom-accent-opacity').on('input', function() { + const opacity = Number($(this).val()); + extensionSettings.customColors.accentOpacity = opacity; + $('#rpg-custom-accent-opacity-value').text(opacity + '%'); + if (extensionSettings.theme === 'custom') { + applyCustomTheme(); + updateSettingsPopupTheme(getSettingsModal()); + updateChatThoughts(); + } + }).on('change', function() { + saveSettings(); + }); + $('#rpg-custom-text').on('change', function() { extensionSettings.customColors.text = String($(this).val()); saveSettings(); @@ -863,6 +907,19 @@ async function initUI() { } }); + $('#rpg-custom-text-opacity').on('input', function() { + const opacity = Number($(this).val()); + extensionSettings.customColors.textOpacity = opacity; + $('#rpg-custom-text-opacity-value').text(opacity + '%'); + if (extensionSettings.theme === 'custom') { + applyCustomTheme(); + updateSettingsPopupTheme(getSettingsModal()); + updateChatThoughts(); + } + }).on('change', function() { + saveSettings(); + }); + $('#rpg-custom-highlight').on('change', function() { extensionSettings.customColors.highlight = String($(this).val()); saveSettings(); @@ -873,6 +930,19 @@ async function initUI() { } }); + $('#rpg-custom-highlight-opacity').on('input', function() { + const opacity = Number($(this).val()); + extensionSettings.customColors.highlightOpacity = opacity; + $('#rpg-custom-highlight-opacity-value').text(opacity + '%'); + if (extensionSettings.theme === 'custom') { + applyCustomTheme(); + updateSettingsPopupTheme(getSettingsModal()); + updateChatThoughts(); + } + }).on('change', function() { + saveSettings(); + }); + // External API settings event handlers $('#rpg-external-base-url').on('change', function() { if (!extensionSettings.externalApiSettings) { @@ -1054,12 +1124,29 @@ async function initUI() { $('#rpg-strip-widget-options').toggle(stripWidgets.enabled || false); $('#rpg-stat-bar-color-low').val(extensionSettings.statBarColorLow); + $('#rpg-stat-bar-color-low-opacity').val(extensionSettings.statBarColorLowOpacity ?? 100); + $('#rpg-stat-bar-color-low-opacity-value').text((extensionSettings.statBarColorLowOpacity ?? 100) + '%'); + $('#rpg-stat-bar-color-high').val(extensionSettings.statBarColorHigh); + $('#rpg-stat-bar-color-high-opacity').val(extensionSettings.statBarColorHighOpacity ?? 100); + $('#rpg-stat-bar-color-high-opacity-value').text((extensionSettings.statBarColorHighOpacity ?? 100) + '%'); + $('#rpg-theme-select').val(extensionSettings.theme); $('#rpg-custom-bg').val(extensionSettings.customColors.bg); + $('#rpg-custom-bg-opacity').val(extensionSettings.customColors.bgOpacity ?? 100); + $('#rpg-custom-bg-opacity-value').text((extensionSettings.customColors.bgOpacity ?? 100) + '%'); + $('#rpg-custom-accent').val(extensionSettings.customColors.accent); + $('#rpg-custom-accent-opacity').val(extensionSettings.customColors.accentOpacity ?? 100); + $('#rpg-custom-accent-opacity-value').text((extensionSettings.customColors.accentOpacity ?? 100) + '%'); + $('#rpg-custom-text').val(extensionSettings.customColors.text); + $('#rpg-custom-text-opacity').val(extensionSettings.customColors.textOpacity ?? 100); + $('#rpg-custom-text-opacity-value').text((extensionSettings.customColors.textOpacity ?? 100) + '%'); + $('#rpg-custom-highlight').val(extensionSettings.customColors.highlight); + $('#rpg-custom-highlight-opacity').val(extensionSettings.customColors.highlightOpacity ?? 100); + $('#rpg-custom-highlight-opacity-value').text((extensionSettings.customColors.highlightOpacity ?? 100) + '%'); // Initialize External API settings values if (extensionSettings.externalApiSettings) { diff --git a/manifest.json b/manifest.json index 348307d..fa03ec4 100644 --- a/manifest.json +++ b/manifest.json @@ -6,6 +6,6 @@ "js": "index.js", "css": "style.css", "author": "Marinara", - "version": "3.6.1", + "version": "3.7.0", "homePage": "https://github.com/SpicyMarinara/rpg-companion-sillytavern" } diff --git a/settings.html b/settings.html index 0de3497..ce075ed 100644 --- a/settings.html +++ b/settings.html @@ -49,7 +49,7 @@
- v3.6.1 + v3.7.0
diff --git a/src/core/persistence.js b/src/core/persistence.js index 15b6165..e6343c8 100644 --- a/src/core/persistence.js +++ b/src/core/persistence.js @@ -118,6 +118,22 @@ export function loadSettings() { settingsChanged = true; } + // Migration to version 5: Add opacity properties for all colors + if (currentVersion < 5) { + // console.log('[RPG Companion] Migrating settings to version 5 (adding color opacity)'); + if (!extensionSettings.customColors) { + extensionSettings.customColors = {}; + } + if (extensionSettings.customColors.bgOpacity === undefined) extensionSettings.customColors.bgOpacity = 100; + if (extensionSettings.customColors.accentOpacity === undefined) extensionSettings.customColors.accentOpacity = 100; + if (extensionSettings.customColors.textOpacity === undefined) extensionSettings.customColors.textOpacity = 100; + if (extensionSettings.customColors.highlightOpacity === undefined) extensionSettings.customColors.highlightOpacity = 100; + if (extensionSettings.statBarColorLowOpacity === undefined) extensionSettings.statBarColorLowOpacity = 100; + if (extensionSettings.statBarColorHighOpacity === undefined) extensionSettings.statBarColorHighOpacity = 100; + extensionSettings.settingsVersion = 5; + settingsChanged = true; + } + // Save migrated settings if (settingsChanged) { saveSettings(); diff --git a/src/core/state.js b/src/core/state.js index 90778df..693072a 100644 --- a/src/core/state.js +++ b/src/core/state.js @@ -23,6 +23,7 @@ export let extensionSettings = { showThoughtsInChat: true, // Show thoughts overlay in chat narratorMode: false, // Use character card as narrator instead of fixed character references customNarratorPrompt: '', // Custom narrator mode prompt text (empty = use default) + customContextInstructionsPrompt: '', // Custom context instructions prompt text (empty = use default) enableHtmlPrompt: false, // Enable immersive HTML prompt injection customHtmlPrompt: '', // Custom HTML prompt text (empty = use default) enableDialogueColoring: false, // Enable dialogue coloring prompt injection @@ -65,12 +66,18 @@ export let extensionSettings = { theme: 'default', // Theme: default, sci-fi, fantasy, cyberpunk, custom customColors: { bg: '#1a1a2e', + bgOpacity: 100, accent: '#16213e', + accentOpacity: 100, text: '#eaeaea', - highlight: '#e94560' + textOpacity: 100, + highlight: '#e94560', + highlightOpacity: 100 }, statBarColorLow: '#cc3333', // Color for low stat values (red) + statBarColorLowOpacity: 100, statBarColorHigh: '#33cc66', // Color for high stat values (green) + statBarColorHighOpacity: 100, enableAnimations: true, // Enable smooth animations for stats and content updates mobileFabPosition: { top: 'calc(var(--topBarBlockSize) + 60px)', diff --git a/src/systems/features/classicStats.js b/src/systems/features/classicStats.js index 9e322f6..71e2f1b 100644 --- a/src/systems/features/classicStats.js +++ b/src/systems/features/classicStats.js @@ -20,6 +20,10 @@ export function setupClassicStatsButtons() { // Delegated event listener for increase buttons $userStatsContainer.on('click', '.rpg-stat-increase', function() { const stat = $(this).data('stat'); + // Initialize custom attributes if they don't exist + if (extensionSettings.classicStats[stat] === undefined) { + extensionSettings.classicStats[stat] = 10; + } if (extensionSettings.classicStats[stat] < 999) { extensionSettings.classicStats[stat]++; saveSettings(); @@ -33,6 +37,10 @@ export function setupClassicStatsButtons() { // Delegated event listener for decrease buttons $userStatsContainer.on('click', '.rpg-stat-decrease', function() { const stat = $(this).data('stat'); + // Initialize custom attributes if they don't exist + if (extensionSettings.classicStats[stat] === undefined) { + extensionSettings.classicStats[stat] = 10; + } if (extensionSettings.classicStats[stat] > 1) { extensionSettings.classicStats[stat]--; saveSettings(); diff --git a/src/systems/features/jsonCleaning.js b/src/systems/features/jsonCleaning.js index d40bc4f..5f6175a 100644 --- a/src/systems/features/jsonCleaning.js +++ b/src/systems/features/jsonCleaning.js @@ -76,7 +76,7 @@ export async function ensureJsonCleaningRegex(st_extension_settings, saveSetting } // Small delay to ensure save completes await new Promise(resolve => setTimeout(resolve, 100)); - console.log('[RPG Companion] ✅ Updated JSON cleaning regex to v3.2.6 settings.'); + console.log('[RPG Companion] ✅ Updated JSON cleaning regex to v3.2.3 settings.'); } else { console.log('[RPG Companion] JSON Cleaning Regex is up to date.'); } diff --git a/src/systems/generation/injector.js b/src/systems/generation/injector.js index 2318438..aed6894 100644 --- a/src/systems/generation/injector.js +++ b/src/systems/generation/injector.js @@ -4,7 +4,7 @@ */ import { getContext } from '../../../../../../extensions.js'; -import { setExtensionPrompt, extension_prompt_types, extension_prompt_roles, eventSource, event_types } from '../../../../../../../script.js'; +import { extension_prompt_types, extension_prompt_roles, setExtensionPrompt, eventSource, event_types } from '../../../../../../../script.js'; import { extensionSettings, committedTrackerData, @@ -25,6 +25,8 @@ import { DEFAULT_OMNISCIENCE_FILTER_PROMPT, DEFAULT_CYOA_PROMPT, DEFAULT_SPOTIFY_PROMPT, + DEFAULT_NARRATOR_PROMPT, + DEFAULT_CONTEXT_INSTRUCTIONS_PROMPT, SPOTIFY_FORMAT_INSTRUCTION } from './promptBuilder.js'; import { restoreCheckpointOnLoad } from '../features/chapterCheckpoint.js'; @@ -87,8 +89,8 @@ function buildHistoricalContextMap() { // For user_message_end: start from the last assistant message (we need its context for the preceding user message) // For assistant_message_end: start from before the last assistant message (it gets current context via setExtensionPrompt) let processedCount = 0; - const startIndex = position === 'user_message_end' - ? lastAssistantIndex + const startIndex = position === 'user_message_end' + ? lastAssistantIndex : (lastAssistantIndex > 0 ? lastAssistantIndex - 1 : chat.length - 2); for (let i = startIndex; i >= 0 && (messageCount === 0 || processedCount < maxMessages); i--) { @@ -202,7 +204,7 @@ function prepareHistoricalContextInjection() { /** * Finds the best match position for message content in the prompt. * Tries full content first, then progressively smaller suffixes. - * + * * @param {string} prompt - The prompt to search in * @param {string} messageContent - The message content to find * @returns {{start: number, end: number}|null} - Position info or null if not found @@ -214,7 +216,7 @@ function findMessageInPrompt(prompt, messageContent) { // Try to find the full content first let searchIndex = prompt.lastIndexOf(messageContent); - + if (searchIndex !== -1) { return { start: searchIndex, end: searchIndex + messageContent.length }; } @@ -222,15 +224,15 @@ function findMessageInPrompt(prompt, messageContent) { // If full content not found, try last N characters with progressively smaller chunks // This handles cases where messages are truncated in the prompt const searchLengths = [500, 300, 200, 100, 50]; - + for (const len of searchLengths) { if (messageContent.length <= len) { continue; } - + const searchContent = messageContent.slice(-len); searchIndex = prompt.lastIndexOf(searchContent); - + if (searchIndex !== -1) { return { start: searchIndex, end: searchIndex + searchContent.length }; } @@ -242,7 +244,7 @@ function findMessageInPrompt(prompt, messageContent) { /** * Injects historical context into a text completion prompt string. * Searches for message content in the prompt and appends context after matches. - * + * * @param {string} prompt - The text completion prompt * @returns {string} - The modified prompt with injected context */ @@ -269,7 +271,7 @@ function injectContextIntoTextPrompt(prompt) { // Find the message content in the prompt const position = findMessageInPrompt(modifiedPrompt, message.mes); - + if (!position) { // Message not found in prompt (might be truncated or not included) console.debug(`[RPG Companion] Could not find message ${msgIdx} in prompt for context injection`); @@ -291,7 +293,7 @@ function injectContextIntoTextPrompt(prompt) { /** * Injects historical context into a chat completion message array. * Modifies the content of messages in the array directly. - * + * * @param {Array} chatMessages - The chat completion message array * @returns {Array} - The modified message array with injected context */ @@ -316,7 +318,7 @@ function injectContextIntoChatPrompt(chatMessages) { // Find this message in the chat completion array by matching content // Try full content first, then progressively smaller suffixes let found = false; - + for (const promptMsg of chatMessages) { if (!promptMsg.content || typeof promptMsg.content !== 'string') { continue; @@ -336,7 +338,7 @@ function injectContextIntoChatPrompt(chatMessages) { if (messageContent.length <= len) { continue; } - + const searchContent = messageContent.slice(-len); if (promptMsg.content.includes(searchContent)) { promptMsg.content = promptMsg.content + ctxContent; @@ -345,12 +347,12 @@ function injectContextIntoChatPrompt(chatMessages) { break; } } - + if (found) { break; } } - + if (!found) { console.debug(`[RPG Companion] Could not find message ${msgIdx} in chat prompt for context injection`); } @@ -366,7 +368,7 @@ function injectContextIntoChatPrompt(chatMessages) { /** * Injects historical context into finalMesSend message array (text completion). * Iterates through chat and finalMesSend in order, matching by content to skip injected messages. - * + * * @param {Array} finalMesSend - The array of message objects {message: string, extensionPrompts: []} * @returns {number} - Number of injections made */ @@ -382,20 +384,20 @@ function injectContextIntoFinalMesSend(finalMesSend) { } let injectedCount = 0; - + // Build a map from chat index to finalMesSend index by matching content in order // This handles injected messages (author's note, OOC, etc.) that exist in finalMesSend but not in chat const chatToMesSendMap = new Map(); let mesSendIdx = 0; - + for (let chatIdx = 0; chatIdx < chat.length && mesSendIdx < finalMesSend.length; chatIdx++) { const chatMsg = chat[chatIdx]; if (!chatMsg || chatMsg.is_system) { continue; } - + const chatContent = chatMsg.mes || ''; - + // Look for this chat message in finalMesSend starting from current position // Skip any finalMesSend entries that don't match (they're injected content) while (mesSendIdx < finalMesSend.length) { @@ -404,40 +406,40 @@ function injectContextIntoFinalMesSend(finalMesSend) { mesSendIdx++; continue; } - + // Check if this finalMesSend message contains the chat content // Use a substring match since instruct formatting adds prefixes/suffixes // Match with sufficient content (first 50 chars or full message if shorter) - const matchContent = chatContent.length > 50 - ? chatContent.substring(0, 50) + const matchContent = chatContent.length > 50 + ? chatContent.substring(0, 50) : chatContent; - + if (matchContent && mesSendObj.message.includes(matchContent)) { // Found a match - record the mapping chatToMesSendMap.set(chatIdx, mesSendIdx); mesSendIdx++; break; } - + // This finalMesSend entry doesn't match - it's injected content, skip it mesSendIdx++; } } - + // Now inject context using the map for (const [chatIdx, ctxContent] of pendingContextMap) { const targetMesSendIdx = chatToMesSendMap.get(chatIdx); - + if (targetMesSendIdx === undefined) { console.debug(`[RPG Companion] Chat message ${chatIdx} not found in finalMesSend mapping`); continue; } - + const mesSendObj = finalMesSend[targetMesSendIdx]; if (!mesSendObj || !mesSendObj.message) { continue; } - + // Append context to this message mesSendObj.message = mesSendObj.message + ctxContent; injectedCount++; @@ -451,7 +453,7 @@ function injectContextIntoFinalMesSend(finalMesSend) { * Event handler for GENERATE_BEFORE_COMBINE_PROMPTS (text completion). * Injects historical context into the finalMesSend array before prompt combination. * This is more reliable than post-combine string searching. - * + * * @param {Object} eventData - Event data with finalMesSend and other properties */ function onGenerateBeforeCombinePrompts(eventData) { @@ -479,7 +481,8 @@ function onGenerateBeforeCombinePrompts(eventData) { /** * Event handler for GENERATE_AFTER_COMBINE_PROMPTS (text completion). * This is now a backup/fallback - primary injection happens in BEFORE_COMBINE. - * + * Also fixes newline spacing after tag. + * * @param {Object} eventData - Event data with prompt property */ function onGenerateAfterCombinePrompts(eventData) { @@ -491,25 +494,31 @@ function onGenerateAfterCombinePrompts(eventData) { return; } - // Skip if injection already happened in BEFORE_COMBINE - if (historyInjectionDone) { - return; + let didInjectHistory = false; + + // Inject historical context if available and not already done + if (!historyInjectionDone && pendingContextMap.size > 0) { + // Fallback injection for edge cases where BEFORE_COMBINE didn't work + console.log('[RPG Companion] Using fallback string-based injection (AFTER_COMBINE)'); + eventData.prompt = injectContextIntoTextPrompt(eventData.prompt); + didInjectHistory = true; } - // Only inject if we have pending context - if (pendingContextMap.size === 0) { - return; - } + // Always fix newlines around context tags (whether we just injected or not) + eventData.prompt = eventData.prompt.replace(//g, '\n'); + eventData.prompt = eventData.prompt.replace(/<\/context>/g, '\n'); - // Fallback injection for edge cases where BEFORE_COMBINE didn't work - console.log('[RPG Companion] Using fallback string-based injection (AFTER_COMBINE)'); - eventData.prompt = injectContextIntoTextPrompt(eventData.prompt); + // Remove extra newlines after last_message opening and closing tags + // Match exactly the double newline pattern + eventData.prompt = eventData.prompt.replace(/\n\n/g, '\n'); + eventData.prompt = eventData.prompt.replace(/\n\n<\/last_message>/g, '\n'); } /** * Event handler for CHAT_COMPLETION_PROMPT_READY. * Injects historical context into the chat message array. - * + * Also fixes newline spacing around tags. + * * @param {Object} eventData - Event data with chat property */ function onChatCompletionPromptReady(eventData) { @@ -521,14 +530,20 @@ function onChatCompletionPromptReady(eventData) { return; } - // Only inject if we have pending context - if (pendingContextMap.size === 0) { - return; + // Inject historical context if we have pending context + if (pendingContextMap.size > 0) { + eventData.chat = injectContextIntoChatPrompt(eventData.chat); + // DON'T clear pendingContextMap here - let it persist for other generations + // (e.g., prewarm extensions). It will be cleared on GENERATION_ENDED. } - eventData.chat = injectContextIntoChatPrompt(eventData.chat); - // DON'T clear pendingContextMap here - let it persist for other generations - // (e.g., prewarm extensions). It will be cleared on GENERATION_ENDED. + // Fix newlines around context tags for all messages + for (const message of eventData.chat) { + if (message.content && typeof message.content === 'string') { + message.content = message.content.replace(//g, '\n'); + message.content = message.content.replace(/<\/context>/g, '\n'); + } + } } /** @@ -837,12 +852,14 @@ export async function onGenerationStarted(type, data, dryRun) { const contextSummary = generateContextualSummary(); if (contextSummary) { - const wrappedContext = `\nHere is context information about the current scene, and what follows is the last message in the chat history: + // Use custom context instructions prompt if set, otherwise use default + const contextInstructionsText = extensionSettings.customContextInstructionsPrompt || DEFAULT_CONTEXT_INSTRUCTIONS_PROMPT; + + const wrappedContext = ` ${contextSummary} - -Ensure these details naturally reflect and influence the narrative. Character behavior, dialogue, and story events should acknowledge these conditions when relevant, such as fatigue affecting performance, low hygiene influencing social interactions, environmental factors shaping the scene, or a character's emotional state coloring their responses. -\n\n`; +${contextInstructionsText} +`; // Inject context at depth 1 (before last user message) as SYSTEM // Skip when a guided generation injection is present to avoid conflicting instructions @@ -966,16 +983,16 @@ Ensure these details naturally reflect and influence the narrative. Character be export function initHistoryInjectionListeners() { // Register persistent listeners for prompt injection // These check pendingContextMap and only inject if there's data - + // Primary: BEFORE_COMBINE for text completion (more reliable - modifies message objects) eventSource.on(event_types.GENERATE_BEFORE_COMBINE_PROMPTS, onGenerateBeforeCombinePrompts); - + // Fallback: AFTER_COMBINE for text completion (string-based injection) eventSource.on(event_types.GENERATE_AFTER_COMBINE_PROMPTS, onGenerateAfterCombinePrompts); - + // Chat completion (OpenAI, etc.) eventSource.on(event_types.CHAT_COMPLETION_PROMPT_READY, onChatCompletionPromptReady); - + console.log('[RPG Companion] History injection listeners initialized'); } diff --git a/src/systems/generation/parser.js b/src/systems/generation/parser.js index cf75328..8bb0da0 100644 --- a/src/systems/generation/parser.js +++ b/src/systems/generation/parser.js @@ -617,6 +617,13 @@ export function parseUserStats(statsText) { if (!quest) return ''; if (typeof quest === 'string') return quest; if (typeof quest === 'object') { + // Check for locked format: {value, locked} + // Recursively extract value if it's nested + let extracted = quest; + while (typeof extracted === 'object' && extracted.value !== undefined) { + extracted = extracted.value; + } + if (typeof extracted === 'string') return extracted; // v3 format: {title, description, status} return quest.title || quest.description || JSON.stringify(quest); } diff --git a/src/systems/generation/promptBuilder.js b/src/systems/generation/promptBuilder.js index 40d5398..abfd6e6 100644 --- a/src/systems/generation/promptBuilder.js +++ b/src/systems/generation/promptBuilder.js @@ -37,24 +37,9 @@ export const DEFAULT_DECEPTION_PROMPT = `When a character is lying or deceiving, * Default Omniscience Filter prompt text * This instructs the AI to separate information the player character cannot perceive */ -export const DEFAULT_OMNISCIENCE_FILTER_PROMPT = `OMNISCIENCE FILTER INSTRUCTIONS: -You must strictly separate what the player character can directly perceive from what they cannot. The player should only read narrative content that their character can actually see, hear, smell, touch, or otherwise directly sense. -If the player character cannot directly perceive something, but it is happening, it ABSOLUTELY MUST be placed inside of a tag. -BEFORE writing any narrative content that involves events, actions, or details the player character CANNOT directly perceive (because they're not looking, too far away, behind them, in another room, happening silently, etc.), you MUST first output that hidden information inside a tag using this exact format: +export const DEFAULT_OMNISCIENCE_FILTER_PROMPT = `You must strictly separate what the player can directly perceive from what they cannot. They should only read limited narrative content that their persona can actually see, hear, smell, touch, or otherwise directly sense. Before writing any narrative content that involves events, actions, or details the player directly cannot perceive (because they're not looking, too far away, behind them, in another room, happening silently, include NPCs' internal thoughts, etc.), you absolutely must output that hidden information inside a tag using this exact format: - -CRITICAL RULES: -1. The tag must come BEFORE any sensory hints (sounds, smells, etc.) that the player DOES perceive from that event -2. Only write narrative that reflects what the player character actually experiences through their senses -3. Instead of "Jake sweeps the floor behind you", write: followed by narrative like "You hear soft sweeping sounds behind you" -4. NPCs' internal thoughts, silent actions, and events in other locations MUST go in tags -5. The player's narrative should create natural mystery and immersion - they experience the world through limited senses, not omniscient narration -6. Be liberal and proactive in using tags to hide information the player cannot perceive directly -7. Don't forget to properly close the tag with />. - -EXAMPLE: -Wrong: "As you read the newspaper, Sarah quietly pockets the key from the table behind you and slips out the back door." -Correct: You hear a faint click from somewhere behind you, but when you glance up from your newspaper, the room seems unchanged. The afternoon light streams through the windows as you return to your reading.`; +Example: You hear a faint click from somewhere behind you, but when you glance up from your newspaper, the room seems unchanged.`; /** @@ -77,6 +62,11 @@ export const SPOTIFY_FORMAT_INSTRUCTION = `Include it in this exact format: n.toString(16).padStart(2, '0'); - return `#${toHex(r)}${toHex(g)}${toHex(b)}`; + return `rgba(${r}, ${g}, ${b}, ${a})`; } /** @@ -539,7 +540,13 @@ export function renderThoughts() {
`; for (const stat of enabledCharStats) { const statValue = char[stat.name] || 0; - const statColor = getStatColor(statValue, extensionSettings.statBarColorLow, extensionSettings.statBarColorHigh); + const statColor = getStatColor( + statValue, + extensionSettings.statBarColorLow, + extensionSettings.statBarColorHigh, + extensionSettings.statBarColorLowOpacity ?? 100, + extensionSettings.statBarColorHighOpacity ?? 100 + ); html += `
${stat.name}: ${statValue}% diff --git a/src/systems/rendering/userStats.js b/src/systems/rendering/userStats.js index 31cbe16..2f11822 100644 --- a/src/systems/rendering/userStats.js +++ b/src/systems/rendering/userStats.js @@ -21,6 +21,7 @@ import { getSafeThumbnailUrl } from '../../utils/avatars.js'; import { buildInventorySummary } from '../generation/promptBuilder.js'; import { isItemLocked, setItemLock } from '../generation/lockManager.js'; import { updateFabWidgets } from '../ui/mobile.js'; +import { getStatBarColors } from '../ui/theme.js'; /** * Builds the user stats text string using custom stat names @@ -251,8 +252,9 @@ export function renderUserStats() { } } - // Create gradient from low to high color - const gradient = `linear-gradient(to right, ${extensionSettings.statBarColorLow}, ${extensionSettings.statBarColorHigh})`; + // Create gradient from low to high color with opacity + const colors = getStatBarColors(); + const gradient = `linear-gradient(to right, ${colors.low}, ${colors.high})`; // Check if stats bars section is locked const isStatsLocked = isItemLocked('userStats', 'stats'); diff --git a/src/systems/ui/desktop.js b/src/systems/ui/desktop.js index 3324c29..07e2916 100644 --- a/src/systems/ui/desktop.js +++ b/src/systems/ui/desktop.js @@ -5,6 +5,7 @@ import { i18n } from '../../core/i18n.js'; import { extensionSettings, lastGeneratedData, committedTrackerData } from '../../core/state.js'; +import { hexToRgba } from './theme.js'; /** * Helper to parse time string and calculate clock hand angles @@ -28,7 +29,7 @@ function parseTimeForClock(timeStr) { export function updateStripWidgets() { const $panel = $('#rpg-companion-panel'); const $container = $('#rpg-strip-widget-container'); - + if ($panel.length === 0 || $container.length === 0) return; // Check if strip widgets are enabled @@ -118,7 +119,7 @@ export function updateStripWidgets() { const $statsWidget = $container.find('.rpg-strip-widget-stats'); if (widgetSettings.stats?.enabled) { let allStats = []; - + // Try to get stats from tracker data first (most current) const userStatsData = lastGeneratedData?.userStats || committedTrackerData?.userStats; if (userStatsData) { @@ -131,7 +132,7 @@ export function updateStripWidgets() { console.warn('[RPG Strip Widgets] Failed to parse tracker userStats:', e); } } - + // Fallback to extensionSettings.userStats if (allStats.length === 0 && extensionSettings.userStats) { try { @@ -237,7 +238,9 @@ export function updateStripWidgets() { */ function getStatColor(value) { const lowColor = extensionSettings.statBarColorLow || '#cc3333'; + const lowOpacity = extensionSettings.statBarColorLowOpacity ?? 100; const highColor = extensionSettings.statBarColorHigh || '#33cc66'; + const highOpacity = extensionSettings.statBarColorHighOpacity ?? 100; // Simple linear interpolation between low and high colors const percent = Math.min(100, Math.max(0, value)) / 100; @@ -246,13 +249,14 @@ function getStatColor(value) { const lowRGB = hexToRgb(lowColor); const highRGB = hexToRgb(highColor); - if (!lowRGB || !highRGB) return value > 50 ? highColor : lowColor; + if (!lowRGB || !highRGB) return value > 50 ? hexToRgba(highColor, highOpacity) : hexToRgba(lowColor, lowOpacity); const r = Math.round(lowRGB.r + (highRGB.r - lowRGB.r) * percent); const g = Math.round(lowRGB.g + (highRGB.g - lowRGB.g) * percent); const b = Math.round(lowRGB.b + (highRGB.b - lowRGB.b) * percent); + const a = (lowOpacity + (highOpacity - lowOpacity) * percent) / 100; - return `rgb(${r}, ${g}, ${b})`; + return `rgba(${r}, ${g}, ${b}, ${a})`; } /** diff --git a/src/systems/ui/mobile.js b/src/systems/ui/mobile.js index b3f9a42..9a537d3 100644 --- a/src/systems/ui/mobile.js +++ b/src/systems/ui/mobile.js @@ -8,6 +8,7 @@ import { saveSettings } from '../../core/persistence.js'; import { closeMobilePanelWithAnimation, updateCollapseToggleIcon } from './layout.js'; import { setupDesktopTabs, removeDesktopTabs } from './desktop.js'; import { i18n } from '../../core/i18n.js'; +import { hexToRgba } from './theme.js'; /** * Updates the text labels of the mobile navigation tabs based on the current language. @@ -1451,7 +1452,7 @@ export function updateFabWidgets() { if (widgetSettings.attributes?.enabled) { // Check if RPG attributes are enabled in trackerConfig const showRPGAttributes = extensionSettings.trackerConfig?.userStats?.showRPGAttributes !== false; - + if (showRPGAttributes && extensionSettings.classicStats) { // Get enabled attributes from trackerConfig const configuredAttrs = extensionSettings.trackerConfig?.userStats?.rpgAttributes || []; @@ -1541,10 +1542,10 @@ export function updateFabWidgets() { e.stopPropagation(); const $this = $(this); const wasExpanded = $this.hasClass('expanded'); - + // Collapse all other expanded widgets $container.find('.rpg-fab-widget.expanded').removeClass('expanded'); - + // Toggle this one if (!wasExpanded) { $this.addClass('expanded'); @@ -1567,7 +1568,9 @@ export function updateFabWidgets() { */ function getStatColor(value) { const lowColor = extensionSettings.statBarColorLow || '#cc3333'; + const lowOpacity = extensionSettings.statBarColorLowOpacity ?? 100; const highColor = extensionSettings.statBarColorHigh || '#33cc66'; + const highOpacity = extensionSettings.statBarColorHighOpacity ?? 100; // Simple linear interpolation between low and high colors const percent = Math.min(100, Math.max(0, value)) / 100; @@ -1576,13 +1579,14 @@ function getStatColor(value) { const lowRGB = hexToRgb(lowColor); const highRGB = hexToRgb(highColor); - if (!lowRGB || !highRGB) return value > 50 ? highColor : lowColor; + if (!lowRGB || !highRGB) return value > 50 ? hexToRgba(highColor, highOpacity) : hexToRgba(lowColor, lowOpacity); const r = Math.round(lowRGB.r + (highRGB.r - lowRGB.r) * percent); const g = Math.round(lowRGB.g + (highRGB.g - lowRGB.g) * percent); const b = Math.round(lowRGB.b + (highRGB.b - lowRGB.b) * percent); + const a = (lowOpacity + (highOpacity - lowOpacity) * percent) / 100; - return `rgb(${r}, ${g}, ${b})`; + return `rgba(${r}, ${g}, ${b}, ${a})`; } /** diff --git a/src/systems/ui/promptsEditor.js b/src/systems/ui/promptsEditor.js index 86b02fa..4e47661 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_DIALOGUE_COLORING_PROMPT, DEFAULT_DECEPTION_PROMPT, DEFAULT_OMNISCIENCE_FILTER_PROMPT, DEFAULT_CYOA_PROMPT, DEFAULT_SPOTIFY_PROMPT, DEFAULT_NARRATOR_PROMPT } from '../generation/promptBuilder.js'; +import { DEFAULT_HTML_PROMPT, DEFAULT_DIALOGUE_COLORING_PROMPT, DEFAULT_DECEPTION_PROMPT, DEFAULT_OMNISCIENCE_FILTER_PROMPT, DEFAULT_CYOA_PROMPT, DEFAULT_SPOTIFY_PROMPT, DEFAULT_NARRATOR_PROMPT, DEFAULT_CONTEXT_INSTRUCTIONS_PROMPT } from '../generation/promptBuilder.js'; let $editorModal = null; let tempPrompts = null; // Temporary prompts for cancel functionality @@ -18,6 +18,7 @@ const DEFAULT_PROMPTS = { cyoa: DEFAULT_CYOA_PROMPT, spotify: DEFAULT_SPOTIFY_PROMPT, narrator: DEFAULT_NARRATOR_PROMPT, + contextInstructions: DEFAULT_CONTEXT_INSTRUCTIONS_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; 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. @@ -101,6 +102,7 @@ function openPromptsEditor() { cyoa: extensionSettings.customCYOAPrompt || '', spotify: extensionSettings.customSpotifyPrompt || '', narrator: extensionSettings.customNarratorPrompt || '', + contextInstructions: extensionSettings.customContextInstructionsPrompt || '', plotRandom: extensionSettings.customPlotRandomPrompt || '', plotNatural: extensionSettings.customPlotNaturalPrompt || '', avatar: extensionSettings.avatarLLMCustomInstruction || '', @@ -117,6 +119,7 @@ function openPromptsEditor() { $('#rpg-prompt-cyoa').val(extensionSettings.customCYOAPrompt || DEFAULT_PROMPTS.cyoa); $('#rpg-prompt-spotify').val(extensionSettings.customSpotifyPrompt || DEFAULT_PROMPTS.spotify); $('#rpg-prompt-narrator').val(extensionSettings.customNarratorPrompt || DEFAULT_PROMPTS.narrator); + $('#rpg-prompt-context-instructions').val(extensionSettings.customContextInstructionsPrompt || DEFAULT_PROMPTS.contextInstructions); $('#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); @@ -157,6 +160,7 @@ function savePrompts() { extensionSettings.customCYOAPrompt = $('#rpg-prompt-cyoa').val().trim(); extensionSettings.customSpotifyPrompt = $('#rpg-prompt-spotify').val().trim(); extensionSettings.customNarratorPrompt = $('#rpg-prompt-narrator').val().trim(); + extensionSettings.customContextInstructionsPrompt = $('#rpg-prompt-context-instructions').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(); @@ -198,6 +202,9 @@ function restorePromptToDefault(promptType) { case 'narrator': extensionSettings.customNarratorPrompt = ''; break; + case 'contextInstructions': + extensionSettings.customContextInstructionsPrompt = ''; + break; case 'plotRandom': extensionSettings.customPlotRandomPrompt = ''; break; @@ -232,6 +239,7 @@ function restoreAllToDefaults() { $('#rpg-prompt-cyoa').val(DEFAULT_PROMPTS.cyoa); $('#rpg-prompt-spotify').val(DEFAULT_PROMPTS.spotify); $('#rpg-prompt-narrator').val(DEFAULT_PROMPTS.narrator); + $('#rpg-prompt-context-instructions').val(DEFAULT_PROMPTS.contextInstructions); $('#rpg-prompt-plot-random').val(DEFAULT_PROMPTS.plotRandom); $('#rpg-prompt-plot-natural').val(DEFAULT_PROMPTS.plotNatural); $('#rpg-prompt-avatar').val(DEFAULT_PROMPTS.avatar); @@ -247,6 +255,7 @@ function restoreAllToDefaults() { extensionSettings.customCYOAPrompt = ''; extensionSettings.customSpotifyPrompt = ''; extensionSettings.customNarratorPrompt = ''; + extensionSettings.customContextInstructionsPrompt = ''; extensionSettings.customPlotRandomPrompt = ''; extensionSettings.customPlotNaturalPrompt = ''; extensionSettings.avatarLLMCustomInstruction = ''; diff --git a/src/systems/ui/theme.js b/src/systems/ui/theme.js index a96001a..0bac819 100644 --- a/src/systems/ui/theme.js +++ b/src/systems/ui/theme.js @@ -5,6 +5,37 @@ import { extensionSettings, $panelContainer } from '../../core/state.js'; +/** + * Converts hex color and opacity percentage to rgba string + * @param {string} hex - Hex color (e.g., '#ff0000') + * @param {number} opacity - Opacity percentage (0-100) + * @returns {string} - RGBA color string + */ +export function hexToRgba(hex, opacity = 100) { + const r = parseInt(hex.slice(1, 3), 16); + const g = parseInt(hex.slice(3, 5), 16); + const b = parseInt(hex.slice(5, 7), 16); + const a = opacity / 100; + return `rgba(${r}, ${g}, ${b}, ${a})`; +} + +/** + * Gets stat bar colors with opacity applied + * @returns {{low: string, high: string}} RGBA color strings for stat bars + */ +export function getStatBarColors() { + return { + low: hexToRgba( + extensionSettings.statBarColorLow || '#cc3333', + extensionSettings.statBarColorLowOpacity ?? 100 + ), + high: hexToRgba( + extensionSettings.statBarColorHigh || '#33cc66', + extensionSettings.statBarColorHighOpacity ?? 100 + ) + }; +} + /** * Applies the selected theme to the panel. */ @@ -75,24 +106,33 @@ export function applyCustomTheme() { const colors = extensionSettings.customColors; + // Convert hex colors with opacity to rgba + const bgColor = hexToRgba(colors.bg, colors.bgOpacity ?? 100); + const accentColor = hexToRgba(colors.accent, colors.accentOpacity ?? 100); + const textColor = hexToRgba(colors.text, colors.textOpacity ?? 100); + const highlightColor = hexToRgba(colors.highlight, colors.highlightOpacity ?? 100); + + // Create shadow with 50% opacity of highlight color + const shadowColor = hexToRgba(colors.highlight, (colors.highlightOpacity ?? 100) * 0.5); + // Apply custom CSS variables as inline styles to main panel $panelContainer.css({ - '--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` // Add alpha for shadow + '--rpg-bg': bgColor, + '--rpg-accent': accentColor, + '--rpg-text': textColor, + '--rpg-highlight': highlightColor, + '--rpg-border': highlightColor, + '--rpg-shadow': shadowColor }); // 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` + '--rpg-bg': bgColor, + '--rpg-accent': accentColor, + '--rpg-text': textColor, + '--rpg-highlight': highlightColor, + '--rpg-border': highlightColor, + '--rpg-shadow': shadowColor }; const $mobileToggle = $('#rpg-mobile-toggle'); diff --git a/template.html b/template.html index 55e5a63..00deaca 100644 --- a/template.html +++ b/template.html @@ -250,29 +250,49 @@
- +
+ + + 100% +
- +
+ + + 100% +
- +
+ + + 100% +
- +
+ + + 100% +
- +
+ + + 100% +
Color when stats are at 0%.
@@ -280,7 +300,11 @@
- +
+ + + 100% +
Color when stats are at 100%.
@@ -1070,6 +1094,20 @@
+ +
+ + + Injected in Separate/External mode after the context summary. Tells the AI how to use the context. + + + +
+