Improved graphics, new title screen

client/src/components/Game.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="game">
     <b-modal v-model="playerIsDead">
-      <h1 class="title">DED</h1>
+      <h1 class="titleDed">DED</h1>
       <h2 class="title">Score: {{player.score}}</h2>
       <h3 class="subtitle">Best score: {{player.bestScore}}</h3>
       <b-button @click="respawn">Respawn</b-button>
@@ -22,6 +22,7 @@ import { Explosion } from '@/game/sprites.js'
 
 export default {
   name: 'Game',
+  props: ['showDebug', 'showLeaderboard'],
   data () {
     return {
       mouse: {
@@ -132,8 +133,14 @@ export default {
       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)
+
+      if (this.showLeaderboard) {
+        render.leaderboard(this.context, this.canvas, this.leaderboard)
+      }
+
+      if (this.showDebug) {
+        render.debug(this.context, this.camera, this.mouse, this.canvas, this.stats)
+      }
 
       this.stats.lastFrame = performance.now()
 
@@ -155,7 +162,6 @@ export default {
           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
@@ -223,3 +229,13 @@ export default {
   }
 }
 </script>
+
+<style>
+.titleDed {
+  display: inline-block;
+  font-family: TRON;
+  font-size: 70px;
+  color: #cf0cb4ff;
+  margin-bottom: 25px;
+}
+</style>