Added broken interpolation

client/src/components/Game.vue

@@ -16,6 +16,7 @@
 <script>
 import { send } from '@/store/socketPlugin'
 import { render } from '@/game/render.js'
+// import { update } from '@/game/update.js'
 import { sound } from '@/game/sound.js'
 
 export default {
@@ -32,7 +33,7 @@ export default {
       },
       stats: {
         totalWalls: 0,
-        lastUpdateTime: 0,
+        lastUpdateTime: {},
         lastFrame: 0
       },
       renderTimer: null
@@ -60,12 +61,6 @@ export default {
       if (nextUpdate === undefined) return pastUpdate.players
 
       return nextUpdate.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
@@ -91,6 +86,8 @@ export default {
       this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
       render.borders(this.context, this.canvas, this.camera, this.settings)
 
+      // const players = update.computePlayers(this.$store.state.game.updates, this.$store.state.game.firstUpdateTime, this.$store.state.game.gameStartTime)
+
       if (!this.players) return
       this.stats.totalWalls = 0
 
@@ -102,7 +99,8 @@ export default {
 
         if (player.state === 'DEAD') this.context.globalAlpha = 0.1
 
-        render.wallsBezier(this.context, this.canvas, this.camera, this.settings, player)
+        // render.wallsBezier(this.context, this.canvas, this.camera, this.settings, player)
+        render.walls(this.context, this.canvas, this.camera, this.settings, player)
 
         if (player.name === 'e' || player.name === 'q' || player.name === 'r' || player.name === 't') render.playerFace(this.context, this.canvas, this.camera, this.settings, player, player.name)
         else render.player(this.context, this.canvas, this.camera, this.settings, player)

client/src/game/render.js

@@ -78,7 +78,7 @@ export const render = {
 
     context.moveTo(canvasX1, canvasY1)
 
-    for (var i = 1; i < player.walls.length - 1; i++) {
+    for (var i = 1; i < player.walls.length - 1; i += 2) {
       canvasX1 = canvas.width / 2 + player.walls[i].x - camera.x
       canvasY1 = canvas.height / 2 + player.walls[i].y - camera.y
 
@@ -129,16 +129,5 @@ export const render = {
       context.fillText(player.name + ' - ' + player.score + ' (' + player.bestScore + ')', canvas.width - 50, 15 + i * 10)
       i++
     })
-  },
-  dead (context, canvas, player) {
-    const canvasX = canvas.width / 2
-    const canvasY = canvas.height / 2
-
-    context.fillStyle = 'white'
-    context.textAlign = 'center'
-    context.fillText('YO DED', canvasX, canvasY - 50)
-    context.fillText('Score: ' + player.score, canvasX, canvasY)
-    context.fillText('Best score so far ' + player.bestScore, canvasX, canvasY + 25)
-    context.fillText('Tap to respawn', canvasX, canvasY + 50)
   }
 }

client/src/game/update.js

@@ -0,0 +1,36 @@
+export const update = {
+  getUpdate (updates, currentServerTime) {
+    for (var i = updates.length - 1; i >= 0; i--) {
+      if (updates[i].time <= currentServerTime) return i
+    }
+    return -1
+  },
+  interpolatePlayer (basePlayer, nextPlayer, dt) {
+    var player = basePlayer
+    player.x = basePlayer.x + (nextPlayer.x - basePlayer.x) * dt
+    player.y = basePlayer.y + (nextPlayer.y - basePlayer.y) * dt
+    // very bad
+    player.angle = basePlayer.angle + (nextPlayer.angle - basePlayer.angle) * dt
+    return player
+  },
+  computePlayers (updates, firstUpdateTime, gameStartTime) {
+    console.log(updates)
+    const currentServerTime = firstUpdateTime + (Date.now() - gameStartTime) - 100
+    if (!updates) return []
+    if (updates.length === 0) return []
+
+    const baseUpdateIndex = this.getUpdate(updates, currentServerTime)
+    if (baseUpdateIndex === -1) {
+      return updates[updates.length - 1].players
+    } else if (baseUpdateIndex === updates.length) {
+      console.log('POUET')
+      return updates[updates.length - 1].players
+    } else {
+      const baseUpdate = updates[baseUpdateIndex]
+      const nextUpdate = updates[baseUpdateIndex + 1]
+      const dt = (currentServerTime - baseUpdate.time) / (nextUpdate.time - baseUpdate.time)
+      console.log('INTERPOLATION ' + dt)
+      return baseUpdate.players.map(player => this.interpolatePlayer(player, nextUpdate.players.find(player2 => player.color === player2.color), dt))
+    }
+  }
+}

client/src/store/gameModule.js

@@ -9,6 +9,8 @@ const state = {
   },
   leaderboard: [],
   updates: [],
+  firstUpdateTime: null,
+  gameStartTime: null,
   settings: {
     playerSize: 10,
     playerSpeed: 2,
@@ -74,10 +76,14 @@ const mutations = {
     state.socketConnected = connected
   },
   ADD_UPDATE (state, update) {
+    if (state.updates.length === 0) {
+      state.gameStartTime = Date.now()
+      state.firstUpdateTime = update.time
+    }
+
     if (state.updates.length > 2) {
       state.updates.shift()
     }
-    update.time = update.time.epochSecond
     state.updates.push(update)
   },
   CLEAR_UPDATE (state) {
@@ -86,6 +92,8 @@ const mutations = {
   SET_LEADERBOARD (state, players) {
     state.leaderboard = []
 
+    if (!players) return
+
     players.forEach(player => {
       state.leaderboard.push({
         name: player.name,

client/src/store/socketPlugin.js

@@ -1,7 +1,7 @@
 import { ToastProgrammatic as Toast } from 'buefy'
 
-// const connection = new WebSocket('ws://localhost:8181/socket')
-const connection = new WebSocket('wss://tronio.gltronic.ovh/socket')
+const connection = new WebSocket('ws://localhost:8181/socket')
+// const connection = new WebSocket('wss://tronio.gltronic.ovh/socket')
 
 export default function createSocketPlugin () {
   return store => {