@colyseus/sdk 0.17.40 → 0.17.42

package/dist/debug.js

@@ -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.42
 (function (Client_ts, sharedTypes) {
   'use strict';
 
@@ -86,6 +86,19 @@
   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 @@
       // 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 @@
       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 @@
       // 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 @@
               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 @@
                 border: none;
             }
         `;
-          document.head.appendChild(style);
+          root.appendChild(style);
       }
       // Initialize slider color
       updateSliderColor(parseInt(latencySlider.value));
@@ -557,10 +572,10 @@
             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 @@
           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 @@
               }
           }
       });
-      // 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 @@
   // 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 @@
       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
@@ -869,7 +890,7 @@
           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();
       }
@@ -1267,7 +1288,7 @@
       });
       formContainer.appendChild(sendButton);
       modal.appendChild(formContainer);
-      document.body.appendChild(modal);
+      getDebugRoot().appendChild(modal);
   }
   // Create and open State Inspector modal
   function openStateInspectorModal(uniquePanelId) {
@@ -1279,7 +1300,7 @@
       }
       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();
       }
@@ -1669,7 +1690,7 @@
            */
       };
       modal.appendChild(contentContainer);
-      document.body.appendChild(modal);
+      getDebugRoot().appendChild(modal);
       // Drag and resize state variables
       var isDragging = false;
       var dragStartX = 0;
@@ -1874,9 +1895,10 @@
   }
   // 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' },
@@ -1912,9 +1934,10 @@
   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';
       }
@@ -1941,7 +1964,7 @@
   // 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;
       }
@@ -2070,11 +2093,12 @@
               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();
@@ -2132,12 +2156,13 @@
       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;
   }
@@ -2145,7 +2170,7 @@
   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
@@ -2187,35 +2212,36 @@
   }
   // 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 === null || titleTextEl === void 0 ? void 0 : 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;
@@ -2241,7 +2267,7 @@
   }
   // 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');
@@ -2403,7 +2429,7 @@
           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';
               }
@@ -2537,7 +2563,7 @@
                   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();