Added leaderboard

client/src/components/Game.vue

@@ -21,6 +21,7 @@ export default {
         x: 0,
         y: 0
       },
+      leaderboard: [],
       renderTimer: null
     }
   },
@@ -71,6 +72,11 @@ export default {
 
       if (!this.players) return
 
+      this.players.sort((a, b) => {
+        return a.walls.length - b.walls.length
+      })
+      this.leaderboard = []
+
       this.players.forEach(player => {
         if (player.color === this.player.color) {
           this.camera.x = player.x
@@ -79,7 +85,10 @@ export default {
         }
         this.renderPlayer(player)
         this.renderWalls(player)
+        this.leaderboard.push(player.id + ' - ' + player.walls.length)
       })
+
+      this.renderLeaderboard()
     },
     renderBorders () {
       this.context.strokeStyle = 'black'
@@ -116,10 +125,11 @@ export default {
       const canvasX = this.canvas.width / 2
       const canvasY = this.canvas.height / 2
 
-      this.context.fillText('player x: ' + player.x + ' y:' + player.y, 10, 10)
-      this.context.fillText('a:' + player.angle + ' a_t' + player.targetAngle, 10, 20)
-      this.context.fillText('canvasX: ' + canvasX + ' canvasY:' + canvasY, 10, 30)
-      this.context.fillText('walls: ' + player.walls.length, 10, 40)
+      this.context.textAlign = 'start'
+      this.context.fillText('player x: ' + player.x + ' y:' + player.y, 10, 12)
+      this.context.fillText('a:' + player.angle + ' a_t' + player.targetAngle, 10, 24)
+      this.context.fillText('canvasX: ' + canvasX + ' canvasY:' + canvasY, 10, 36)
+      this.context.fillText('walls: ' + player.walls.length, 10, 48)
 
       this.context.beginPath()
       this.context.arc(this.mouse.x, this.mouse.y, 25, 0, 2 * Math.PI, false)
@@ -127,6 +137,13 @@ export default {
       this.context.strokeStyle = player.color
       this.context.stroke()
     },
+    renderLeaderboard () {
+      this.context.textAlign = 'end'
+      this.context.fillText('Leaderboard: ', this.canvas.width - 50, 10)
+      for (var i = 0; i < this.leaderboard.length; i++) {
+        this.context.fillText(this.players[i].color + ' - ' + this.players[i].walls.length, this.canvas.width - 50, 15 + (i + 1) * 10)
+      }
+    },
     mouseEvent (event) {
       var rect = this.canvas.getBoundingClientRect()
       this.mouse.x = event.clientX - rect.left