Spicy_Marinara
3caa74fbf8
- Add pre-encounter narrative configuration modal with combat/summary style settings - Change POV fields to text inputs (default: narrator) for custom character names - Fix targeting system for enemies with spaces in names (e.g., 'Gilded Thrall 1') - Display character-specific sprites/avatars in targeting modal instead of generic emojis - Add combat difficulty scaling guidance to prevent trivial god defeats or endless wolf battles - Integrate tracker updates in combat summary generation (together mode) - Update auto-save logs description to clarify file storage vs chat history - Apply extension theming to Close Combat Window button
495 lines
31 KiB
HTML
495 lines
31 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>
|
||
</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>
|
||
|
||
<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>
|