Added leaderboard, music & respawn screen

client/src/components/Game.vue

@@ -1,5 +1,11 @@
 <template>
   <div class="game">
+    <b-modal v-model="playerIsDead">
+      <h1 class="title">DED</h1>
+      <h2 class="title">Score: {{player.score}}</h2>
+      <h3 class="subtitle">Best score: {{player.bestScore}}</h3>
+      <b-button @click="respawn">Respawn</b-button>
+    </b-modal>
     <canvas
       class="game-canvas"
       ref="canvas">
@@ -9,6 +15,9 @@
 
 <script>
 import { send } from '@/store/socketPlugin'
+import { render } from '@/game/render.js'
+import { sound } from '@/game/sound.js'
+
 export default {
   name: 'Game',
   data () {
@@ -22,7 +31,6 @@ export default {
         y: 0
       },
       stats: {
-        leaderboard: [],
         totalWalls: 0,
         lastUpdateTime: 0,
         lastFrame: 0
@@ -51,7 +59,7 @@ export default {
       if (pastUpdate.players === undefined) return []
       if (nextUpdate === undefined) return pastUpdate.players
 
-      return pastUpdate.players
+      return nextUpdate.players
 
       /*
       const currentTime = Date.now() / 1000
@@ -61,26 +69,29 @@ export default {
     },
     isPaused () {
       return this.$store.state.game.paused
+    },
+    leaderboard () {
+      return this.$store.state.game.leaderboard
+    },
+    playerIsDead () {
+      if (this.player.state === 'DEAD') sound.explosion()
+      return this.player.state === 'DEAD'
     }
   },
   mounted () {
-    this.canvas.width = window.innerWidth
-    this.canvas.height = window.innerHeight
+    this.setCanvasSize()
     this.canvas.addEventListener('mousemove', this.mouseEvent)
     this.canvas.addEventListener('touchmove', this.touchEvent)
-    this.renderTimer = setInterval(this.render, 1000 / 120)
+    this.canvas.addEventListener('resize', this.setCanvasSize)
+    // this.renderTimer = setInterval(this.render, 1000 / 120)
+    this.render()
   },
   methods: {
     render () {
       this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
-      this.renderBorders()
+      render.borders(this.context, this.canvas, this.camera, this.settings)
 
       if (!this.players) return
-
-      this.players.sort((a, b) => {
-        return b.walls.length - a.walls.length
-      })
-      this.stats.leaderboard = []
       this.stats.totalWalls = 0
 
       this.players.forEach(player => {
@@ -88,78 +99,25 @@ export default {
           this.camera.x = player.x
           this.camera.y = player.y
         }
-        this.renderPlayer(player)
-        this.renderWalls(player)
-        this.stats.leaderboard.push(player.name + ' - ' + player.walls.length)
+
+        if (player.state === 'DEAD') this.context.globalAlpha = 0.1
+        render.walls(this.context, this.canvas, this.camera, this.settings, player)
+        render.player(this.context, this.canvas, this.camera, this.settings, player)
+        if (player.state === 'DEAD') this.context.globalAlpha = 1
+
         this.stats.totalWalls += player.walls.length
       })
 
-      this.renderLeaderboard()
-      this.renderMouse()
-
-      this.renderDebug()
+      render.leaderboard(this.context, this.canvas, this.leaderboard)
+      render.mouse(this.context, this.mouse, this.player)
+      render.debug(this.context, this.camera, this.mouse, this.canvas, this.stats)
 
       this.stats.lastFrame = performance.now()
-    },
-    renderBorders () {
-      this.context.strokeStyle = 'white'
-      this.context.lineWidth = 1
-      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.camera.x
-      const canvasY = this.canvas.height / 2 + player.y - this.camera.y
+      const nextUpdate = this.$store.state.game.updates[1]
+      if (nextUpdate !== undefined) this.stats.lastUpdateTime = nextUpdate.time
 
-      this.context.translate(canvasX, canvasY)
-      this.context.rotate(player.angle)
-      this.context.fillStyle = player.color
-      this.context.fillRect(-this.settings.playerSize, -this.settings.playerSize, this.settings.playerSize * 2, this.settings.playerSize * 2)
-      this.context.translate(0, 0)
-
-      this.context.restore()
-    },
-    renderWalls (player) {
-      this.context.beginPath()
-      this.context.lineWidth = this.settings.wallSize
-      this.context.strokeStyle = player.color
-      player.walls.forEach(wall => {
-        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.camera.x, this.canvas.height / 2 + player.y - this.camera.y)
-      this.context.stroke()
-    },
-    renderDebug () {
-      const canvasX = this.canvas.width / 2
-      const canvasY = this.canvas.height / 2
-
-      this.context.fillStyle = 'white'
-      this.context.textAlign = 'start'
-      this.context.fillText('camera x: ' + this.camera.x + ' y:' + this.camera.y, 10, 12)
-      this.context.fillText('mouse x: ' + this.mouse.x + ' y:' + this.mouse.y, 10, 24)
-      this.context.fillText('canvasX: ' + canvasX + ' canvasY: ' + canvasY, 10, 36)
-      this.context.fillText('Total walls: ' + this.stats.totalWalls, 10, 48)
-      this.context.fillText('Last update: ' + this.stats.lastUpdateTime, 10, 60)
-      const fps = 1000 / (performance.now() - this.stats.lastFrame)
-      this.context.fillText('FPS: ' + fps, 10, 72)
-    },
-    renderMouse () {
-      this.context.beginPath()
-      this.context.arc(this.mouse.x, this.mouse.y, 25, 0, 2 * Math.PI, false)
-      this.context.lineWidth = 1
-      this.context.strokeStyle = this.player.color
-      this.context.stroke()
-    },
-    renderLeaderboard () {
-      this.context.fillStyle = 'white'
-      this.context.textAlign = 'end'
-      this.context.fillText('Leaderboard: ', this.canvas.width - 50, 10)
-      for (var i = 0; i < this.stats.leaderboard.length; i++) {
-        this.context.fillText(this.players[i].name + ' - ' + this.players[i].walls.length, this.canvas.width - 50, 15 + (i + 1) * 10)
-      }
+      requestAnimationFrame(this.render, this.canvas)
     },
     mouseEvent (event) {
       var rect = this.canvas.getBoundingClientRect()
@@ -211,6 +169,13 @@ export default {
       player.targetAngle = pastPlayer.targetAngle + (nextPlayer.targetAngle - pastPlayer.targetAngle) * dt
 
       return player
+    },
+    setCanvasSize () {
+      this.canvas.width = window.innerWidth
+      this.canvas.height = window.innerHeight
+    },
+    respawn () {
+      send({ type: 'respawn' })
     }
   }
 }