Player name, pwa & branding

client/package-lock.json

@@ -2056,7 +2056,6 @@
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz",
       "integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==",
       "dev": true,
-      "optional": true,
       "requires": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -2483,8 +2482,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.1.0.tgz",
       "integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==",
-      "dev": true,
+      "dev": true
-      "optional": true
     },
     "bluebird": {
       "version": "3.7.2",
@@ -2724,6 +2722,14 @@
         "node-releases": "^1.1.60"
       }
     },
+    "buefy": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/buefy/-/buefy-0.9.2.tgz",
+      "integrity": "sha512-f3UXfI6DDIHXE+pk8TC0mjT5BkKyGgoiZpdA5QGf9hVz0yfphJxWeu8+2WrOQLxahrr7HleD0B7ZkslsTQZZIA==",
+      "requires": {
+        "bulma": "0.9.0"
+      }
+    },
     "buffer": {
       "version": "4.9.2",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.2.tgz",
@@ -2765,6 +2771,11 @@
       "integrity": "sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=",
       "dev": true
     },
+    "bulma": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.0.tgz",
+      "integrity": "sha512-rV75CJkubNUroAt0qCRkjznZLoaXq/ctfMXsMvKSL84UetbSyx5REl96e8GoQ04G4Tkw0XF3STECffTOQrbzOQ=="
+    },
     "bytes": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
@@ -3000,7 +3011,6 @@
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.4.2.tgz",
       "integrity": "sha512-IZHaDeBeI+sZJRX7lGcXsdzgvZqKv6sECqsbErJA4mHWfpRrD8B97kSFN4cQz6nGBGiuFia1MKR4d6c1o8Cv7A==",
       "dev": true,
-      "optional": true,
       "requires": {
         "anymatch": "~3.1.1",
         "braces": "~3.0.2",
@@ -3017,7 +3027,6 @@
           "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
           "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
           "dev": true,
-          "optional": true,
           "requires": {
             "fill-range": "^7.0.1"
           }
@@ -3027,7 +3036,6 @@
           "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
           "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
           "dev": true,
-          "optional": true,
           "requires": {
             "to-regex-range": "^5.0.1"
           }
@@ -3036,15 +3044,13 @@
           "version": "7.0.0",
           "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
           "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "to-regex-range": {
           "version": "5.0.1",
           "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
           "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
           "dev": true,
-          "optional": true,
           "requires": {
             "is-number": "^7.0.0"
           }
@@ -3254,6 +3260,17 @@
       "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4=",
       "dev": true
     },
+    "clone-deep": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
+      "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
+      "dev": true,
+      "requires": {
+        "is-plain-object": "^2.0.4",
+        "kind-of": "^6.0.2",
+        "shallow-clone": "^3.0.0"
+      }
+    },
     "coa": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz",
@@ -6565,7 +6582,6 @@
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
       "dev": true,
-      "optional": true,
       "requires": {
         "binary-extensions": "^2.0.0"
       }
@@ -8310,8 +8326,7 @@
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
       "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==",
-      "dev": true,
+      "dev": true
-      "optional": true
     },
     "pify": {
       "version": "4.0.1",
@@ -9302,7 +9317,6 @@
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.4.0.tgz",
       "integrity": "sha512-0xe001vZBnJEK+uKcj8qOhyAKPzIT+gStxWr3LCB0DwcXR5NZJ3IaC+yGnHCYzB/S7ov3m3EEbZI2zeNvX+hGQ==",
       "dev": true,
-      "optional": true,
       "requires": {
         "picomatch": "^2.2.1"
       }
@@ -9661,6 +9675,36 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "sass": {
+      "version": "1.26.10",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.26.10.tgz",
+      "integrity": "sha512-bzN0uvmzfsTvjz0qwccN1sPm2HxxpNI/Xa+7PlUEMS+nQvbyuEK7Y0qFqxlPHhiNHb1Ze8WQJtU31olMObkAMw==",
+      "dev": true,
+      "requires": {
+        "chokidar": ">=2.0.0 <4.0.0"
+      }
+    },
+    "sass-loader": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-8.0.2.tgz",
+      "integrity": "sha512-7o4dbSK8/Ol2KflEmSco4jTjQoV988bM82P9CZdmo9hR3RLnvNc0ufMNdMrB0caq38JQ/FgF4/7RcbcfKzxoFQ==",
+      "dev": true,
+      "requires": {
+        "clone-deep": "^4.0.1",
+        "loader-utils": "^1.2.3",
+        "neo-async": "^2.6.1",
+        "schema-utils": "^2.6.1",
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
+        }
+      }
+    },
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
@@ -9879,6 +9923,15 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "shallow-clone": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
+      "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
+      "dev": true,
+      "requires": {
+        "kind-of": "^6.0.2"
+      }
+    },
     "shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",

