Got multiplayer semi working

Sending controls over socket.io might not be the way to go
There is some lag causing the players to not be lined up on all clients

launch.json

@@ -0,0 +1,9 @@
+{
+    "name": "Launch via npm",
+    "type": "node",
+    "request": "launch",
+    "cwd": "${workspaceFolder}",
+    "runtimeExecutable": "npm",
+    "runtimeArgs": ["run-script", "start"],
+    "port": 9229
+}

package-lock.json

@@ -377,9 +377,9 @@
       "integrity": "sha512-wGUIVQXuehL5TCqQun8OW81jGzAWycqzFF8lFp+GOM5BXLYj3bKNsYC4daB7n6XjCqxQA/qgTJ+8ANR3acjrog=="
     },
     "asdf-games": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/asdf-games/-/asdf-games-1.1.0.tgz",
-      "integrity": "sha512-GK+rS2vlQmiZG3fadAy+PRtVzTNPqkcr9RoihobQahe765odqLluZpMKEtmUk4y6uN9rDPBRVk3e0X2SjsA8Yw=="
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/asdf-games/-/asdf-games-1.1.1.tgz",
+      "integrity": "sha512-gw9TNJlwd6WQSIEMnQ6UhLbEjevmXOONC5fi6CiwIxNRmgaMsO4WaGHxxGZMv2tQgadhV80rf/VL2x7d9ZFQhw=="
     },
     "astral-regex": {
       "version": "1.0.0",

package.json

@@ -28,7 +28,7 @@
   },
   "license": "ISC",
   "dependencies": {
-    "asdf-games": "^1.1.0",
+    "asdf-games": "^1.1.1",
     "socket.io": "^2.3.0"
   },
   "devDependencies": {

src/entities/Tank.js

@@ -5,8 +5,8 @@ const { Container, TileSpriteXML, math } = asdf;
 const container = new Container();
 
 class Body extends TileSpriteXML {
-  constructor(keyboard, mouse, tanksTexture, tanksXml) {
-    super(tanksTexture, tanksXml, tanksXml.findIndex("name", "tankBody_blue.png"));
+  constructor(keyboard, mouse, tanksTexture, tanksXml, colour) {
+    super(tanksTexture, tanksXml, tanksXml.findIndex("name", `tankBody_${colour.toLowerCase()}.png`));
     this.mouse = mouse;
     this.keyboard = keyboard;
     this.pos = { x: 250, y: 100 };
@@ -51,8 +51,8 @@ class Body extends TileSpriteXML {
 }
 
 class Barrel extends TileSpriteXML {
-  constructor(body, mouse, tanksTexture, tanksXml) {
-    super(tanksTexture, tanksXml, tanksXml.findIndex("name", "tankBlue_barrel2_outline.png"));
+  constructor(body, mouse, tanksTexture, tanksXml, colour) {
+    super(tanksTexture, tanksXml, tanksXml.findIndex("name", `tank${colour}_barrel2_outline.png`));
     this.mouse = mouse;
     this.body = body;
     this.pos = { x: 0, y: 0 };
@@ -82,13 +82,14 @@ class Barrel extends TileSpriteXML {
 }
 
 class Tank extends Container {
-  constructor(keyboard, mouse, texture, xml) {
+  constructor(keys, mouse, texture, xml, colour) {
     super(container);
-    var body = new Body(keyboard, mouse, texture, xml);
-    var barrel = new Barrel(body, mouse, texture, xml);
+    this.keys = keys;
+    this.mouse = mouse;
+    var body = new Body(this.keys, this.mouse, texture, xml, colour);
+    var barrel = new Barrel(body, this.mouse, texture, xml, colour);
     this.add(body);
     this.add(barrel);
-
   }
 }
 

src/screens/game.js

@@ -2,7 +2,7 @@ var io = require("socket.io-client");
 
 const asdf = require("asdf-games");
 // eslint-disable-next-line no-unused-vars
-const { Container, Camera, Texture, SpriteSheetXML, TileMapXML } = asdf;
+const { Container, Camera, Texture, SpriteSheetXML, TileMapXML, KeyControls, MouseControls } = asdf;
 
 const texture = new Texture("../res/images/allSprites_default.png");
 const xml = new SpriteSheetXML("../res/images/allSprites_default.xml");
@@ -12,7 +12,6 @@ const Tank = require("../entities/Tank.js");
 class GameScreen extends Container {
   constructor(game, controls, onGameOver) {
     super();
-  
     this.game = game;
     this.scene = this;
     this.controls = controls;
@@ -20,6 +19,7 @@ class GameScreen extends Container {
   
     this.controls.keys.reset();
 
+    // Draw level
     const level = [
       161, 160, 160, 161, 160, 159, 134, 135, 143, 134, 135, 135,
       161, 160, 160, 161, 161, 159, 135, 134, 143, 135, 135, 134,
@@ -33,27 +33,57 @@ class GameScreen extends Container {
 
     this.add(new TileMapXML(level, Math.ceil(this.game.w / 64), Math.ceil(this.game.h / 64), texture, xml));
 
-    this.player = new Tank(this.controls.keys, this.controls.mouse, texture, xml);
-    this.add(this.player);
-
+    // Connect to TanksJS-Server instance
     this.socket = io("http://localhost:3000");
     this.socket.on("identify", () => {
       this.socket.emit("identification", {
         name: "Arn",
-        gamemode: 2
+        gamemode: 2,
+        controls: JSON.stringify(this.controls)
       });
       console.log(`Connected to server as ${this.socket.id}`);
     });
 
-    this.players = [];
+    // Define tank colours
+    const colours = ["Blue", "Red", "Green", "Yellow"];
 
+    this.players = {};
+
+    // Define local player
+    this.player = new Tank(this.controls.keys, this.controls.mouse, texture, xml, colours[Object.keys(this.players).length]);
+    this.player.uuid = this.socket.id;
+    console.log(this.player);
+    this.add(this.player);
+
+    // Store current state of controls for comparing
     this.controlsBuffer = JSON.stringify(this.controls);
 
     // Handle player logins    
     this.socket.on("roomUpdate", (data) => {
-      console.log(data);
+      // Add any player that is not the local player and is not already added
+      for (const id in data) {
+        if (id != this.socket.id && !(this.players[id])) {
+          this.players[id] = new Tank(new KeyControls(false), new MouseControls(false), texture, xml, colours[Object.keys(this.players).length]);
+          this.add(this.players[id]);
+        }
+      }
+
+      console.log(this.players);
+      // TODO: Remove players who left
+    });
+
+    // Handle player updates
+    this.socket.on("update", (data) => {
+      var controls = JSON.parse(data.controls);
+      Object.assign(this.players[data.uuid].mouse, controls.mouse);
+      Object.assign(this.players[data.uuid].keys, controls.keys);
+      console.log(this.players[data.uuid]);
+    });
+
+    // TODO: Lock player untill game starts
+    this.socket.on("gameStart", () => {
+      this.player.locked = false;
     });
-    
   }
 
 
@@ -61,24 +91,12 @@ class GameScreen extends Container {
   update(dt, t) {
     super.update(dt, t); 
 
-    // TODO: Lock player untill game starts
-    this.socket.on("gameStart", () => {
-      this.player.locked = false;
-    });
-
     // Only send when controls are updated and minify data sent
     if (JSON.stringify(this.controls) != this.controlsBuffer) {
       console.log("Sending updates");
       this.socket.emit("update", JSON.stringify(this.controls));
       this.controlsBuffer = JSON.stringify(this.controls);
-    }
-
-
-    // Handle player updates
-    this.socket.on("update", (data) => {
-      console.log(data);
-    });
-    
+    }    
   }
 }