feat: multiple connections

src/client/local.js

@@ -11,4 +11,3 @@ export default class LocalClient extends Client {
     this.worker.postMessage(message);
   }
 }
-

src/client/remote.js

@@ -4,9 +4,7 @@ export default class RemoteClient extends Client {
   async connect() {
     this.socket = new WebSocket(`ws://${window.location.host}/ws`);
     this.socket.onmessage = (event) => {
-      for (const i in this.listeners) {
-        this.listeners[i](JSON.parse(event.data));
-      }
+      this.accept(JSON.parse(event.data));
     };
     await new Promise((resolve) => {
       this.socket.onopen = resolve;

src/components/configuration.jsx

@@ -0,0 +1,8 @@
+export default function Configuration() {
+  return (
+    <div>
+      <h1>Configuration</h1>
+      <p>This is the configuration page.</p>
+    </div>
+  );
+}

src/components/entities.jsx

@@ -4,7 +4,7 @@ export default function Entities({entities}) {
   return (
     <>
       {
-        Object.values(entities)
+        entities
           .map(({image, position: [x, y]}, i) => (
             <Sprite
               image={image}

src/components/pixi.jsx

@@ -11,7 +11,7 @@ import styles from './pixi.module.css';
 
 export default function Pixi() {
   const client = useContext(ClientContext);
-  const [entities, setEntities] = useState({});
+  const [entities, setEntities] = useState([]);
   useEffect(() => {
     function onMessage(message) {
       const {type, payload} = message;

src/server/server.js

@@ -1,5 +1,5 @@
 const SPEED = 100;
-const TPS = 60;
+const TPS = 20;
 
 const MOVE_MAP = {
   'moveUp': 0,
@@ -11,24 +11,23 @@ const MOVE_MAP = {
 export default class Server {
 
   constructor() {
-    this.dude = {
-      image: './assets/bunny.png',
-      movement: [0, 0, 0, 0],
-      position: [50, 50],
-    };
+    this.connections = [];
+    this.connectedPlayers = new Map();
+    this.entities = [];
     this.frame = 0;
     this.last = Date.now();
   }
 
-  accept({type, payload}) {
+  accept(connection, {type, payload}) {
     switch (type) {
       case 'connect': {
-        this.send({type: 'connected', payload: {dude: this.dude}});
+        this.send(connection, {type: 'connected', payload: Array.from(this.connectedPlayers.values())});
         break;
       }
       case 'action': {
+        const connectedPlayer = this.connectedPlayers.get(connection);
         if (payload.type in MOVE_MAP) {
-          this.dude.movement[MOVE_MAP[payload.type]] = payload.value;
+          connectedPlayer.movement[MOVE_MAP[payload.type]] = payload.value;
         }
         break;
       }
@@ -36,6 +35,17 @@ export default class Server {
     }
   }
 
+  connectPlayer(connection) {
+    this.connections.push(connection);
+    const entity = {
+      image: './assets/bunny.png',
+      movement: [0, 0, 0, 0],
+      position: [50, 50],
+    };
+    this.entities.push(entity);
+    this.connectedPlayers.set(connection, entity);
+  }
+
   start() {
     return setInterval(() => {
       const elapsed = (Date.now() - this.last) / 1000;
@@ -45,16 +55,24 @@ export default class Server {
   }
 
   tick(elapsed) {
-    this.dude.position[0] += SPEED * elapsed * (this.dude.movement[1] - this.dude.movement[3]);
-    this.dude.position[1] += SPEED * elapsed * (this.dude.movement[2] - this.dude.movement[0]);
-    this.send({
-      type: 'tick',
-      payload: {
-        entities: {dude: this.dude},
-        elapsed,
-        frame: this.frame,
-      },
-    });
+    for (const connection of this.connections) {
+      const {movement, position} = this.connectedPlayers.get(connection);
+      position[0] += SPEED * elapsed * (movement[1] - movement[3]);
+      position[1] += SPEED * elapsed * (movement[2] - movement[0]);
+    }
+    for (const connection of this.connections) {
+      this.send(
+        connection,
+        {
+          type: 'tick',
+          payload: {
+            entities: this.entities,
+            elapsed,
+            frame: this.frame,
+          },
+        },
+      );
+    }
     this.frame += 1;
   }
 

src/server/socket.js

@@ -8,12 +8,15 @@ const {
 
 const wss = new WebSocketServer({port: SILPHIUS_WEBSOCKET_PORT});
 
+const server = new class SocketServer extends Server {
+  send(ws, data) { ws.send(JSON.stringify(data)); }
+}
+
+server.start();
+
 wss.on('connection', function connection(ws) {
-  const server = new class SocketServer extends Server {
-    send(data) { ws.send(JSON.stringify(data)); }
-  }
+  server.connectPlayer(ws);
   ws.on('message', function message(data) {
-    server.accept(JSON.parse(data));
+    server.accept(ws, JSON.parse(data));
   });
-  server.start();
 });

src/server/worker.js

@@ -1,9 +1,11 @@
 import Server from './server.js';
 
 const server = new class WorkerServer extends Server {
-  send(data) { postMessage(data); }
+  send(connection, data) { postMessage(data); }
 }
 
-onmessage = ({data}) => { server.accept(data); };
-
 server.start();
+
+server.connectPlayer(undefined);
+
+onmessage = ({data}) => { server.accept(undefined, data); };