Improved graphics, new title screen

client/public/img/icons/safari-pinned-tab.svg

@@ -1,30 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
- width="641.000000pt" height="641.000000pt" viewBox="0 0 641.000000 641.000000"
- preserveAspectRatio="xMidYMid meet">
-<metadata>
-Created by potrace 1.11, written by Peter Selinger 2001-2013
-</metadata>
-<g transform="translate(0.000000,641.000000) scale(0.100000,-0.100000)"
-fill="#000000" stroke="none">
-<path d="M2999 6406 c-2 -2 -40 -6 -84 -10 -44 -4 -93 -9 -110 -11 -16 -3 -48
--7 -70 -10 -76 -10 -160 -27 -265 -51 -58 -14 -113 -27 -123 -29 -47 -10 -324
--108 -403 -143 -124 -55 -290 -138 -324 -162 -15 -11 -31 -20 -35 -20 -5 0
--212 -135 -285 -187 -119 -84 -373 -316 -490 -448 -343 -385 -598 -871 -717
--1364 -28 -119 -31 -133 -39 -181 -3 -19 -7 -42 -9 -50 -2 -8 -7 -37 -11 -65
--3 -27 -8 -59 -10 -69 -12 -63 -19 -219 -19 -411 1 -219 5 -287 29 -465 3 -21
-18 -102 42 -224 37 -195 156 -523 271 -750 90 -176 260 -444 332 -523 9 -10
-23 -28 32 -40 44 -64 242 -273 359 -378 299 -271 697 -505 1080 -635 109 -37
-143 -48 153 -50 1 0 43 -12 92 -25 50 -14 104 -28 120 -31 17 -3 62 -11 100
--19 39 -7 92 -16 118 -20 27 -4 58 -8 69 -10 62 -12 209 -19 403 -19 239 0
-317 6 500 35 92 14 116 18 165 29 25 6 56 12 69 15 13 2 38 9 56 15 18 6 42
-12 54 15 114 22 416 138 599 230 387 194 709 450 1017 806 55 63 155 197 155
-207 0 6 4 12 9 14 29 11 233 367 302 528 22 52 47 109 54 125 50 114 126 371
-160 540 15 74 35 198 41 250 2 22 7 67 11 100 15 140 7 559 -13 705 -36 252
--122 589 -194 755 -9 22 -32 74 -50 115 -71 163 -206 412 -259 476 -4 5 -14
-21 -21 34 -7 13 -17 29 -21 34 -5 6 -41 54 -80 106 -382 509 -946 912 -1554
-1110 -217 70 -396 109 -670 145 -45 6 -531 16 -536 11z"/>
-</g>
-</svg>

client/src/App.vue

@@ -1,10 +1,12 @@
 <template>
   <div id="app">
-    <Game v-if="isLoggedIn && isSocketConnected"/>
+    <Game v-if="isLoggedIn && isSocketConnected" v-bind:showDebug="debugInfos" v-bind:showLeaderboard="leaderboard"/>
     <div v-else class="container mainMenu">
-      <img src="./assets/logo.png" alt="TronIo logo" width="150px"/>
-      <h1 class="title">tron.io</h1>
-      <b-button @click="loginPrompt">Start</b-button>
+      <div>
+        <h1 class="gameTitle">tron.i</h1>
+        <img src="./assets/logo_invert.png" alt="TronIo logo" width="110px" class="gameLogo"/>
+      </div>
+      <b-button @click="loginPrompt" class="startButton">Start</b-button>
       <hr>
       <b-field label="Music" position="is-centered">
         <b-radio-button v-model="music" native-value="1">
@@ -14,6 +16,8 @@
           None
         </b-radio-button>
       </b-field>
+      <b-switch v-model="debugInfos">Debug info</b-switch>
+      <b-switch v-model="leaderboard">Leaderboard</b-switch>
     </div>
     <b-loading v-model="isLoading"/>
   </div>
@@ -31,7 +35,9 @@ export default {
   },
   data () {
     return {
-      music: '2'
+      music: '2',
+      debugInfos: false,
+      leaderboard: true
     }
   },
   computed: {
@@ -79,11 +85,27 @@ export default {
 </script>
 <style>
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
-  color: #2c3e50;
+  color: rgb(235, 226, 233);
+  background-color: #2a374a;
+}
+
+.gameLogo {
+  display: inline-block;
+  margin-right: 25px;
+}
+
+.gameTitle {
+  display: inline-block;
+  font-family: TRON;
+  font-size: 110px;
+  color: #cf0cb4ff;
+}
+
+.startButton {
+  margin-top: 75px;
 }
 
 .mainMenu {

client/src/assets/style/_overrides.scss

@@ -2,8 +2,13 @@
 @import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic&display=swap");
 
 @font-face {
-  font-family: 'Gravity Regular';
-  src: url('Gravity-Regular.otf') format('opentype');
+  font-family: 'TRON';
+  src: url('TRON.TTF') format('opentype');
+}
+
+html {
+  color: rgb(235, 226, 233);
+  background-color: #2a374a;
 }
 
 hr {
@@ -68,6 +73,10 @@ a {
   padding-right: 1em;
 }
 
+.input:focus {
+  border-color: $primary;
+}
+
 .select {
   &:after,
   select {

client/src/assets/style/_variables.scss

@@ -12,10 +12,10 @@ $blue: #3498db;
 $purple: #8e44ad;
 $red: #e74c3c;
 $white-ter: #ecf0f1;
-$primary: $purple;
+$primary: #cf0cb4ff;
 $yellow-invert: #fff;
 
-$family-sans-serif: "Gravity Regular", "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI",
+$family-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI",
 "Helvetica Neue", "Helvetica", "Arial", sans-serif;
 $family-monospace: "Inconsolata", "Consolas", "Monaco", monospace;
 

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>

client/src/game/render.js

@@ -120,13 +120,18 @@ export const render = {
     context.stroke()
   },
   leaderboard (context, canvas, leaderboard) {
+    context.globalAlpha = 0.1
+    context.fillStyle = 'white'
+    context.fillRect(canvas.width - 160, 35, 120, 20 + leaderboard.length * 5)
+    context.globalAlpha = 1
+
     context.fillStyle = 'white'
     context.textAlign = 'end'
-    context.fillText('Leaderboard: ', canvas.width - 50, 10)
+    context.fillText('Leaderboard: ', canvas.width - 40, 30)
     var i = 1
     leaderboard.forEach(player => {
       context.fillStyle = player.color
-      context.fillText(player.name + ' - ' + player.score + ' (' + player.bestScore + ')', canvas.width - 50, 15 + i * 10)
+      context.fillText(player.name + ' - ' + player.score + ' (' + player.bestScore + ')', canvas.width - 50, 40 + i * 10)
       i++
     })
   },