client/package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "buefy": "^0.9.2",
     "core-js": "^3.6.5",
     "register-service-worker": "^1.7.1",
     "vue": "^2.6.11",
@@ -27,6 +28,8 @@
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.0",
     "eslint-plugin-vue": "^6.2.2",
+    "sass": "^1.26.5",
+    "sass-loader": "^8.0.2",
     "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {

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

@@ -1,3 +1,30 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<?xml version="1.0" standalone="no"?>
-<path d="M8.00251 14.9297L0 1.07422H6.14651L8.00251 4.27503L9.84583 1.07422H16L8.00251 14.9297Z" fill="black"/>
+<!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/public/index.html

@@ -4,12 +4,13 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="stylesheet" href="https://cdn.materialdesignicons.com/5.3.45/css/materialdesignicons.min.css">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong>You need to enable JS</strong>
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->

client/src/App.vue

@@ -1,13 +1,17 @@
 <template>
   <div id="app">
-    <Game v-if="isSocketConnected"/>
+    <Game v-if="isLoggedIn"/>
-    <div v-else>
+    <div v-else class="container mainMenu">
-      <h1>Game loadin mate</h1>
+      <img src="./assets/logo.png" alt="TronIo logo" width="150px"/>
+      <h1 class="title">Tron.io</h1>
+      <b-button @click="loginPrompt">Start</b-button>
     </div>
+    <b-loading v-model="isLoading"/>
   </div>
 </template>
 
 <script>
+import { send } from './store/socketPlugin'
 import Game from './components/Game'
 export default {
   name: 'App',
@@ -17,6 +21,37 @@ export default {
   computed: {
     isSocketConnected () {
       return this.$store.state.game.socketConnected
+    },
+    isLoading () {
+      return !this.isSocketConnected
+    },
+    isLoggedIn () {
+      return this.$store.state.game.loggedIn
+    }
+  },
+  methods: {
+    loginPrompt () {
+      this.$buefy.dialog.prompt({
+        message: 'Choose a name',
+        trapFocus: true,
+        canCancel: false,
+        inputAttrs: {
+          placeholder: 'pedro',
+          minlength: 3,
+          maxlength: 30
+        },
+        confirmText: 'KK',
+        onConfirm: (name) => {
+          localStorage.setItem('name', name)
+          this.login(name)
+        }
+      })
+    },
+    login (name) {
+      send({
+        type: 'login',
+        message: name
+      })
     }
   }
 }
@@ -28,7 +63,9 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  background-color: #475b6e;
 }
 
+.mainMenu {
+  top: 30vh;
+}
 </style>

client/src/assets/_overrides.scss

