0.16

LICENSE

@@ -1,4 +1,4 @@
-Copyright (c) 2015-2016 Endel Dreyer
+Copyright (c) 2015-2024 Endel Dreyer
 
 MIT License:
 

dist/index.html

@@ -11,7 +11,7 @@
     <strong>Messages</strong><br>
 
     <form id="form">
-      Endpoint: <input type="text" id="endpoint" value="ws://localhost:2567" /> <br />
+      Endpoint: <input type="text" id="endpoint" value="https://localhost:2567" /> <br />
       Room name: <input type="text" id="room_name" value="my_room" /> <br />
 
       Send data: <input type="text" id="message_type" value="" placeholder="messageType" />
@@ -26,6 +26,7 @@
     <button onclick="create()">Create</button>
     <button onclick="joinByLastId()">Join by last id</button>
     <button onclick="getAvailableRooms()">List avaiable rooms</button>
+    <button onclick="sendRandomBytes()">Send random bytes</button>
     <button onclick="closeConnection()">Close connection</button>
     <button onclick="reconnect()">Re-join last closed connection</button>
 
@@ -37,24 +38,65 @@
       }
 
       function addListeners (room) {
+          const $ = Colyseus.getStateCallbacks(room);
+
           console.log('joined!');
-        //   room.onMessage("*", (type, message) => {
-        //       console.log("received message:", type, "=>", message);
-        //   });
 
-          room.onMessage("onJoin", () => {});
+          room.onMessage("*", (type, message) => {
+              console.log("received message:", type, "=>", message);
+          });
+
+          // listen to player "add" events
+          $(room.state).players.onAdd(function(player, sessionId) {
+            console.log("ADD PLAYER", player);
+
+            var el = document.createElement("div");
+            el.id = "player-" + sessionId;
+            el.style.pointerEvents = "none";
+            el.style.display = "block";
+            el.style.position = "absolute";
+            el.style.width = "10px";
+            el.style.height = "10px";
+            el.style.backgroundColor = "red";
+            // el.style.left = player.x + "px";
+            // el.style.top = player.y + "px";
+            document.body.appendChild(el);
+
+            $(player).onChange(function() {
+                el.style.left = player.x + "px";
+                el.style.top = player.y + "px";
+            });
+          });
+
+          // listen to player "remove" events
+          $(room.state).players.onRemove(function(player, sessionId) {
+            var el = document.getElementById("player-" + sessionId);
+            el.parentNode.removeChild(el);
+          });
+
+          room.onMessage("*", (type, message) => {
+              console.log("onMessage:", { type, message });
+          });
+
+          var onmousemove = function (event) {
+              room.sendUnreliable("move", { x: event.clientX, y: event.clientY });
+            //   room.send("move", { x: event.clientX, y: event.clientY });
+          };
+
+          document.addEventListener("mousemove", onmousemove);
 
           room.onLeave(function() {
               console.log("LEFT ROOM", arguments);
+              document.removeEventListener("mousemove", onmousemove);
           });
 
           room.onError(function(code, message) {
               console.log("on error:", {code, message});
           });
 
-        //   room.onStateChange(function(state) {
-        //       console.log("state change: ", state.toJSON());
-        //   });
+          room.onStateChange(function(state) {
+            //   console.log("state change: ", state.toJSON());
+          });
       }
 
       function join () {
@@ -87,6 +129,15 @@
           });
       }
 
+      function sendRandomBytes() {
+          const bytes = new Uint8Array(32);
+          for (let i=0; i < bytes.length; i++) {
+              bytes[i] = Math.floor(Math.random() * 256);
+          }
+          console.log("sending bytes", Array.from(bytes));
+          room.sendBytes("bytes", bytes);
+      }
+
       function getAvailableRooms() {
           getClient().getAvailableRooms(document.getElementById('room_name').value).then((rooms) => {
               console.log(rooms);