src/client/local.js

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

src/client/remote.js

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

src/components/configuration.jsx

@@ -1,8 +0,0 @@
-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 (
     <>
       {
-        entities
+        Object.values(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 = 20;
+const TPS = 60;
 
 const MOVE_MAP = {
   'moveUp': 0,
@@ -11,23 +11,24 @@ const MOVE_MAP = {
 export default class Server {
 
   constructor() {
-    this.connections = [];
-    this.connectedPlayers = new Map();
-    this.entities = [];
+    this.dude = {
+      image: './assets/bunny.png',
+      movement: [0, 0, 0, 0],
+      position: [50, 50],
+    };
     this.frame = 0;
     this.last = Date.now();
   }
 
-  accept(connection, {type, payload}) {
+  accept({type, payload}) {
     switch (type) {
       case 'connect': {
-        this.send(connection, {type: 'connected', payload: Array.from(this.connectedPlayers.values())});
+        this.send({type: 'connected', payload: {dude: this.dude}});
         break;
       }
       case 'action': {
-        const connectedPlayer = this.connectedPlayers.get(connection);
         if (payload.type in MOVE_MAP) {
-          connectedPlayer.movement[MOVE_MAP[payload.type]] = payload.value;
+          this.dude.movement[MOVE_MAP[payload.type]] = payload.value;
         }
         break;
       }
@@ -35,17 +36,6 @@ 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;
@@ -55,24 +45,16 @@ export default class Server {
   }
 
   tick(elapsed) {
-    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.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,
+      },
+    });
     this.frame += 1;
   }
 

src/server/socket.js

@@ -8,15 +8,12 @@ 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) {
-  server.connectPlayer(ws);
+  const server = new class SocketServer extends Server {
+    send(data) { ws.send(JSON.stringify(data)); }
+  }
   ws.on('message', function message(data) {
-    server.accept(ws, JSON.parse(data));
+    server.accept(JSON.parse(data));
   });
+  server.start();
 });

src/server/worker.js

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