diff --git a/crates/ericrfb-frontend/src/pages/console.ts b/crates/ericrfb-frontend/src/pages/console.ts index bd279b0..07bcbb1 100644 --- a/crates/ericrfb-frontend/src/pages/console.ts +++ b/crates/ericrfb-frontend/src/pages/console.ts @@ -192,6 +192,8 @@ async function loadPortList() { } catch { /* port list optional */ } } +let switchTimerId = 0 + function switchToPort(port: number) { selectedPort = port const hotkey = portHotkeys[port] @@ -199,11 +201,11 @@ function switchToPort(port: number) { // Count pause tokens to calculate total switch duration const pauseCount = (hotkey.match(/\*/g) || []).length - const totalDelay = (pauseCount * keyPauseDuration) + 500 // +500ms buffer + const duration = Math.max((pauseCount * keyPauseDuration) + 500, 1000) // Suspend input and show overlay inputSuspended = true - const duration = Math.max(totalDelay, 1000) + if (switchTimerId) window.clearTimeout(switchTimerId) showSwitchOverlay(duration) // Send the hotkey sequence @@ -220,12 +222,15 @@ function switchToPort(port: number) { }).catch(() => {}) // Resume input after the switch completes - window.setTimeout(() => { - inputSuspended = false - const overlay = document.getElementById('switch-overlay') - if (overlay) overlay.hidden = true - document.getElementById('canvas')?.focus() - }, duration) + switchTimerId = window.setTimeout(dismissOverlay, duration) +} + +function dismissOverlay() { + switchTimerId = 0 + inputSuspended = false + const overlay = document.getElementById('switch-overlay') + if (overlay) overlay.style.display = 'none' + document.getElementById('canvas')?.focus() } function showSwitchOverlay(duration: number) { @@ -236,6 +241,7 @@ function showSwitchOverlay(duration: number) { overlay.className = 'switch-overlay' document.querySelector('.console-wrap')?.appendChild(overlay) } + overlay.style.display = '' overlay.innerHTML = `
` - overlay.hidden = false // Countdown timer - const start = Date.now() - const timerEl = document.getElementById('switch-timer') + const endTime = Date.now() + duration const tick = () => { - if (!timerEl || overlay!.hidden) return - const remaining = Math.max(0, duration - (Date.now() - start)) + const timerEl = document.getElementById('switch-timer') + if (!timerEl) return + const remaining = Math.max(0, endTime - Date.now()) timerEl.textContent = `${(remaining / 1000).toFixed(1)}s` if (remaining > 0) requestAnimationFrame(tick) }