Animated sprite support, server bug fixes

client/src/components/Game.vue

@@ -18,6 +18,7 @@
 import { send } from '@/store/socketPlugin'
 import { render } from '@/game/render.js'
 import { sound } from '@/game/sound.js'
+import { Explosion } from '@/game/sprites.js'
 
 export default {
   name: 'Game',
@@ -34,8 +35,10 @@ export default {
       stats: {
         totalWalls: 0,
         lastUpdateTime: {},
-        lastFrame: 0
+        lastFrame: 0,
+        lastSpriteFrame: 0
       },
+      deadPlayers: [],
       renderTimer: null
     }
   },
@@ -52,6 +55,9 @@ export default {
     player () {
       return this.$store.state.game.player
     },
+    sprites () {
+      return this.$store.state.game.sprites
+    },
     players () {
       const pastUpdate = this.$store.state.game.updates[0]
       const nextUpdate = this.$store.state.game.updates[1]
@@ -69,7 +75,6 @@ export default {
       return this.$store.state.game.leaderboard
     },
     playerIsDead () {
-      if (this.player.state === 'DEAD') sound.explosion()
       return this.player.state === 'DEAD'
     }
   },
@@ -78,7 +83,8 @@ export default {
     this.canvas.addEventListener('mousemove', this.mouseEvent)
     this.canvas.addEventListener('touchmove', this.touchEvent)
     this.canvas.addEventListener('resize', this.setCanvasSize)
-    // this.renderTimer = setInterval(this.render, 1000 / 120)
+    // this.renderTimer = setInterval(this.render, 1000 / 60)
+    // this.renderTimer = setInterval(this.renderSprites, 1000 / 30)
     this.render()
   },
   methods: {
@@ -108,19 +114,59 @@ export default {
         if (player.state === 'DEAD') this.context.globalAlpha = 1
 
         this.stats.totalWalls += player.walls.length
+
+        // Check if player was dead before for one time event
+        if (player.state === 'DEAD' && !this.deadPlayers.includes(player.id)) {
+          this.deadPlayers.push(player.id)
+          sound.explosion()
+          this.sprites.push(new Explosion(player.x, player.y))
+        }
+
+        // Remove player from dead list
+        if (player.state !== 'DEAD' && this.deadPlayers.includes(player.id)) {
+          const i = this.deadPlayers.indexOf(player.id)
+          this.deadPlayers.splice(i, 1)
+        }
       })
 
-      render.leaderboard(this.context, this.canvas, this.leaderboard)
+      this.renderSprites()
+
       render.mouse(this.context, this.mouse, this.player)
+      render.leaderboard(this.context, this.canvas, this.leaderboard)
       render.debug(this.context, this.camera, this.mouse, this.canvas, this.stats)
 
       this.stats.lastFrame = performance.now()
 
       const nextUpdate = this.$store.state.game.updates[1]
       if (nextUpdate !== undefined) this.stats.lastUpdateTime = nextUpdate.time
-
       requestAnimationFrame(this.render, this.canvas)
     },
+    renderSprites () {
+      let nextFrame = false
+      // Check if needed to show next frame for animations
+      if ((performance.now() - this.stats.lastSpriteFrame) > 50) {
+        nextFrame = true
+        this.stats.lastSpriteFrame = performance.now()
+      }
+
+      this.sprites.forEach((sprite, index, object) => {
+        render.sprite(this.context, this.canvas, this.camera, sprite)
+        if (nextFrame) {
+          if (sprite.framesCounter === sprite.frames) {
+            if (sprite.removeAfterAnimation) {
+              object.splice(index, 1)
+              console.log('SPRITE ', index, 'REMOVE')
+            } else {
+              // console.log('SPRITE ', index, 'frame reset')
+              sprite.framesCounter = 0
+            }
+          } else {
+            // console.log('SPRITE ', index, 'frame++', sprite.framesCounter)
+            sprite.framesCounter++
+          }
+        }
+      })
+    },
     mouseEvent (event) {
       var rect = this.canvas.getBoundingClientRect()
       this.mouse.x = event.clientX - rect.left
@@ -171,7 +217,8 @@ export default {
       send({ type: 'respawn' })
     },
     quit () {
-
+      send({ type: 'logout' })
+      this.$store.dispatch('game/logout')
     }
   }
 }