From 83576a9073b816a02e294efa1dd98f6f99e64141 Mon Sep 17 00:00:00 2001 From: Spicy_Marinara Date: Wed, 22 Oct 2025 00:52:43 +0200 Subject: [PATCH] Revert "Merge pull request #16 from paperboygold/main" This reverts commit c1b2520fa11ac2ea36fe8d474b9de56d780f9d8a, reversing changes made to c6a1352aae680cc7fe1b59a61f3df482ffe8f729. --- index.js | 38 +----- src/core/config.js | 4 - src/core/state.js | 4 - src/systems/ui/layout.js | 13 +- src/systems/ui/mobile.js | 255 ++------------------------------------- style.css | 112 +---------------- 6 files changed, 21 insertions(+), 405 deletions(-) diff --git a/index.js b/index.js index 037592d..160c515 100644 --- a/index.js +++ b/index.js @@ -98,8 +98,7 @@ import { setupMobileTabs, removeMobileTabs, setupMobileKeyboardHandling, - setupContentEditableScrolling, - setupRefreshButtonDrag + setupContentEditableScrolling } from './src/systems/ui/mobile.js'; import { setupDesktopTabs, @@ -210,14 +209,6 @@ async function initUI() { `; $('body').append(mobileToggleHtml); - // Add mobile refresh button (same pattern as toggle button) - const mobileRefreshHtml = ` - - `; - $('body').append(mobileRefreshHtml); - // Cache UI elements using state setters setPanelContainer($('#rpg-companion-panel')); setUserStatsContainer($('#rpg-user-stats')); @@ -306,34 +297,12 @@ async function initUI() { toggleAnimations(); }); - // Bind to both desktop and mobile refresh buttons - $('#rpg-manual-update, #rpg-manual-update-mobile').on('click', async function() { - // Get mobile button reference - const $mobileBtn = $('#rpg-manual-update-mobile'); - - // Skip if we just finished dragging the mobile button - if ($mobileBtn.data('just-dragged')) { - console.log('[RPG Companion] Click blocked - just finished dragging refresh button'); - return; - } - + $('#rpg-manual-update').on('click', async function() { if (!extensionSettings.enabled) { // console.log('[RPG Companion] Extension is disabled. Please enable it in the Extensions tab.'); return; } - - // Remove focus to prevent sticky black state on mobile - $(this).blur(); - - // Add spinning animation to mobile button - $mobileBtn.addClass('spinning'); - - try { - await updateRPGData(renderUserStats, renderInfoBox, renderThoughts, renderInventory); - } finally { - // Remove spinning animation when done - $mobileBtn.removeClass('spinning'); - } + await updateRPGData(renderUserStats, renderInfoBox, renderThoughts, renderInventory); }); $('#rpg-stat-bar-color-low').on('change', function() { @@ -453,7 +422,6 @@ async function initUI() { setupPlotButtons(sendPlotProgression); setupMobileKeyboardHandling(); setupContentEditableScrolling(); - setupRefreshButtonDrag(); initInventoryEventListeners(); } diff --git a/src/core/config.js b/src/core/config.js index 2fe9030..93d2495 100644 --- a/src/core/config.js +++ b/src/core/config.js @@ -49,10 +49,6 @@ export const defaultSettings = { top: 'calc(var(--topBarBlockSize) + 60px)', right: '12px' }, // Saved position for mobile FAB button - mobileRefreshPosition: { - bottom: '80px', - right: '20px' - }, // Saved position for mobile refresh button userStats: { health: 100, satiety: 100, diff --git a/src/core/state.js b/src/core/state.js index c837bba..4e86ae3 100644 --- a/src/core/state.js +++ b/src/core/state.js @@ -37,10 +37,6 @@ export let extensionSettings = { top: 'calc(var(--topBarBlockSize) + 60px)', right: '12px' }, // Saved position for mobile FAB button - mobileRefreshPosition: { - bottom: '80px', - right: '20px' - }, // Saved position for mobile refresh button userStats: { health: 100, satiety: 100, diff --git a/src/systems/ui/layout.js b/src/systems/ui/layout.js index b88b5f0..9993154 100644 --- a/src/systems/ui/layout.js +++ b/src/systems/ui/layout.js @@ -34,9 +34,6 @@ export function closeMobilePanelWithAnimation() { $panel.removeClass('rpg-mobile-open').addClass('rpg-mobile-closing'); $mobileToggle.removeClass('active'); - // Trigger event for other components (like refresh button) - $(document).trigger('rpg-panel-toggled', { isOpen: false }); - // Wait for animation to complete before hiding $panel.one('animationend', function() { $panel.removeClass('rpg-mobile-closing'); @@ -130,9 +127,6 @@ export function setupCollapseToggle() { const $overlay = $('
'); $('body').append($overlay); - // Trigger event for other components (like refresh button) - $(document).trigger('rpg-panel-toggled', { isOpen: true }); - // Debug: Check state after animation should complete setTimeout(() => { console.log('[RPG Mobile] 500ms after opening:', { @@ -273,13 +267,10 @@ export function applyPanelPosition() { */ export function updateGenerationModeUI() { if (extensionSettings.generationMode === 'together') { - // In "together" mode, hide both update buttons + // In "together" mode, manual update button is hidden $('#rpg-manual-update').hide(); - $('#rpg-manual-update-mobile').hide(); } else { - // In "separate" mode, show both buttons - // (CSS media queries control which one is visible based on viewport) + // In "separate" mode, manual update button is visible $('#rpg-manual-update').show(); - $('#rpg-manual-update-mobile').show(); } } diff --git a/src/systems/ui/mobile.js b/src/systems/ui/mobile.js index b3f7b95..f2648b3 100644 --- a/src/systems/ui/mobile.js +++ b/src/systems/ui/mobile.js @@ -278,9 +278,6 @@ export function setupMobileToggle() { $('body').append($overlay); $mobileToggle.addClass('active'); - // Trigger event for other components (like refresh button) - $(document).trigger('rpg-panel-toggled', { isOpen: true }); - // Close when clicking overlay $overlay.on('click', function() { closeMobilePanelWithAnimation(); @@ -313,9 +310,6 @@ export function setupMobileToggle() { $('body').append($overlay); $mobileToggle.addClass('active'); - // Trigger event for other components (like refresh button) - $(document).trigger('rpg-panel-toggled', { isOpen: true }); - $overlay.on('click', function() { console.log('[RPG Mobile] Overlay clicked - closing panel'); closeMobilePanelWithAnimation(); @@ -440,41 +434,32 @@ export function setupMobileToggle() { * Constrains the mobile FAB button to viewport bounds with top-bar awareness. * Only runs when button is in user-controlled state (mobileFabPosition exists). * Ensures button never goes behind the top bar or outside viewport edges. - * @param {jQuery} $button - Optional button element (defaults to mobile toggle) */ -export function constrainFabToViewport($button = null) { - // Default to mobile toggle if no button specified - if (!$button) { - $button = $('#rpg-mobile-toggle'); - } - - if ($button.length === 0) return; - - // Determine which position setting to check based on button ID - const isRefreshButton = $button.attr('id') === 'rpg-manual-update-mobile'; - const positionSetting = isRefreshButton ? 'mobileRefreshPosition' : 'mobileFabPosition'; - +export function constrainFabToViewport() { // Only constrain if user has set a custom position - if (!extensionSettings[positionSetting]) { + if (!extensionSettings.mobileFabPosition) { console.log('[RPG Mobile] Skipping viewport constraint - using CSS defaults'); return; } + const $mobileToggle = $('#rpg-mobile-toggle'); + if ($mobileToggle.length === 0) return; + // Skip if button is not visible - if (!$button.is(':visible')) { + if (!$mobileToggle.is(':visible')) { console.log('[RPG Mobile] Skipping viewport constraint - button not visible'); return; } // Get current position - const offset = $button.offset(); + const offset = $mobileToggle.offset(); if (!offset) return; let currentX = offset.left; let currentY = offset.top; - const buttonWidth = $button.outerWidth(); - const buttonHeight = $button.outerHeight(); + const buttonWidth = $mobileToggle.outerWidth(); + const buttonHeight = $mobileToggle.outerHeight(); // Get top bar height from CSS variable (fallback to 50px if not set) const topBarHeight = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--topBarBlockSize')) || 50; @@ -500,15 +485,15 @@ export function constrainFabToViewport($button = null) { }); // Apply new position - $button.css({ + $mobileToggle.css({ left: newX + 'px', top: newY + 'px', right: 'auto', bottom: 'auto' }); - // Save corrected position to appropriate setting - extensionSettings[positionSetting] = { + // Save corrected position + extensionSettings.mobileFabPosition = { left: newX + 'px', top: newY + 'px' }; @@ -731,219 +716,3 @@ 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; - }); -} diff --git a/style.css b/style.css index 8ecf0b0..e9e266d 100644 --- a/style.css +++ b/style.css @@ -744,7 +744,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld { font-size: 0.7vw; font-weight: 700; color: var(--rpg-highlight-color); - padding: 0 0.375em; + padding: clamp(1px, 0.2vh, 2px) 0.375em; background: var(--rpg-accent-color); border-radius: clamp(2px, 0.3vh, 3px); border: 1px solid var(--rpg-highlight-color); @@ -2670,7 +2670,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld { } /* ============================================ - MANUAL UPDATE BUTTON (Desktop) + MANUAL UPDATE BUTTON ============================================ */ .rpg-manual-update-btn { width: 100%; @@ -2707,64 +2707,6 @@ body:has(.rpg-panel.rpg-position-left) #sheld { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } -/* ============================================ - MOBILE REFRESH BUTTON (FAB - Same pattern as 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(--rpg-text, #ecf0f1); - font-size: 1.85vw; - cursor: grab; - z-index: 1001; /* Above panel (1000) but below 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-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); - } -} - /* ============================================ SETTINGS BUTTON ============================================ */ @@ -3350,31 +3292,6 @@ body:has(.rpg-panel.rpg-position-left) #sheld { /* Mobile-specific panel behavior - matches SillyTavern's 1000px breakpoint */ /* CACHE BUST v2025-01-16 */ -/* Mobile refresh button visibility - opposite of toggle */ -@media (max-width: 1000px) { - /* Show mobile refresh button */ - .rpg-mobile-refresh { - display: flex; - } - - /* Hide desktop refresh button */ - .rpg-manual-update-btn { - display: none !important; - } - - /* Show refresh button when panel is open (opposite of toggle) */ - body:has(.rpg-panel.rpg-mobile-open) .rpg-mobile-refresh { - opacity: 1; - pointer-events: auto; - } - - /* Hide refresh button when panel is closed */ - .rpg-mobile-refresh { - opacity: 0; - pointer-events: none; - } -} - @media (max-width: 1000px) { /* ======================================== MOBILE PANEL FOUNDATION @@ -3699,9 +3616,6 @@ body:has(.rpg-panel.rpg-position-left) #sheld { .rpg-calendar-day { font-size: clamp(11px, 2.9vw, 14px) !important; - min-height: 3em !important; /* Ensure enough height for content to center */ - padding: 0.75em 0.5em !important; /* More vertical padding on mobile */ - line-height: 1.2 !important; /* Tighter line height */ } .rpg-calendar-year { @@ -3839,20 +3753,14 @@ body:has(.rpg-panel.rpg-position-left) #sheld { grid-row: 3; display: flex; flex-direction: column; - gap: 3px !important; /* Reduced from 6px for more compact display */ + gap: 6px; min-width: 0; - padding: 4px 0.375em !important; /* Reduced vertical padding */ } /* Make mood text readable on mobile */ .rpg-mood-conditions { font-size: clamp(11px, 2.8vw, 14px); - line-height: 1.2 !important; /* Tighter line height */ - } - - /* Smaller emoji on mobile */ - .rpg-mood-emoji { - font-size: clamp(14px, 3.5vw, 18px) !important; /* Slightly smaller */ + line-height: 1.3; } /* Attributes - right side, rows 4-6 aligned with mood */ @@ -4052,11 +3960,6 @@ body:has(.rpg-panel.rpg-position-left) #sheld { font-size: clamp(20px, 5.1vw, 26px) !important; } - /* Larger mobile refresh icon (same as toggle) */ - .rpg-mobile-refresh { - font-size: clamp(20px, 5.1vw, 26px) !important; - } - /* ======================================== MOBILE SETTINGS POPUP ======================================== */ @@ -4156,13 +4059,6 @@ body:has(.rpg-panel.rpg-position-left) #sheld { min-height: 2.75rem; } - /* Exception: Level value should stay compact */ - .rpg-level-value.rpg-editable { - padding: 0 0.375em; - min-height: auto; - line-height: 1.2; - } - /* Larger close buttons */ .rpg-thought-close { min-width: 2.75rem;