@@ -0,0 +1,289 @@
+// Overrides
+@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');
+}
+
+hr {
+  height: $border-width;
+}
+
+h6 {
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.hero {
+  background-color: $grey-dark;
+}
+
+a {
+  transition: all 200ms ease;
+}
+
+.button {
+  transition: all 200ms ease;
+  border-width: $border-width;
+  color: $white;
+
+  &.is-active,
+  &.is-focused,
+  &:active,
+  &:focus {
+    box-shadow: 0 0 0 2px rgba($button-focus-border-color, 0.5);
+  }
+  @each $name, $pair in $colors {
+    $color: nth($pair, 1);
+    $color-invert: nth($pair, 2);
+
+    &.is-#{$name} {
+      &.is-hovered,
+      &:hover {
+        background-color: lighten($color, 7.5%);
+      }
+
+      &.is-active,
+      &.is-focused,
+      &:active,
+      &:focus {
+        border-color: $color;
+        box-shadow: 0 0 0 2px rgba($color, 0.5);
+      }
+    }
+  }
+}
+
+.label {
+  color: $grey-lighter;
+}
+
+.input,
+.textarea {
+  transition: all 200ms ease;
+  box-shadow: none;
+  border-width: $border-width;
+  padding-left: 1em;
+  padding-right: 1em;
+}
+
+.select {
+  &:after,
+  select {
+    border-width: $border-width;
+  }
+}
+
+.control {
+  &.has-addons {
+    .button,
+    .input,
+    .select {
+      margin-right: -$border-width;
+    }
+  }
+}
+
+.notification {
+  background-color: $grey-dark;
+}
+
+.card {
+  $card-border-color: lighten($grey-darker, 5);
+  box-shadow: none;
+  border: $border-width solid $card-border-color;
+  background-color: $grey-darker;
+  border-radius: $radius;
+
+  .card-image {
+    img {
+      border-radius: $radius $radius 0 0;
+    }
+  }
+
+  .card-header {
+    box-shadow: none;
+    background-color: rgba($black-bis, 0.2);
+    border-radius: $radius $radius 0 0;
+  }
+
+  .card-footer {
+    background-color: rgba($black-bis, 0.2);
+  }
+
+  .card-footer,
+  .card-footer-item {
+    border-width: $border-width;
+    border-color: $card-border-color;
+  }
+}
+
+.notification {
+  @each $name, $pair in $colors {
+    $color: nth($pair, 1);
+    $color-invert: nth($pair, 2);
+
+    &.is-#{$name} {
+      a:not(.button) {
+        color: $color-invert;
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+.tag {
+  border-radius: $radius;
+}
+
+.menu-list {
+  a {
+    transition: all 300ms ease;
+  }
+}
+
+.modal-card-body {
+  background-color: $grey-darker;
+}
+
+.modal-card-foot,
+.modal-card-head {
+  border-color: $grey-dark;
+}
+
+.message-header {
+  font-weight: $weight-bold;
+  background-color: $grey-dark;
+  color: $white;
+}
+
+.message-body {
+  border-width: $border-width;
+  border-color: $grey-dark;
+}
+
+.navbar {
+  border-radius: $radius;
+
+  &.is-transparent {
+    background: none;
+  }
+
+  &.is-primary {
+    .navbar-dropdown {
+      a.navbar-item.is-active {
+        background-color: $link;
+      }
+    }
+  }
+
+  @include touch {
+    .navbar-menu {
+      background-color: $navbar-background-color;
+      border-radius: 0 0 $radius $radius;
+    }
+  }
+}
+
+.hero .navbar,
+body > .navbar {
+  border-radius: 0;
+}
+
+.pagination-link,
+.pagination-next,
+.pagination-previous {
+  border-width: $border-width;
+}
+
+.panel-block,
+.panel-heading,
+.panel-tabs {
+  border-width: $border-width;
+
+  &:first-child {
+    border-top-width: $border-width;
+  }
+}
+
+.panel-heading {
+  font-weight: $weight-bold;
+}
+
+.panel-tabs {
+  a {
+    border-width: $border-width;
+    margin-bottom: -$border-width;
+
+    &.is-active {
+      border-bottom-color: $link-active;
+    }
+  }
+}
+
+.panel-block {
+  &:hover {
+    color: $link-hover;
+
+    .panel-icon {
+      color: $link-hover;
+    }
+  }
+
+  &.is-active {
+    .panel-icon {
+      color: $link-active;
+    }
+  }
+}
+
+.tabs {
+  a {
+    border-bottom-width: $border-width;
+    margin-bottom: -$border-width;
+  }
+
+  ul {
+    border-bottom-width: $border-width;
+  }
+
+  &.is-boxed {
+    a {
+      border-width: $border-width;
+    }
+
+    li.is-active a {
+      background-color: darken($grey-darker, 4);
+    }
+  }
+
+  &.is-toggle {
+    li a {
+      border-width: $border-width;
+      margin-bottom: 0;
+    }
+
+    li + li {
+      margin-left: -$border-width;
+    }
+  }
+}
+
+.hero {
+  // Colors
+  @each $name, $pair in $colors {
+    $color: nth($pair, 1);
+    $color-invert: nth($pair, 2);
+
+    &.is-#{$name} {
+      .navbar {
+        .navbar-dropdown {
+          .navbar-item:hover {
+            background-color: $navbar-dropdown-item-hover-background-color;
+          }
+        }
+      }
+    }
+  }
+}

client/src/assets/_variables.scss

@@ -0,0 +1,114 @@
+$grey-lighter: #dbdee0;
+$grey-light: #8c9b9d;
+$grey: darken($grey-light, 18);
+$grey-dark: darken($grey, 18);
+$grey-darker: darken($grey, 23);
+
+$orange: #e67e22;
+$yellow: #f1b70e;
+$green: #2ecc71;
+$turquoise: #26a8a2;
+$blue: #3498db;
+$purple: #8e44ad;
+$red: #e74c3c;
+$white-ter: #ecf0f1;
+$primary: $turquoise;
+$yellow-invert: #fff;
+
+$family-sans-serif: "Gravity Regular", "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI",
+"Helvetica Neue", "Helvetica", "Arial", sans-serif;
+$family-monospace: "Inconsolata", "Consolas", "Monaco", monospace;
+
+$radius-small: 3px;
+$radius: 0.4em;
+$radius-large: 8px;
+$size-6: 15px;
+$size-7: 0.85em;
+$title-weight: 500;
+$subtitle-weight: 400;
+$subtitle-color: $grey-dark;
+
+$border-width: 2px;
+$border: $grey;
+
+$body-background-color: darken($grey-darker, 4);
+$body-size: 15px;
+
+$background: $grey-darker;
+$footer-background-color: $background;
+$button-background-color: $background;
+$button-border-color: lighten($button-background-color, 15);
+
+$title-color: #fff;
+$subtitle-color: $grey-light;
+$subtitle-strong-color: $grey-light;
+
+$text: #fff;
+$text-light: lighten($text, 10);
+$text-strong: darken($text, 5);
+
+$box-color: $text;
+$box-background-color: $grey-dark;
+$box-shadow: none;
+
+$link: $turquoise;
+$link-hover: lighten($link, 5);
+$link-focus: darken($link, 5);
+$link-active: darken($link, 5);
+$link-focus-border: $grey-light;
+
+$button-color: $primary;
+$button-hover-color: darken($text, 5); // text-dark
+$button-focus: darken($text, 5); // text-dark
+$button-active-color: darken($text, 5); // text-dark
+$button-disabled-background-color: $grey-light;
+
+$control-height: 2.5em;
+
+$input-color: $grey-darker;
+$input-icon-color: $grey;
+$input-icon-active-color: $input-color;
+$input-hover-color: $grey-light;
+$input-disabled-background-color: $grey-light;
+$input-disabled-border: $grey-lighter;
+
+$table-color: $text;
+$table-head: $grey-lighter;
+$table-background-color: $grey-dark;
+$table-cell-border: 1px solid $grey;
+
+$table-row-hover-background-color: $grey-darker;
+$table-striped-row-even-background-color: $grey-darker;
+$table-striped-row-even-hover-background-color: lighten($grey-darker, 2);
+
+$pagination-color: $link;
+$pagination-border-color: $border;
+
+$navbar-height: 4rem;
+
+$navbar-background-color: $primary;
+$navbar-item-color: $text;
+$navbar-item-hover-color: $link;
+$navbar-item-hover-background-color: transparent;
+$navbar-item-active-color: $link;
+$navbar-dropdown-arrow: #fff;
+$navbar-divider-background-color: rgba(0, 0, 0, 0.2);
+$navbar-dropdown-border-top: 1px solid $navbar-divider-background-color;
+$navbar-dropdown-background-color: $primary;
+$navbar-dropdown-item-hover-color: $grey-lighter;
+$navbar-dropdown-item-hover-background-color: transparent;
+$navbar-dropdown-item-active-background-color: transparent;
+$navbar-dropdown-item-active-color: $link;
+
+$dropdown-content-background-color: $background;
+$dropdown-item-color: $text;
+
+$progress-value-background-color: $grey-lighter;
+
+$file-cta-background-color: $grey-darker;
+
+$progress-bar-background-color: $grey-dark;
+
+$panel-heading-background-color: $grey-dark;
+
+$control-label: $grey-lighter;

client/src/assets/style.scss

@@ -0,0 +1,4 @@
+@import "variables";
+@import "~bulma";
+@import "~buefy/src/scss/buefy";
+@import "overrides";

client/src/components/Game.vue

@@ -21,7 +21,12 @@ export default {
         x: 0,
         y: 0
       },
+      stats: {
         leaderboard: [],
+        totalWalls: 0,
+        lastUpdateTime: 0,
+        lastFrame: 0
+      },
       renderTimer: null
     }
   },
