Spicy_Marinara
ea10d1eaac
- Add collapse/expand toggle button to side panels (left/right positions) - Button shows on the outside edge of the panel with chevron icon - Panel collapses to 40px vertical bar, button icon direction updates based on position - Fix inventory box stretching issue by adding max/min height constraints - Inventory items now scroll internally with flex layout - Remove bottom margin from Enable Immersive HTML toggle - Add top margin to Manual Update button to maintain spacing
268 lines
12 KiB
HTML
268 lines
12 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>
|
||
RPG Companion
|
||
</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">Last Roll: None</span>
|
||
<button id="rpg-clear-dice" class="rpg-clear-dice-btn" title="Clear last roll">×</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>
|
||
</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>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> Refresh RPG Info
|
||
</button>
|
||
|
||
<!-- Settings Button -->
|
||
<button id="rpg-open-settings" class="rpg-btn-settings">
|
||
<i class="fa-solid fa-gear"></i> Settings
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Settings Popup Modal -->
|
||
<div id="rpg-settings-popup" class="rpg-settings-popup" style="display: none;">
|
||
<div class="rpg-settings-popup-overlay"></div>
|
||
<div class="rpg-settings-popup-content">
|
||
<div class="rpg-settings-popup-header">
|
||
<h3><i class="fa-solid fa-gear"></i> RPG Companion Settings</h3>
|
||
<button id="rpg-close-settings" class="rpg-popup-close">×</button>
|
||
</div>
|
||
<div class="rpg-settings-popup-body">
|
||
<div class="rpg-settings-group">
|
||
<h4><i class="fa-solid fa-palette"></i> Theme</h4>
|
||
<div class="rpg-setting-row">
|
||
<label for="rpg-theme-select">Visual Theme:</label>
|
||
<select id="rpg-theme-select" class="rpg-select">
|
||
<option value="default">Default</option>
|
||
<option value="sci-fi">Sci-Fi (Synthwave)</option>
|
||
<option value="fantasy">Fantasy (Rustic Parchment)</option>
|
||
<option value="cyberpunk">Cyberpunk (Neon Grid)</option>
|
||
<option value="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">Background:</label>
|
||
<input type="color" id="rpg-custom-bg" value="#1a1a2e" />
|
||
</div>
|
||
<div class="rpg-setting-row">
|
||
<label for="rpg-custom-accent">Accent:</label>
|
||
<input type="color" id="rpg-custom-accent" value="#16213e" />
|
||
</div>
|
||
<div class="rpg-setting-row">
|
||
<label for="rpg-custom-text">Text:</label>
|
||
<input type="color" id="rpg-custom-text" value="#eaeaea" />
|
||
</div>
|
||
<div class="rpg-setting-row">
|
||
<label for="rpg-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">Stat Bar Color (Low):</label>
|
||
<input type="color" id="rpg-stat-bar-color-low" value="#cc3333" />
|
||
<small>Color when stats are at 0%</small>
|
||
</div>
|
||
|
||
<div class="rpg-setting-row">
|
||
<label for="rpg-stat-bar-color-high">Stat Bar Color (High):</label>
|
||
<input type="color" id="rpg-stat-bar-color-high" value="#33cc66" />
|
||
<small>Color when stats are at 100%</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="rpg-settings-group">
|
||
<h4><i class="fa-solid fa-toggle-on"></i> Display Options</h4>
|
||
<small class="notes" style="display: block; margin-bottom: 10px;">
|
||
<i class="fa-solid fa-info-circle"></i> Use the Extensions tab to enable/disable the RPG Companion extension.
|
||
</small>
|
||
|
||
<div class="rpg-setting-row">
|
||
<label for="rpg-position-select">Panel Position:</label>
|
||
<select id="rpg-position-select" class="rpg-select">
|
||
<option value="right">Right Sidebar</option>
|
||
<option value="left">Left Sidebar</option>
|
||
</select>
|
||
</div>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-auto-update" />
|
||
<span>Auto-update after messages</span>
|
||
</label>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-user-stats" />
|
||
<span>Show User Stats</span>
|
||
</label>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-info-box" />
|
||
<span>Show Info Box</span>
|
||
</label>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-thoughts" />
|
||
<span>Show Present Characters</span>
|
||
</label>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-thoughts-in-chat" />
|
||
<span>Show Thoughts in Chat</span>
|
||
</label>
|
||
<small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;">
|
||
Display character thoughts as overlay bubbles next to their messages
|
||
</small>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-animations" />
|
||
<span>Enable Animations</span>
|
||
</label>
|
||
<small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;">
|
||
Smooth transitions for stats, content updates, and dice rolls
|
||
</small>
|
||
|
||
<label class="checkbox_label">
|
||
<input type="checkbox" id="rpg-toggle-plot-buttons" />
|
||
<span>Show Plot Progression Buttons</span>
|
||
</label>
|
||
<small style="display: block; margin-left: 24px; margin-top: -8px; color: #888; font-size: 11px;">
|
||
Display buttons above chat input for plot progression prompts
|
||
</small>
|
||
</div>
|
||
|
||
<div class="rpg-settings-group">
|
||
<h4><i class="fa-solid fa-sliders"></i> Advanced</h4>
|
||
|
||
<div class="rpg-setting-row">
|
||
<label for="rpg-generation-mode">Generation Mode:</label>
|
||
<select id="rpg-generation-mode" class="rpg-select">
|
||
<option value="together">Together with Main Generation</option>
|
||
<option value="separate">Separate Generation</option>
|
||
</select>
|
||
<small>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">Context Messages:</label>
|
||
<input type="number" id="rpg-update-depth" min="1" max="20" value="4" class="rpg-input" />
|
||
<small>Number of recent messages to include (Separate mode only)</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"></i> Clear Extension Cache
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Dice Roll Popup -->
|
||
<div id="rpg-dice-popup" class="rpg-dice-popup" style="display: none;">
|
||
<div class="rpg-dice-popup-overlay"></div>
|
||
<div class="rpg-dice-popup-content">
|
||
<div class="rpg-dice-popup-header">
|
||
<h3><i class="fa-solid fa-dice-d20"></i> Roll Dice</h3>
|
||
<button id="rpg-dice-popup-close" class="rpg-btn-icon">
|
||
<i class="fa-solid fa-times"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<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" 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" 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">
|
||
<i class="fa-solid fa-dice"></i> Roll Dice
|
||
</button>
|
||
</div>
|
||
|
||
<div id="rpg-dice-animation" class="rpg-dice-animation" style="display: none;">
|
||
<div class="rpg-dice-rolling">
|
||
<i class="fa-solid fa-dice-d20 fa-spin"></i>
|
||
</div>
|
||
<div class="rpg-dice-rolling-text">Rolling...</div>
|
||
</div>
|
||
|
||
<div id="rpg-dice-result" class="rpg-dice-result" style="display: none;">
|
||
<div class="rpg-dice-result-label">Result:</div>
|
||
<div id="rpg-dice-result-value" class="rpg-dice-result-value">0</div>
|
||
<div id="rpg-dice-result-details" class="rpg-dice-result-details"></div>
|
||
<button id="rpg-dice-save-btn" class="rpg-btn-primary rpg-dice-save-btn">
|
||
<i class="fa-solid fa-check"></i> Save Roll
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|