Client & network general improvement

client/src/components/Game.vue

@@ -17,6 +17,10 @@ export default {
         x: 0,
         y: 0
       },
+      camera: {
+        x: 0,
+        y: 0
+      },
       renderTimer: null
     }
   },
@@ -34,7 +38,20 @@ export default {
       return this.$store.state.game.player
     },
     players () {
-      return this.$store.state.game.players
+      const pastUpdate = this.$store.state.game.updates[0]
+      const nextUpdate = this.$store.state.game.updates[1]
+
+      if (pastUpdate === undefined) return []
+      if (pastUpdate.players === undefined) return []
+      if (nextUpdate === undefined) return pastUpdate.players
+
+      return pastUpdate.players
+
+      /*
+      const currentTime = Date.now() / 1000
+      const dt = (currentTime - pastUpdate.time) / (nextUpdate.time - pastUpdate.time)
+      return pastUpdate.players.map(player => this.interpolatePlayer(player, nextUpdate.players.find(nextPlayer => player.color === nextPlayer.color), dt))
+      */
     },
     isPaused () {
       return this.$store.state.game.paused
@@ -52,26 +69,28 @@ export default {
       this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
       this.renderBorders()
 
+      if (!this.players) return
+
       this.players.forEach(player => {
+        if (player.color === this.player.color) {
+          this.camera.x = player.x
+          this.camera.y = player.y
+          this.renderDebug(player)
+        }
         this.renderPlayer(player)
         this.renderWalls(player)
       })
-
-      this.renderDebug(this.player)
-
-      // this.checkPlayerColision()
-      this.updatePlayer(this.player)
     },
     renderBorders () {
       this.context.strokeStyle = 'black'
       this.context.lineWidth = 1
-      this.context.strokeRect(this.canvas.width / 2 - this.player.x, this.canvas.height / 2 - this.player.y, this.settings.arenaSize, this.settings.arenaSize)
+      this.context.strokeRect(this.canvas.width / 2 - this.camera.x, this.canvas.height / 2 - this.camera.y, this.settings.arenaSize, this.settings.arenaSize)
     },
     renderPlayer (player) {
       this.context.save()
 
-      const canvasX = this.canvas.width / 2 + player.x - this.player.x
-      const canvasY = this.canvas.height / 2 + player.y - this.player.y
+      const canvasX = this.canvas.width / 2 + player.x - this.camera.x
+      const canvasY = this.canvas.height / 2 + player.y - this.camera.y
 
       this.context.translate(canvasX, canvasY)
       this.context.rotate(player.angle)
@@ -86,41 +105,16 @@ export default {
       this.context.lineWidth = this.settings.wallSize
       this.context.strokeStyle = player.color
       player.walls.forEach(wall => {
-        const canvasX = this.canvas.width / 2 + wall.x - this.player.x
-        const canvasY = this.canvas.height / 2 + wall.y - this.player.y
+        const canvasX = this.canvas.width / 2 + wall.x - this.camera.x
+        const canvasY = this.canvas.height / 2 + wall.y - this.camera.y
         this.context.lineTo(canvasX, canvasY)
       })
-      this.context.lineTo(this.canvas.width / 2 + player.x - this.player.x, this.canvas.height / 2 + player.y - this.player.y)
+      this.context.lineTo(this.canvas.width / 2 + player.x - this.camera.x, this.canvas.height / 2 + player.y - this.camera.y)
       this.context.stroke()
     },
     renderDebug (player) {
       const canvasX = this.canvas.width / 2
       const canvasY = this.canvas.height / 2
-      /*
-      this.context.beginPath()
-      this.context.lineTo(canvasX, canvasY)
-      this.context.lineTo(this.mouse.x, this.mouse.y)
-      this.context.lineWidth = 1
-      this.context.strokeStyle = 'blue'
-      this.context.stroke()
-
-      const x = canvasX + 30 * Math.cos(player.angle) * 2
-      const y = canvasY + 30 * Math.sin(player.angle) * 2
-      this.context.beginPath()
-      this.context.lineTo(canvasX, canvasY)
-      this.context.lineTo(x, y)
-      this.context.lineWidth = 1
-      this.context.strokeStyle = 'yellow'
-      this.context.stroke()
-
-      const canvasX2 = this.canvas.width / 2
-      const canvasY2 = this.canvas.height / 2
-      this.context.beginPath()
-      this.context.arc(canvasX2, canvasY2, this.settings.playerSize, 0, 2 * Math.PI, false)
-      this.context.lineWidth = 1
-      this.context.strokeStyle = 'purple'
-      this.context.stroke()
-      */
 
       this.context.fillText('player x: ' + player.x + ' y:' + player.y, 10, 10)
       this.context.fillText('a:' + player.angle + ' a_t' + player.targetAngle, 10, 20)
@@ -152,17 +146,10 @@ export default {
       var dy = this.mouse.y - this.canvas.height / 2
 
       this.player.targetAngle = Math.atan2(dy, dx)
+      this.player.angle = this.player.targetAngle
       send({ message: this.player, type: 'update' })
     },
     updatePlayer (player) {
-      /*
-      this.player.lastWall++
-      if (this.player.lastWall > this.settings.wallUpdate) {
-        this.player.walls.push({ x: this.player.x, y: this.player.y })
-        this.player.lastWall = 0
-      }
-      */
-
       player.x += this.settings.playerSpeed * Math.cos(player.angle)
       player.y += this.settings.playerSpeed * Math.sin(player.angle)
 
@@ -177,55 +164,19 @@ export default {
       }
       */
     },
-    checkPlayerColision () {
-      const playerX = this.player.x
-      const playerY = this.player.y
-      // BORDERS
-      if (playerX - this.settings.playerSize < 0 ||
-          playerX + this.settings.playerSize > this.settings.arenaSize ||
-          playerY - this.settings.playerSize < 0 ||
-          playerY + this.settings.playerSize > this.settings.arenaSize
-      ) {
-        this.context.fillText('DED BORDER', this.canvas.width / 2, this.canvas.height / 2)
-      }
+    interpolatePlayer (pastPlayer, nextPlayer, dt) {
+      var player = {}
+      player.color = pastPlayer.color
+      player.walls = pastPlayer.walls
+      player.lastWall = pastPlayer.lastWall
 
-      // WALLS
-      for (var i = 0; i < this.player.walls.length - 2; i++) {
-        const wallA = this.player.walls[i]
-        const wallB = this.player.walls[i + 1]
-        if (this.isCloseToWall(wallA.x, wallA.y, wallB.x, wallB.y, playerX, playerY, this.settings.playerSize)) {
-          if (this.isCrossingLine(wallA.x, wallA.y, wallB.x, wallB.y, playerX, playerY, this.settings.playerSize)) {
-            this.context.fillText('DED WALL OWN', this.canvas.width / 2, this.canvas.height / 2)
-            this.context.beginPath()
-            const canvasX = this.canvas.width / 2 + wallA.x - this.player.x
-            const canvasY = this.canvas.height / 2 + wallA.y - this.player.y
-            this.context.lineTo(canvasX, canvasY)
-            const canvasX2 = this.canvas.width / 2 + wallB.x - this.player.x
-            const canvasY2 = this.canvas.height / 2 + wallB.y - this.player.y
-            this.context.lineTo(canvasX2, canvasY2)
-            this.context.lineWidth = this.settings.wallSize
-            this.context.strokeStyle = 'purple'
-            this.context.stroke()
-          }
-        }
-      }
-    },
-    isCloseToWall (xa, ya, xb, yb, xc, yc, radius) {
-      var xar = Math.min(xa, xb) - radius
-      var yar = Math.min(ya, yb) - radius
-      var xbr = Math.max(xa, xb) + radius
-      var ybr = Math.max(ya, yb) + radius
+      player.x = pastPlayer.x + (nextPlayer.x - pastPlayer.x) * dt
+      player.y = pastPlayer.y + (nextPlayer.y - pastPlayer.y) * dt
 
-      return ((xc >= xar && xc <= xbr) && (yc >= yar && yc <= ybr))
-    },
-    isCrossingLine (xa, ya, xb, yb, xc, yc, radius) {
-      var a = xc - xa
-      var b = xb - xa
-      var c = yc - ya
-      var d = yb - ya
-      var result = (a * d - b * c) / Math.sqrt(Math.pow(xa - xb, 2) + Math.pow(ya - yb, 2))
+      player.angle = pastPlayer.angle + (nextPlayer.angle - pastPlayer.angle) * dt
+      player.targetAngle = pastPlayer.targetAngle + (nextPlayer.targetAngle - pastPlayer.targetAngle) * dt
 
-      return result < radius
+      return player
     }
   }
 }