diff --git a/src/components/entities.jsx b/src/components/entities.jsx index f92b21b..2dea392 100644 --- a/src/components/entities.jsx +++ b/src/components/entities.jsx @@ -4,7 +4,7 @@ export default function Entities({entities}) { return ( <> { - Object.values(entities) + entities .map(({image, position: [x, y]}, i) => ( { function onMessage(message) { const {type, payload} = message; diff --git a/src/server/server.js b/src/server/server.js index 2e61164..ee9ef00 100644 --- a/src/server/server.js +++ b/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; } diff --git a/src/server/socket.js b/src/server/socket.js index 0004909..ab1da02 100644 --- a/src/server/socket.js +++ b/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(); }); diff --git a/src/server/worker.js b/src/server/worker.js index beb5e40..3427467 100644 --- a/src/server/worker.js +++ b/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); };