Lucas 'Paperboy' Rose-Winters
f70ac827aa
Completely refactored the RPG Companion settings popup with professional ES6 architecture and mobile-first CSS, matching the dice roller redesign. **CSS Changes (style.css:2585-2773):** - Mobile-first responsive design with clamp() and min() functions - CSS custom properties for fluid scaling across viewports - min-height: 0 on flex children for proper max-height constraints - ::before pseudo-element for backdrop (removed overlay div) - State-based animations with .is-open and .is-closing classes - 75vh max-height with proper viewport centering - Touch-friendly 44px minimum tap targets - Neutral 80% opaque background for visibility **HTML Changes (template.html:71-214):** - Added ARIA attributes: role="dialog", aria-modal="true", aria-labelledby - Semantic <header> element for settings header - aria-hidden="true" on all decorative icons - Removed .rpg-settings-popup-overlay div (now CSS ::before) - Improved accessibility throughout **JavaScript Changes (index.js:985-1142):** - Created SettingsModal ES6 class with state management - open() and close() methods with animation control - updateTheme() for real-time theme switching - Private _applyCustomTheme() and _clearCustomTheme() methods - isAnimating flag prevents double-clicks - Focus management for accessibility - Backwards compatible wrapper functions preserve existing API - Updated event handlers with backdrop click support - Removed obsolete overlay click handler **Benefits:** - Settings modal now fully functional on mobile devices - Proper scrolling with content overflow - Smooth open/close animations - Professional class-based architecture - Complete accessibility support - Theme support maintained - No breaking changes to existing code
274 lines
13 KiB
HTML
274 lines
13 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 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>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><i class="fa-solid fa-palette" aria-hidden="true"></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" aria-hidden="true"></i> Display Options</h4>
|
||
<small class="notes" style="display: block; margin-bottom: 10px;">
|
||
<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">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" aria-hidden="true"></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" aria-hidden="true"></i> Clear Extension Cache
|
||
</button>
|
||
</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>
|