munimunigamer
663 lines
38 KiB
HTML
663 lines
38 KiB
HTML
<div id="rpg-companion-panel" class="rpg-panel">
|
||
<!-- Collapse/Expand Toggle Button -->
|
||
<button class="rpg-collapse-toggle" id="rpg-collapse-toggle" title="Collapse/Expand Panel">
|
||
<i class="fa-solid fa-chevron-right"></i>
|
||
</button>
|
||
|
||
<!-- Main Game Panel -->
|
||
<div class="rpg-game-container">
|
||
<!-- Header with Controls -->
|
||
<div class="rpg-panel-header">
|
||
<h3>
|
||
<i class="fa-solid fa-dice-d20"></i>
|
||
<span data-i18n-key="template.mainPanel.title">RPG Companion</span>
|
||
</h3>
|
||
</div>
|
||
|
||
<div id="rpg-panel-content">
|
||
<!-- Dice Roll Display -->
|
||
<div id="rpg-dice-display" class="rpg-dice-display">
|
||
<i class="fa-solid fa-dice"></i>
|
||
<span id="rpg-last-roll-text"></span>
|
||
<button id="rpg-clear-dice" class="rpg-clear-dice-btn">×</button>
|
||
</div>
|
||
|
||
<!-- Unified Game Content Box -->
|
||
<div class="rpg-content-box">
|
||
<!-- User Stats Section with Portrait -->
|
||
<div id="rpg-user-stats" class="rpg-section rpg-stats-section">
|
||
<!-- Content will be populated by JavaScript -->
|
||
</div>
|
||
|
||
<!-- Divider after User Stats -->
|
||
<div id="rpg-divider-stats" class="rpg-divider"></div>
|
||
|
||
<!-- Info Box Section -->
|
||
<div id="rpg-info-box" class="rpg-section rpg-info-section">
|
||
<!-- Content will be populated by JavaScript -->
|
||
</div>
|
||
|
||
<!-- Divider after Info Box -->
|
||
<div id="rpg-divider-info" class="rpg-divider"></div>
|
||
|
||
<!-- Character Thoughts Section -->
|
||
<div id="rpg-thoughts" class="rpg-section rpg-thoughts-section">
|
||
<!-- Content will be populated by JavaScript -->
|
||
</div>
|
||
|
||
<!-- Divider after Thoughts -->
|
||
<div id="rpg-divider-thoughts" class="rpg-divider"></div>
|
||
|
||
<!-- Inventory Section -->
|
||
<div id="rpg-inventory" class="rpg-section rpg-inventory-section">
|
||
<!-- Content will be populated by JavaScript -->
|
||
</div>
|
||
|
||
<!-- Divider after Inventory -->
|
||
<div id="rpg-divider-inventory" class="rpg-divider"></div>
|
||
|
||
<!-- Quests Section -->
|
||
<div id="rpg-quests" class="rpg-section rpg-quests-section">
|
||
<!-- Content will be populated by JavaScript -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- HTML Prompt Toggle -->
|
||
<div class="rpg-toggle-container">
|
||
<label class="rpg-toggle-label">
|
||
<input type="checkbox" id="rpg-toggle-html-prompt">
|
||
<i class="fa-solid fa-code"></i>
|
||
<span data-i18n-key="template.mainPanel.enableImmersiveHtml">Enable Immersive HTML</span>
|
||
</label>
|
||
</div>
|
||
|
||
<!-- Manual Update Button -->
|
||
<button id="rpg-manual-update" class="rpg-btn-primary rpg-manual-update-btn">
|
||
<i class="fa-solid fa-sync"></i> <span data-i18n-key="template.mainPanel.refreshRpgInfo">Refresh RPG
|
||
Info</span>
|
||
</button>
|
||
|
||
<!-- Settings and Edit Trackers Buttons Row -->
|
||
<div class="rpg-settings-buttons-row">
|
||
<button id="rpg-open-tracker-editor" class="rpg-btn-settings rpg-btn-half">
|
||
<i class="fa-solid fa-sliders"></i> <span data-i18n-key="template.mainPanel.editTrackersButton">Edit
|
||
Trackers</span>
|
||
</button>
|
||
<button id="rpg-open-settings" class="rpg-btn-settings rpg-btn-half">
|
||
<i class="fa-solid fa-gear"></i> <span
|
||
data-i18n-key="template.mainPanel.settingsButton">Settings</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Settings Modal -->
|
||
<div id="rpg-settings-popup" class="rpg-settings-popup" role="dialog" aria-modal="true"
|
||
aria-labelledby="rpg-settings-title">
|
||
<div class="rpg-settings-popup-content">
|
||
<header class="rpg-settings-popup-header">
|
||
<h3 id="rpg-settings-title">
|
||
<i class="fa-solid fa-gear" aria-hidden="true"></i>
|
||
<span data-i18n-key="template.settingsTitle">RPG Companion Settings</span>
|
||
</h3>
|
||
<button id="rpg-close-settings" class="rpg-popup-close" type="button"
|
||
aria-label="Close settings">×</button>
|
||
</header>
|
||
<div class="rpg-settings-popup-body">
|
||
<div class="rpg-settings-group">
|
||
<h4 data-i18n-key="template.settingsModal.themeTitle"><i class="fa-solid fa-palette"
|
||
aria-hidden="true"></i> Theme</h4>
|
||
<div class="rpg-setting-row">
|
||
<label for="rpg-theme-select" data-i18n-key="template.settingsModal.themeLabel">Visual
|
||
Theme:</label>
|
||
<select id="rpg-theme-select" class="rpg-select">
|
||
<option value="default" data-i18n-key="template.settingsModal.themeOptions.default">Default
|
||
</option>
|
||
<option value="sci-fi" data-i18n-key="template.settingsModal.themeOptions.sciFi">Sci-Fi
|
||
(Synthwave)</option>
|
||
<option value="fantasy" data-i18n-key="template.settingsModal.themeOptions.fantasy">Fantasy
|
||
(Rustic Parchment)</option>
|
||
<option value="cyberpunk" data-i18n-key="template.settingsModal.themeOptions.cyberpunk">
|
||
Cyberpunk (Neon Grid)</option>
|
||
<option value="custom" data-i18n-key="template.settingsModal.themeOptions.custom">Custom
|
||
</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- Custom Theme Colors (Hidden by default) -->
|
||
<div id="rpg-custom-colors" class="rpg-custom-colors" style="display: none;">
|
||
<div class="rpg-setting-row">
|
||
<label for="rpg-custom-bg"
|
||
data-i18n-key="template.settingsModal.themeOptions.custom.background">Background:</label>
|
||
<input type="color" id="rpg-custom-bg" value="#1a1a2e" />
|
||
</div>
|
||
<div class="rpg-setting-row">
|
||
<label for="rpg-custom-accent"
|
||
data-i18n-key="template.settingsModal.themeOptions.custom.accent">Accent:</label>
|
||
<input type="color" id="rpg-custom-accent" value="#16213e" />
|
||
</div>
|
||
<div class="rpg-setting-row">
|
||
<label for="rpg-custom-text"
|
||
data-i18n-key="template.settingsModal.themeOptions.custom.text">Text:</label>
|
||
<input type="color" id="rpg-custom-text" value="#eaeaea" />
|
||
</div>
|
||
<div class="rpg-setting-row">
|
||
<label for="rpg-custom-highlight"
|
||
data-i18n-key="template.settingsModal.themeOptions.custom.highlight">Highlight:</label>
|
||
<input type="color" id="rpg-custom-highlight" value="#e94560" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="rpg-setting-row">
|
||
<label for="rpg-stat-bar-color-low" data-i18n-key="template.settingsModal.theme.statBarLow">Stat Bar
|
||
Color (Low):</label>
|
||
<input type="color" id="rpg-stat-bar-color-low" value="#cc3333" />
|
||
<small data-i18n-key="template.settingsModal.theme.statBarLowNote">Color when stats are at
|
||
0%</small>
|
||
</div>
|
||
|
||
<div class="rpg-setting-row">
|
||
<label for="rpg-stat-bar-color-high" data-i18n-key="template.settingsModal.theme.statBarHigh">Stat
|
||
Bar Color (High):</label>
|
||
<input type="color" id="rpg-stat-bar-color-high" value="#33cc66" />
|
||
<small data-i18n-key="template.settingsModal.theme.statBarHighNote">Color when stats are at
|
||
100%</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="rpg-settings-group">
|
||
<h4 data-i18n-key="template.settingsModal.displayTitle"><i class="fa-solid fa-toggle-on"
|
||
aria-hidden="true"></i> Display Options</h4>
|
||
<small class="notes" style="display: block; margin-bottom: 10px;"
|
||
data-i18n-key="template.settingsModal.displayNote">
|
||
<i class="fa-solid fa-info-circle" aria-hidden="true"></i> Use the Extensions tab to enable/disable
|
||
the RPG Companion extension.
|
||
</small>
|
||
|
||
<div class="rpg-setting-row">
|
||
<label for="rpg-position-select" data-i18n-key="template.settingsModal.display.panelPosition">Panel
|
||
Position:</label>
|
||
<select id="rpg-position-select" class="rpg-select">
|
||
<option value="right" data-i18n-key="template.settingsModal.display.panelPositionOptions.right">
|
||
Right Sidebar</option>
|
||
<option value="left" data-i18n-key="template.settingsModal.display.panelPositionOptions.left">
|
||
Left Sidebar</option>
|
||
</select>
|
||
</div>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-auto-update" />
|
||
<span data-i18n-key="template.settingsModal.display.toggleAutoUpdate">Auto-update after
|
||
messages</span>
|
||
</label>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-user-stats" />
|
||
<span data-i18n-key="template.settingsModal.display.showUserStats">Show User Stats</span>
|
||
</label>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-info-box" />
|
||
<span data-i18n-key="template.settingsModal.display.showInfoBox">Show Info Box</span>
|
||
</label>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-thoughts" />
|
||
<span data-i18n-key="template.settingsModal.display.showPresentCharacters">Show Present
|
||
Characters</span>
|
||
</label>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-narrator-mode" />
|
||
<span data-i18n-key="template.settingsModal.display.narratorMode">Narrator Mode</span>
|
||
</label>
|
||
<small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;"
|
||
data-i18n-key="template.settingsModal.display.narratorModeNote">
|
||
Use character card as narrator. Infer characters from context instead of using fixed character
|
||
references.
|
||
</small>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-inventory" />
|
||
<span data-i18n-key="template.settingsModal.display.showInventory">Show Inventory</span>
|
||
</label>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-quests" />
|
||
<span data-i18n-key="template.settingsModal.display.showQuests">Show Quests</span>
|
||
</label>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-thoughts-in-chat" />
|
||
<span data-i18n-key="template.settingsModal.display.showThoughtsInChat">Show Thoughts in Chat</span>
|
||
</label>
|
||
<small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;"
|
||
data-i18n-key="template.settingsModal.display.showThoughtsInChatNote">
|
||
Display character thoughts as overlay bubbles next to their messages
|
||
</small>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-always-show-bubble" />
|
||
<span data-i18n-key="template.settingsModal.display.alwaysShowThoughtBubble">Always Show Thought
|
||
Bubble</span>
|
||
</label>
|
||
<small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;"
|
||
data-i18n-key="template.settingsModal.display.alwaysShowThoughtBubbleNote">
|
||
Auto-expand thought bubble without clicking the icon first
|
||
</small>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-animations" />
|
||
<span data-i18n-key="template.settingsModal.display.enableAnimations">Enable Animations</span>
|
||
</label>
|
||
<small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;"
|
||
data-i18n-key="template.settingsModal.display.enableAnimationsNote">
|
||
Smooth transitions for stats, content updates, and dice rolls
|
||
</small>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-plot-buttons" />
|
||
<span data-i18n-key="template.settingsModal.display.showPlotProgressionButtons">Show Plot
|
||
Progression Buttons</span>
|
||
</label>
|
||
<small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;"
|
||
data-i18n-key="template.settingsModal.display.showPlotProgressionButtonsNote">
|
||
Display buttons above chat input for plot progression prompts
|
||
</small>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-dice-display" />
|
||
<span data-i18n-key="template.settingsModal.display.showDiceDisplay">Show Dice Roll Display</span>
|
||
</label>
|
||
<small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;"
|
||
data-i18n-key="template.settingsModal.display.showDiceDisplayNote">
|
||
Display the "Last Roll" indicator in the panel.
|
||
</small>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-debug-mode" />
|
||
<span data-i18n-key="template.settingsModal.display.enableDebugMode">Enable Debug Mode</span>
|
||
</label>
|
||
<small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;"
|
||
data-i18n-key="template.settingsModal.display.enableDebugModeNote">
|
||
Shows parser logs in a mobile-friendly UI panel. Useful for troubleshooting. Look for the red bug
|
||
button.
|
||
</small>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-auto-avatars" />
|
||
<span data-i18n-key="template.settingsModal.display.autoGenerateAvatars">Auto-generate Missing
|
||
Avatars</span>
|
||
</label>
|
||
<small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;"
|
||
data-i18n-key="template.settingsModal.display.autoGenerateAvatarsNote">
|
||
Automatically generate avatars for characters without custom images using the Image Generation
|
||
Plugin
|
||
</small>
|
||
|
||
<!-- Avatar options container - conditionally visible -->
|
||
<div id="rpg-avatar-options" style="margin-left: 24px; margin-top: 12px; display: none;">
|
||
<div class="rpg-setting-row" style="margin-top: 12px;">
|
||
<label for="rpg-avatar-llm-instruction" style="display: block; margin-bottom: 8px;"
|
||
data-i18n-key="template.settingsModal.display.avatarLLMInstruction">
|
||
LLM Instruction:
|
||
</label>
|
||
<textarea id="rpg-avatar-llm-instruction" class="rpg-textarea" rows="3"
|
||
placeholder="Create a detailed portrait prompt focusing on the character's appearance, clothing, and mood..."></textarea>
|
||
<small style="display: block; margin-top: 4px; color: #888; font-size: 11px;"
|
||
data-i18n-key="template.settingsModal.display.avatarLLMInstructionNote">
|
||
The LLM will use character cards, tracker data, and chat context to generate detailed
|
||
prompts
|
||
</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="rpg-settings-group">
|
||
<h4><i class="fa-solid fa-swords" aria-hidden="true"></i> Combat Encounters</h4>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-encounters" />
|
||
<span>Enable Combat Encounters</span>
|
||
</label>
|
||
<small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;">
|
||
Show the "Start Encounter" button above chat input for interactive combat
|
||
</small>
|
||
|
||
<div class="rpg-setting-row" style="margin-top: 12px;">
|
||
<label for="rpg-encounter-history-depth">Chat History Depth:</label>
|
||
<input type="number" id="rpg-encounter-history-depth" min="1" max="20" value="8"
|
||
class="rpg-input" />
|
||
<small>Number of recent messages to include in combat initialization</small>
|
||
</div>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-autosave-logs" />
|
||
<span>Auto-save Combat Logs</span>
|
||
</label>
|
||
<small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;">
|
||
Save detailed combat logs to file for future reference and analysis
|
||
</small>
|
||
</div>
|
||
|
||
<div class="rpg-settings-group">
|
||
<h4 data-i18n-key="template.settingsModal.advancedTitle"><i class="fa-solid fa-sliders"
|
||
aria-hidden="true"></i> Advanced</h4>
|
||
|
||
<div class="rpg-setting-row">
|
||
<label for="rpg-generation-mode"
|
||
data-i18n-key="template.settingsModal.advanced.generationMode">Generation Mode:</label>
|
||
<select id="rpg-generation-mode" class="rpg-select">
|
||
<option value="together"
|
||
data-i18n-key="template.settingsModal.advanced.generationModeOptions.together">Together with
|
||
Main Generation</option>
|
||
<option value="separate"
|
||
data-i18n-key="template.settingsModal.advanced.generationModeOptions.separate">Separate
|
||
Generation</option>
|
||
<option value="external"
|
||
data-i18n-key="template.settingsModal.advanced.generationModeOptions.external">External API
|
||
</option>
|
||
</select>
|
||
<small data-i18n-key="template.settingsModal.advanced.generationModeNote">Together: Adds RPG
|
||
tracking to main roleplay. Separate: Generates RPG data separately (manual or auto).</small>
|
||
</div>
|
||
|
||
<!-- External API Settings (shown only when External API mode is selected) -->
|
||
<div id="rpg-external-api-settings" class="rpg-external-api-settings"
|
||
style="display: none; padding: 12px; border-left: 2px solid var(--SmartThemeBorderColor); margin-top: 8px;">
|
||
<h5 style="margin-top: 0; margin-bottom: 12px; color: var(--SmartThemeBodyColor);">
|
||
<i class="fa-solid fa-cloud" aria-hidden="true"></i>
|
||
<span data-i18n-key="template.settingsModal.advanced.externalApi.title">External API
|
||
Configuration</span>
|
||
</h5>
|
||
|
||
<div class="rpg-setting-row">
|
||
<label for="rpg-external-base-url"
|
||
data-i18n-key="template.settingsModal.advanced.externalApi.baseUrl">API Base URL:</label>
|
||
<input type="text" id="rpg-external-base-url" class="rpg-input"
|
||
placeholder="https://api.openai.com/v1" style="width: 100%;" />
|
||
<small data-i18n-key="template.settingsModal.advanced.externalApi.baseUrlNote">OpenAI-compatible
|
||
endpoint (e.g., OpenAI, OpenRouter, local LLM server)</small>
|
||
</div>
|
||
|
||
<div class="rpg-setting-row">
|
||
<label for="rpg-external-api-key"
|
||
data-i18n-key="template.settingsModal.advanced.externalApi.apiKey">API Key:</label>
|
||
<div style="display: flex; gap: 8px; width: 100%;">
|
||
<input type="password" id="rpg-external-api-key" class="rpg-input" placeholder="sk-..."
|
||
style="flex: 1;" />
|
||
<button id="rpg-toggle-api-key-visibility" class="menu_button" type="button"
|
||
title="Show/Hide API Key" style="padding: 4px 8px;">
|
||
<i class="fa-solid fa-eye"></i>
|
||
</button>
|
||
</div>
|
||
<small data-i18n-key="template.settingsModal.advanced.externalApi.apiKeyNote">Your API key for
|
||
the external service</small>
|
||
</div>
|
||
|
||
<div class="rpg-setting-row">
|
||
<label for="rpg-external-model"
|
||
data-i18n-key="template.settingsModal.advanced.externalApi.model">Model:</label>
|
||
<input type="text" id="rpg-external-model" class="rpg-input" placeholder="gpt-4o-mini"
|
||
style="width: 100%;" />
|
||
<small data-i18n-key="template.settingsModal.advanced.externalApi.modelNote">Model identifier
|
||
(e.g., gpt-4o-mini, claude-3-haiku, mistral-7b)</small>
|
||
</div>
|
||
|
||
<div class="rpg-setting-row" style="display: flex; gap: 16px;">
|
||
<div style="flex: 1;">
|
||
<label for="rpg-external-max-tokens"
|
||
data-i18n-key="template.settingsModal.advanced.externalApi.maxTokens">Max
|
||
Tokens:</label>
|
||
<input type="number" id="rpg-external-max-tokens" class="rpg-input" min="256" max="16384"
|
||
value="8192" style="width: 100%;" />
|
||
</div>
|
||
<div style="flex: 1;">
|
||
<label for="rpg-external-temperature"
|
||
data-i18n-key="template.settingsModal.advanced.externalApi.temperature">Temperature:</label>
|
||
<input type="number" id="rpg-external-temperature" class="rpg-input" min="0" max="2"
|
||
step="0.1" value="0.7" style="width: 100%;" />
|
||
</div>
|
||
</div>
|
||
|
||
<div style="margin-top: 12px;">
|
||
<button id="rpg-test-external-api" class="menu_button" type="button" style="width: 100%; display: flex; align-items: center; gap: 8px;">
|
||
<i class="fa-solid fa-plug"></i>
|
||
<span data-i18n-key="template.settingsModal.advanced.externalApi.testConnection">Test
|
||
Connection</span>
|
||
</button>
|
||
<div id="rpg-external-api-test-result"
|
||
style="margin-top: 8px; padding: 8px; border-radius: 4px; display: none;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="rpg-setting-row">
|
||
<label for="rpg-update-depth"
|
||
data-i18n-key="template.settingsModal.advanced.contextMessages">Context Messages:</label>
|
||
<input type="number" id="rpg-update-depth" min="1" max="20" value="4" class="rpg-input" />
|
||
<small data-i18n-key="template.settingsModal.advanced.contextMessagesNote">Number of recent messages
|
||
to include (Separate mode only)</small>
|
||
</div>
|
||
|
||
<div class="rpg-setting-row">
|
||
<label for="rpg-memory-messages"
|
||
data-i18n-key="template.settingsModal.advanced.memoryBatchSize">Memory Batch Size:</label>
|
||
<input type="number" id="rpg-memory-messages" min="4" max="50" value="16" class="rpg-input" />
|
||
<small data-i18n-key="template.settingsModal.advanced.memoryBatchSizeNote">Number of messages to
|
||
process per batch in Memory Recollection</small>
|
||
</div>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-use-separate-preset" />
|
||
<span data-i18n-key="template.settingsModal.advanced.useSeparatePreset">Use model connected to RPG
|
||
Companion Trackers preset</span>
|
||
</label>
|
||
<small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;"
|
||
data-i18n-key="template.settingsModal.advanced.useSeparatePresetNote">
|
||
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).
|
||
</small>
|
||
|
||
<div class="rpg-setting-row">
|
||
<label for="rpg-skip-guided-mode"
|
||
data-i18n-key="template.settingsModal.advanced.skipInjections">Skip Injections during Guided
|
||
Generations:</label>
|
||
<select id="rpg-skip-guided-mode" class="rpg-select">
|
||
<option value="none" data-i18n-key="template.settingsModal.advanced.skipInjectionsOptions.none">
|
||
Never skip</option>
|
||
<option value="impersonation"
|
||
data-i18n-key="template.settingsModal.advanced.skipInjectionsOptions.impersonation">Only on
|
||
impersonation requests</option>
|
||
<option value="guided"
|
||
data-i18n-key="template.settingsModal.advanced.skipInjectionsOptions.guided">Always for
|
||
guided or quiet prompts</option>
|
||
</select>
|
||
</div>
|
||
<small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;"
|
||
data-i18n-key="template.settingsModal.advanced.skipInjectionsNote">
|
||
When set, the extension will not inject tracker prompts, examples, or HTML instructions according to
|
||
the selected mode when a guided generation (via `instruct` or `quiet_prompt`) is detected. Useful
|
||
when using GuidedGenerations or similar extensions.
|
||
</small>
|
||
|
||
<label class="checkbox_label" style="margin-top: 16px;">
|
||
<input type="checkbox" id="rpg-save-tracker-history" />
|
||
<span data-i18n-key="template.settingsModal.advanced.saveTrackerHistory">Save Tracker History in
|
||
Chat</span>
|
||
</label>
|
||
<small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;"
|
||
data-i18n-key="template.settingsModal.advanced.saveTrackerHistoryNote">
|
||
When enabled, tracker data is saved in chat history for each message. In Together mode, trackers
|
||
appear in <trackers> XML tags (hidden from display). In Separate mode, tracker data is stored
|
||
in message metadata. When disabled, only the most recent trackers are kept.
|
||
</small>
|
||
|
||
<!-- Custom HTML Prompt Editor -->
|
||
<div class="rpg-setting-row"
|
||
style="margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--rpg-border);">
|
||
<label for="rpg-custom-html-prompt" style="display: block; margin-bottom: 8px; font-weight: 600;"
|
||
data-i18n-key="template.settingsModal.advanced.customHtmlPromptTitle">
|
||
<i class="fa-solid fa-code" aria-hidden="true"></i> Custom HTML Prompt:
|
||
</label>
|
||
|
||
<textarea id="rpg-custom-html-prompt" style="width: 100%; min-height: 120px; padding: 10px; border-radius: 4px;
|
||
border: 1px solid var(--SmartThemeBorderColor); background: var(--SmartThemeBlurTintColor);
|
||
color: var(--SmartThemeBodyColor); font-family: 'Courier New', monospace; font-size: 12px;
|
||
resize: vertical; line-height: 1.5;" placeholder=""></textarea>
|
||
<div style="margin-top: 8px; display: flex; gap: 8px;">
|
||
<button id="rpg-restore-default-html-prompt" class="menu_button" style="flex: 1;">
|
||
<i class="fa-solid fa-rotate-left" aria-hidden="true"></i> <span
|
||
data-i18n-key="template.settingsModal.advanced.restoreDefaultHtmlPrompt">Restore
|
||
Default</span>
|
||
</button>
|
||
</div>
|
||
<small style="display: block; margin-top: 8px; color: #888; font-size: 11px;"
|
||
data-i18n-key="template.settingsModal.advanced.customHtmlPromptNote">
|
||
Customize the HTML prompt injected when "Enable Immersive HTML" is enabled. The default prompt
|
||
is shown above - you can edit it directly or replace it entirely. Click "Restore Default" to
|
||
reset. This affects all generation modes (together, separate, and plot progression).
|
||
</small>
|
||
</div>
|
||
|
||
<!-- Clear Cache Button -->
|
||
<div style="margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rpg-border);">
|
||
<button id="rpg-clear-cache" class="rpg-btn-clear-cache">
|
||
<i class="fa-solid fa-trash" aria-hidden="true"></i> <span
|
||
data-i18n-key="template.settingsModal.advanced.clearCache">Clear Extension Cache</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Reset FAB Positions Button -->
|
||
<div style="margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rpg-border);">
|
||
<button id="rpg-reset-fab-positions" class="rpg-btn-reset-fab">
|
||
<i class="fa-solid fa-arrows-rotate" aria-hidden="true"></i> <span
|
||
data-i18n-key="template.settingsModal.advanced.resetFabPositions">Reset Button
|
||
Positions</span>
|
||
</button>
|
||
<small style="display: block; margin-top: 8px; color: #888; font-size: 11px;"
|
||
data-i18n-key="template.settingsModal.advanced.resetFabPositionsNote">
|
||
Resets all floating action buttons (toggle, refresh, debug) to default top-left positions.
|
||
Useful if buttons are off-screen.
|
||
</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Dice Roll Modal -->
|
||
<div id="rpg-dice-popup" class="rpg-dice-popup" role="dialog" aria-modal="true" aria-labelledby="rpg-dice-title">
|
||
<div class="rpg-dice-popup-content">
|
||
<header class="rpg-dice-popup-header">
|
||
<h3 id="rpg-dice-title">
|
||
<i class="fa-solid fa-dice-d20" aria-hidden="true"></i>
|
||
<span>Roll Dice</span>
|
||
</h3>
|
||
<button id="rpg-dice-popup-close" class="rpg-btn-icon" type="button" aria-label="Close dialog">
|
||
<i class="fa-solid fa-times" aria-hidden="true"></i>
|
||
</button>
|
||
</header>
|
||
|
||
<div class="rpg-dice-popup-body">
|
||
<div class="rpg-dice-selector-container">
|
||
<div class="rpg-dice-selector">
|
||
<div class="rpg-dice-input-group">
|
||
<label for="rpg-dice-count">Number of Dice:</label>
|
||
<input type="number" id="rpg-dice-count" name="dice-count" min="1" max="20" value="1"
|
||
class="rpg-input" />
|
||
</div>
|
||
<div class="rpg-dice-input-group">
|
||
<label for="rpg-dice-sides">Dice Type:</label>
|
||
<select id="rpg-dice-sides" name="dice-sides" class="rpg-select">
|
||
<option value="4">d4</option>
|
||
<option value="6">d6</option>
|
||
<option value="8">d8</option>
|
||
<option value="10">d10</option>
|
||
<option value="12">d12</option>
|
||
<option value="20" selected>d20</option>
|
||
<option value="100">d100</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<button id="rpg-dice-roll-btn" class="rpg-btn-primary" type="button">
|
||
<i class="fa-solid fa-dice" aria-hidden="true"></i>
|
||
<span>Roll Dice</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div id="rpg-dice-animation" class="rpg-dice-animation" hidden aria-live="polite" aria-busy="true">
|
||
<div class="rpg-dice-rolling">
|
||
<i class="fa-solid fa-dice-d20 fa-spin" aria-hidden="true"></i>
|
||
</div>
|
||
<div class="rpg-dice-rolling-text">Rolling...</div>
|
||
</div>
|
||
|
||
<div id="rpg-dice-result" class="rpg-dice-result" hidden aria-live="polite">
|
||
<div class="rpg-dice-result-label">Result:</div>
|
||
<output id="rpg-dice-result-value" class="rpg-dice-result-value"
|
||
for="rpg-dice-count rpg-dice-sides">0</output>
|
||
<div id="rpg-dice-result-details" class="rpg-dice-result-details" role="status"></div>
|
||
<button id="rpg-dice-save-btn" class="rpg-btn-primary rpg-dice-save-btn" type="button">
|
||
<i class="fa-solid fa-check" aria-hidden="true"></i>
|
||
<span>Save Roll</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tracker Editor Modal -->
|
||
<div id="rpg-tracker-editor-popup" class="rpg-settings-popup" role="dialog" aria-modal="true"
|
||
aria-labelledby="rpg-editor-title" style="display: none;">
|
||
<div class="rpg-settings-popup-content">
|
||
<header class="rpg-settings-popup-header">
|
||
<h3 id="rpg-editor-title">
|
||
<i class="fa-solid fa-sliders" aria-hidden="true"></i>
|
||
<span data-i18n-key="template.trackerEditorModal.title">Edit Trackers</span>
|
||
</h3>
|
||
<button id="rpg-close-tracker-editor" class="rpg-popup-close" type="button"
|
||
aria-label="Close tracker editor">×</button>
|
||
</header>
|
||
|
||
<!-- Tabs -->
|
||
<div class="rpg-editor-tabs">
|
||
<button class="rpg-editor-tab active" data-tab="userStats">
|
||
<i class="fa-solid fa-heart-pulse"></i> <span
|
||
data-i18n-key="template.trackerEditorModal.tabs.userStats">User Stats</span>
|
||
</button>
|
||
<button class="rpg-editor-tab" data-tab="infoBox">
|
||
<i class="fa-solid fa-info-circle"></i> <span
|
||
data-i18n-key="template.trackerEditorModal.tabs.infoBox">Info Box</span>
|
||
</button>
|
||
<button class="rpg-editor-tab" data-tab="presentCharacters">
|
||
<i class="fa-solid fa-users"></i> <span
|
||
data-i18n-key="template.trackerEditorModal.tabs.presentCharacters">Present Characters</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="rpg-settings-popup-body">
|
||
<!-- Tab contents will be rendered by JavaScript -->
|
||
<div id="rpg-editor-tab-userStats" class="rpg-editor-tab-content"></div>
|
||
<div id="rpg-editor-tab-infoBox" class="rpg-editor-tab-content" style="display: none;"></div>
|
||
<div id="rpg-editor-tab-presentCharacters" class="rpg-editor-tab-content" style="display: none;"></div>
|
||
</div>
|
||
|
||
<footer class="rpg-settings-popup-footer">
|
||
<button id="rpg-editor-reset" class="rpg-btn-secondary" type="button">
|
||
<i class="fa-solid fa-rotate-left"></i> <span
|
||
data-i18n-key="template.trackerEditorModal.buttons.reset">Reset to Defaults</span>
|
||
</button>
|
||
<div class="rpg-footer-right">
|
||
<button id="rpg-editor-cancel" class="rpg-btn-secondary" type="button"
|
||
data-i18n-key="template.trackerEditorModal.buttons.cancel">Cancel</button>
|
||
<button id="rpg-editor-save" class="rpg-btn-primary" type="button">
|
||
<i class="fa-solid fa-save"></i> <span data-i18n-key="template.trackerEditorModal.buttons.save">Save
|
||
& Apply</span>
|
||
</button>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
</div> |