@@ -67,31 +72,36 @@ export default {
   },
   methods: {
     render () {
+      this.stats.lastFrame = performance.now()
       this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
       this.renderBorders()
 
       if (!this.players) return
 
       this.players.sort((a, b) => {
-        return a.walls.length - b.walls.length
+        return b.walls.length - a.walls.length
       })
-      this.leaderboard = []
+      this.stats.leaderboard = []
+      this.stats.totalWalls = 0
 
       this.players.forEach(player => {
         if (player.color === this.player.color) {
           this.camera.x = player.x
           this.camera.y = player.y
-          this.renderDebug(player)
         }
         this.renderPlayer(player)
         this.renderWalls(player)
-        this.leaderboard.push(player.id + ' - ' + player.walls.length)
+        this.stats.leaderboard.push(player.name + ' - ' + player.walls.length)
+        this.stats.totalWalls += player.walls.length
       })
 
       this.renderLeaderboard()
+      this.renderMouse()
+
+      this.renderDebug()
     },
     renderBorders () {
-      this.context.strokeStyle = 'black'
+      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)
     },
@@ -121,27 +131,33 @@ export default {
       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 (player) {
+    renderDebug () {
       const canvasX = this.canvas.width / 2
       const canvasY = this.canvas.height / 2
 
+      this.context.fillStyle = 'white'
       this.context.textAlign = 'start'
-      this.context.fillText('player x: ' + player.x + ' y:' + player.y, 10, 12)
+      this.context.fillText('camera x: ' + this.camera.x + ' y:' + this.camera.y, 10, 12)
-      this.context.fillText('a:' + player.angle + ' a_t' + player.targetAngle, 10, 24)
+      // 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.fillText('Total walls: ' + this.stats.totalWalls, 10, 48)
-
+      this.context.fillText('Last update: ' + this.stats.lastUpdateTime, 10, 60)
+      const fps = (performance.now() - this.stats.lastFrame) * 60
+      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 = player.color
+      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.leaderboard.length; i++) {
+      for (var i = 0; i < this.stats.leaderboard.length; i++) {
-        this.context.fillText(this.players[i].color + ' - ' + this.players[i].walls.length, this.canvas.width - 50, 15 + (i + 1) * 10)
+        this.context.fillText(this.players[i].name + ' - ' + this.players[i].walls.length, this.canvas.width - 50, 15 + (i + 1) * 10)
       }
     },
     mouseEvent (event) {

client/src/main.js

@@ -1,9 +1,14 @@
 import Vue from 'vue'
 import App from './App.vue'
 import store from './store'
+import Buefy from 'buefy'
 import './registerServiceWorker'
 
+// import 'buefy/dist/buefy.css'
+import './assets/style.scss'
+
 Vue.config.productionTip = false
+Vue.use(Buefy)
 
 new Vue({
   store,

client/src/store/gameModule.js

@@ -16,7 +16,8 @@ const state = {
     arenaSize: 1000
   },
   paused: true,
-  socketConnected: false
+  socketConnected: false,
+  loggedIn: false
 }
 
 const getters = {
@@ -37,6 +38,7 @@ const actions = {
   },
   login ({ commit }, player) {
     commit('SET_PLAYER', player)
+    commit('SET_LOGIN', true)
   },
   settings ({ commit }, settings) {
     commit('SET_SETTINGS', settings)
@@ -57,6 +59,9 @@ const mutations = {
   SET_PLAYER (state, player) {
     state.player = player
   },
+  SET_LOGIN (state, login) {
+    state.loggedIn = login
+  },
   SET_PLAYERS (state, players) {
     state.players = players
   },

client/src/store/socketPlugin.js

@@ -1,3 +1,5 @@
+import { ToastProgrammatic as Toast } from 'buefy'
+
 const connection = new WebSocket('ws://localhost:8181/socket')
 // const connection = new WebSocket('wss://tronio.gltronic.ovh/socket')
 
@@ -14,7 +16,11 @@ export default function createSocketPlugin () {
 
     connection.onerror = function (error) {
       console.log('[WS] error ' + error.message)
-      store.dispatch('game/error', 'Connection problem')
+      // store.dispatch('game/error', 'Connection problem')
+      Toast.open('Connection problem. Retrying in 10s...')
+      setTimeout(function () {
+        location.reload()
+      }, 10000)
     }
 
     connection.onmessage = function (message) {

client/vue.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  pwa: {
+    name: 'Tron.io',
+    themeColor: '#1f2424',
+    msTileColor: '#1f2424',
+    appleMobileWebAppCapable: 'yes',
+    appleMobileWebAppStatusBarStyle: 'black',
+    workboxOptions: {
+      skipWaiting: true
+    }
+  }
+}

server/src/main/java/gltronic/tronio/business/GameManager.java

@@ -25,18 +25,19 @@ public class GameManager implements IGameManager {
   Game game;
 
   @Override
-  public void login(WebSocketSession session) throws InterruptedException, IOException {
+  public void login(WebSocketSession session, String name) throws InterruptedException, IOException {
     if (game.getSessions().containsKey(session.getId())) {
       SocketUtils.sendMessage(session, "error", "cant login twice");
       return;
     }
 
     Player player = initPlayer(new Player());
+    player.setName(name);
 
     game.getSessions().put(session.getId(), session);
     game.getPlayers().put(session.getId(), player);
 
-    System.out.println("[GAME] Player " + session.getId() + " logged in | status: " + player.getX() + " " + player.getY() + " " + player.getColor());
+    System.out.println("[GAME] Player " + name + " (" + session.getId() + ") logged in | status: " + player.getX() + " " + player.getY() + " " + player.getColor());
 
     SocketUtils.sendObject(session, "login", new ObjectMapper().writeValueAsString(player));
     SocketUtils.sendObject(session, "gameSettings", new ObjectMapper().writeValueAsString(game.getSettings()));
@@ -129,7 +130,7 @@ public class GameManager implements IGameManager {
   private void killPlayer(String id) {
     Player player = game.getPlayers().get(id);
     initPlayer(player);
-    System.out.println("[GAME] Player " + id + " is dead | status: " + player.getX() + " " + player.getY() + " " + player.getColor());
+    System.out.println("[GAME] Player " + player.getName() + " (" + id + ") is dead | status: " + player.getX() + " " + player.getY() + " " + player.getColor());
     try {
       SocketUtils.sendObject(game.getSessions().get(id), "gamePlayerDead",
           new ObjectMapper().writeValueAsString(player));

server/src/main/java/gltronic/tronio/business/IGameManager.java

@@ -7,7 +7,7 @@ import org.springframework.web.socket.WebSocketSession;
 import gltronic.tronio.model.Player;
 
 public interface IGameManager {
-  void login(WebSocketSession session) throws InterruptedException, IOException;
+  void login(WebSocketSession session, String name) throws InterruptedException, IOException;
   void leave(WebSocketSession session) throws InterruptedException, IOException;
   void updatePlayer(WebSocketSession session, Player player) throws InterruptedException, IOException;
 

server/src/main/java/gltronic/tronio/model/Player.java

@@ -13,6 +13,7 @@ import lombok.Setter;
 @NoArgsConstructor
 @JsonIgnoreProperties(ignoreUnknown = true)
 public class Player {
+  private String name;
 
   private String color;
 

server/src/main/java/gltronic/tronio/web/SocketHandler.java

@@ -32,9 +32,11 @@ public class SocketHandler extends TextWebSocketHandler {
 
     String type = rootObject.getString("type");
     switch (type) {
+      case "login":
+        gameManager.login(session, rootObject.getString("message"));
+        break;
       case "update":
         Player player = new ObjectMapper().readValue(rootObject.get("message").toString(), Player.class);
-
         gameManager.updatePlayer(session, player);
         break;
       default:
@@ -45,7 +47,7 @@ public class SocketHandler extends TextWebSocketHandler {
   @Override
   public void afterConnectionEstablished(WebSocketSession session) throws Exception {
     System.err.println("[WS] new connection " + this);
-    gameManager.login(session);
+    // gameManager.login(session);
   }
 
   @Override