diff --git a/src/components/tile.vue b/src/components/tile.vue
new file mode 100644
index 0000000..fed9807
--- /dev/null
+++ b/src/components/tile.vue
@@ -0,0 +1,35 @@
+<template lang="pug">
+div(class="tile-container" id="tile-container")
+    div(v-for="(tile,key) in tiles" :key="key" class="tile tile_new"
+    :class="mergeCheck(tile.merged)+' tile-'+tile.value"
+    :style="{transform: 'translate(' +calcStyleX(tile.x)+'px'+','+ calcStyleY(tile.y) + 'px)'}"
+    )
+        div(class="tile-inner") {{tile.value}}
+</template>
+<script>
+export default {
+  name: "tile",
+  replace: true,
+  props: ["tiles"],
+  methods: {
+    calcStyleX: function(x) {
+      var tilePosition = this.$parent.tilePosition;
+      return tilePosition * x;
+    },
+
+    calcStyleY: function(y) {
+      var tilePosition = this.$parent.tilePosition;
+
+      return tilePosition * y;
+    },
+    mergeCheck: function(m) {
+      if (m) {
+        return "tile-merged";
+      } else {
+        return "";
+      }
+    }
+  }
+};
+</script>
+<style scoped src="../plugins/style.css"></style>
diff --git a/src/plugins/store.js b/src/plugins/store.js
new file mode 100644
index 0000000..b1f7539
--- /dev/null
+++ b/src/plugins/store.js
@@ -0,0 +1,8 @@
+export const gameStorage = {
+  fetch: function(STORAGE_KEY) {
+    return JSON.parse(localStorage.getItem(STORAGE_KEY) || "[]");
+  },
+  save: function(STORAGE_KEY, data) {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+  }
+};
diff --git a/src/plugins/style.css b/src/plugins/style.css
new file mode 100644
index 0000000..7ceab20
--- /dev/null
+++ b/src/plugins/style.css
@@ -0,0 +1,776 @@
+.heading:after {
+  content: "";
+  display: block;
+  clear: both;
+}
+
+h1.title {
+  font-size: 80px;
+  font-weight: bold;
+  margin: 0;
+  display: block;
+  float: left;
+}
+
+@-webkit-keyframes move-up {
+  0% {
+    top: 25px;
+    opacity: 1;
+  }
+
+  100% {
+    top: -50px;
+    opacity: 0;
+  }
+}
+@-moz-keyframes move-up {
+  0% {
+    top: 25px;
+    opacity: 1;
+  }
+
+  100% {
+    top: -50px;
+    opacity: 0;
+  }
+}
+@keyframes move-up {
+  0% {
+    top: 25px;
+    opacity: 1;
+  }
+
+  100% {
+    top: -50px;
+    opacity: 0;
+  }
+}
+.scores-container {
+  float: right;
+  text-align: right;
+}
+
+.score-container,
+.best-container {
+  position: relative;
+  display: inline-block;
+  background: #bbada0;
+  padding: 15px 25px;
+  font-size: 25px;
+  height: 25px;
+  line-height: 47px;
+  font-weight: bold;
+  border-radius: 3px;
+  color: rgb(131, 59, 0);
+  margin-top: 8px;
+  text-align: center;
+}
+.score-container::after,
+.best-container::after {
+  position: absolute;
+  width: 100%;
+  top: 10px;
+  left: 0;
+  text-transform: uppercase;
+  font-size: 13px;
+  line-height: 13px;
+  text-align: center;
+  color: rgb(131, 59, 0);
+}
+.score-addition {
+  position: absolute;
+  right: 30px;
+  color: red;
+  font-size: 25px;
+  line-height: 25px;
+  font-weight: bold;
+  color: rgba(119, 110, 101, 0.9);
+  z-index: 100;
+  animation: move-up 600ms ease-in;
+  -webkit-animation: move-up 600ms ease-in;
+  -moz-animation: move-up 600ms ease-in;
+  animation-fill-mode: both;
+  -webkit-animation-fill-mode: both;
+  -moz-animation-fill-mode: both;
+}
+
+.score-container::after {
+  content: "Score";
+}
+
+.best-container::after {
+  content: "Best";
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 10px;
+  line-height: 1.65;
+}
+
+a {
+  color: #776e65;
+  font-weight: bold;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+strong.important {
+  text-transform: uppercase;
+}
+
+hr {
+  border: none;
+  border-bottom: 1px solid #d8d4d0;
+  margin-top: 20px;
+  margin-bottom: 30px;
+}
+
+.container {
+  width: 500px;
+  margin: 0 auto;
+}
+
+@-webkit-keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+@-moz-keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+.game-container {
+  margin-top: 40px;
+  position: relative;
+  padding: 15px;
+  cursor: default;
+  -webkit-touch-callout: none;
+  -ms-touch-callout: none;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -ms-touch-action: none;
+  touch-action: none;
+  background: #bbada0;
+  border-radius: 6px;
+  width: 500px;
+  height: 500px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.game-container .game-message {
+  display: none;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: rgba(238, 228, 218, 0.5);
+  z-index: 100;
+  text-align: center;
+  -webkit-animation: fade-in 800ms ease 1200ms;
+  -moz-animation: fade-in 800ms ease 1200ms;
+  animation: fade-in 800ms ease 1200ms;
+  -webkit-animation-fill-mode: both;
+  -moz-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+.game-container .game-message p {
+  font-size: 60px;
+  font-weight: bold;
+  height: 60px;
+  line-height: 60px;
+  margin-top: 163px;
+}
+.game-container .game-message .lower {
+  display: block;
+  margin-top: 59px;
+}
+.game-container .game-message a {
+  display: inline-block;
+  background: #8f7a66;
+  border-radius: 3px;
+  padding: 0 20px;
+  text-decoration: none;
+  color: #f9f6f2;
+  height: 40px;
+  line-height: 42px;
+  margin-left: 9px;
+}
+.game-container .game-message a.keep-playing-button {
+  display: none;
+}
+.game-container .game-message.game-won {
+  background: rgba(237, 194, 46, 0.5);
+  color: #f9f6f2;
+}
+.game-container .game-message.game-won a.keep-playing-button {
+  display: inline-block;
+}
+.game-container .game-message.game-won,
+.game-container .game-message.game-over {
+  display: block;
+}
+
+.grid-container {
+  position: absolute;
+  z-index: 1;
+}
+
+.grid-row {
+  margin-bottom: 15px;
+}
+.grid-row:last-child {
+  margin-bottom: 0;
+}
+.grid-row:after {
+  content: "";
+  display: block;
+  clear: both;
+}
+
+.grid-cell {
+  width: 106.25px;
+  height: 106.25px;
+  margin-right: 15px;
+  float: left;
+  border-radius: 3px;
+  background: rgba(238, 228, 218, 0.35);
+}
+.grid-cell:last-child {
+  margin-right: 0;
+}
+
+.tile-container {
+  position: absolute;
+  z-index: 2;
+}
+
+.tile,
+.tile .tile-inner {
+  width: 107px;
+  height: 107px;
+  line-height: 116.25px;
+}
+
+.tile {
+  position: absolute;
+  -webkit-transition: 100ms ease-in-out;
+  -moz-transition: 100ms ease-in-out;
+  transition: 100ms ease-in-out;
+  -webkit-transition-property: -webkit-transform;
+  -moz-transition-property: -moz-transform;
+  transition-property: transform;
+}
+.tile .tile-inner {
+  border-radius: 3px;
+  background: #eee4da;
+  text-align: center;
+  font-weight: bold;
+  z-index: 10;
+  font-size: 55px;
+}
+.tile.tile-2 .tile-inner {
+  background: #eee4da;
+  box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0),
+    inset 0 0 0 1px rgba(255, 255, 255, 0);
+}
+.tile.tile-4 .tile-inner {
+  background: #ede0c8;
+  box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0),
+    inset 0 0 0 1px rgba(255, 255, 255, 0);
+}
+.tile.tile-8 .tile-inner {
+  color: #f9f6f2;
+  background: #f2b179;
+}
+.tile.tile-16 .tile-inner {
+  color: #f9f6f2;
+  background: #f59563;
+}
+.tile.tile-32 .tile-inner {
+  color: #f9f6f2;
+  background: #f67c5f;
+}
+.tile.tile-64 .tile-inner {
+  color: #f9f6f2;
+  background: #f65e3b;
+}
+.tile.tile-128 .tile-inner {
+  color: #f9f6f2;
+  background: #edcf72;
+  box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.2381),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.14286);
+  font-size: 45px;
+}
+@media screen and (max-width: 520px) {
+  .tile.tile-128 .tile-inner {
+    font-size: 25px;
+  }
+}
+.tile.tile-256 .tile-inner {
+  color: #f9f6f2;
+  background: #edcc61;
+  box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.31746),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.19048);
+  font-size: 45px;
+}
+@media screen and (max-width: 520px) {
+  .tile.tile-256 .tile-inner {
+    font-size: 25px;
+  }
+}
+.tile.tile-512 .tile-inner {
+  color: #f9f6f2;
+  background: #edc850;
+  box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.39683),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.2381);
+  font-size: 45px;
+}
+@media screen and (max-width: 520px) {
+  .tile.tile-512 .tile-inner {
+    font-size: 25px;
+  }
+}
+.tile.tile-1024 .tile-inner {
+  color: #f9f6f2;
+  background: #edc53f;
+  box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.47619),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.28571);
+  font-size: 35px;
+}
+@media screen and (max-width: 520px) {
+  .tile.tile-1024 .tile-inner {
+    font-size: 15px;
+  }
+}
+.tile.tile-2048 .tile-inner {
+  color: #f9f6f2;
+  background: #edc22e;
+  box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.55556),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.33333);
+  font-size: 35px;
+}
+@media screen and (max-width: 520px) {
+  .tile.tile-2048 .tile-inner {
+    font-size: 15px;
+  }
+}
+.tile.tile-super .tile-inner {
+  color: #f9f6f2;
+  background: #3c3a32;
+  font-size: 30px;
+}
+@media screen and (max-width: 520px) {
+  .tile.tile-super .tile-inner {
+    font-size: 10px;
+  }
+}
+
+@-webkit-keyframes appear {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(0);
+    -moz-transform: scale(0);
+    transform: scale(0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    transform: scale(1);
+  }
+}
+@-moz-keyframes appear {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(0);
+    -moz-transform: scale(0);
+    transform: scale(0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    transform: scale(1);
+  }
+}
+@keyframes appear {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(0);
+    -moz-transform: scale(0);
+    transform: scale(0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    transform: scale(1);
+  }
+}
+.tile_new .tile-inner {
+  -webkit-animation: appear 200ms ease 100ms;
+  -moz-animation: appear 200ms ease 100ms;
+  animation: appear 200ms ease 100ms;
+  -webkit-animation-fill-mode: backwards;
+  -moz-animation-fill-mode: backwards;
+  animation-fill-mode: backwards;
+}
+
+@-webkit-keyframes pop {
+  0% {
+    -webkit-transform: scale(0);
+    -moz-transform: scale(0);
+    transform: scale(0);
+  }
+
+  50% {
+    -webkit-transform: scale(1.2);
+    -moz-transform: scale(1.2);
+    transform: scale(1.2);
+  }
+
+  100% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    transform: scale(1);
+  }
+}
+@-moz-keyframes pop {
+  0% {
+    -webkit-transform: scale(0);
+    -moz-transform: scale(0);
+    transform: scale(0);
+  }
+
+  50% {
+    -webkit-transform: scale(1.2);
+    -moz-transform: scale(1.2);
+    transform: scale(1.2);
+  }
+
+  100% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    transform: scale(1);
+  }
+}
+@keyframes pop {
+  0% {
+    -webkit-transform: scale(0);
+    -moz-transform: scale(0);
+    transform: scale(0);
+  }
+
+  50% {
+    -webkit-transform: scale(1.2);
+    -moz-transform: scale(1.2);
+    transform: scale(1.2);
+  }
+
+  100% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    transform: scale(1);
+  }
+}
+.tile-merged .tile-inner {
+  z-index: 20;
+  -webkit-animation: pop 200ms ease 100ms;
+  -moz-animation: pop 200ms ease 100ms;
+  animation: pop 200ms ease 100ms;
+  -webkit-animation-fill-mode: backwards;
+  -moz-animation-fill-mode: backwards;
+  animation-fill-mode: backwards;
+}
+
+.above-game:after {
+  content: "";
+  display: block;
+  clear: both;
+}
+
+.game-intro {
+  float: left;
+  line-height: 42px;
+  margin-bottom: 0;
+}
+
+.restart-button {
+  background: #8f7a66;
+  border-radius: 3px;
+  padding: 0 20px;
+  text-decoration: none;
+  color: #f9f6f2;
+  height: 40px;
+  line-height: 42px;
+  display: block;
+  text-align: center;
+  float: right;
+}
+
+.game-explanation {
+  margin-top: 50px;
+}
+
+@media screen and (max-width: 520px) {
+  html,
+  body {
+    font-size: 15px;
+  }
+
+  body {
+    margin: 20px 0;
+    padding: 0 20px;
+  }
+
+  h1.title {
+    font-size: 27px;
+    margin-top: 15px;
+  }
+
+  .container {
+    width: 280px;
+    margin: 0 auto;
+  }
+
+  .score-container,
+  .best-container {
+    margin-top: 0;
+    padding: 15px 10px;
+    min-width: 40px;
+  }
+
+  .heading {
+    margin-bottom: 10px;
+  }
+
+  .game-intro {
+    width: 55%;
+    display: block;
+    box-sizing: border-box;
+    line-height: 1.65;
+  }
+
+  .restart-button {
+    width: 42%;
+    padding: 0;
+    display: block;
+    box-sizing: border-box;
+    margin-top: 2px;
+  }
+
+  .game-container {
+    margin-top: 17px;
+    position: relative;
+    padding: 10px;
+    cursor: default;
+    -webkit-touch-callout: none;
+    -ms-touch-callout: none;
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -ms-touch-action: none;
+    touch-action: none;
+    background: #bbada0;
+    border-radius: 6px;
+    width: 280px;
+    height: 280px;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+  .game-container .game-message {
+    display: none;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: rgba(238, 228, 218, 0.5);
+    z-index: 100;
+    text-align: center;
+    -webkit-animation: fade-in 800ms ease 1200ms;
+    -moz-animation: fade-in 800ms ease 1200ms;
+    animation: fade-in 800ms ease 1200ms;
+    -webkit-animation-fill-mode: both;
+    -moz-animation-fill-mode: both;
+    animation-fill-mode: both;
+  }
+  .game-container .game-message p {
+    font-size: 60px;
+    font-weight: bold;
+    height: 60px;
+    line-height: 60px;
+    margin-top: 222px;
+  }
+  .game-container .game-message .lower {
+    display: block;
+    margin-top: 59px;
+  }
+  .game-container .game-message a {
+    display: inline-block;
+    background: #8f7a66;
+    border-radius: 3px;
+    padding: 0 20px;
+    text-decoration: none;
+    color: #f9f6f2;
+    height: 40px;
+    line-height: 42px;
+    margin-left: 9px;
+  }
+  .game-container .game-message a.keep-playing-button {
+    display: none;
+  }
+  .game-container .game-message.game-won {
+    background: rgba(237, 194, 46, 0.5);
+    color: #f9f6f2;
+  }
+  .game-container .game-message.game-won a.keep-playing-button {
+    display: inline-block;
+  }
+  .game-container .game-message.game-won,
+  .game-container .game-message.game-over {
+    display: block;
+  }
+
+  .grid-container {
+    position: absolute;
+    z-index: 1;
+  }
+
+  .grid-row {
+    margin-bottom: 10px;
+  }
+  .grid-row:last-child {
+    margin-bottom: 0;
+  }
+  .grid-row:after {
+    content: "";
+    display: block;
+    clear: both;
+  }
+
+  .grid-cell {
+    width: 57.5px;
+    height: 57.5px;
+    margin-right: 10px;
+    float: left;
+    border-radius: 3px;
+    background: rgba(238, 228, 218, 0.35);
+  }
+  .grid-cell:last-child {
+    margin-right: 0;
+  }
+
+  .tile-container {
+    position: absolute;
+    z-index: 2;
+  }
+
+  .tile,
+  .tile .tile-inner {
+    width: 58px;
+    height: 58px;
+    line-height: 67.5px;
+  }
+
+  .tile .tile-inner {
+    font-size: 35px;
+  }
+
+  .game-message p {
+    font-size: 30px !important;
+    height: 30px !important;
+    line-height: 30px !important;
+    margin-top: 90px !important;
+  }
+  .game-message .lower {
+    margin-top: 30px !important;
+  }
+}
+
+.select {
+  padding: 3px;
+  margin: 0;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
+  -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
+  box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
+  background: #8f7a66;
+  color: #fff;
+  border: none;
+  outline: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  cursor: pointer;
+  float: left;
+  height: 50px;
+  width: 75px;
+}
+.left {
+  clear: both;
+  float: left;
+  font-size: 17px;
+  line-height: 24px;
+  padding: 0 10px 0 10px;
+}
+[v-cloak] {
+  display: none;
+  background: red;
+}
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+.fade-enter-to, .fade-leave{
+  opacity:1;
+}
+.scan-enter-active {
+  animation: bounce-in .5s;
+}
+.scan-leave-active {
+  animation: bounce-in .5s reverse;
+}
+@keyframes bounce-in {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1.5);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 587c9d7..a4e634a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -16,6 +16,7 @@ import Forum from "../views/Forum";
 import UserProfile from "../views/UserProfile";
 import QuestionsAnsweredByUser from "../components/forum/QuestionsAnsweredByUser";
 import Register from "@/views/Register";
+import Error404 from "../views/Error404.vue";
 
 Vue.use(VueRouter);
 
@@ -146,6 +147,11 @@ const routes = [
     name: "club",
     path: "/club/:slug",
     component: Club
+  },
+  {
+    path: "*",
+    name: "Error 404",
+    component: Error404
   }
 ];
 
