jakstein
1302 lines
82 KiB
HTML
1302 lines
82 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" data-i18n-title="global.collapseExpandPanel">
|
||
<i class="fa-solid fa-chevron-right"></i>
|
||
</button>
|
||
|
||
<!-- Strip Widget Container (shown when collapsed with strip widgets enabled) -->
|
||
<div id="rpg-strip-widget-container" class="rpg-strip-widget-container">
|
||
<!-- Weather Icon Widget -->
|
||
<div class="rpg-strip-widget rpg-strip-widget-weather" data-widget="weatherIcon">
|
||
<span class="rpg-strip-widget-icon"></span>
|
||
<span class="rpg-strip-widget-desc"></span>
|
||
</div>
|
||
<!-- Clock Widget with animated face -->
|
||
<div class="rpg-strip-widget rpg-strip-widget-clock" data-widget="clock">
|
||
<div class="rpg-strip-clock-face">
|
||
<div class="rpg-strip-clock-hour"></div>
|
||
<div class="rpg-strip-clock-minute"></div>
|
||
<div class="rpg-strip-clock-center"></div>
|
||
</div>
|
||
<span class="rpg-strip-widget-value"></span>
|
||
</div>
|
||
<!-- Date Widget -->
|
||
<div class="rpg-strip-widget rpg-strip-widget-date" data-widget="date">
|
||
<i class="fa-solid fa-calendar"></i>
|
||
<span class="rpg-strip-widget-value"></span>
|
||
</div>
|
||
<!-- Location Widget -->
|
||
<div class="rpg-strip-widget rpg-strip-widget-location" data-widget="location">
|
||
<i class="fa-solid fa-location-dot"></i>
|
||
<span class="rpg-strip-widget-value"></span>
|
||
</div>
|
||
<!-- Stats Widget -->
|
||
<div class="rpg-strip-widget rpg-strip-widget-stats" data-widget="stats">
|
||
<div class="rpg-strip-stats-list"></div>
|
||
</div>
|
||
<!-- Attributes Widget -->
|
||
<div class="rpg-strip-widget rpg-strip-widget-attributes" data-widget="attributes">
|
||
<div class="rpg-strip-attributes-grid"></div>
|
||
</div>
|
||
<!-- Refresh Button (bottom) -->
|
||
<button id="rpg-strip-refresh" class="rpg-strip-refresh-btn" title="Refresh RPG Info" data-i18n-title="global.refreshRpgInfo">
|
||
<i class="fa-solid fa-sync"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 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 id="rpg-panel-title" 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>
|
||
|
||
<!-- Divider after Quests -->
|
||
<div id="rpg-divider-quests" class="rpg-divider"></div>
|
||
|
||
<!-- Music Player Section -->
|
||
<div id="rpg-music-player" class="rpg-section rpg-music-section">
|
||
<!-- Content will be populated by JavaScript -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Feature Toggles Row -->
|
||
<div class="rpg-features-row" id="rpg-features-row">
|
||
<!-- HTML Prompt Toggle -->
|
||
<div class="rpg-toggle-container rpg-feature-col" id="rpg-html-toggle-wrapper">
|
||
<label class="rpg-toggle-label" title="Immersive HTML" data-i18n-title="template.mainPanel.immersiveHtml">
|
||
<input type="checkbox" id="rpg-toggle-html-prompt">
|
||
<i class="fa-solid fa-code"></i>
|
||
<span class="rpg-toggle-text" data-i18n-key="template.mainPanel.immersiveHtml">Immersive HTML</span>
|
||
</label>
|
||
</div>
|
||
|
||
<!-- Dialogue Coloring Toggle -->
|
||
<div class="rpg-toggle-container rpg-feature-col" id="rpg-dialogue-coloring-toggle-wrapper">
|
||
<label class="rpg-toggle-label" title="Colored Dialogues" data-i18n-title="template.mainPanel.coloredDialogues">
|
||
<input type="checkbox" id="rpg-toggle-dialogue-coloring">
|
||
<i class="fa-solid fa-palette"></i>
|
||
<span class="rpg-toggle-text" data-i18n-key="template.mainPanel.coloredDialogues">Colored Dialogues</span>
|
||
</label>
|
||
</div>
|
||
|
||
<!-- Deception System Toggle -->
|
||
<div class="rpg-toggle-container rpg-feature-col" id="rpg-deception-toggle-wrapper">
|
||
<label class="rpg-toggle-label" title="Deception System" data-i18n-title="template.mainPanel.deceptionSystem">
|
||
<input type="checkbox" id="rpg-toggle-deception">
|
||
<i class="fa-solid fa-masks-theater"></i>
|
||
<span class="rpg-toggle-text" data-i18n-key="template.mainPanel.deceptionSystem">Deception System</span>
|
||
</label>
|
||
</div>
|
||
|
||
<!-- Omniscience Filter Toggle -->
|
||
<div class="rpg-toggle-container rpg-feature-col" id="rpg-omniscience-toggle-wrapper">
|
||
<label class="rpg-toggle-label" title="Omniscience Filter" data-i18n-title="template.mainPanel.omniscienceFilter">
|
||
<input type="checkbox" id="rpg-toggle-omniscience">
|
||
<i class="fa-solid fa-eye-slash"></i>
|
||
<span class="rpg-toggle-text" data-i18n-key="template.mainPanel.omniscienceFilter">Omniscience Filter</span>
|
||
</label>
|
||
</div>
|
||
|
||
<!-- CYOA Toggle -->
|
||
<div class="rpg-toggle-container rpg-feature-col" id="rpg-cyoa-toggle-wrapper">
|
||
<label class="rpg-toggle-label" title="CYOA" data-i18n-title="template.mainPanel.cyoa">
|
||
<input type="checkbox" id="rpg-toggle-cyoa">
|
||
<i class="fa-solid fa-list-ol"></i>
|
||
<span class="rpg-toggle-text" data-i18n-key="template.mainPanel.cyoa">CYOA</span>
|
||
</label>
|
||
</div>
|
||
|
||
<!-- Spotify Music Toggle -->
|
||
<div class="rpg-toggle-container rpg-feature-col" id="rpg-spotify-toggle-wrapper">
|
||
<label class="rpg-toggle-label" title="Spotify Music" data-i18n-title="template.mainPanel.spotifyMusic">
|
||
<input type="checkbox" id="rpg-toggle-spotify-music">
|
||
<i class="fa-brands fa-spotify"></i>
|
||
<span class="rpg-toggle-text" data-i18n-key="template.mainPanel.spotifyMusic">Spotify Music</span>
|
||
</label>
|
||
</div>
|
||
|
||
<!-- Dynamic Weather Toggle -->
|
||
<div class="rpg-toggle-container rpg-feature-col" id="rpg-dynamic-weather-toggle-wrapper">
|
||
<label class="rpg-toggle-label" title="Dynamic Weather Effects" data-i18n-title="template.mainPanel.dynamicWeatherEffects">
|
||
<input type="checkbox" id="rpg-toggle-dynamic-weather">
|
||
<i class="fa-solid fa-cloud-sun-rain"></i>
|
||
<span class="rpg-toggle-text" data-i18n-key="template.mainPanel.dynamicWeatherEffects">Dynamic Weather</span>
|
||
</label>
|
||
</div>
|
||
<!-- Narrator Mode Toggle -->
|
||
<div class="rpg-toggle-container rpg-feature-col" id="rpg-narrator-toggle-wrapper">
|
||
<label class="rpg-toggle-label" title="Narrator Mode" data-i18n-title="template.mainPanel.narratorMode">
|
||
<input type="checkbox" id="rpg-toggle-narrator">
|
||
<i class="fa-solid fa-book-open"></i>
|
||
<span class="rpg-toggle-text" data-i18n-key="template.mainPanel.narratorMode">Narrator Mode</span>
|
||
</label>
|
||
</div>
|
||
<!-- Auto-generate Avatars Toggle -->
|
||
<div class="rpg-toggle-container rpg-feature-col" id="rpg-auto-avatars-toggle-wrapper">
|
||
<label class="rpg-toggle-label" title="Auto-generate Avatars" data-i18n-title="template.mainPanel.autoAvatars">
|
||
<input type="checkbox" id="rpg-toggle-auto-avatars-panel">
|
||
<i class="fa-solid fa-user-plus"></i>
|
||
<span class="rpg-toggle-text" data-i18n-key="template.mainPanel.autoAvatars">Auto Avatars</span>
|
||
</label>
|
||
</div> </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>
|
||
<div style="display: flex; gap: 8px; align-items: center;">
|
||
<input type="color" id="rpg-custom-bg" value="#1a1a2e" style="width: 60px;" />
|
||
<input type="range" id="rpg-custom-bg-opacity" min="0" max="100" value="100" style="flex: 1;" />
|
||
<span id="rpg-custom-bg-opacity-value" style="min-width: 35px; text-align: right;">100%</span>
|
||
</div>
|
||
</div>
|
||
<div class="rpg-setting-row">
|
||
<label for="rpg-custom-accent"
|
||
data-i18n-key="template.settingsModal.themeOptions.custom.accent">Accent:</label>
|
||
<div style="display: flex; gap: 8px; align-items: center;">
|
||
<input type="color" id="rpg-custom-accent" value="#16213e" style="width: 60px;" />
|
||
<input type="range" id="rpg-custom-accent-opacity" min="0" max="100" value="100" style="flex: 1;" />
|
||
<span id="rpg-custom-accent-opacity-value" style="min-width: 35px; text-align: right;">100%</span>
|
||
</div>
|
||
</div>
|
||
<div class="rpg-setting-row">
|
||
<label for="rpg-custom-text"
|
||
data-i18n-key="template.settingsModal.themeOptions.custom.text">Text:</label>
|
||
<div style="display: flex; gap: 8px; align-items: center;">
|
||
<input type="color" id="rpg-custom-text" value="#eaeaea" style="width: 60px;" />
|
||
<input type="range" id="rpg-custom-text-opacity" min="0" max="100" value="100" style="flex: 1;" />
|
||
<span id="rpg-custom-text-opacity-value" style="min-width: 35px; text-align: right;">100%</span>
|
||
</div>
|
||
</div>
|
||
<div class="rpg-setting-row">
|
||
<label for="rpg-custom-highlight"
|
||
data-i18n-key="template.settingsModal.themeOptions.custom.highlight">Highlight:</label>
|
||
<div style="display: flex; gap: 8px; align-items: center;">
|
||
<input type="color" id="rpg-custom-highlight" value="#e94560" style="width: 60px;" />
|
||
<input type="range" id="rpg-custom-highlight-opacity" min="0" max="100" value="100" style="flex: 1;" />
|
||
<span id="rpg-custom-highlight-opacity-value" style="min-width: 35px; text-align: right;">100%</span>
|
||
</div>
|
||
</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>
|
||
<div style="display: flex; gap: 8px; align-items: center;">
|
||
<input type="color" id="rpg-stat-bar-color-low" value="#cc3333" style="width: 60px;" />
|
||
<input type="range" id="rpg-stat-bar-color-low-opacity" min="0" max="100" value="100" style="flex: 1;" />
|
||
<span id="rpg-stat-bar-color-low-opacity-value" style="min-width: 35px; text-align: right;">100%</span>
|
||
</div>
|
||
<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>
|
||
<div style="display: flex; gap: 8px; align-items: center;">
|
||
<input type="color" id="rpg-stat-bar-color-high" value="#33cc66" style="width: 60px;" />
|
||
<input type="range" id="rpg-stat-bar-color-high-opacity" min="0" max="100" value="100" style="flex: 1;" />
|
||
<span id="rpg-stat-bar-color-high-opacity-value" style="min-width: 35px; text-align: right;">100%</span>
|
||
</div>
|
||
<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 entirely
|
||
</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-user-stats" />
|
||
<span data-i18n-key="template.settingsModal.display.showUserStats">Show User Stats</span>
|
||
</label>
|
||
<small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;"
|
||
data-i18n-key="template.settingsModal.display.showUserStatsNote">
|
||
Enable User Stats that track your persona's statistics, mood, attributes, skills, etc.
|
||
</small>
|
||
|
||
<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>
|
||
<small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;"
|
||
data-i18n-key="template.settingsModal.display.showInfoBoxNote">
|
||
Display location, time, weather, and recent events.
|
||
</small>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-thoughts" />
|
||
<span data-i18n-key="template.settingsModal.display.showPresentCharacters">Show Present
|
||
Characters</span>
|
||
</label>
|
||
<small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;"
|
||
data-i18n-key="template.settingsModal.display.showPresentCharactersNote">
|
||
Display character portraits with their current thoughts and status.
|
||
</small>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-thoughts-in-chat" />
|
||
<span data-i18n-key="template.settingsModal.display.showThoughtsInChat">Show Thoughts</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-inventory" />
|
||
<span data-i18n-key="template.settingsModal.display.showInventory">Show Inventory</span>
|
||
</label>
|
||
<small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;"
|
||
data-i18n-key="template.settingsModal.display.showInventoryNote">
|
||
Track items carried, clothing worn, stored items, and assets.
|
||
</small>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-quests" />
|
||
<span data-i18n-key="template.settingsModal.display.showQuests">Show Quests</span>
|
||
</label>
|
||
<small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;"
|
||
data-i18n-key="template.settingsModal.display.showQuestsNote">
|
||
Manage main and optional quests with objectives.
|
||
</small>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-lock-icons" />
|
||
<span data-i18n-key="template.settingsModal.display.showLockIcons">Show Locking/Unlocking Trackers</span>
|
||
</label>
|
||
<small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;"
|
||
data-i18n-key="template.settingsModal.display.showLockIconsNote">
|
||
Display lock/unlock icons on tracker items to prevent AI from modifying them.
|
||
</small>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-show-html-toggle" />
|
||
<span data-i18n-key="template.settingsModal.display.showImmersiveHtmlToggle">Show Immersive HTML</span>
|
||
</label>
|
||
<small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;"
|
||
data-i18n-key="template.settingsModal.display.showImmersiveHtmlToggleNote">
|
||
Display a toggle button to enable/disable HTML formatting in messages.
|
||
</small>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-show-dialogue-coloring-toggle" />
|
||
<span data-i18n-key="template.settingsModal.display.showDialogueColoringToggle">Show Colored Dialogues</span>
|
||
</label>
|
||
<small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;"
|
||
data-i18n-key="template.settingsModal.display.showDialogueColoringToggleNote">
|
||
Display a toggle button to enable/disable colored dialogue formatting.
|
||
</small>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-show-deception-toggle" />
|
||
<span data-i18n-key="template.settingsModal.display.showDeceptionToggle">Show Deception System</span>
|
||
</label>
|
||
<small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;"
|
||
data-i18n-key="template.settingsModal.display.showDeceptionToggleNote">
|
||
Display a toggle button to enable/disable special formatting of lies and deceptions crafted by the model, allowing it to easily track whenever one was committed, without showing it to the user.
|
||
</small>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-show-omniscience-toggle" />
|
||
<span data-i18n-key="template.settingsModal.display.showOmniscienceToggle">Show Omniscience Filter</span>
|
||
</label>
|
||
<small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;"
|
||
data-i18n-key="template.settingsModal.display.showOmniscienceToggleNote">
|
||
Display a toggle button to enable/disable the omniscience filter, which instructs the AI to hide information the player character cannot perceive (events behind them, in other rooms, etc.) in special tags.
|
||
</small>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-show-cyoa-toggle" />
|
||
<span data-i18n-key="template.settingsModal.display.showCYOAToggle">Show CYOA</span>
|
||
</label>
|
||
<small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;"
|
||
data-i18n-key="template.settingsModal.display.showCYOAToggleNote">
|
||
Display a toggle button to enable/disable "Choose Your Own Adventure" formatting instruction that makes the model produce five possible actions/dialogues for you to choose from at the end of the output.
|
||
</small>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-show-spotify-toggle" />
|
||
<span data-i18n-key="template.settingsModal.display.showSpotifyMusicToggle">Show Spotify Music</span>
|
||
</label>
|
||
<small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;"
|
||
data-i18n-key="template.settingsModal.display.showSpotifyMusicToggleNote">
|
||
Display Spotify music player with AI-suggested scene-appropriate tracks.
|
||
</small>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-show-dynamic-weather-toggle" />
|
||
<span data-i18n-key="template.settingsModal.display.showDynamicWeatherToggle">Show Dynamic Weather Effects</span>
|
||
</label>
|
||
<small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;"
|
||
data-i18n-key="template.settingsModal.display.showDynamicWeatherToggleNote">
|
||
Display a toggle button to enable/disable animated weather effects.
|
||
</small>
|
||
|
||
<!-- Weather sub-options (shown when dynamic weather is enabled) -->
|
||
<div id="rpg-weather-suboptions" style="margin-left: 24px; margin-top: 8px;">
|
||
<label class="checkbox_label">
|
||
<input type="radio" name="rpg-weather-position" id="rpg-toggle-weather-background" />
|
||
<span data-i18n-key="template.settingsModal.display.weatherPosition.background">Show in Background</span>
|
||
</label>
|
||
<small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;"
|
||
data-i18n-key="template.settingsModal.display.weatherPosition.backgroundNote">
|
||
Display weather effects behind the chat (standard behavior).
|
||
</small>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="radio" name="rpg-weather-position" id="rpg-toggle-weather-foreground" />
|
||
<span data-i18n-key="template.settingsModal.display.weatherPosition.foreground">Show in Foreground</span>
|
||
</label>
|
||
<small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;"
|
||
data-i18n-key="template.settingsModal.display.weatherPosition.foregroundNote">
|
||
Display weather effects in front of the chat (experimental).
|
||
</small>
|
||
</div>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-show-narrator-mode" />
|
||
<span data-i18n-key="template.settingsModal.display.showNarratorMode">Show 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.showNarratorModeNote">
|
||
Display a toggle button to enable/disable narrator mode (infer characters from context).
|
||
</small>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-show-auto-avatars" />
|
||
<span data-i18n-key="template.settingsModal.display.showAutoAvatars">Show Auto-generate Avatars</span>
|
||
</label>
|
||
<small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;"
|
||
data-i18n-key="template.settingsModal.display.showAutoAvatarsNote">
|
||
Display a toggle button to automatically generate avatars for characters without images.
|
||
</small>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-randomized-plot" />
|
||
<span data-i18n-key="template.settingsModal.display.showRandomizedPlot">Show Randomized Plot Progression</span>
|
||
</label>
|
||
<small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;"
|
||
data-i18n-key="template.settingsModal.display.showRandomizedPlotNote">
|
||
Display button for AI-generated random plot progression prompts.
|
||
</small>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-natural-plot" />
|
||
<span data-i18n-key="template.settingsModal.display.showNaturalPlot">Show Natural Plot Progression</span>
|
||
</label>
|
||
<small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;"
|
||
data-i18n-key="template.settingsModal.display.showNaturalPlotNote">
|
||
Display button for context-aware narrative continuation prompts.
|
||
</small>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-encounters" />
|
||
<span data-i18n-key="template.settingsModal.display.showStartEncounter">Show Start Encounter</span>
|
||
</label>
|
||
<small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;"
|
||
data-i18n-key="template.settingsModal.display.showStartEncounterNote">
|
||
Display button to initiate interactive combat encounters.
|
||
</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>
|
||
|
||
</div>
|
||
|
||
<!-- Mobile FAB Options Section -->
|
||
<div class="rpg-settings-group">
|
||
<h4 data-i18n-key="template.settingsModal.mobileFabTitle">Mobile Button Widgets</h4>
|
||
<small class="notes" style="display: block; margin-bottom: 10px;"
|
||
data-i18n-key="template.settingsModal.mobileFabNote">
|
||
Show compact info widgets around the floating button on mobile. Widgets are positioned automatically.
|
||
</small>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-fab-widgets-enabled" />
|
||
<span data-i18n-key="template.settingsModal.mobileFab.enabled">Enable Floating Mobile Widgets</span>
|
||
</label>
|
||
<small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;"
|
||
data-i18n-key="template.settingsModal.mobileFab.enabledNote">
|
||
Master toggle to show info widgets around the mobile floating button.
|
||
</small>
|
||
|
||
<div id="rpg-fab-widget-options" style="margin-left: 10px; border-left: 2px solid var(--SmartThemeBorderColor); padding-left: 10px; margin-top: 8px;">
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-fab-weather-icon" />
|
||
<span data-i18n-key="template.settingsModal.mobileFab.weatherIcon">Weather Icon</span>
|
||
</label>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-fab-weather-desc" />
|
||
<span data-i18n-key="template.settingsModal.mobileFab.weatherDesc">Weather Description</span>
|
||
</label>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-fab-clock" />
|
||
<span data-i18n-key="template.settingsModal.mobileFab.clock">Time/Clock</span>
|
||
</label>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-fab-date" />
|
||
<span data-i18n-key="template.settingsModal.mobileFab.date">Date</span>
|
||
</label>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-fab-location" />
|
||
<span data-i18n-key="template.settingsModal.mobileFab.location">Location</span>
|
||
</label>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-fab-stats" />
|
||
<span data-i18n-key="template.settingsModal.mobileFab.stats">Stats (Health, Energy, etc.)</span>
|
||
</label>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-fab-attributes" />
|
||
<span data-i18n-key="template.settingsModal.mobileFab.attributes">RPG Attributes (STR, DEX, etc.)</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Desktop Strip Widgets Section -->
|
||
<div class="rpg-settings-group">
|
||
<h4 data-i18n-key="template.settingsModal.desktopStripTitle">Desktop Collapsed Strip Widgets</h4>
|
||
<small class="notes" style="display: block; margin-bottom: 10px;"
|
||
data-i18n-key="template.settingsModal.desktopStripNote">
|
||
Show compact info widgets in the collapsed panel strip on desktop. Displays stats vertically without needing to expand the panel.
|
||
</small>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-strip-widgets-enabled" />
|
||
<span data-i18n-key="template.settingsModal.desktopStrip.enabled">Enable Strip Widgets</span>
|
||
</label>
|
||
<small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;"
|
||
data-i18n-key="template.settingsModal.desktopStrip.enabledNote">
|
||
Shows widgets in the collapsed panel strip for quick access to stats.
|
||
</small>
|
||
|
||
<div id="rpg-strip-widget-options" style="margin-left: 10px; border-left: 2px solid var(--SmartThemeBorderColor); padding-left: 10px; margin-top: 8px; display: none;">
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-strip-weather-icon" />
|
||
<span data-i18n-key="template.settingsModal.desktopStrip.weatherIcon">Weather Icon</span>
|
||
</label>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-strip-clock" />
|
||
<span data-i18n-key="template.settingsModal.desktopStrip.clock">Time/Clock</span>
|
||
</label>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-strip-date" />
|
||
<span data-i18n-key="template.settingsModal.desktopStrip.date">Date</span>
|
||
</label>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-strip-location" />
|
||
<span data-i18n-key="template.settingsModal.desktopStrip.location">Location</span>
|
||
</label>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-strip-stats" />
|
||
<span data-i18n-key="template.settingsModal.desktopStrip.stats">Stats (Health, Energy, etc.)</span>
|
||
</label>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-strip-attributes" />
|
||
<span data-i18n-key="template.settingsModal.desktopStrip.attributes">RPG Attributes (STR, DEX, etc.)</span>
|
||
</label>
|
||
</div>
|
||
</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" data-i18n-title="global.showHideApiKey" 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 id="rpg-separate-mode-settings">
|
||
<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/External mode)</small>
|
||
</div>
|
||
</div>
|
||
|
||
<label class="checkbox_label" id="rpg-auto-update-container" style="margin-top: 16px;">
|
||
<input type="checkbox" id="rpg-toggle-auto-update" />
|
||
<span data-i18n-key="template.settingsModal.display.toggleAutoUpdate">Auto-update after
|
||
messages</span>
|
||
</label>
|
||
<small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;"
|
||
data-i18n-key="template.settingsModal.display.toggleAutoUpdateNote">
|
||
Automatically refresh RPG info after each message.
|
||
</small>
|
||
|
||
<div class="rpg-setting-row" style="margin-top: 16px;">
|
||
<label for="rpg-encounter-history-depth" data-i18n-key="template.settingsModal.advanced.encounterHistoryDepth">Chat History Depth For Encounters:</label>
|
||
<input type="number" id="rpg-encounter-history-depth" min="1" max="20" value="8"
|
||
class="rpg-input" />
|
||
<small data-i18n-key="template.settingsModal.advanced.encounterHistoryDepthNote">Number of recent messages to include in combat initialization.</small>
|
||
</div>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-autosave-logs" />
|
||
<span data-i18n-key="template.settingsModal.advanced.autoSaveCombatLogs">Auto-save Combat Logs</span>
|
||
</label>
|
||
<small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;"
|
||
data-i18n-key="template.settingsModal.advanced.autoSaveCombatLogsNote">
|
||
Save detailed combat logs to file for future reference and analysis.
|
||
</small>
|
||
|
||
<div class="rpg-setting-row" style="margin-top: 16px;">
|
||
<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>
|
||
|
||
<!-- Customize Prompts Button -->
|
||
<div style="margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rpg-border);">
|
||
<button id="rpg-open-prompts-editor" class="rpg-btn-customize-prompts">
|
||
<i class="fa-solid fa-file-lines" aria-hidden="true"></i> <span data-i18n-key="template.promptsEditor.button">Customize Prompts</span>
|
||
</button>
|
||
<small style="display: block; margin-top: 8px; color: #888; font-size: 11px;"
|
||
data-i18n-key="template.promptsEditor.buttonNote">
|
||
Edit all AI prompts used for generation, plot progression, and combat encounters.
|
||
</small>
|
||
</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) to default top-left positions.
|
||
Useful if buttons are off-screen.
|
||
</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>
|
||
<small style="display: block; margin-top: 8px; color: #888; font-size: 11px;"
|
||
data-i18n-key="template.settingsModal.advanced.clearCacheNote">
|
||
Clears committed and displayed tracker data for your currently active chat.
|
||
</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 data-i18n-key="dice.title">Roll Dice</span>
|
||
</h3>
|
||
<button id="rpg-dice-popup-close" class="rpg-btn-icon" type="button" aria-label="Close dialog" data-i18n-aria-label="global.closeDialog">
|
||
<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" data-i18n-key="dice.numberOfDice">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" data-i18n-key="dice.diceType">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 data-i18n-key="dice.title">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" data-i18n-key="dice.rolling">Rolling...</div>
|
||
</div>
|
||
|
||
<div id="rpg-dice-result" class="rpg-dice-result" hidden aria-live="polite">
|
||
<div class="rpg-dice-result-label" data-i18n-key="dice.result">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 data-i18n-key="dice.saveRoll">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>
|
||
|
||
<!-- Preset Management Section -->
|
||
<div class="rpg-preset-management">
|
||
<div class="rpg-preset-row">
|
||
<label for="rpg-preset-select" data-i18n-key="preset.label">Preset:</label>
|
||
<select id="rpg-preset-select" class="rpg-select">
|
||
<!-- Options populated by JavaScript -->
|
||
</select>
|
||
<button id="rpg-preset-new" class="rpg-btn-icon" type="button" title="Create New Preset" data-i18n-title="preset.createNewPresetTitle">
|
||
<i class="fa-solid fa-plus"></i>
|
||
</button>
|
||
<button id="rpg-preset-default" class="rpg-btn-icon" type="button" title="Set as Default Preset" data-i18n-title="preset.setDefaultPresetTitle">
|
||
<i class="fa-solid fa-star"></i>
|
||
</button>
|
||
<button id="rpg-preset-delete" class="rpg-btn-icon" type="button" title="Delete Current Preset" data-i18n-title="preset.deleteCurrentPresetTitle">
|
||
<i class="fa-solid fa-trash"></i>
|
||
</button>
|
||
</div>
|
||
<div class="rpg-preset-association-row">
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-preset-associate">
|
||
<span data-i18n-key="preset.useThisPresetFor">Use this preset for: </span><strong id="rpg-preset-entity-name">Character</strong>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 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>
|
||
<button class="rpg-editor-tab" data-tab="historyPersistence">
|
||
<i class="fa-solid fa-clock-rotate-left"></i> <span
|
||
data-i18n-key="template.trackerEditorModal.tabs.historyPersistence">History Persistence</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 id="rpg-editor-tab-historyPersistence" class="rpg-editor-tab-content" style="display: none;"></div>
|
||
</div>
|
||
|
||
<footer class="rpg-settings-popup-footer">
|
||
<div class="rpg-editor-footer-buttons">
|
||
<div class="rpg-editor-footer-row">
|
||
<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</span>
|
||
</button>
|
||
<button id="rpg-editor-export" class="rpg-btn-secondary" type="button">
|
||
<i class="fa-solid fa-file-export"></i> <span
|
||
data-i18n-key="template.trackerEditorModal.buttons.export">Export</span>
|
||
</button>
|
||
<button id="rpg-editor-import" class="rpg-btn-secondary" type="button">
|
||
<i class="fa-solid fa-file-import"></i> <span
|
||
data-i18n-key="template.trackerEditorModal.buttons.import">Import</span>
|
||
</button>
|
||
</div>
|
||
<div class="rpg-editor-footer-row">
|
||
<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>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
</div>
|
||
<!-- Prompts Editor Modal -->
|
||
<div id="rpg-prompts-editor-popup" class="rpg-settings-popup" role="dialog" aria-modal="true"
|
||
aria-labelledby="rpg-prompts-editor-title" style="display: none;">
|
||
<div class="rpg-settings-popup-content">
|
||
<header class="rpg-settings-popup-header">
|
||
<h3 id="rpg-prompts-editor-title">
|
||
<i class="fa-solid fa-file-lines" aria-hidden="true"></i>
|
||
<span data-i18n-key="template.promptsEditor.title">Customize Prompts</span>
|
||
</h3>
|
||
<button id="rpg-close-prompts-editor" class="rpg-popup-close" type="button"
|
||
aria-label="Close prompts editor">×</button>
|
||
</header>
|
||
|
||
<div class="rpg-settings-popup-body">
|
||
<small class="notes" style="display: block; margin-bottom: 16px;"
|
||
data-i18n-key="template.promptsEditor.description">
|
||
Customize the AI prompts used throughout the extension. Leave fields empty to use defaults.
|
||
</small>
|
||
|
||
<!-- HTML Prompt -->
|
||
<div class="rpg-prompt-editor-section">
|
||
<label for="rpg-prompt-html" style="display: block; margin-bottom: 8px; font-weight: 600;">
|
||
<i class="fa-solid fa-code"></i> <span data-i18n-key="template.promptsEditor.htmlPrompt.title">HTML Prompt</span>
|
||
</label>
|
||
<small style="display: block; margin-bottom: 8px; color: #888; font-size: 11px;"
|
||
data-i18n-key="template.promptsEditor.htmlPrompt.note">
|
||
Injected when "Enable Immersive HTML" is enabled. Affects all generation modes.
|
||
</small>
|
||
<textarea id="rpg-prompt-html" class="rpg-prompt-textarea" rows="4"></textarea>
|
||
<button class="menu_button rpg-restore-prompt-btn" data-prompt="html" style="margin-top: 8px;">
|
||
<i class="fa-solid fa-rotate-left"></i> <span data-i18n-key="template.promptsEditor.restoreDefault">Restore Default</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Dialogue Coloring Prompt -->
|
||
<div class="rpg-prompt-editor-section">
|
||
<label for="rpg-prompt-dialogue-coloring" style="display: block; margin-bottom: 8px; font-weight: 600;">
|
||
<i class="fa-solid fa-palette"></i> <span data-i18n-key="template.promptsEditor.dialogueColoringPrompt.title">Dialogue Coloring Prompt</span>
|
||
</label>
|
||
<small style="display: block; margin-bottom: 8px; color: #888; font-size: 11px;"
|
||
data-i18n-key="template.promptsEditor.dialogueColoringPrompt.note">
|
||
Injected when "Enable Dialogue Coloring" is enabled. Affects all generation modes.
|
||
</small>
|
||
<textarea id="rpg-prompt-dialogue-coloring" class="rpg-prompt-textarea" rows="4"></textarea>
|
||
<button class="menu_button rpg-restore-prompt-btn" data-prompt="dialogue-coloring" style="margin-top: 8px;">
|
||
<i class="fa-solid fa-rotate-left"></i> <span data-i18n-key="template.promptsEditor.restoreDefault">Restore Default</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Deception System Prompt -->
|
||
<div class="rpg-prompt-editor-section">
|
||
<label for="rpg-prompt-deception" style="display: block; margin-bottom: 8px; font-weight: 600;">
|
||
<i class="fa-solid fa-masks-theater"></i> <span data-i18n-key="template.promptsEditor.deceptionPrompt.title">Deception System Prompt</span>
|
||
</label>
|
||
<small style="display: block; margin-bottom: 8px; color: #888; font-size: 11px;" data-i18n-key="template.promptsEditor.deceptionPrompt.note">
|
||
Injected when "Enable Deception System" is enabled. Instructs AI to mark lies and deceptions with hidden tags.
|
||
</small>
|
||
<textarea id="rpg-prompt-deception" class="rpg-prompt-textarea" rows="4"></textarea>
|
||
<button class="menu_button rpg-restore-prompt-btn" data-prompt="deception" style="margin-top: 8px;">
|
||
<i class="fa-solid fa-rotate-left"></i> <span data-i18n-key="template.promptsEditor.restoreDefault">Restore Default</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Omniscience Filter Prompt -->
|
||
<div class="rpg-prompt-editor-section">
|
||
<label for="rpg-prompt-omniscience" style="display: block; margin-bottom: 8px; font-weight: 600;">
|
||
<i class="fa-solid fa-eye-slash"></i> <span data-i18n-key="template.promptsEditor.omnisciencePrompt.title">Omniscience Filter Prompt</span>
|
||
</label>
|
||
<small style="display: block; margin-bottom: 8px; color: #888; font-size: 11px;" data-i18n-key="template.promptsEditor.omnisciencePrompt.note">
|
||
Injected when "Enable Omniscience Filter" is enabled. Instructs AI to separate information the player character cannot perceive into hidden <ofilter> tags.
|
||
</small>
|
||
<textarea id="rpg-prompt-omniscience" class="rpg-prompt-textarea" rows="6"></textarea>
|
||
<button class="menu_button rpg-restore-prompt-btn" data-prompt="omniscience" style="margin-top: 8px;">
|
||
<i class="fa-solid fa-rotate-left"></i> <span data-i18n-key="template.promptsEditor.restoreDefault">Restore Default</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- CYOA Prompt -->
|
||
<div class="rpg-prompt-editor-section">
|
||
<label for="rpg-prompt-cyoa" style="display: block; margin-bottom: 8px; font-weight: 600;">
|
||
<i class="fa-solid fa-list-ol"></i> <span data-i18n-key="template.promptsEditor.cyoaPrompt.title">CYOA Prompt</span>
|
||
</label>
|
||
<small style="display: block; margin-bottom: 8px; color: #888; font-size: 11px;" data-i18n-key="template.promptsEditor.cyoaPrompt.note">
|
||
Injected when "Enable CYOA" is enabled. Instructs AI to end responses with numbered action choices. Uses very high priority (depth 102) to ensure it's the last instruction.
|
||
</small>
|
||
<textarea id="rpg-prompt-cyoa" class="rpg-prompt-textarea" rows="4"></textarea>
|
||
<button class="menu_button rpg-restore-prompt-btn" data-prompt="cyoa" style="margin-top: 8px;">
|
||
<i class="fa-solid fa-rotate-left"></i> <span data-i18n-key="template.promptsEditor.restoreDefault">Restore Default</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Spotify Music Prompt -->
|
||
<div class="rpg-prompt-editor-section">
|
||
<label for="rpg-prompt-spotify" style="display: block; margin-bottom: 8px; font-weight: 600;">
|
||
<i class="fa-brands fa-spotify"></i> <span data-i18n-key="template.promptsEditor.spotifyPrompt.title">Spotify Music Prompt</span>
|
||
</label>
|
||
<small style="display: block; margin-bottom: 8px; color: #888; font-size: 11px;" data-i18n-key="template.promptsEditor.spotifyPrompt.note">
|
||
Injected when "Enable Spotify Music" is enabled. Asks AI to suggest appropriate music for the scene.
|
||
</small>
|
||
<textarea id="rpg-prompt-spotify" class="rpg-prompt-textarea" rows="4"></textarea>
|
||
<button class="menu_button rpg-restore-prompt-btn" data-prompt="spotify" style="margin-top: 8px;">
|
||
<i class="fa-solid fa-rotate-left"></i> <span data-i18n-key="template.promptsEditor.restoreDefault">Restore Default</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Narrator Mode Prompt -->
|
||
<div class="rpg-prompt-editor-section">
|
||
<label for="rpg-prompt-narrator" style="display: block; margin-bottom: 8px; font-weight: 600;">
|
||
<i class="fa-solid fa-book-open"></i> <span data-i18n-key="template.promptsEditor.narratorPrompt.title">Narrator Mode Prompt</span>
|
||
</label>
|
||
<small style="display: block; margin-bottom: 8px; color: #888; font-size: 11px;" data-i18n-key="template.promptsEditor.narratorPrompt.note">
|
||
Injected when "Narrator Mode" is enabled. Instructs AI to infer characters from context.
|
||
</small>
|
||
<textarea id="rpg-prompt-narrator" class="rpg-prompt-textarea" rows="3"></textarea>
|
||
<button class="menu_button rpg-restore-prompt-btn" data-prompt="narrator" style="margin-top: 8px;">
|
||
<i class="fa-solid fa-rotate-left"></i> <span data-i18n-key="template.promptsEditor.restoreDefault">Restore Default</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Context Instructions Prompt -->
|
||
<div class="rpg-prompt-editor-section">
|
||
<label for="rpg-prompt-context-instructions" style="display: block; margin-bottom: 8px; font-weight: 600;">
|
||
<i class="fa-solid fa-comment-dots"></i> <span data-i18n-key="template.promptsEditor.contextPrompt.title">Context Instructions Prompt</span>
|
||
</label>
|
||
<small style="display: block; margin-bottom: 8px; color: #888; font-size: 11px;" data-i18n-key="template.promptsEditor.contextPrompt.note">
|
||
Injected in Separate/External mode after the context summary. Tells the AI how to use the context.
|
||
</small>
|
||
<textarea id="rpg-prompt-context-instructions" class="rpg-prompt-textarea" rows="4"></textarea>
|
||
<button class="menu_button rpg-restore-prompt-btn" data-prompt="contextInstructions" style="margin-top: 8px;">
|
||
<i class="fa-solid fa-rotate-left"></i> <span data-i18n-key="template.promptsEditor.restoreDefault">Restore Default</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Random Plot Progression Prompt -->
|
||
<div class="rpg-prompt-editor-section">
|
||
<label for="rpg-prompt-plot-random" style="display: block; margin-bottom: 8px; font-weight: 600;">
|
||
<i class="fa-solid fa-dice"></i> <span data-i18n-key="template.promptsEditor.randomPlotPrompt.title">Random Plot Progression Prompt</span>
|
||
</label>
|
||
<small style="display: block; margin-bottom: 8px; color: #888; font-size: 11px;" data-i18n-key="template.promptsEditor.randomPlotPrompt.note">
|
||
Injected when the "Randomized Plot" button is clicked. Introduces random elements to the story.
|
||
</small>
|
||
<textarea id="rpg-prompt-plot-random" class="rpg-prompt-textarea" rows="6"></textarea>
|
||
<button class="menu_button rpg-restore-prompt-btn" data-prompt="plotRandom" style="margin-top: 8px;">
|
||
<i class="fa-solid fa-rotate-left"></i> <span data-i18n-key="template.promptsEditor.restoreDefault">Restore Default</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Natural Plot Progression Prompt -->
|
||
<div class="rpg-prompt-editor-section">
|
||
<label for="rpg-prompt-plot-natural" style="display: block; margin-bottom: 8px; font-weight: 600;">
|
||
<i class="fa-solid fa-forward"></i> <span data-i18n-key="template.promptsEditor.naturalPlotPrompt.title">Natural Plot Progression Prompt</span>
|
||
</label>
|
||
<small style="display: block; margin-bottom: 8px; color: #888; font-size: 11px;" data-i18n-key="template.promptsEditor.naturalPlotPrompt.note">
|
||
Injected when the "Natural Plot" button is clicked. Progresses the story naturally.
|
||
</small>
|
||
<textarea id="rpg-prompt-plot-natural" class="rpg-prompt-textarea" rows="4"></textarea>
|
||
<button class="menu_button rpg-restore-prompt-btn" data-prompt="plotNatural" style="margin-top: 8px;">
|
||
<i class="fa-solid fa-rotate-left"></i> <span data-i18n-key="template.promptsEditor.restoreDefault">Restore Default</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Avatar Generation Instruction -->
|
||
<div class="rpg-prompt-editor-section">
|
||
<label for="rpg-prompt-avatar" style="display: block; margin-bottom: 8px; font-weight: 600;">
|
||
<i class="fa-solid fa-user-circle"></i> <span data-i18n-key="template.promptsEditor.avatarPrompt.title">Avatar Generation Instruction</span>
|
||
</label>
|
||
<small style="display: block; margin-bottom: 8px; color: #888; font-size: 11px;" data-i18n-key="template.promptsEditor.avatarPrompt.note">
|
||
Instructions for LLM when generating avatar image prompts. Used by Auto-generate Missing Avatars feature.
|
||
</small>
|
||
<textarea id="rpg-prompt-avatar" class="rpg-prompt-textarea" rows="3"></textarea>
|
||
<button class="menu_button rpg-restore-prompt-btn" data-prompt="avatar" style="margin-top: 8px;">
|
||
<i class="fa-solid fa-rotate-left"></i> <span data-i18n-key="template.promptsEditor.restoreDefault">Restore Default</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Tracker Instructions -->
|
||
<div class="rpg-prompt-editor-section">
|
||
<label for="rpg-prompt-tracker-instructions" style="display: block; margin-bottom: 8px; font-weight: 600;">
|
||
<i class="fa-solid fa-list-check"></i> <span data-i18n-key="template.promptsEditor.trackerPrompt.title">Tracker Instructions</span>
|
||
</label>
|
||
<small style="display: block; margin-bottom: 8px; color: #888; font-size: 11px;" data-i18n-key="template.promptsEditor.trackerPrompt.note">
|
||
Instruction portion only (format specification is hardcoded). {userName} will be replaced with the user's name.
|
||
</small>
|
||
<textarea id="rpg-prompt-tracker-instructions" class="rpg-prompt-textarea" rows="4"></textarea>
|
||
<button class="menu_button rpg-restore-prompt-btn" data-prompt="trackerInstructions" style="margin-top: 8px;">
|
||
<i class="fa-solid fa-rotate-left"></i> <span data-i18n-key="template.promptsEditor.restoreDefault">Restore Default</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Tracker Continuation Instruction -->
|
||
<div class="rpg-prompt-editor-section">
|
||
<label for="rpg-prompt-tracker-continuation" style="display: block; margin-bottom: 8px; font-weight: 600;">
|
||
<i class="fa-solid fa-arrow-right"></i> <span data-i18n-key="template.promptsEditor.trackerContinuationPrompt.title">Tracker Continuation Instruction</span>
|
||
</label>
|
||
<small style="display: block; margin-bottom: 8px; color: #888; font-size: 11px;" data-i18n-key="template.promptsEditor.trackerContinuationPrompt.note">
|
||
Instructions added after tracker format specifications, telling the AI how to continue the narrative.
|
||
</small>
|
||
<textarea id="rpg-prompt-tracker-continuation" class="rpg-prompt-textarea" rows="4"></textarea>
|
||
<button class="menu_button rpg-restore-prompt-btn" data-prompt="trackerContinuation" style="margin-top: 8px;">
|
||
<i class="fa-solid fa-rotate-left"></i> <span data-i18n-key="template.promptsEditor.restoreDefault">Restore Default</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Combat Narrative Style Instruction -->
|
||
<div class="rpg-prompt-editor-section">
|
||
<label for="rpg-prompt-combat-narrative" style="display: block; margin-bottom: 8px; font-weight: 600;">
|
||
<i class="fa-solid fa-fire"></i> <span data-i18n-key="template.promptsEditor.combatPrompt.title">Combat Narrative Style Instruction</span>
|
||
</label>
|
||
<small style="display: block; margin-bottom: 8px; color: #888; font-size: 11px;" data-i18n-key="template.promptsEditor.combatPrompt.note">
|
||
Writing style instructions for combat encounters. Includes prose quality guidelines and anti-repetition rules. {userName} will be replaced with the user's name.
|
||
</small>
|
||
<textarea id="rpg-prompt-combat-narrative" class="rpg-prompt-textarea" rows="6"></textarea>
|
||
<button class="menu_button rpg-restore-prompt-btn" data-prompt="combatNarrative" style="margin-top: 8px;">
|
||
<i class="fa-solid fa-rotate-left"></i> <span data-i18n-key="template.promptsEditor.restoreDefault">Restore Default</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<footer class="rpg-settings-popup-footer">
|
||
<div class="rpg-footer-right">
|
||
<button id="rpg-prompts-cancel" class="rpg-btn-secondary" type="button">Cancel</button>
|
||
<button id="rpg-prompts-save" class="rpg-btn-primary" type="button">
|
||
<i class="fa-solid fa-save"></i> Save Changes
|
||
</button>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Welcome Modal for v3.0 -->
|
||
<div id="rpg-welcome-modal" class="rpg-settings-popup" role="dialog" aria-modal="true"
|
||
aria-labelledby="rpg-welcome-title" style="display: none;">
|
||
<div class="rpg-settings-popup-content" style="max-width: 600px;">
|
||
<header class="rpg-settings-popup-header">
|
||
<h3 id="rpg-welcome-title">
|
||
<i class="fa-solid fa-stars"></i>
|
||
Welcome to RPG Companion v.3.2.0!
|
||
</h3>
|
||
<button id="rpg-welcome-close" class="rpg-popup-close" type="button"
|
||
aria-label="Close Welcome">
|
||
<i class="fa-solid fa-times"></i>
|
||
</button>
|
||
</header>
|
||
<div class="rpg-settings-popup-body" style="max-height: 500px; overflow-y: auto; padding: 20px;">
|
||
<div style="background: rgba(255, 165, 0, 0.1); border-left: 3px solid orange; padding: 12px; margin-bottom: 20px;">
|
||
<strong style="color: orange;">⚠️ Important:</strong> Due to a change in the tracker format, we recommend that you use <strong>Clear Extension Cache</strong> in the Settings before you start using this version!
|
||
</div>
|
||
|
||
<h4 style="margin-top: 20px; margin-bottom: 10px;"><strong>What's new?</strong></h4>
|
||
<ul style="line-height: 1.6; margin-left: 20px;">
|
||
<li>Switched to the JSON format for the trackers.</li>
|
||
<li>You can now lock/unlock trackers that you don't want the model to change between generations.</li>
|
||
<li>Removed features that were half-baked or didn't work.</li>
|
||
<li>Organized Settings and Edit Trackers windows.</li>
|
||
<li>All features of the extension are now accessible from the main panel view.</li>
|
||
<li>Added Colored Dialogues option that makes the model color dialogue lines differently depending on the speaker.</li>
|
||
<li>Introduced Dynamic Weather Effects that add visual effects to your SillyTavern window depending on the current weather from the trackers.</li>
|
||
<li>All prompts used for the extension's features are now editable.</li>
|
||
<li>Made the user's level optional in the Edit Trackers.</li>
|
||
</ul>
|
||
|
||
<h4 style="margin-top: 20px; margin-bottom: 10px;"><strong>Bug Fixes:</strong></h4>
|
||
<ul style="line-height: 1.6; margin-left: 20px;">
|
||
<li>Fixed tracker logic in Together generation mode.</li>
|
||
<li>Fixed various UI bugs (too many to count).</li>
|
||
<li>Upgraded mobile view.</li>
|
||
<li>Spotify Music widget is more visible now, plus it works in the mobile view.</li>
|
||
<li>Auto-update after messages option is now available for External API generation mode.</li>
|
||
<li>Fixed the display of the thoughts window and its mobile display.</li>
|
||
<li>Mobile UI fixes (panel viewport and z-index issues).</li>
|
||
<li>Fixed the regex issue in Together mode (JSON blocks now hidden from display).</li>
|
||
<li>Fixed parsing error appearing when loading or switching chats.</li>
|
||
<li>Fixed adding new relationships in Edit Trackers (unique naming).</li>
|
||
<li>Added migration support for importing older tracker presets.</li>
|
||
<li>Lifted attributes cap from 100 to 999.</li>
|
||
<li>Fixed lock icon positioning on mobile devices.</li>
|
||
<li>Fixed smaller bugs.</li>
|
||
</ul>
|
||
|
||
<h4 style="margin-top: 20px; margin-bottom: 10px;"><strong data-i18n="settings.recommendedModels.title">Recommended Models:</strong></h4>
|
||
<p style="margin-left: 20px; line-height: 1.6;" data-i18n="settings.recommendedModels.description">
|
||
For the extension to work properly, **it is not recommended to use any models below 20B, especially if they're old.** It works best with the SOTA models such as Deepseek, Claude, GPT, or Gemini.
|
||
</p>
|
||
|
||
<h4 style="margin-top: 20px; margin-bottom: 10px;"><strong>Special thanks to all the contributors for this project:</strong></h4>
|
||
<p style="margin-left: 20px; line-height: 1.6;">
|
||
Paperboygold, Munimunigamer, Subarashimo, Lilminzyu, Claude (???), IDeathByte, Chungchandev, Joenunezb, Amauragis, Tomt610, and Olaroll.
|
||
</p>
|
||
|
||
<div style="margin-top: 20px; text-align: center;">
|
||
<p style="margin-bottom: 10px;">Join our Discord server to share your feedback, report bugs, or request new features!</p>
|
||
<a href="https://discord.com/invite/KdAkTg94ME" target="_blank" class="menu_button" style="display: inline-block; margin: 5px;">
|
||
<i class="fa-brands fa-discord"></i> Discord Server
|
||
</a>
|
||
</div>
|
||
|
||
<div style="margin-top: 20px; text-align: center;">
|
||
<p style="margin-bottom: 10px;">And don't forget to consider supporting me if you enjoy my work. Thank you!</p>
|
||
<a href="https://ko-fi.com/marinara_spaghetti" target="_blank" class="menu_button" style="display: inline-block; margin: 5px;">
|
||
<i class="fa-solid fa-heart"></i> Support on Ko-fi
|
||
</a>
|
||
</div>
|
||
|
||
<div style="margin-top: 30px; text-align: center; font-size: 18px; font-style: italic;">
|
||
<strong>Happy gooning!</strong>
|
||
</div>
|
||
|
||
<div style="margin-top: 10px; text-align: right; color: #888; font-style: italic;">
|
||
~ Marinara
|
||
</div>
|
||
</div>
|
||
<footer class="rpg-settings-popup-footer">
|
||
<button id="rpg-welcome-got-it" class="rpg-btn-primary" type="button" style="width: 100%;">
|
||
<i class="fa-solid fa-check"></i> Got it!
|
||
</button>
|
||
</footer>
|
||
</div>
|
||
</div>
|