@colyseus/sdk 0.17.40 → 0.17.41

package/build/debug.mjs

@@ -3,7 +3,7 @@
 // This software is released under the MIT License.
 // https://opensource.org/license/MIT
 //
-// colyseus.js@0.17.40
+// colyseus.js@0.17.41
 import { Client } from './Client.mjs';
 import { CloseCode } from '@colyseus/shared-types';
 
@@ -86,6 +86,19 @@ let modalStack = [];
 const BASE_MODAL_ZINDEX = 10000;
 // Load preferences on script load
 loadPreferences();
+// Shadow DOM root — isolates all debug UI from page-level CSS.
+// Every SDK element is appended here so page rules like `canvas { width: 100vw }`
+// can't reach (or stretch) the debug panel's sparklines, logo, menu, or modals.
+let _debugShadowRoot = null;
+function getDebugRoot() {
+    if (_debugShadowRoot)
+        return _debugShadowRoot;
+    const host = document.createElement('div');
+    host.id = 'colyseus-debug-shadow-host';
+    _debugShadowRoot = host.attachShadow({ mode: 'open' });
+    document.body.appendChild(host);
+    return _debugShadowRoot;
+}
 // Function to select a modal (bring to front)
 function selectModal(modal) {
     if (!modal)
@@ -98,8 +111,9 @@ function selectModal(modal) {
     // Add to end of stack (most recent)
     modalStack.push(modal);
     // Update z-indexes for all modals based on their position in stack
+    var root = getDebugRoot();
     modalStack.forEach((m, i) => {
-        if (document.body.contains(m)) {
+        if (root.contains(m)) {
             m.style.zIndex = (BASE_MODAL_ZINDEX + i).toString();
         }
     });
@@ -116,7 +130,7 @@ document.addEventListener('keydown', function (e) {
     if (e.key === 'Escape' && modalStack.length > 0) {
         // Get the most recent modal (top of stack)
         const topModal = modalStack[modalStack.length - 1];
-        if (topModal && document.body.contains(topModal)) {
+        if (topModal && getDebugRoot().contains(topModal)) {
             topModal.remove();
         }
     }
@@ -366,7 +380,7 @@ function initialize() {
     // Use insertAdjacentHTML for better Safari compatibility with SVG
     icon.insertAdjacentHTML('beforeend', logoIcon);
     container.appendChild(icon);
-    document.body.appendChild(container);
+    getDebugRoot().appendChild(container);
     // Create menu first
     createMenu(container);
     // Apply initial position after menu is created
@@ -493,7 +507,8 @@ function createMenu(logoContainer) {
             gradient = `linear-gradient(to right, #00c800 0%, ${yellowColor} ${yellowPercent}%, ${color} ${valuePercent}%, #333 ${valuePercent}%, #333 100%)`;
         }
         var styleId = 'latency-slider-style';
-        var existingStyle = document.getElementById(styleId);
+        var root = getDebugRoot();
+        var existingStyle = root.getElementById(styleId);
         if (existingStyle) {
             existingStyle.remove();
         }
@@ -513,7 +528,7 @@ function createMenu(logoContainer) {
                 border: none;
             }
         `;
-        document.head.appendChild(style);
+        root.appendChild(style);
     }
     // Initialize slider color
     updateSliderColor(parseInt(latencySlider.value));
@@ -557,10 +572,10 @@ function createMenu(logoContainer) {
             box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
         }
     `;
-    document.head.appendChild(style);
+    getDebugRoot().appendChild(style);
     // Function to update container border color
     function updateContainerBackgroundColor() {
-        var container = document.getElementById('debug-logo-container');
+        var container = getDebugRoot().getElementById('debug-logo-container');
         if (container) {
             // Update to normal state (hover handlers will update on hover)
             container.style.borderColor = getBorderColor(preferences.latencySimulation.delay, 0.7);
@@ -620,7 +635,7 @@ function createMenu(logoContainer) {
         openSettingsModal();
     });
     menu.appendChild(settingsOption);
-    document.body.appendChild(menu);
+    getDebugRoot().appendChild(menu);
     // Toggle menu on logo click
     var menuVisible = false;
     var hostUpdateInterval = null;
@@ -640,9 +655,15 @@ function createMenu(logoContainer) {
             }
         }
     });
-    // Close menu when clicking outside
+    // Close menu when clicking outside.
+    // Because menu/logo live inside a shadow root, event.target is retargeted
+    // to the shadow host for document-level listeners, so we walk the composed
+    // path to see whether the real click target was inside the menu or logo.
     document.addEventListener('click', function (e) {
-        if (menuVisible && !menu.contains(e.target) && !logoContainer.contains(e.target)) {
+        var path = typeof e.composedPath === 'function' ? e.composedPath() : [e.target];
+        var clickedInsideMenu = path.indexOf(menu) !== -1;
+        var clickedInsideLogo = path.indexOf(logoContainer) !== -1;
+        if (menuVisible && !clickedInsideMenu && !clickedInsideLogo) {
             menuVisible = false;
             menu.style.display = 'none';
             if (hostUpdateInterval) {
@@ -655,7 +676,7 @@ function createMenu(logoContainer) {
 // Create and open Settings modal
 function openSettingsModal() {
     // Remove existing modal if present
-    var existingModal = document.getElementById('debug-settings-modal');
+    var existingModal = getDebugRoot().getElementById('debug-settings-modal');
     if (existingModal) {
         existingModal.remove();
     }
@@ -834,7 +855,7 @@ function openSettingsModal() {
     hideContainer.appendChild(hideButton);
     modal.appendChild(hideContainer);
     overlay.appendChild(modal);
-    document.body.appendChild(overlay);
+    getDebugRoot().appendChild(overlay);
     // Mark as selected modal when opened
     selectModal(overlay);
     // Update close button to cleanup from modal stack
@@ -868,7 +889,7 @@ function openSendMessagesModal(uniquePanelId) {
         return;
     }
     // Remove existing modal if present
-    var existingModal = document.getElementById('debug-send-messages-modal');
+    var existingModal = getDebugRoot().getElementById('debug-send-messages-modal');
     if (existingModal) {
         existingModal.remove();
     }
@@ -1263,7 +1284,7 @@ function openSendMessagesModal(uniquePanelId) {
     });
     formContainer.appendChild(sendButton);
     modal.appendChild(formContainer);
-    document.body.appendChild(modal);
+    getDebugRoot().appendChild(modal);
 }
 // Create and open State Inspector modal
 function openStateInspectorModal(uniquePanelId) {
@@ -1274,7 +1295,7 @@ function openStateInspectorModal(uniquePanelId) {
     }
     var room = debugInfo.room;
     // Remove existing modal if present
-    var existingModal = document.getElementById('debug-state-inspector-modal');
+    var existingModal = getDebugRoot().getElementById('debug-state-inspector-modal');
     if (existingModal) {
         existingModal.remove();
     }
@@ -1663,7 +1684,7 @@ function openStateInspectorModal(uniquePanelId) {
          */
     };
     modal.appendChild(contentContainer);
-    document.body.appendChild(modal);
+    getDebugRoot().appendChild(modal);
     // Drag and resize state variables
     var isDragging = false;
     var dragStartX = 0;
@@ -1868,9 +1889,10 @@ function openStateInspectorModal(uniquePanelId) {
 }
 // Apply panel position based on current setting
 function applyPanelPosition() {
-    var logoContainer = document.getElementById('debug-logo-container');
-    var menu = document.getElementById('debug-menu');
-    var panels = document.querySelectorAll('[id^="debug-panel-"]');
+    var root = getDebugRoot();
+    var logoContainer = root.getElementById('debug-logo-container');
+    var menu = root.getElementById('debug-menu');
+    var panels = root.querySelectorAll('[id^="debug-panel-"]');
     var positions = {
         'bottom-right': { bottom: '14px', right: '14px', top: 'auto', left: 'auto' },
         'bottom-left': { bottom: '14px', left: '14px', top: 'auto', right: 'auto' },
@@ -1906,9 +1928,10 @@ function applyPanelPosition() {
 function hidePanelsForSession() {
     panelsHidden = true;
     savePreferences(); // Save the hidden state
-    var logoContainer = document.getElementById('debug-logo-container');
-    var menu = document.getElementById('debug-menu');
-    var panels = document.querySelectorAll('[id^="debug-panel-"]');
+    var root = getDebugRoot();
+    var logoContainer = root.getElementById('debug-logo-container');
+    var menu = root.getElementById('debug-menu');
+    var panels = root.querySelectorAll('[id^="debug-panel-"]');
     if (logoContainer) {
         logoContainer.style.display = 'none';
     }
@@ -1935,7 +1958,7 @@ function formatBytes(bytes) {
 // Helper function to create debug panel for a room
 function createDebugPanel(uniquePanelId, debugInfo) {
     // Check if panel already exists
-    var existingPanel = document.getElementById('debug-panel-' + uniquePanelId);
+    var existingPanel = getDebugRoot().getElementById('debug-panel-' + uniquePanelId);
     if (existingPanel) {
         return existingPanel;
     }
@@ -2064,11 +2087,12 @@ function createDebugPanel(uniquePanelId, debugInfo) {
             labelSpan.textContent = 'Reconnecting...';
     }
     // Inject CSS animation if not already present
-    if (!document.getElementById('debug-pulse-animation')) {
+    var pulseRoot = getDebugRoot();
+    if (!pulseRoot.getElementById('debug-pulse-animation')) {
         var style = document.createElement('style');
         style.id = 'debug-pulse-animation';
         style.textContent = '@keyframes debug-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }';
-        document.head.appendChild(style);
+        pulseRoot.appendChild(style);
     }
     // Apply initial style
     applyNormalStyle();
@@ -2126,12 +2150,13 @@ function createDebugPanel(uniquePanelId, debugInfo) {
     panel.appendChild(title);
     panel.appendChild(content);
     panel.appendChild(actionsContainer);
-    // Prepend panel to body so new panels appear first
-    if (document.body.firstChild) {
-        document.body.insertBefore(panel, document.body.firstChild);
+    // Prepend panel inside the shadow root so new panels appear first
+    var root = getDebugRoot();
+    if (root.firstChild) {
+        root.insertBefore(panel, root.firstChild);
     }
     else {
-        document.body.appendChild(panel);
+        root.appendChild(panel);
     }
     return panel;
 }
@@ -2139,7 +2164,7 @@ function createDebugPanel(uniquePanelId, debugInfo) {
 function repositionDebugPanels() {
     if (panelsHidden)
         return;
-    var panels = Array.from(document.querySelectorAll('[id^="debug-panel-"]'))
+    var panels = Array.from(getDebugRoot().querySelectorAll('[id^="debug-panel-"]'))
         .filter(function (panel) { return panel.style.display !== 'none'; })
         .reverse(); // Reverse to get oldest first (since new panels are prepended)
     // Calculate logoIcon container width: 22px width + 10px padding on each side = 42px
@@ -2181,35 +2206,36 @@ function repositionDebugPanels() {
 }
 // Update debug panel content
 function updateDebugPanel(uniquePanelId, debugInfo) {
+    var root = getDebugRoot();
     var contentId = 'debug-content-' + uniquePanelId;
     var panelId = 'debug-panel-' + uniquePanelId;
     var titleId = 'debug-title-' + uniquePanelId;
-    var content = document.getElementById(contentId);
-    var panel = document.getElementById(panelId);
-    var title = document.getElementById(titleId);
+    var content = root.getElementById(contentId);
+    var panel = root.getElementById(panelId);
+    var title = root.getElementById(titleId);
     if (!content || !panel) {
         // Only create if panel doesn't exist
         if (!panel) {
             createDebugPanel(uniquePanelId, debugInfo);
-            content = document.getElementById(contentId);
-            title = document.getElementById(titleId);
+            content = root.getElementById(contentId);
+            title = root.getElementById(titleId);
             repositionDebugPanels();
         }
         else {
-            content = document.getElementById(contentId);
-            title = document.getElementById(titleId);
+            content = root.getElementById(contentId);
+            title = root.getElementById(titleId);
         }
     }
     // Update title with room name only (roomId and sessionId are in tooltip)
-    var titleTextEl = document.getElementById('debug-title-text-' + uniquePanelId);
+    var titleTextEl = root.getElementById('debug-title-text-' + uniquePanelId);
     var roomNameEl = titleTextEl?.querySelector('.debug-room-name');
     if (roomNameEl)
         roomNameEl.textContent = debugInfo.roomName;
-    document.getElementById('debug-tooltip-' + uniquePanelId).innerHTML = '<div><strong>Room ID:</strong> ' + debugInfo.roomId + '</div><div><strong>Session ID:</strong> ' + debugInfo.sessionId + '</div>';
+    root.getElementById('debug-tooltip-' + uniquePanelId).innerHTML = '<div><strong>Room ID:</strong> ' + debugInfo.roomId + '</div><div><strong>Session ID:</strong> ' + debugInfo.sessionId + '</div>';
     // Update ping in header
     var pingDisplay = debugInfo.pingMs !== null ? debugInfo.pingMs + 'ms' : '--';
     var pingColor = debugInfo.pingMs !== null ? (debugInfo.pingMs < 100 ? '#22c55e' : debugInfo.pingMs < 200 ? '#eab308' : '#ef4444') : '#888';
-    var pingElement = document.getElementById('debug-ping-' + uniquePanelId);
+    var pingElement = root.getElementById('debug-ping-' + uniquePanelId);
     if (pingElement) {
         pingElement.textContent = pingDisplay;
         pingElement.style.color = pingColor;
@@ -2235,7 +2261,7 @@ function updateDebugPanel(uniquePanelId, debugInfo) {
 }
 // Draw graph on canvas
 function drawGraph(canvasId, data, color) {
-    var canvas = document.getElementById(canvasId);
+    var canvas = getDebugRoot().getElementById(canvasId);
     if (!canvas)
         return;
     var ctx = canvas.getContext('2d');
@@ -2396,7 +2422,7 @@ function applyMonkeyPatches() {
         room.onMessage('__playground_message_types', (messageTypes) => {
             debugInfo.messageTypes = messageTypes;
             // Show/hide message button based on message types availability
-            var messageBtnElement = document.getElementById('debug-message-btn-' + uniquePanelId);
+            var messageBtnElement = getDebugRoot().getElementById('debug-message-btn-' + uniquePanelId);
             if (messageBtnElement) {
                 messageBtnElement.style.display = messageTypes ? 'flex' : 'none';
             }
@@ -2530,7 +2556,7 @@ function applyMonkeyPatches() {
                 debugInfo.pingInterval = null;
             }
             roomDebugInfo.delete(uniquePanelId);
-            var panel = document.getElementById('debug-panel-' + uniquePanelId);
+            var panel = getDebugRoot().getElementById('debug-panel-' + uniquePanelId);
             if (panel) {
                 panel.remove();
                 repositionDebugPanels();