@colyseus/sdk 0.17.13 → 0.17.15

package/dist/debug.js

@@ -3,8 +3,8 @@
 // This software is released under the MIT License.
 // https://opensource.org/license/MIT
 //
-// colyseus.js@0.17.13
-(function (schema, msgpackr, NodeWebSocket) {
+// colyseus.js@0.17.15
+(function (sharedTypes, schema, msgpackr, NodeWebSocket) {
     'use strict';
 
     /******************************************************************************
@@ -410,17 +410,6 @@
         __rewriteRelativeImportExtension: __rewriteRelativeImportExtension,
     };
 
-    var CloseCode;
-    (function (CloseCode) {
-        CloseCode[CloseCode["NORMAL_CLOSURE"] = 1000] = "NORMAL_CLOSURE";
-        CloseCode[CloseCode["GOING_AWAY"] = 1001] = "GOING_AWAY";
-        CloseCode[CloseCode["NO_STATUS_RECEIVED"] = 1005] = "NO_STATUS_RECEIVED";
-        CloseCode[CloseCode["ABNORMAL_CLOSURE"] = 1006] = "ABNORMAL_CLOSURE";
-        CloseCode[CloseCode["CONSENTED"] = 4000] = "CONSENTED";
-        CloseCode[CloseCode["SERVER_SHUTDOWN"] = 4001] = "SERVER_SHUTDOWN";
-        CloseCode[CloseCode["WITH_ERROR"] = 4002] = "WITH_ERROR";
-        CloseCode[CloseCode["DEVMODE_RESTART"] = 4010] = "DEVMODE_RESTART";
-    })(CloseCode || (CloseCode = {}));
     class ServerError extends Error {
         constructor(code, message) {
             super(message);
@@ -618,12 +607,22 @@
                 this.ws = new WebSocket(url, this.protocols);
             }
             this.ws.binaryType = 'arraybuffer';
-            this.ws.onopen = this.events.onopen;
-            this.ws.onmessage = this.events.onmessage;
-            this.ws.onclose = this.events.onclose;
-            this.ws.onerror = this.events.onerror;
+            this.ws.onopen = (event) => { var _a, _b; return (_b = (_a = this.events).onopen) === null || _b === void 0 ? void 0 : _b.call(_a, event); };
+            this.ws.onmessage = (event) => { var _a, _b; return (_b = (_a = this.events).onmessage) === null || _b === void 0 ? void 0 : _b.call(_a, event); };
+            this.ws.onclose = (event) => { var _a, _b; return (_b = (_a = this.events).onclose) === null || _b === void 0 ? void 0 : _b.call(_a, event); };
+            this.ws.onerror = (event) => { var _a, _b; return (_b = (_a = this.events).onerror) === null || _b === void 0 ? void 0 : _b.call(_a, event); };
         }
         close(code, reason) {
+            //
+            // trigger the onclose event immediately if the code is MAY_TRY_RECONNECT
+            // when "offline" event is triggered, the close frame is delayed. this
+            // way client can try to reconnect immediately.
+            //
+            if (code === sharedTypes.CloseCode.MAY_TRY_RECONNECT && this.events.onclose) {
+                this.ws.onclose = null;
+                this.events.onclose({ code, reason });
+            }
+            // then we close the connection
             this.ws.close(code, reason);
         }
         get isOpen() {
@@ -631,9 +630,23 @@
         }
     }
 
+    var _Connection__offlineListener;
+    const onOfflineListeners = [];
+    const hasGlobalEventListeners = typeof (addEventListener) === "function" && typeof (removeEventListener) === "function";
+    if (hasGlobalEventListeners) {
+        /**
+         * Detects when the network is offline and closes all connections.
+         * (When switching wifi networks, etc.)
+         */
+        addEventListener("offline", () => {
+            console.warn(`@colyseus/sdk: 🛑 Network offline. Closing ${onOfflineListeners.length} connection(s)`);
+            onOfflineListeners.forEach((listener) => listener());
+        }, false);
+    }
     class Connection {
         constructor(protocol) {
             this.events = {};
+            _Connection__offlineListener.set(this, (hasGlobalEventListeners) ? () => this.close(sharedTypes.CloseCode.MAY_TRY_RECONNECT) : null);
             switch (protocol) {
                 case "h3":
                     this.transport = new H3TransportTransport(this.events);
@@ -644,6 +657,18 @@
             }
         }
         connect(url, options) {
+            if (hasGlobalEventListeners) {
+                const onOpen = this.events.onopen;
+                this.events.onopen = (ev) => {
+                    onOfflineListeners.push(__classPrivateFieldGet(this, _Connection__offlineListener, "f"));
+                    onOpen === null || onOpen === void 0 ? void 0 : onOpen(ev);
+                };
+                const onClose = this.events.onclose;
+                this.events.onclose = (ev) => {
+                    onOfflineListeners.splice(onOfflineListeners.indexOf(__classPrivateFieldGet(this, _Connection__offlineListener, "f")), 1);
+                    onClose === null || onClose === void 0 ? void 0 : onClose(ev);
+                };
+            }
             this.url = url;
             this.options = options;
             this.transport.connect(url, options);
@@ -665,6 +690,7 @@
             return this.transport.isOpen;
         }
     }
+    _Connection__offlineListener = new WeakMap();
 
     // Use codes between 0~127 for lesser throughput (1 byte)
     var Protocol;
@@ -852,7 +878,7 @@
             // reconnection logic
             this.reconnection = {
                 retryCount: 0,
-                maxRetries: 8,
+                maxRetries: 15,
                 delay: 100,
                 minDelay: 100,
                 maxDelay: 5000,
@@ -874,7 +900,6 @@
                 this.serializer = new (getSerializer("schema"));
                 this.serializer.state = new rootSchema();
             }
-            this.onError((code, message) => { var _a; return (_a = console.warn) === null || _a === void 0 ? void 0 : _a.call(console, `colyseus.js - onError => (${code}) ${message}`); });
             this.onLeave(() => this.removeAllListeners());
         }
         connect(endpoint, options, headers) {
@@ -888,10 +913,10 @@
                     this.onError.invoke(e.code, e.reason);
                     return;
                 }
-                if (e.code === CloseCode.NO_STATUS_RECEIVED ||
-                    e.code === CloseCode.ABNORMAL_CLOSURE ||
-                    e.code === CloseCode.GOING_AWAY ||
-                    e.code === CloseCode.DEVMODE_RESTART) {
+                if (e.code === sharedTypes.CloseCode.NO_STATUS_RECEIVED ||
+                    e.code === sharedTypes.CloseCode.ABNORMAL_CLOSURE ||
+                    e.code === sharedTypes.CloseCode.GOING_AWAY ||
+                    e.code === sharedTypes.CloseCode.MAY_TRY_RECONNECT) {
                     this.onDrop.invoke(e.code, e.reason);
                     this.handleReconnection();
                 }
@@ -901,8 +926,6 @@
                 }
             };
             this.connection.events.onerror = (e) => {
-                var _a;
-                (_a = console.warn) === null || _a === void 0 ? void 0 : _a.call(console, `Room, onError (${e.code}): ${e.reason}`);
                 this.onError.invoke(e.code, e.reason);
             };
             /**
@@ -932,7 +955,7 @@
                     }
                 }
                 else {
-                    this.onLeave.invoke(CloseCode.CONSENTED);
+                    this.onLeave.invoke(sharedTypes.CloseCode.CONSENTED);
                 }
             });
         }
@@ -940,6 +963,11 @@
             return this.onMessageHandlers.on(this.getMessageHandlerKey(type), callback);
         }
         ping(callback) {
+            var _a;
+            // skip if connection is not open
+            if (!((_a = this.connection) === null || _a === void 0 ? void 0 : _a.isOpen)) {
+                return;
+            }
             __classPrivateFieldSet(this, _Room_lastPingTime, now(), "f");
             __classPrivateFieldSet(this, _Room_pingCallback, callback, "f");
             this.packr.buffer[0] = Protocol.PING;
@@ -1097,7 +1125,7 @@
                 this.dispatchMessage(type, buffer.subarray(it.offset));
             }
             else if (code === Protocol.PING) {
-                (_a = __classPrivateFieldGet(this, _Room_pingCallback, "f")) === null || _a === void 0 ? void 0 : _a.call(this, now() - __classPrivateFieldGet(this, _Room_lastPingTime, "f"));
+                (_a = __classPrivateFieldGet(this, _Room_pingCallback, "f")) === null || _a === void 0 ? void 0 : _a.call(this, Math.round(now() - __classPrivateFieldGet(this, _Room_lastPingTime, "f")));
                 __classPrivateFieldSet(this, _Room_pingCallback, undefined, "f");
             }
         }
@@ -1134,7 +1162,6 @@
                 return;
             }
             if (!this.reconnection.isReconnecting) {
-                console.info(`[Colyseus reconnection]: ${String.fromCodePoint(0x1F504)} Re-establishing connection with roomId '${this.roomId}'...`); // 🔄
                 this.reconnection.retryCount = 0;
                 this.reconnection.isReconnecting = true;
             }
@@ -1143,16 +1170,18 @@
         retryReconnection() {
             this.reconnection.retryCount++;
             const delay = Math.min(this.reconnection.maxDelay, Math.max(this.reconnection.minDelay, this.reconnection.backoff(this.reconnection.retryCount, this.reconnection.delay)));
-            console.info(`[Colyseus reconnection]: ${String.fromCodePoint(0x1F504)} will retry in ${delay}ms... (${this.reconnection.retryCount} out of ${this.reconnection.maxRetries})`); // 🔄
+            console.info(`[Colyseus reconnection]: ${String.fromCodePoint(0x023F3)} will retry in ${(delay / 1000).toFixed(1)} seconds...`); // 🔄
             // Wait before attempting reconnection
             setTimeout(() => {
                 try {
+                    console.info(`[Colyseus reconnection]: ${String.fromCodePoint(0x1F504)} Re-establishing sessionId '${this.sessionId}' with roomId '${this.roomId}'... (attempt ${this.reconnection.retryCount} of ${this.reconnection.maxRetries})`); // 🔄
                     this.connection.reconnect({
                         reconnectionToken: this.reconnectionToken.split(":")[1],
                         skipHandshake: true, // we already applied the handshake on first join
                     });
                 }
                 catch (e) {
+                    console.log(".reconnect() failed", e);
                     if (this.reconnection.retryCount < this.reconnection.maxRetries) {
                         this.retryReconnection();
                     }
@@ -1808,7 +1837,7 @@
                     }
                 };
                 conn.events.onerror = (event) => {
-                    reject(new ServerError(CloseCode.ABNORMAL_CLOSURE, `Failed to get latency: ${event.message}`));
+                    reject(new ServerError(sharedTypes.CloseCode.ABNORMAL_CLOSURE, `Failed to get latency: ${event.message}`));
                 };
                 conn.connect(this.getHttpEndpoint());
             });
@@ -1905,6 +1934,7 @@
     const settingsIcon = `<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="200px" width="200px" xmlns="http://www.w3.org/2000/svg"><path d="M12.003 21c-.732 .001 -1.465 -.438 -1.678 -1.317a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c.886 .215 1.325 .957 1.318 1.694"></path><path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"></path><path d="M19.001 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path><path d="M19.001 15.5v1.5"></path><path d="M19.001 21v1.5"></path><path d="M22.032 17.25l-1.299 .75"></path><path d="M17.27 20l-1.3 .75"></path><path d="M15.97 17.25l1.3 .75"></path><path d="M20.733 20l1.3 .75"></path></svg>`;
     const eyeSlashIcon = `<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>`;
     const closeIcon = `<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49z"></path></svg>`;
+    const disconnectIcon = `<svg fill="currentColor" viewBox="0 0 36 36" height="200px" width="200px"><path fill="currentColor" d="M18 24.42a4 4 0 1 0 4 4a4 4 0 0 0-4-4m0 6a2 2 0 1 1 2-2a2 2 0 0 1-2 2" class="clr-i-outline clr-i-outline-path-1"></path><path fill="currentColor" d="M26.21 21.85a1 1 0 0 0-.23-1.4a13.6 13.6 0 0 0-5-2.23l3.87 3.87a1 1 0 0 0 1.36-.24" class="clr-i-outline clr-i-outline-path-2"></path><path fill="currentColor" d="M18.05 10.72a21 21 0 0 0-4.16.43l1.74 1.74a19 19 0 0 1 2.42-.17A18.76 18.76 0 0 1 28.64 16a1 1 0 0 0 1.12-1.65a20.75 20.75 0 0 0-11.71-3.63" class="clr-i-outline clr-i-outline-path-3"></path><path fill="currentColor" d="M33.55 8.2A28.11 28.11 0 0 0 8.11 5.36l1.58 1.57a26 26 0 0 1 22.76 2.94a1 1 0 0 0 1.1-1.67" class="clr-i-outline clr-i-outline-path-4"></path><path fill="currentColor" d="m1.84 4.75l2.43 2.43c-.62.34-1.23.7-1.83 1.1a1 1 0 1 0 1.12 1.66C4.26 9.47 5 9 5.74 8.65l3.87 3.87a20.6 20.6 0 0 0-3.38 1.88A1 1 0 0 0 7.36 16a18.8 18.8 0 0 1 3.77-2l4.16 4.16A13.5 13.5 0 0 0 10 20.55a1 1 0 0 0 1.18 1.61A11.5 11.5 0 0 1 17 20l10.8 10.8l1.41-1.41l-26-26Z" class="clr-i-outline clr-i-outline-path-5"></path><path fill="none" d="M0 0h36v36H0z"></path></svg>`;
     // Store debug info per room
     const roomDebugInfo = new Map();
     // Single interval for all panels
@@ -3806,12 +3836,16 @@
     }
     // Helper function to format bytes
     function formatBytes(bytes) {
-        if (bytes === 0)
+        if (!bytes) {
             return '0 B';
+        }
+        else if (bytes < 1) {
+            bytes = 1; // avoid visual glitches
+        }
         var k = 1024;
         var sizes = ['B', 'KB', 'MB', 'GB'];
         var i = Math.floor(Math.log(bytes) / Math.log(k));
-        return (bytes / Math.pow(k, i)).toFixed(1) + ' ' + sizes[i];
+        return (Math.round(bytes) / Math.pow(k, i)).toFixed(1) + ' ' + sizes[i];
     }
     // Helper function to create debug panel for a room
     function createDebugPanel(uniquePanelId, debugInfo) {
@@ -3843,15 +3877,16 @@
         title.style.paddingBottom = '4px';
         title.style.display = 'flex';
         title.style.alignItems = 'center';
-        title.style.gap = '4px';
+        title.style.justifyContent = 'space-between';
+        title.style.gap = '8px';
         title.style.position = 'relative';
-        title.innerHTML = '<span style="display: inline-flex; align-items: center;"></span><span id="debug-title-text-' + uniquePanelId + '"></span><span id="debug-message-icon-' + uniquePanelId + '" style="display: none; align-items: center; margin-left: auto; cursor: pointer; opacity: 0.6; transition: opacity 0.2s; margin-right: 4px; width: 16px; height: 16px;">' + messageIcon.replace('height="200px" width="200px"', 'height="16" width="16"') + '</span><span id="debug-hamburger-icon-' + uniquePanelId + '" style="display: inline-flex; align-items: center; cursor: pointer; opacity: 0.6; transition: opacity 0.2s; margin-right: 4px; width: 16px; height: 16px;">' + treeViewIcon.replace('height="200px" width="200px"', 'height="16" width="16"') + '</span><span id="debug-info-icon-' + uniquePanelId + '" style="display: inline-flex; align-items: center; cursor: pointer; opacity: 0.6; transition: opacity 0.2s; width: 16px; height: 16px;">' + infoIcon + '</span>';
-        // Create tooltip for info icon
+        title.innerHTML = '<span id="debug-title-text-' + uniquePanelId + '"><span class="debug-room-name"></span><span class="debug-info-icon" style="display: inline-flex; align-items: center; margin-left: 4px; cursor: pointer; opacity: 0.6; vertical-align: middle;">' + infoIcon.replace('height="200px" width="200px"', 'height="10" width="10"') + '</span></span><span id="debug-ping-' + uniquePanelId + '" style="font-size: 10px; font-weight: normal; color: #888;" title="Ping time">--</span>';
+        // Create tooltip for info button (will be shown on hover)
         var tooltip = document.createElement('div');
         tooltip.id = 'debug-tooltip-' + uniquePanelId;
         tooltip.style.position = 'absolute';
         tooltip.style.top = '100%';
-        tooltip.style.right = '0';
+        tooltip.style.left = '0';
         tooltip.style.marginTop = '4px';
         tooltip.style.padding = '6px 8px';
         tooltip.style.backgroundColor = 'rgba(0, 0, 0, 0.95)';
@@ -3863,60 +3898,149 @@
         tooltip.style.display = 'none';
         tooltip.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.5)';
         tooltip.style.lineHeight = '1.4';
-        tooltip.innerHTML = '<div><strong>Room ID:</strong> ' + debugInfo.roomId + '</div><div><strong>Session ID:</strong> N/A</div><div><strong>Host:</strong> N/A</div>';
-        title.appendChild(tooltip);
-        // Add hover handlers - use a small delay to ensure element exists
-        setTimeout(function () {
-            var infoIconElement = document.getElementById('debug-info-icon-' + uniquePanelId);
-            if (infoIconElement) {
-                var showTooltip = function () {
-                    tooltip.style.display = 'block';
-                    infoIconElement.style.opacity = '1';
-                };
-                var hideTooltip = function () {
-                    tooltip.style.display = 'none';
-                    infoIconElement.style.opacity = '0.6';
-                };
-                infoIconElement.addEventListener('mouseenter', showTooltip);
-                infoIconElement.addEventListener('mouseleave', hideTooltip);
-                // Also handle tooltip hover to keep it visible
-                tooltip.style.pointerEvents = 'auto';
-                tooltip.addEventListener('mouseenter', showTooltip);
-                tooltip.addEventListener('mouseleave', hideTooltip);
-            }
-            // Add click handler for hamburger icon
-            var hamburgerIconElement = document.getElementById('debug-hamburger-icon-' + uniquePanelId);
-            if (hamburgerIconElement) {
-                hamburgerIconElement.addEventListener('mouseenter', function () {
-                    hamburgerIconElement.style.opacity = '1';
-                });
-                hamburgerIconElement.addEventListener('mouseleave', function () {
-                    hamburgerIconElement.style.opacity = '0.6';
-                });
-                hamburgerIconElement.addEventListener('click', function (e) {
-                    e.stopPropagation();
-                    openStateInspectorModal(uniquePanelId);
-                });
-            }
-            // Add click handler for message icon
-            var messageIconElement = document.getElementById('debug-message-icon-' + uniquePanelId);
-            if (messageIconElement) {
-                messageIconElement.addEventListener('mouseenter', function () {
-                    messageIconElement.style.opacity = '1';
-                });
-                messageIconElement.addEventListener('mouseleave', function () {
-                    messageIconElement.style.opacity = '0.6';
-                });
-                messageIconElement.addEventListener('click', function (e) {
-                    e.stopPropagation();
-                    openSendMessagesModal(uniquePanelId);
-                });
-            }
-        }, 0);
+        tooltip.innerHTML = '<div><strong>Room ID:</strong> ' + debugInfo.roomId + '</div><div><strong>Session ID:</strong> N/A</div>';
         var content = document.createElement('div');
         content.id = 'debug-content-' + uniquePanelId;
+        // Create action buttons container at the bottom
+        var actionsContainer = document.createElement('div');
+        actionsContainer.id = 'debug-actions-' + uniquePanelId;
+        actionsContainer.style.display = 'flex';
+        actionsContainer.style.gap = '4px';
+        actionsContainer.style.marginTop = '8px';
+        actionsContainer.style.paddingTop = '6px';
+        actionsContainer.style.borderTop = '1px solid rgba(255, 255, 255, 0.15)';
+        actionsContainer.style.position = 'relative';
+        // Helper function to create action button
+        function createActionButton(id, icon, label, onClick) {
+            var btn = document.createElement('button');
+            btn.id = id;
+            btn.style.display = 'flex';
+            btn.style.alignItems = 'center';
+            btn.style.gap = '4px';
+            btn.style.padding = '4px 8px';
+            btn.style.border = '1px solid rgba(255, 255, 255, 0.2)';
+            btn.style.borderRadius = '4px';
+            btn.style.background = 'rgba(255, 255, 255, 0.05)';
+            btn.style.color = '#fff';
+            btn.style.fontSize = '9px';
+            btn.style.cursor = 'pointer';
+            btn.style.transition = 'background 0.2s, border-color 0.2s';
+            btn.innerHTML = '<span style="display: inline-flex; align-items: center; width: 12px; height: 12px;">' + icon + '</span><span>' + label + '</span>';
+            btn.addEventListener('mouseenter', function () {
+                btn.style.background = 'rgba(255, 255, 255, 0.15)';
+                btn.style.borderColor = 'rgba(255, 255, 255, 0.3)';
+            });
+            btn.addEventListener('mouseleave', function () {
+                btn.style.background = 'rgba(255, 255, 255, 0.05)';
+                btn.style.borderColor = 'rgba(255, 255, 255, 0.2)';
+            });
+            btn.addEventListener('click', function (e) {
+                e.stopPropagation();
+                onClick();
+            });
+            return btn;
+        }
+        // Create action buttons
+        var stateBtn = createActionButton('debug-state-btn-' + uniquePanelId, treeViewIcon.replace('height="200px" width="200px"', 'height="12" width="12"'), 'State', function () { openStateInspectorModal(uniquePanelId); });
+        var messageBtn = createActionButton('debug-message-btn-' + uniquePanelId, messageIcon.replace('height="200px" width="200px"', 'height="12" width="12"'), 'Send', function () { openSendMessagesModal(uniquePanelId); });
+        messageBtn.style.display = 'none'; // Hidden by default, shown when message types available
+        // Create disconnect button (red, simulates abnormal websocket close)
+        var disconnectBtn = createActionButton('debug-disconnect-btn-' + uniquePanelId, disconnectIcon.replace('height="200px" width="200px"', 'height="12" width="12"'), 'Drop', function () {
+            var info = roomDebugInfo.get(uniquePanelId);
+            if (info && info.room && info.room.connection) {
+                // Simulate connection closure
+                info.room.connection.close(sharedTypes.CloseCode.MAY_TRY_RECONNECT);
+            }
+        });
+        // Track button state for hover effects
+        var isReconnecting = false;
+        // Helper to apply normal (red) button style
+        function applyNormalStyle() {
+            disconnectBtn.style.background = 'rgba(239, 68, 68, 0.2)';
+            disconnectBtn.style.borderColor = 'rgba(239, 68, 68, 0.5)';
+            disconnectBtn.style.color = '#ef4444';
+            disconnectBtn.style.animation = '';
+            disconnectBtn.style.pointerEvents = 'auto';
+            disconnectBtn.style.opacity = '1';
+            var labelSpan = disconnectBtn.querySelector('span:last-child');
+            if (labelSpan)
+                labelSpan.textContent = 'Drop';
+        }
+        // Helper to apply reconnecting (orange/pulsing) button style
+        function applyReconnectingStyle() {
+            disconnectBtn.style.background = 'rgba(251, 146, 60, 0.3)';
+            disconnectBtn.style.borderColor = 'rgba(251, 146, 60, 0.6)';
+            disconnectBtn.style.color = '#fb923c';
+            disconnectBtn.style.animation = 'debug-pulse 1.5s ease-in-out infinite';
+            disconnectBtn.style.pointerEvents = 'none';
+            disconnectBtn.style.opacity = '0.8';
+            var labelSpan = disconnectBtn.querySelector('span:last-child');
+            if (labelSpan)
+                labelSpan.textContent = 'Reconnecting...';
+        }
+        // Inject CSS animation if not already present
+        if (!document.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);
+        }
+        // Apply initial style
+        applyNormalStyle();
+        // Register onDrop callback to show reconnecting state
+        if (debugInfo.room) {
+            debugInfo.room.onDrop(function () {
+                isReconnecting = true;
+                applyReconnectingStyle();
+            });
+            // Register onReconnect callback to restore normal state
+            debugInfo.room.onReconnect(function () {
+                isReconnecting = false;
+                applyNormalStyle();
+            });
+        }
+        // Hover effects (only when not reconnecting)
+        disconnectBtn.addEventListener('mouseenter', function () {
+            if (!isReconnecting) {
+                disconnectBtn.style.background = 'rgba(239, 68, 68, 0.35)';
+                disconnectBtn.style.borderColor = 'rgba(239, 68, 68, 0.7)';
+            }
+        });
+        disconnectBtn.addEventListener('mouseleave', function () {
+            if (!isReconnecting) {
+                disconnectBtn.style.background = 'rgba(239, 68, 68, 0.2)';
+                disconnectBtn.style.borderColor = 'rgba(239, 68, 68, 0.5)';
+            }
+        });
+        // Add tooltip hover handlers to info icon in title
+        title.appendChild(tooltip);
+        var infoIconEl = title.querySelector('.debug-info-icon');
+        var tooltipTimeout = null;
+        var showTooltip = function () {
+            if (tooltipTimeout) {
+                clearTimeout(tooltipTimeout);
+                tooltipTimeout = null;
+            }
+            tooltip.style.display = 'block';
+        };
+        var hideTooltip = function () {
+            tooltipTimeout = setTimeout(function () {
+                tooltip.style.display = 'none';
+            }, 100);
+        };
+        if (infoIconEl) {
+            infoIconEl.addEventListener('mouseenter', showTooltip);
+            infoIconEl.addEventListener('mouseleave', hideTooltip);
+        }
+        tooltip.style.pointerEvents = 'auto';
+        tooltip.addEventListener('mouseenter', showTooltip);
+        tooltip.addEventListener('mouseleave', hideTooltip);
+        actionsContainer.appendChild(stateBtn);
+        actionsContainer.appendChild(messageBtn);
+        actionsContainer.appendChild(disconnectBtn);
         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);
@@ -3991,16 +4115,27 @@
                 title = document.getElementById(titleId);
             }
         }
-        // Update title with room name only (roomId, sessionId, and Host are in tooltip)
-        document.getElementById('debug-title-text-' + uniquePanelId).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><div><strong>Host:</strong> ' + debugInfo.host + '</div>';
+        // Update title with room name only (roomId and sessionId are in tooltip)
+        var titleTextEl = document.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>';
+        // 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);
+        if (pingElement) {
+            pingElement.textContent = pingDisplay;
+            pingElement.style.color = pingColor;
+        }
         var html = '<div style="line-height: 1.3;">';
         html += '<div style="font-size: 10px; display: flex; gap: 8px;">';
         html += '<div style="flex: 1;">';
         html += '<div style="margin-bottom: 4px;"><div style="display: flex; align-items: center; gap: 6px;"><span style="display: inline-flex; align-items: center; width: 18px; height: 18px; color: #FF9800;">' + envelopeUp + '</span><span style="color: #FF9800;">' + formatBytes(debugInfo.bytesSentPerSec) + '/s</span></div><div style="margin-left: 24px; opacity: 0.7; font-size: 9px;">' + debugInfo.messagesSentPerSec.toFixed(0) + ' messages</div></div>';
         html += '<div><div style="display: flex; align-items: center; gap: 6px;"><span style="display: inline-flex; align-items: center; width: 18px; height: 18px; color: #2196F3;">' + envelopeDown + '</span><span style="color: #2196F3;">' + formatBytes(debugInfo.bytesReceivedPerSec) + '/s</span></div><div style="margin-left: 24px; opacity: 0.7; font-size: 9px;">' + debugInfo.messagesReceivedPerSec.toFixed(0) + ' messages</div></div>';
         html += '</div>';
-        html += '<div style="display: flex; flex-direction: column; gap: 4px;">';
+        html += '<div style="display: flex; flex-direction: column; gap: 4px; align-items: flex-end;">';
         html += '<canvas id="graph-sent-' + uniquePanelId + '" width="80" height="30" style="display: block;"></canvas>';
         html += '<canvas id="graph-received-' + uniquePanelId + '" width="80" height="30" style="display: block;"></canvas>';
         html += '</div>';
@@ -4157,16 +4292,28 @@
                 bytesReceivedHistory: [],
                 // historyTimestamps: [],
                 maxHistoryLength: 60, // Keep last 60 data points (1 minute at 1 second intervals)
-                messageTypes: null // Will store message types from __playground_message_types
+                messageTypes: null, // Will store message types from __playground_message_types
+                pingMs: null, // Current ping value in milliseconds
+                pingInterval: null // Interval for pinging the room
             };
             roomDebugInfo.set(uniquePanelId, debugInfo);
+            // Start ping interval (every 2 seconds)
+            debugInfo.pingInterval = setInterval(() => {
+                room.ping((ms) => {
+                    debugInfo.pingMs = ms;
+                });
+            }, 2000);
+            // Initial ping
+            room.ping((ms) => {
+                debugInfo.pingMs = ms;
+            });
             // Listen for __playground_message_types message
             room.onMessage('__playground_message_types', (messageTypes) => {
                 debugInfo.messageTypes = messageTypes;
-                // Show/hide message icon based on message types availability
-                var messageIconElement = document.getElementById('debug-message-icon-' + uniquePanelId);
-                if (messageIconElement) {
-                    messageIconElement.style.display = messageTypes ? 'inline-flex' : 'none';
+                // Show/hide message button based on message types availability
+                var messageBtnElement = document.getElementById('debug-message-btn-' + uniquePanelId);
+                if (messageBtnElement) {
+                    messageBtnElement.style.display = messageTypes ? 'flex' : 'none';
                 }
             });
             // Helper function to track received message/bytes
@@ -4214,41 +4361,38 @@
                 debugInfo.bytesSent += data.length;
                 debugInfo.bytesSentDelta += data.length;
             }
-            // Monkey-patch: WebSocket transport
-            if (transport.ws) {
-                const originalOnMessage = transport.ws.onmessage;
-                const ws = transport.ws;
-                transport.ws.onmessage = function (event) {
-                    // Clone event data to avoid issues with delayed processing
-                    var eventData = event.data;
-                    if (eventData instanceof Blob) {
-                        eventData = eventData.slice();
-                    }
-                    else if (eventData instanceof ArrayBuffer) {
-                        eventData = eventData.slice(0);
-                    }
-                    else if (typeof eventData === 'string') {
-                        eventData = eventData;
-                    }
-                    trackReceivedMessage(eventData);
-                    // Apply latency simulation for received messages
-                    if (preferences.latencySimulation.enabled && preferences.latencySimulation.delay > 0) {
-                        setTimeout(function () {
-                            // Create a synthetic event-like object
-                            var syntheticEvent = {
-                                data: eventData,
-                                target: ws,
-                                currentTarget: ws,
-                                type: 'message'
-                            };
-                            originalOnMessage.call(ws, syntheticEvent);
-                        }, preferences.latencySimulation.delay);
-                    }
-                    else {
-                        return originalOnMessage.apply(this, arguments);
-                    }
-                };
-            }
+            // Monkey-patch: track received messages through onmessage event
+            const originalOnMessage = transport.events.onmessage;
+            transport.events.onmessage = function (event) {
+                // Clone event data to avoid issues with delayed processing
+                var eventData = event.data;
+                if (eventData instanceof Blob) {
+                    eventData = eventData.slice();
+                }
+                else if (eventData instanceof ArrayBuffer) {
+                    eventData = eventData.slice(0);
+                }
+                else if (typeof eventData === 'string') {
+                    eventData = eventData;
+                }
+                trackReceivedMessage(eventData);
+                // Apply latency simulation for received messages
+                if (preferences.latencySimulation.enabled && preferences.latencySimulation.delay > 0) {
+                    setTimeout(function () {
+                        // Create a synthetic event-like object
+                        var syntheticEvent = {
+                            data: eventData,
+                            target: event.target,
+                            currentTarget: event.currentTarget,
+                            type: 'message'
+                        };
+                        originalOnMessage.call(event.target, syntheticEvent);
+                    }, preferences.latencySimulation.delay);
+                }
+                else {
+                    return originalOnMessage.apply(this, arguments);
+                }
+            };
             // Monkey-patch: sending messages through room connection
             const originalSend = room.connection.send.bind(room.connection);
             room.connection.send = function (data) {
@@ -4278,6 +4422,11 @@
             ensureGlobalUpdateInterval();
             // Clean up on room leave
             room.onLeave.once(() => {
+                // Clear ping interval
+                if (debugInfo.pingInterval !== null) {
+                    clearInterval(debugInfo.pingInterval);
+                    debugInfo.pingInterval = null;
+                }
                 roomDebugInfo.delete(uniquePanelId);
                 var panel = document.getElementById('debug-panel-' + uniquePanelId);
                 if (panel) {
@@ -4300,31 +4449,23 @@
         // Patch joinOrCreate
         Client.prototype.joinOrCreate = function () {
             var promise = originalJoinOrCreate.apply(this, arguments);
-            return promise.then(function (room) {
-                return patchRoom(room);
-            });
+            return promise.then((room) => patchRoom(room));
         };
         // Patch join
         Client.prototype.join = function () {
             var promise = originalJoin.apply(this, arguments);
-            return promise.then(function (room) {
-                return patchRoom(room);
-            });
+            return promise.then((room) => patchRoom(room));
         };
         // Patch create
         Client.prototype.create = function () {
             var promise = originalCreate.apply(this, arguments);
-            return promise.then(function (room) {
-                return patchRoom(room);
-            });
+            return promise.then((room) => patchRoom(room));
         };
         // Patch reconnect
         if (originalReconnect) {
             Client.prototype.reconnect = function () {
                 var promise = originalReconnect.apply(this, arguments);
-                return promise.then(function (room) {
-                    return patchRoom(room);
-                });
+                return promise.then((room) => patchRoom(room));
             };
         }
     }
@@ -4339,5 +4480,5 @@
         initialize();
     }
 
-})(Colyseus, Colyseus, Colyseus);
+})(Colyseus, Colyseus, Colyseus, Colyseus);
 //# sourceMappingURL=debug.js.map