compatibility with latest @colyseus/core

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colyseus/playground",
-  "version": "0.15.4",
+  "version": "0.15.6",
   "dependencies": {
     "@colyseus/core": "^0.15.0"
   },

src-backend/colyseus.ext.ts

@@ -1,18 +1,23 @@
-import { Server } from '@colyseus/core';
+import http from "http";
+import { Server, Room, Client, ClientState } from '@colyseus/core';
 
 const originalDefine = Server.prototype.define;
 export const allRoomNames: string[] = [];
 
-// @ts-ignore
-Server.prototype.define = function(name, handler, options) {
-    allRoomNames.push(name);
+const original_onJoin = Room.prototype._onJoin;
+
+Room.prototype._onJoin = async function(client: Client, req?: http.IncomingMessage) {
+  const result = await original_onJoin.apply(this, arguments);
 
-    const definition = originalDefine.call(this, name, handler, options);
+  if (client.state === ClientState.JOINING) {
+    client.send("__playground_message_types", Object.keys(this['onMessageHandlers']));
+  }
 
-    // notify client about all registered message handlers
-    definition.on("join", (room, client) => {
-        client.send("__playground_message_types", Object.keys(room['onMessageHandlers']));
-    });
+  return result;
+}
 
-    return definition
+// @ts-ignore
+Server.prototype.define = function(name, handler, options) {
+    allRoomNames.push(name);
+    return originalDefine.call(this, name, handler, options);
 };

src/components/JoinRoomForm.tsx

@@ -92,8 +92,9 @@ export function JoinRoomForm ({
 
 		// skip if reconnecting on devMode (previous room events are successfuly re-used.)
 		// when using .reconnect() events need to be bound again
-		if (existingConnection && !needRebindEvents) {
-			return;
+		if (existingConnection) {
+			if (!needRebindEvents) { return; }
+			existingConnection.isConnected = true;
 		}
 
 		// get existing Connection for sessionId, or create a new one

src/components/StateView.tsx

@@ -14,7 +14,7 @@ export function StateView({
 	const [state, setState] = useState(room.state && room.state.toJSON());
 	const hasState = (room.state !== null);
 
-	console.log("RENDER STATE VIEW (bind onStateChange)");
+	// console.log("RENDER STATE VIEW (bind onStateChange)");
 	room.onStateChange((state) => setState(state.toJSON()));
 
 	return <JsonView src={state} enableClipboard={false} />;

src/sections/Playground.tsx

@@ -27,7 +27,7 @@ export function Playground() {
 		if (global.connections.indexOf(connection) !== -1) {
 			// reconnected! (via devMode or .reconnect())
 			connection.isConnected = true;
-			setConnections(global.connections);
+			setConnections([...global.connections]);
 
 		} else {
 			// new connection

src/utils/ColyseusSDKExt.ts

@@ -70,9 +70,9 @@ Room.prototype['onMessageCallback'] = function(event: MessageEvent) {
 
 function getEventType(code: number) {
   // TODO: fix nomenclature on SDK itself
-  let eventType = Protocol[code].replace("ROOM_", "");
+  let eventType = Protocol[code]?.replace("ROOM_", "");
   if (eventType === "DATA") {
     eventType = "MESSAGE";
   }
   return eventType;
-}
+}

src/utils/Types.ts

@@ -8,8 +8,9 @@ export type Connection = {
   events: LimitedArray;
 };
 
-export const endpoint = `${window.location.protocol}//${window.location.host}${window.location.pathname.replace(/\/+$/, '')}`;
-export const client = new Client();
+// export const endpoint = `${window.location.protocol}//${window.location.host}${window.location.pathname.replace(/\/+$/, '')}`;
+export const endpoint = "http://localhost:2567"
+export const client = new Client(endpoint);
 
 export const global = { connections: [] as Connection[], };
 

tsconfig.json

@@ -15,6 +15,7 @@
     "noFallthroughCasesInSwitch": true,
     "module": "esnext",
     "moduleResolution": "node",
+    "noImplicitAny": false,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,