diff --git a/src/views/Error404.vue b/src/views/Error404.vue
new file mode 100644
index 0000000..90e33f5
--- /dev/null
+++ b/src/views/Error404.vue
@@ -0,0 +1,594 @@
+<template lang="pug">
+#mainVue.container
+  .heading
+    h1.title 2048
+    .scores-container
+      transition-group(name="fade")
+        .score-container(key="1") {{conf.score}}
+      .best-container {{conf.bestScore}}
+  .above-game
+    p.game-intro Join the numbers and get the
+      strong  2048 tile!
+    a.restart-button(v-on:click="init") New Game
+    label.left(for="noTiles") Select the number of tiles
+    v-select(:items="items" v-model="tileNo" v-on:change="changesTilesSize" class="select")
+  .game-container(
+    :style="{width:findDimension + 'px', height: findDimension + 'px'}"
+  )
+    .game-message
+      p
+      //- gameover messages are displayed in p tag
+      .lower
+        a.keep-playing-button(v-on:click="clearMessage") Keep going
+        a.retry-button(v-on:click="init") Try again
+    .grid-container
+      .grid-row(v-for="g in grid")
+        .grid-cell(v-for="g in grid")
+    tile(:tiles="tiles")
+  v-btn(@click="arr.push(45)") Toggle
+  v-btn(@click="arr.pop()") goggle
+  transition-group(name="fade")
+    div(key="1")
+    p(v-for="(i,key) in arr.length" :key="key") hello
+</template>
+<script>
+import { gameStorage } from "../plugins/store.js";
+import tile from "../components/tile";
+export default {
+  name: "mainVue",
+  components: {
+    tile: tile
+  },
+  data: () => ({
+    tileDimension: 124,
+    tilePosition: 121,
+    startTiles: 2,
+    tiles: [],
+    grid: [],
+    conf: gameStorage.fetch("vue2048-config"),
+    items: [4, 5, 6],
+    tileNo: 4,
+    show: false,
+    arr: [1, 2, 3, 4],
+    map: {
+      ArrowUp: 0, // Up
+      ArrowRight: 1, // Right
+      ArrowDown: 2, // Down
+      ArrowLeft: 3, // Left
+      k: 0, // Vim up
+      l: 1, // Vim right
+      j: 2, // Vim down
+      h: 3, // Vim left
+      w: 0, // W
+      d: 1, // D
+      s: 2, // S
+      a: 3 // A
+    },
+    startX: 0,
+    startY: 0,
+    distX: 0,
+    distY: 0,
+    threshold: 150,
+    allowedTime: 500,
+    elapsedTime: 0,
+    startTime: 0
+  }),
+  created: function() {
+    this.getWindowSize();
+    window.addEventListener("keydown", event => {
+      var modifiers =
+        event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
+      var mapped = this.map[event.key];
+
+      if (!modifiers) {
+        if (mapped !== undefined) {
+          event.preventDefault();
+          this.move(mapped);
+        }
+      }
+      if (!modifiers && event.key === "r") {
+        this.init();
+      }
+    });
+    window.addEventListener("touchstart", event => {
+      var touchobj = event.changedTouches[0];
+      this.distX = 0;
+      this.startX = touchobj.pageX;
+      this.startY = touchobj.pageY;
+      this.startTime = new Date().getTime();
+      //event.preventDefault();
+    });
+    window.addEventListener("touchend", event => {
+      var touchobj = event.changedTouches[0];
+      this.distX = touchobj.pageX - this.startX;
+      this.distY = touchobj.pageY - this.startY;
+      this.elapsedTime = new Date().getTime() - this.startTime;
+      var swiperight =
+        this.elapsedTime <= this.allowedTime &&
+        this.distX >= this.threshold &&
+        Math.abs(this.distY) <= 100;
+      var swipeleft =
+        this.elapsedTime <= this.allowedTime &&
+        this.distX <= -1 * this.threshold &&
+        Math.abs(this.distY) <= 100;
+      var swipeup =
+        this.elapsedTime <= this.allowedTime &&
+        this.distY <= -1 * this.threshold &&
+        Math.abs(this.distX) <= 100;
+      var swipedown =
+        this.elapsedTime <= this.allowedTime &&
+        this.distY >= this.threshold &&
+        Math.abs(this.distX) <= 100;
+      this.handleswipe(swiperight, swipeleft, swipeup, swipedown);
+      //event.preventDefault();
+    });
+    window.addEventListener("resize", event => {
+      if (event) {
+        this.getWindowSize();
+      }
+    });
+  },
+  mounted: function() {
+    var data = gameStorage.fetch("vue2048"),
+      conf = this.conf;
+
+    if (conf.score) {
+      this.continueGame(data);
+    } else {
+      if (conf.length === 0) {
+        //First Kick
+        this.conf = {
+          score: 0,
+          size: 4,
+          bestScore: 0
+        };
+      }
+      this.init();
+    }
+
+    this.$watch("tiles", function(tiles) {
+      gameStorage.save("vue2048", tiles);
+    });
+
+    this.$watch("conf", function(conf) {
+      gameStorage.save("vue2048-config", conf);
+    });
+  },
+  //Can go to templates
+  computed: {
+    findDimension: function() {
+      var containerSize = this.grid.length * this.tileDimension;
+      return containerSize;
+    },
+
+    selected: function() {
+      return "";
+    },
+
+    allDone: {
+      get: function() {
+        return this.remaining === 0;
+      },
+      set: function(value) {
+        this.todos.forEach(function(todo) {
+          todo.completed = value;
+        });
+      }
+    }
+  },
+
+  directives: {
+    selected: {
+      isEmpty: true,
+      bind: function(el, binding) {
+        //function()
+        if (binding) el.value = binding;
+      }
+    }
+  },
+
+  methods: {
+    init: function() {
+      var startTiles = this.startTiles;
+
+      this.initArrayGrid(this.tileNo);
+      this.clearMessage();
+
+      this.tiles = [];
+      this.updateScore(0);
+
+      for (var i = 0; i < startTiles; i++) {
+        this.addRandomTile();
+      }
+    },
+
+    continueGame: function(data) {
+      var arr;
+      this.initArrayGrid(this.conf.size);
+      arr = this.grid;
+      this.tiles = data;
+
+      data.forEach(function(item) {
+        arr[item.x][item.y] = 1;
+      });
+    },
+
+    gameOver: function() {
+      this.message();
+    },
+
+    initArrayGrid: function(size) {
+      var arr = [];
+      for (var x = 0; x < size; x++) {
+        arr[x] = [];
+        for (var y = 0; y < size; y++) {
+          arr[x][y] = 0;
+        }
+      }
+
+      this.grid = arr;
+    },
+
+    changesTilesSize: function() {
+      this.conf.size = this.tileNo;
+
+      if (document.activeElement) document.activeElement.blur();
+
+      this.init();
+    },
+
+    addRandomTile: function() {
+      if (this.availableCells().length > 0) {
+        var value = Math.random() < 0.9 ? 2 : 4,
+          randomCell = this.randomAvailableCell();
+
+        this.addTile({
+          x: randomCell.x,
+          y: randomCell.y,
+          value: value,
+          merged: false
+        });
+      }
+    },
+
+    addTile: function(tile) {
+      this.tiles = [
+        ...this.tiles,
+        {
+          x: tile.x,
+          y: tile.y,
+          value: tile.value,
+          merged: tile.merged
+        }
+      ];
+
+      this.grid[tile.x][tile.y] = 1;
+    },
+
+    randomAvailableCell: function() {
+      var cells = this.availableCells();
+
+      if (cells.length) {
+        return cells[Math.floor(Math.random() * cells.length)];
+      }
+    },
+
+    availableCells: function() {
+      var cells = [],
+        size = this.conf.size,
+        grid = this.grid;
+
+      for (var x = 0; x < size; x++) {
+        for (var y = 0; y < size; y++) {
+          if (!grid[x][y]) {
+            cells.push({
+              x: x,
+              y: y
+            });
+          }
+        }
+      }
+
+      return cells;
+    },
+
+    getVector: function(direction) {
+      var map = {
+        0: {
+          x: 0,
+          y: -1
+        }, // Up
+        1: {
+          x: 1,
+          y: 0
+        }, // Right
+        2: {
+          x: 0,
+          y: 1
+        }, // Down
+        3: {
+          x: -1,
+          y: 0
+        } // Left
+      };
+
+      return map[direction];
+    },
+
+    findFarthestPosition: function(cell, vector) {
+      var previous;
+
+      do {
+        previous = cell;
+        cell = {
+          x: previous.x + vector.x,
+          y: previous.y + vector.y
+        };
+      } while (this.withinBounds(cell) && !this.grid[cell.x][cell.y]);
+
+      return {
+        farthest: previous,
+        next: cell
+      };
+    },
+
+    findTile: function(position) {
+      if (position.x === -1 || position.y === -1) return null;
+      else {
+        var tiles = this.tiles;
+
+        return tiles.filter(function(item) {
+          return item.x === position.x && item.y === position.y;
+        })[0];
+      }
+    },
+
+    moveTile: function(tile, position) {
+      if (tile.x === position.x && tile.y === position.y) {
+        return false;
+      } else {
+        this.grid[tile.x][tile.y] = 0;
+        this.grid[position.x][position.y] = 1;
+
+        tile.x = position.x;
+        tile.y = position.y;
+
+        return true;
+      }
+    },
+
+    mergeTiles: function(curr, next) {
+      next.value *= 2;
+      next.merged = true;
+
+      var tiles = this.tiles;
+
+      //Better Way to find index of data
+      for (var key in tiles) {
+        if (tiles[key].x === curr.x && tiles[key].y === curr.y) {
+          this.tiles.splice(parseInt(key), 1);
+          break;
+        }
+      }
+
+      this.grid[curr.x][curr.y] = 0;
+
+      // Update the score
+      this.updateScore(next.value);
+
+      return true;
+    },
+
+    handleswipe: function(swiperight, swipeleft, swipeup, swipedown) {
+      if (swiperight) {
+        this.move(1);
+      } else if (swipeleft) {
+        this.move(3);
+      } else if (swipeup) {
+        this.move(0);
+      } else if (swipedown) {
+        this.move(2);
+      }
+    },
+    move: function(direction) {
+      var vector = this.getVector(direction);
+      var traversals = this.buildTraversals(vector);
+      var moved = false;
+      var self = this;
+      var grid = self.grid;
+      //var positions;
+      //var next;
+      //var tile;
+
+      traversals.x.forEach(function(x) {
+        traversals.y.forEach(function(y) {
+          if (grid[x][y]) {
+            var tile = self.findTile({
+              x: x,
+              y: y
+            });
+
+            //tile.merged = false;
+
+            var positions = self.findFarthestPosition(
+              {
+                x: x,
+                y: y
+              },
+              vector
+            );
+            var next = self.findTile(positions.next);
+            // Only one merger per row traversal?
+            if (next && next.value === tile.value) {
+              moved = self.mergeTiles(tile, next, positions.next);
+            } else {
+              moved = self.moveTile(tile, positions.farthest);
+            }
+          }
+        });
+      });
+
+      if (moved) {
+        this.addRandomTile();
+
+        if (grid.toString().indexOf("0") === -1) {
+          if (!this.tileMatchesAvailable()) {
+            this.gameOver();
+          }
+        }
+      }
+    },
+
+    tileMatchesAvailable: function() {
+      var size = this.conf.size;
+      var grid = this.grid;
+      //var tiles = this.tiles;
+      var tile;
+
+      for (var x = 0; x < size; x++) {
+        for (var y = 0; y < size; y++) {
+          tile = grid[x][y];
+
+          if (tile) {
+            for (var direction = 0; direction < 4; direction++) {
+              var vector = this.getVector(direction);
+              var cell = {
+                  x: x + vector.x,
+                  y: y + vector.y
+                },
+                other;
+
+              if (
+                cell.x >= 0 &&
+                cell.x < size &&
+                cell.y >= 0 &&
+                cell.y < size
+              ) {
+                other = grid[cell.x][cell.y];
+              } else {
+                continue;
+              }
+
+              if (
+                other &&
+                this.findTile(cell).value ===
+                  this.findTile({
+                    x: x,
+                    y: y
+                  }).value
+              ) {
+                return true;
+              }
+            }
+          }
+        }
+      }
+
+      return false;
+    },
+
+    withinBounds: function(position) {
+      var size = this.conf.size;
+
+      return (
+        position.x >= 0 &&
+        position.x < size &&
+        position.y >= 0 &&
+        position.y < size
+      );
+    },
+
+    buildTraversals: function(vector) {
+      var traversals = {
+          x: [],
+          y: []
+        },
+        size = this.conf.size;
+
+      for (var pos = 0; pos < size; pos++) {
+        traversals.x.push(pos);
+        traversals.y.push(pos);
+      }
+
+      // Always traverse from the farthest cell in the chosen direction
+      if (vector.x === 1) traversals.x = traversals.x.reverse();
+      if (vector.y === 1) traversals.y = traversals.y.reverse();
+
+      return traversals;
+    },
+
+    updateScore: function(score) {
+      var scoreContainer = document.getElementsByClassName(
+        "score-container"
+      )[0];
+
+      //On init
+      if (score === 0) {
+        this.conf.score = 0;
+        //gameStorage.save('score', 0);
+
+        return false;
+      }
+
+      this.conf.score += score;
+      //gameStorage.save('score', this.score);
+
+      if (this.conf.score > this.conf.bestScore) {
+        this.conf.bestScore = this.conf.score;
+        //gameStorage.save('bestScore', this.bestScore);
+      }
+
+      // The mighty 2048 tile
+      if (score === 2048)
+        //if 2048 tile is formed
+        this.message(true);
+
+      var addition = document.createElement("div");
+      addition.classList.add("score-addition");
+      addition.setAttribute("key", "1");
+      addition.textContent = "+" + score;
+      scoreContainer.insertAdjacentElement("afterend", addition);
+    },
+
+    message: function(won) {
+      var type = won ? "game-won" : "game-over";
+      var message = won ? "You win!" : "Game over!";
+      var messageContainer = document.querySelector(".game-message");
+
+      messageContainer.classList.add(type);
+      messageContainer.getElementsByTagName("p")[0].textContent = message;
+    },
+
+    clearMessage: function() {
+      //was called on line 113
+      var messageContainer = document.querySelector(".game-message");
+
+      messageContainer.classList.remove("game-won");
+      messageContainer.classList.remove("game-over");
+    },
+
+    clearContainer: function(container) {
+      while (container.firstChild) {
+        container.removeChild(container.firstChild);
+      }
+    },
+
+    getWindowSize: function() {
+      var w = window,
+        d = document,
+        e = d.documentElement,
+        g = d.getElementsByTagName("body")[0],
+        x = w.innerWidth || e.clientWidth || g.clientWidth;
+
+      if (x <= 520) {
+        this.tileDimension = 69.5;
+        this.tilePosition = 67;
+      } else {
+        this.tileDimension = 124;
+        this.tilePosition = 121;
+      }
+    }
+  }
+};
+</script>
+<style scoped src="../plugins/style.css"></style>