-
- 
-
- ${relationshipEmoji}
-
-
';
}
$thoughtsContainer.html(html);
+ debugLog('[RPG Thoughts] ✓ HTML rendered to container');
+ debugLog('[RPG Thoughts] =======================================================');
+
// Add event handlers for editable character fields
$thoughtsContainer.find('.rpg-editable').on('blur', function() {
const character = $(this).data('character');
diff --git a/src/systems/ui/debug.js b/src/systems/ui/debug.js
new file mode 100644
index 0000000..c6030b0
--- /dev/null
+++ b/src/systems/ui/debug.js
@@ -0,0 +1,220 @@
+/**
+ * Debug UI Module
+ * Provides mobile-friendly debug log viewer for troubleshooting parsing issues
+ */
+
+import { extensionSettings, getDebugLogs, clearDebugLogs } from '../../core/state.js';
+
+/**
+ * Creates and injects the debug panel into the page
+ * Note: Debug toggle button is created in index.js, not here
+ */
+export function createDebugPanel() {
+ // Remove existing debug panel if any
+ $('#rpg-debug-panel').remove();
+
+ // Create debug panel HTML
+ const debugPanelHtml = `
+
- ${char.emoji}
- ${char.name}
+ // Get relationship emoji
+ const relationshipEmoji = relationshipEmojis[char.relationship] || '⚖️';
+
+ debugLog(`[RPG Thoughts] Building HTML card for ${char.name}...`);
+
+ html += `
+
- `;
+ `;
+
+ debugLog(`[RPG Thoughts] ✓ Successfully built HTML for ${char.name}`);
+
+ } catch (charError) {
+ debugLog(`[RPG Thoughts] ✗ ERROR building HTML for ${char.name}:`, charError.message);
+ debugLog('[RPG Thoughts] Error stack:', charError.stack);
+ // Continue with next character instead of crashing
+ }
}
+
+ debugLog('[RPG Thoughts] Finished building all character cards');
html += '
+
-
+
+
+ ${relationshipEmoji}
+
+
-
+ ${char.emoji}
+ ${char.name}
+
+ ${char.traits}
${char.traits}
+
+ `;
+
+ // Append to body
+ $('body').append(debugPanelHtml);
+
+ // Set up event handlers
+ setupDebugEventHandlers();
+
+ // Initial log render
+ renderDebugLogs();
+}
+
+/**
+ * Closes the debug panel with proper animation (mobile or desktop)
+ */
+function closeDebugPanel() {
+ const $panel = $('#rpg-debug-panel');
+ const isMobile = window.innerWidth <= 1000;
+
+ if (isMobile) {
+ // Mobile: animate slide-out to right
+ $panel.removeClass('rpg-mobile-open').addClass('rpg-mobile-closing');
+
+ // Wait for animation to complete before hiding
+ $panel.one('animationend', function() {
+ $panel.removeClass('rpg-mobile-closing');
+ $('.rpg-mobile-overlay').remove();
+ });
+ } else {
+ // Desktop: simple slide-down
+ $panel.removeClass('rpg-debug-open');
+ }
+}
+
+/**
+ * Sets up event handlers for debug panel using event delegation for mobile compatibility
+ */
+function setupDebugEventHandlers() {
+ // Use event delegation for better mobile compatibility and reliability with dynamic elements
+ // Remove any existing handlers first to prevent duplicates
+ $(document).off('click.rpgDebug');
+
+ // Toggle button
+ $(document).on('click.rpgDebug', '#rpg-debug-toggle', function() {
+ const $debugToggle = $(this);
+
+ // Skip if we just finished dragging
+ if ($debugToggle.data('just-dragged')) {
+ console.log('[RPG Debug] Click blocked - just finished dragging');
+ return;
+ }
+
+ const $panel = $('#rpg-debug-panel');
+ const isMobile = window.innerWidth <= 1000;
+
+ if (isMobile) {
+ // Mobile: use rpg-mobile-open class with slide-from-right animation
+ const isOpen = $panel.hasClass('rpg-mobile-open');
+
+ if (isOpen) {
+ // Close with animation
+ closeDebugPanel();
+ } else {
+ // Open with animation
+ $panel.addClass('rpg-mobile-open');
+ renderDebugLogs();
+
+ // Create overlay for mobile
+ const $overlay = $('');
+ $('body').append($overlay);
+
+ // Close when clicking overlay
+ $overlay.on('click', function() {
+ closeDebugPanel();
+ });
+ }
+ } else {
+ // Desktop: use rpg-debug-open class with slide-from-bottom animation
+ $panel.toggleClass('rpg-debug-open');
+ renderDebugLogs();
+ }
+ });
+
+ // Close button
+ $(document).on('click.rpgDebug', '#rpg-debug-close', function(e) {
+ e.preventDefault();
+ e.stopPropagation();
+ closeDebugPanel();
+ });
+
+ // Copy button
+ $(document).on('click.rpgDebug', '#rpg-debug-copy', function() {
+ const logs = getDebugLogs();
+ const logsText = logs.map(log => {
+ let text = `[${log.timestamp}] ${log.message}`;
+ if (log.data) {
+ text += `\n${log.data}`;
+ }
+ return text;
+ }).join('\n\n');
+
+ navigator.clipboard.writeText(logsText).then(() => {
+ // Show feedback
+ const $btn = $(this);
+ const $icon = $btn.find('i');
+ $icon.removeClass('fa-copy').addClass('fa-check');
+ setTimeout(() => {
+ $icon.removeClass('fa-check').addClass('fa-copy');
+ }, 1500);
+ }).catch(err => {
+ console.error('Failed to copy logs:', err);
+ alert('Failed to copy logs. Please use browser console instead.');
+ });
+ });
+
+ // Clear button
+ $(document).on('click.rpgDebug', '#rpg-debug-clear', function() {
+ if (confirm('Clear all debug logs?')) {
+ clearDebugLogs();
+ renderDebugLogs();
+ }
+ });
+}
+
+/**
+ * Renders debug logs to the panel
+ */
+function renderDebugLogs() {
+ const logs = getDebugLogs();
+ const $logsContainer = $('#rpg-debug-logs');
+
+ if (logs.length === 0) {
+ $logsContainer.html('
+
+
+ 🔍 Debug Logs
+
+
+
+
+
+ No logs yet. Logs will appear when parser runs.
');
+ return;
+ }
+
+ // Build logs HTML
+ const logsHtml = logs.map(log => {
+ let html = ``;
+ html += `[${log.timestamp}] `;
+ html += ``;
+ if (log.data) {
+ html += `
`;
+ return html;
+ }).join('');
+
+ $logsContainer.html(logsHtml);
+
+ // Auto-scroll to bottom
+ $logsContainer[0].scrollTop = $logsContainer[0].scrollHeight;
+}
+
+/**
+ * Escapes HTML to prevent XSS
+ */
+function escapeHtml(text) {
+ const div = document.createElement('div');
+ div.textContent = text;
+ return div.innerHTML;
+}
+
+/**
+ * Shows or hides debug UI based on debug mode setting
+ * Note: Debug toggle button always exists in DOM (created in index.js)
+ */
+export function updateDebugUIVisibility() {
+ const $debugToggle = $('#rpg-debug-toggle');
+
+ if (extensionSettings.debugMode) {
+ // Show debug toggle button
+ $debugToggle.css('display', 'flex');
+
+ // Create debug panel if it doesn't exist
+ if ($('#rpg-debug-panel').length === 0) {
+ createDebugPanel();
+ }
+ } else {
+ // Hide debug toggle button
+ $debugToggle.css('display', 'none');
+
+ // Remove debug panel
+ $('#rpg-debug-panel').remove();
+ }
+}
diff --git a/src/systems/ui/layout.js b/src/systems/ui/layout.js
index 9993154..597183c 100644
--- a/src/systems/ui/layout.js
+++ b/src/systems/ui/layout.js
@@ -266,11 +266,15 @@ export function applyPanelPosition() {
* Updates the UI based on generation mode selection.
*/
export function updateGenerationModeUI() {
+ const $mobileBtn = $('#rpg-manual-update-mobile');
+
if (extensionSettings.generationMode === 'together') {
- // In "together" mode, manual update button is hidden
+ // In "together" mode, hide both desktop and mobile refresh buttons
$('#rpg-manual-update').hide();
+ $mobileBtn.addClass('rpg-hidden-mode');
} else {
- // In "separate" mode, manual update button is visible
+ // In "separate" mode, show both desktop and mobile refresh buttons
$('#rpg-manual-update').show();
+ $mobileBtn.removeClass('rpg-hidden-mode');
}
}
diff --git a/src/systems/ui/mobile.js b/src/systems/ui/mobile.js
index f2648b3..73a4ff1 100644
--- a/src/systems/ui/mobile.js
+++ b/src/systems/ui/mobile.js
@@ -716,3 +716,434 @@ export function setupContentEditableScrolling() {
}, 300);
});
}
+
+/**
+ * Sets up the mobile refresh button with drag functionality.
+ * Same pattern as mobile toggle button.
+ * Tap = refresh, drag = reposition
+ */
+export function setupRefreshButtonDrag() {
+ const $refreshBtn = $('#rpg-manual-update-mobile');
+
+ if ($refreshBtn.length === 0) {
+ console.warn('[RPG Mobile] Refresh button not found in DOM');
+ return;
+ }
+
+ console.log('[RPG Mobile] setupRefreshButtonDrag called');
+
+ // Load and apply saved position
+ if (extensionSettings.mobileRefreshPosition) {
+ const pos = extensionSettings.mobileRefreshPosition;
+ console.log('[RPG Mobile] Loading saved refresh button position:', pos);
+
+ // Apply saved position
+ if (pos.top) $refreshBtn.css('top', pos.top);
+ if (pos.right) $refreshBtn.css('right', pos.right);
+ if (pos.bottom) $refreshBtn.css('bottom', pos.bottom);
+ if (pos.left) $refreshBtn.css('left', pos.left);
+
+ // Constrain to viewport after position is applied
+ requestAnimationFrame(() => constrainFabToViewport($refreshBtn));
+ }
+
+ // Touch/drag state
+ let isDragging = false;
+ let touchStartTime = 0;
+ let touchStartX = 0;
+ let touchStartY = 0;
+ let buttonStartX = 0;
+ let buttonStartY = 0;
+ const LONG_PRESS_DURATION = 200;
+ const MOVE_THRESHOLD = 10;
+ let rafId = null;
+ let pendingX = null;
+ let pendingY = null;
+
+ // Update position using requestAnimationFrame
+ function updatePosition() {
+ if (pendingX !== null && pendingY !== null) {
+ $refreshBtn.css({
+ left: pendingX + 'px',
+ top: pendingY + 'px',
+ right: 'auto',
+ bottom: 'auto'
+ });
+ pendingX = null;
+ pendingY = null;
+ }
+ rafId = null;
+ }
+
+ // Touch start
+ $refreshBtn.on('touchstart', function(e) {
+ const touch = e.originalEvent.touches[0];
+ touchStartTime = Date.now();
+ touchStartX = touch.clientX;
+ touchStartY = touch.clientY;
+
+ const offset = $refreshBtn.offset();
+ buttonStartX = offset.left;
+ buttonStartY = offset.top;
+
+ isDragging = false;
+ });
+
+ // Touch move
+ $refreshBtn.on('touchmove', function(e) {
+ const touch = e.originalEvent.touches[0];
+ const deltaX = touch.clientX - touchStartX;
+ const deltaY = touch.clientY - touchStartY;
+ const timeSinceStart = Date.now() - touchStartTime;
+ const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+
+ if (!isDragging && (timeSinceStart > LONG_PRESS_DURATION || distance > MOVE_THRESHOLD)) {
+ isDragging = true;
+ $refreshBtn.addClass('dragging');
+ }
+
+ if (isDragging) {
+ e.preventDefault();
+
+ let newX = buttonStartX + deltaX;
+ let newY = buttonStartY + deltaY;
+
+ const buttonWidth = $refreshBtn.outerWidth();
+ const buttonHeight = $refreshBtn.outerHeight();
+
+ const minX = 10;
+ const maxX = window.innerWidth - buttonWidth - 10;
+ const minY = 10;
+ const maxY = window.innerHeight - buttonHeight - 10;
+
+ newX = Math.max(minX, Math.min(maxX, newX));
+ newY = Math.max(minY, Math.min(maxY, newY));
+
+ pendingX = newX;
+ pendingY = newY;
+ if (!rafId) {
+ rafId = requestAnimationFrame(updatePosition);
+ }
+ }
+ });
+
+ // Touch end
+ $refreshBtn.on('touchend', function(e) {
+ if (isDragging) {
+ // Save new position
+ const offset = $refreshBtn.offset();
+ const newPosition = {
+ left: offset.left + 'px',
+ top: offset.top + 'px'
+ };
+
+ extensionSettings.mobileRefreshPosition = newPosition;
+ saveSettings();
+
+ setTimeout(() => {
+ $refreshBtn.removeClass('dragging');
+ }, 50);
+
+ // Set flag to prevent click handler from firing
+ $refreshBtn.data('just-dragged', true);
+ setTimeout(() => {
+ $refreshBtn.data('just-dragged', false);
+ }, 100);
+
+ isDragging = false;
+ }
+ });
+
+ // Mouse support for desktop
+ let mouseDown = false;
+
+ $refreshBtn.on('mousedown', function(e) {
+ e.preventDefault();
+ touchStartTime = Date.now();
+ touchStartX = e.clientX;
+ touchStartY = e.clientY;
+
+ const offset = $refreshBtn.offset();
+ buttonStartX = offset.left;
+ buttonStartY = offset.top;
+
+ mouseDown = true;
+ isDragging = false;
+ });
+
+ $(document).on('mousemove', function(e) {
+ if (!mouseDown) return;
+
+ const deltaX = e.clientX - touchStartX;
+ const deltaY = e.clientY - touchStartY;
+ const timeSinceStart = Date.now() - touchStartTime;
+ const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+
+ if (!isDragging && (timeSinceStart > LONG_PRESS_DURATION || distance > MOVE_THRESHOLD)) {
+ isDragging = true;
+ $refreshBtn.addClass('dragging');
+ }
+
+ if (isDragging) {
+ let newX = buttonStartX + deltaX;
+ let newY = buttonStartY + deltaY;
+
+ const buttonWidth = $refreshBtn.outerWidth();
+ const buttonHeight = $refreshBtn.outerHeight();
+
+ const minX = 10;
+ const maxX = window.innerWidth - buttonWidth - 10;
+ const minY = 10;
+ const maxY = window.innerHeight - buttonHeight - 10;
+
+ newX = Math.max(minX, Math.min(maxX, newX));
+ newY = Math.max(minY, Math.min(maxY, newY));
+
+ pendingX = newX;
+ pendingY = newY;
+ if (!rafId) {
+ rafId = requestAnimationFrame(updatePosition);
+ }
+ }
+ });
+
+ $(document).on('mouseup', function(e) {
+ if (mouseDown && isDragging) {
+ const offset = $refreshBtn.offset();
+ const newPosition = {
+ left: offset.left + 'px',
+ top: offset.top + 'px'
+ };
+
+ extensionSettings.mobileRefreshPosition = newPosition;
+ saveSettings();
+
+ setTimeout(() => {
+ $refreshBtn.removeClass('dragging');
+ }, 50);
+
+ $refreshBtn.data('just-dragged', true);
+ setTimeout(() => {
+ $refreshBtn.data('just-dragged', false);
+ }, 100);
+ }
+
+ mouseDown = false;
+ isDragging = false;
+ });
+}
+
+/**
+ * Sets up drag functionality for the debug toggle FAB button
+ * Same pattern as refresh button drag
+ */
+export function setupDebugButtonDrag() {
+ const $debugBtn = $('#rpg-debug-toggle');
+
+ if ($debugBtn.length === 0) {
+ console.warn('[RPG Mobile] Debug button not found in DOM');
+ return;
+ }
+
+ console.log('[RPG Mobile] setupDebugButtonDrag called');
+
+ // Load and apply saved position
+ if (extensionSettings.debugFabPosition) {
+ const pos = extensionSettings.debugFabPosition;
+ console.log('[RPG Mobile] Loading saved debug button position:', pos);
+
+ // Apply saved position
+ if (pos.top) $debugBtn.css('top', pos.top);
+ if (pos.right) $debugBtn.css('right', pos.right);
+ if (pos.bottom) $debugBtn.css('bottom', pos.bottom);
+ if (pos.left) $debugBtn.css('left', pos.left);
+
+ // Constrain to viewport after position is applied
+ requestAnimationFrame(() => constrainFabToViewport($debugBtn));
+ }
+
+ // Touch/drag state
+ let isDragging = false;
+ let touchStartTime = 0;
+ let touchStartX = 0;
+ let touchStartY = 0;
+ let buttonStartX = 0;
+ let buttonStartY = 0;
+ const LONG_PRESS_DURATION = 200;
+ const MOVE_THRESHOLD = 10;
+ let rafId = null;
+ let pendingX = null;
+ let pendingY = null;
+
+ // Update position using requestAnimationFrame
+ function updatePosition() {
+ if (pendingX !== null && pendingY !== null) {
+ $debugBtn.css({
+ left: pendingX + 'px',
+ top: pendingY + 'px',
+ right: 'auto',
+ bottom: 'auto'
+ });
+ pendingX = null;
+ pendingY = null;
+ }
+ rafId = null;
+ }
+
+ // Touch start
+ $debugBtn.on('touchstart', function(e) {
+ const touch = e.originalEvent.touches[0];
+ touchStartTime = Date.now();
+ touchStartX = touch.clientX;
+ touchStartY = touch.clientY;
+
+ const offset = $debugBtn.offset();
+ buttonStartX = offset.left;
+ buttonStartY = offset.top;
+
+ isDragging = false;
+ });
+
+ // Touch move
+ $debugBtn.on('touchmove', function(e) {
+ const touch = e.originalEvent.touches[0];
+ const deltaX = touch.clientX - touchStartX;
+ const deltaY = touch.clientY - touchStartY;
+ const timeSinceStart = Date.now() - touchStartTime;
+ const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+
+ if (!isDragging && (timeSinceStart > LONG_PRESS_DURATION || distance > MOVE_THRESHOLD)) {
+ isDragging = true;
+ $debugBtn.addClass('dragging');
+ }
+
+ if (isDragging) {
+ e.preventDefault();
+
+ let newX = buttonStartX + deltaX;
+ let newY = buttonStartY + deltaY;
+
+ const buttonWidth = $debugBtn.outerWidth();
+ const buttonHeight = $debugBtn.outerHeight();
+
+ const minX = 10;
+ const maxX = window.innerWidth - buttonWidth - 10;
+ const minY = 10;
+ const maxY = window.innerHeight - buttonHeight - 10;
+
+ newX = Math.max(minX, Math.min(maxX, newX));
+ newY = Math.max(minY, Math.min(maxY, newY));
+
+ pendingX = newX;
+ pendingY = newY;
+ if (!rafId) {
+ rafId = requestAnimationFrame(updatePosition);
+ }
+ }
+ });
+
+ // Touch end
+ $debugBtn.on('touchend', function(e) {
+ if (isDragging) {
+ // Save new position
+ const offset = $debugBtn.offset();
+ const newPosition = {
+ left: offset.left + 'px',
+ top: offset.top + 'px'
+ };
+
+ extensionSettings.debugFabPosition = newPosition;
+ saveSettings();
+
+ setTimeout(() => {
+ $debugBtn.removeClass('dragging');
+ }, 50);
+
+ // Set flag to prevent click handler from firing
+ $debugBtn.data('just-dragged', true);
+ setTimeout(() => {
+ $debugBtn.data('just-dragged', false);
+ }, 100);
+
+ isDragging = false;
+ }
+ });
+
+ // Mouse support for desktop
+ let mouseDown = false;
+
+ $debugBtn.on('mousedown', function(e) {
+ e.preventDefault();
+ touchStartTime = Date.now();
+ touchStartX = e.clientX;
+ touchStartY = e.clientY;
+
+ const offset = $debugBtn.offset();
+ buttonStartX = offset.left;
+ buttonStartY = offset.top;
+
+ mouseDown = true;
+ isDragging = false;
+ });
+
+ $(document).on('mousemove.rpgDebugDrag', function(e) {
+ if (!mouseDown) return;
+
+ const deltaX = e.clientX - touchStartX;
+ const deltaY = e.clientY - touchStartY;
+ const timeSinceStart = Date.now() - touchStartTime;
+ const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+
+ if (!isDragging && (timeSinceStart > LONG_PRESS_DURATION || distance > MOVE_THRESHOLD)) {
+ isDragging = true;
+ $debugBtn.addClass('dragging');
+ }
+
+ if (isDragging) {
+ let newX = buttonStartX + deltaX;
+ let newY = buttonStartY + deltaY;
+
+ const buttonWidth = $debugBtn.outerWidth();
+ const buttonHeight = $debugBtn.outerHeight();
+
+ const minX = 10;
+ const maxX = window.innerWidth - buttonWidth - 10;
+ const minY = 10;
+ const maxY = window.innerHeight - buttonHeight - 10;
+
+ newX = Math.max(minX, Math.min(maxX, newX));
+ newY = Math.max(minY, Math.min(maxY, newY));
+
+ pendingX = newX;
+ pendingY = newY;
+ if (!rafId) {
+ rafId = requestAnimationFrame(updatePosition);
+ }
+ }
+ });
+
+ $(document).on('mouseup.rpgDebugDrag', function(e) {
+ if (mouseDown && isDragging) {
+ const offset = $debugBtn.offset();
+ const newPosition = {
+ left: offset.left + 'px',
+ top: offset.top + 'px'
+ };
+
+ extensionSettings.debugFabPosition = newPosition;
+ saveSettings();
+
+ setTimeout(() => {
+ $debugBtn.removeClass('dragging');
+ }, 50);
+
+ $debugBtn.data('just-dragged', true);
+ setTimeout(() => {
+ $debugBtn.data('just-dragged', false);
+ }, 100);
+ }
+
+ mouseDown = false;
+ isDragging = false;
+ });
+}
diff --git a/style.css b/style.css
index e9e266d..280f771 100644
--- a/style.css
+++ b/style.css
@@ -2054,6 +2054,34 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
transform: translateY(0);
}
+.rpg-btn-reset-fab {
+ width: 100%;
+ padding: 0.625em;
+ background: rgba(52, 152, 219, 0.2);
+ border: 2px solid rgba(52, 152, 219, 0.5);
+ border-radius: 0.5em;
+ color: #5dade2;
+ font-size: 1.2vw;
+ font-weight: 600;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.5em;
+ transition: all 0.3s ease;
+}
+
+.rpg-btn-reset-fab:hover {
+ background: rgba(52, 152, 219, 0.3);
+ border-color: rgba(52, 152, 219, 0.8);
+ color: #85c1e9;
+ transform: translateY(-0.062rem);
+}
+
+.rpg-btn-reset-fab:active {
+ transform: translateY(0);
+}
+
/* ============================================
THEME VARIATIONS
============================================ */
@@ -3277,6 +3305,66 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
transform: rotate(180deg);
}
+/* ============================================
+ MOBILE REFRESH FAB BUTTON (Same pattern as mobile toggle)
+ ============================================ */
+.rpg-mobile-refresh {
+ display: none;
+ align-items: center;
+ justify-content: center;
+ position: fixed;
+ /* Position set by JavaScript based on saved settings */
+ width: 44px;
+ height: 44px;
+ border-radius: 50%;
+ background: var(--SmartThemeBlurTintColor);
+ border: 2px solid var(--SmartThemeBorderColor);
+ color: var(--SmartThemeBodyColor);
+ font-size: 1.125rem;
+ cursor: grab;
+ z-index: 1001; /* Below mobile toggle (10002), above debug (1000) */
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+ transition: opacity 0.3s ease, transform 0.2s ease, top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
+ user-select: none;
+ -webkit-user-select: none;
+ will-change: top, left;
+ /* Hidden by default - shown when panel open AND separate mode */
+ opacity: 0;
+ pointer-events: none;
+}
+
+.rpg-mobile-refresh.dragging {
+ transition: none;
+ cursor: grabbing;
+}
+
+.rpg-mobile-refresh:hover {
+ transform: scale(1.1);
+ box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
+}
+
+.rpg-mobile-refresh:active {
+ transform: scale(0.95);
+}
+
+/* Spinning animation when refreshing */
+.rpg-mobile-refresh.spinning i {
+ animation: rpg-spin 0.8s linear infinite;
+}
+
+.rpg-mobile-refresh i {
+ pointer-events: none;
+}
+
+@keyframes rpg-spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+
/* Mobile overlay backdrop */
.rpg-mobile-overlay {
display: none;
@@ -3302,7 +3390,23 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
display: flex;
}
- /* Hide FAB when panel is open */
+ /* Show the mobile FAB refresh button (but hidden by opacity) */
+ .rpg-mobile-refresh {
+ display: flex;
+ }
+
+ /* Show refresh button when panel is open AND not hidden by generation mode */
+ body:has(.rpg-panel.rpg-mobile-open) .rpg-mobile-refresh:not(.rpg-hidden-mode) {
+ opacity: 1;
+ pointer-events: auto;
+ }
+
+ /* Hide desktop refresh button on mobile */
+ #rpg-manual-update {
+ display: none !important;
+ }
+
+ /* Hide toggle FAB when panel is open */
body:has(.rpg-panel.rpg-mobile-open) .rpg-mobile-toggle {
opacity: 0;
pointer-events: none;
@@ -3960,6 +4064,11 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
font-size: clamp(20px, 5.1vw, 26px) !important;
}
+ /* Larger mobile refresh icon */
+ .rpg-mobile-refresh {
+ font-size: clamp(20px, 5.1vw, 26px) !important;
+ }
+
/* ========================================
MOBILE SETTINGS POPUP
======================================== */
@@ -3994,6 +4103,10 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
.rpg-btn-clear-cache {
font-size: clamp(13px, 3.3vw, 17px) !important;
}
+
+ .rpg-btn-reset-fab {
+ font-size: clamp(13px, 3.3vw, 17px) !important;
+ }
}
/* Very narrow screens - single column layout for all stats */
@@ -4675,3 +4788,239 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
min-height: 2rem;
}
}
+
+/* ===================================================================
+ Debug Panel Styles - Mobile-Friendly Debug Log Viewer
+ =================================================================== */
+
+/* ============================================
+ DEBUG TOGGLE FAB BUTTON (Same pattern as mobile FABs)
+ ============================================ */
+.rpg-debug-toggle {
+ display: none; /* Hidden by default, shown when debugMode is enabled */
+ align-items: center;
+ justify-content: center;
+ position: fixed;
+ /* Position set by JavaScript based on saved settings */
+ width: 44px;
+ height: 44px;
+ border-radius: 50%;
+ background: var(--SmartThemeBlurTintColor);
+ border: 2px solid var(--SmartThemeBorderColor);
+ color: var(--rpg-text, #ecf0f1);
+ font-size: 1.85vw;
+ cursor: grab;
+ z-index: 1000; /* Below refresh (1001) and mobile toggle (10002) */
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+ transition: opacity 0.3s ease, transform 0.2s ease, top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
+ user-select: none;
+ -webkit-user-select: none;
+ will-change: top, left;
+}
+
+/* Disable transitions while actively dragging */
+.rpg-debug-toggle.dragging {
+ transition: none;
+ cursor: grabbing;
+}
+
+.rpg-debug-toggle:hover {
+ transform: scale(1.1);
+ box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
+}
+
+.rpg-debug-toggle:active {
+ transform: scale(0.95);
+}
+
+/* Debug panel */
+.rpg-debug-panel {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: 60vh;
+ background: var(--SmartThemeBlurTintColor, #1a1a1a);
+ border-top: 2px solid var(--SmartThemeBorderColor, #333);
+ z-index: 10002;
+ display: flex;
+ flex-direction: column;
+ transform: translateY(100%);
+ transition: transform 0.3s ease;
+ box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
+}
+
+.rpg-debug-panel.rpg-debug-open {
+ transform: translateY(0);
+}
+
+.rpg-debug-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem;
+ border-bottom: 1px solid var(--SmartThemeBorderColor, #333);
+ background: var(--SmartThemeBodyColor, #0d0d0d);
+}
+
+.rpg-debug-header h3 {
+ margin: 0;
+ font-size: 1.2rem;
+ color: var(--rpg-text, #ecf0f1);
+}
+
+.rpg-debug-actions {
+ display: flex;
+ gap: 0.5rem;
+}
+
+.rpg-debug-actions button {
+ background: var(--SmartThemeBlurTintColor, #2a2a2a);
+ border: 1px solid var(--SmartThemeBorderColor, #444);
+ color: var(--rpg-text, #ecf0f1);
+ width: 36px;
+ height: 36px;
+ border-radius: 6px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.2s ease;
+}
+
+.rpg-debug-actions button:hover {
+ background: var(--SmartThemeBorderColor, #333);
+ transform: scale(1.05);
+}
+
+.rpg-debug-actions button:active {
+ transform: scale(0.95);
+}
+
+.rpg-debug-actions button i {
+ pointer-events: none; /* Prevent icon from blocking clicks */
+}
+
+.rpg-debug-logs {
+ flex: 1;
+ overflow-y: auto;
+ padding: 1rem;
+ font-family: 'Courier New', Courier, monospace;
+ font-size: 0.85rem;
+ line-height: 1.4;
+ color: var(--rpg-text, #ecf0f1);
+}
+
+.rpg-debug-empty {
+ text-align: center;
+ padding: 2rem;
+ color: #888;
+ font-style: italic;
+}
+
+.rpg-debug-entry {
+ margin-bottom: 1rem;
+ padding-bottom: 1rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.rpg-debug-entry:last-child {
+ border-bottom: none;
+}
+
+.rpg-debug-time {
+ color: #888;
+ font-size: 0.75rem;
+}
+
+.rpg-debug-message {
+ color: #4fc3f7;
+}
+
+.rpg-debug-data {
+ margin: 0.5rem 0 0 0;
+ padding: 0.75rem;
+ background: rgba(0, 0, 0, 0.3);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-radius: 4px;
+ overflow-x: auto;
+ color: #9ccc65;
+ font-size: 0.8rem;
+ white-space: pre-wrap;
+ word-break: break-word;
+}
+
+/* Mobile view - slide from right like main panel */
+@media (max-width: 1000px) {
+ .rpg-debug-panel {
+ /* Reset bottom slide positioning */
+ transform: none;
+ transition: none;
+ bottom: auto;
+
+ /* Mobile panel - slide from right */
+ position: fixed !important;
+ top: var(--topBarBlockSize) !important;
+ right: 0 !important;
+ left: auto !important;
+
+ /* Mobile sizing using dynamic viewport units */
+ width: 85dvw !important;
+ max-width: 400px !important;
+ height: calc(100dvh - var(--topBarBlockSize)) !important;
+
+ /* Hidden by default */
+ display: none !important;
+
+ /* Mobile scrolling */
+ overflow-y: auto !important;
+ -webkit-overflow-scrolling: touch;
+
+ /* Styling */
+ border-radius: 20px 0 0 0;
+ border-left: 1px solid var(--SmartThemeBorderColor);
+ border-top: 1px solid var(--SmartThemeBorderColor);
+ border-bottom: none;
+ backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
+ box-shadow: -5px 0 20px rgba(0, 0, 0, 0.5);
+ }
+
+ /* Show panel when opened with slide-in animation */
+ .rpg-debug-panel.rpg-mobile-open {
+ display: flex !important;
+ z-index: 10002;
+ animation: rpgSlideInFromRight 0.3s ease-in-out;
+ }
+
+ /* Closing animation - slide out to right */
+ .rpg-debug-panel.rpg-mobile-closing {
+ display: flex !important;
+ z-index: 10002;
+ animation: rpgSlideOutToRight 0.3s ease-in-out;
+ }
+
+ /* Debug logs container needs to stay scrollable */
+ .rpg-debug-logs {
+ overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
+ }
+
+ /* Debug toggle button on mobile */
+ .rpg-debug-toggle {
+ font-size: clamp(20px, 5.1vw, 26px) !important;
+ }
+}
+
+/* Desktop view - smaller panel in bottom right */
+@media (min-width: 1001px) {
+ .rpg-debug-panel {
+ bottom: 20px;
+ left: auto;
+ right: 20px;
+ width: 600px;
+ max-width: 90vw;
+ height: 400px;
+ border-radius: 12px;
+ border: 2px solid var(--SmartThemeBorderColor, #333);
+ }
+}
diff --git a/template.html b/template.html
index 8d24685..b72fb5e 100644
--- a/template.html
+++ b/template.html
@@ -195,6 +195,14 @@
Display buttons above chat input for plot progression prompts
+
+
+
+ Shows parser logs in a mobile-friendly UI panel. Useful for troubleshooting. Look for the red bug button.
+
${escapeHtml(log.data)}`;
+ }
+ html += `
@@ -229,6 +237,16 @@
Clear Extension Cache
+
+
+
+
+
+ Resets all floating action buttons (toggle, refresh, debug) to default top-left positions. Useful if buttons are off-screen.
+
+