From 56afb1040a5ea402c70b368f0b0fbfd9d0d94df5 Mon Sep 17 00:00:00 2001
From: Vishal <yadav.40@iitj.ac.in>
Date: Mon, 5 Apr 2021 15:25:20 +0530
Subject: [PATCH 1/3] Add an Error 404 page with 2048 game

---
 src/components/tile.vue |  35 +++
 src/plugins/store.js    |   8 +
 src/plugins/style.css   | 603 ++++++++++++++++++++++++++++++++++++++++
 src/router/index.js     |   6 +
 src/views/Error404.vue  | 568 +++++++++++++++++++++++++++++++++++++
 5 files changed, 1220 insertions(+)
 create mode 100644 src/components/tile.vue
 create mode 100644 src/plugins/store.js
 create mode 100644 src/plugins/style.css
 create mode 100644 src/views/Error404.vue

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..b8abfe3
--- /dev/null
+++ b/src/plugins/style.css
@@ -0,0 +1,603 @@
+.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-container .score-addition, .best-container .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;
+      -webkit-animation: move-up 600ms ease-in;
+      -moz-animation: move-up 600ms ease-in;
+      animation: move-up 600ms ease-in;
+      -webkit-animation-fill-mode: both;
+      -moz-animation-fill-mode: both;
+      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;
+    -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 {
+    display: inline-block;
+    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;
+      -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;
+      display: inline-block;
+      -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; }
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..2af8b93
--- /dev/null
+++ b/src/views/Error404.vue
@@ -0,0 +1,568 @@
+<template lang="pug">
+#mainVue.container
+  .heading
+    h1.title 2048
+    .scores-container
+      .score-container {{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
+      .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")
+</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,
+    map: {
+      38: 0, // Up
+      39: 1, // Right
+      40: 2, // Down
+      37: 3, // Left
+      75: 0, // Vim up
+      76: 1, // Vim right
+      74: 2, // Vim down
+      72: 3, // Vim left
+      87: 0, // W
+      68: 1, // D
+      83: 2, // S
+      65: 3 // A
+    }
+  }),
+  created: function() {
+    this.getWindowSize();
+    window.addEventListener("keydown", event => {
+      var modifiers =
+        event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
+      var mapped = this.map[event.which];
+
+      if (!modifiers) {
+        if (mapped !== undefined) {
+          event.preventDefault();
+          console.log(mapped);
+          this.move(mapped);
+        }
+      }
+    });
+  },
+  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;
+    },
+
+    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.textContent = "+" + score;
+      scoreContainer.appendChild(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,
+        y = w.innerHeight || e.clientHeight || g.clientHeight;
+
+      console.log(x);
+      console.log(y);
+
+      if (x <= 520) {
+        this.tileDimension = 69.5;
+        this.tilePosition = 67;
+      } else {
+        this.tileDimension = 124;
+        this.tilePosition = 121;
+      }
+    }
+  }
+};
+// document.addEventListener("keydown", logKey);
+// //document.getElementById("mainVue").textContent += ` ${e.code}`;
+// var map = {
+//   38: 0, // Up
+//   39: 1, // Right
+//   40: 2, // Down
+//   37: 3, // Left
+//   75: 0, // Vim up
+//   76: 1, // Vim right
+//   74: 2, // Vim down
+//   72: 3, // Vim left
+//   87: 0, // W
+//   68: 1, // D
+//   83: 2, // S
+//   65: 3 // A
+// };
+// function logKey(event) {
+//   var modifiers =
+//     event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
+//   var mapped = map[event.which];
+
+//   if (!modifiers) {
+//     if (mapped !== undefined) {
+//       event.preventDefault();
+//       console.log(mapped);
+//       this.move(mapped);
+//     }
+//   }
+// }
+</script>
+<style scoped src="../plugins/style.css"></style>
+<!-- (function(win) {
+   new Vue({});
+ var Keys = keys.KeyboardInputManager();
+ Keys.on("move", function(direction) {
+    Game.move(direction);
+  });
+  win.onresize = function() {
+     Game.getWindowSize();
+   };
+})(window);-->

From 77b8779f2e614c1642e9d0405190eef660ed4845 Mon Sep 17 00:00:00 2001
From: Vishal <yadav.40@iitj.ac.in>
Date: Sat, 17 Apr 2021 12:27:25 +0530
Subject: [PATCH 2/3] Add swipe controls

---
 src/views/Error404.vue | 139 ++++++++++++++++++++++++-----------------
 1 file changed, 80 insertions(+), 59 deletions(-)

diff --git a/src/views/Error404.vue b/src/views/Error404.vue
index 2af8b93..94cd2b5 100644
--- a/src/views/Error404.vue
+++ b/src/views/Error404.vue
@@ -15,6 +15,8 @@
     :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
@@ -41,34 +43,81 @@ export default {
     items: [4, 5, 6],
     tileNo: 4,
     map: {
-      38: 0, // Up
-      39: 1, // Right
-      40: 2, // Down
-      37: 3, // Left
-      75: 0, // Vim up
-      76: 1, // Vim right
-      74: 2, // Vim down
-      72: 3, // Vim left
-      87: 0, // W
-      68: 1, // D
-      83: 2, // S
-      65: 3 // A
-    }
+      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.which];
+      var mapped = this.map[event.key];
 
       if (!modifiers) {
         if (mapped !== undefined) {
           event.preventDefault();
-          console.log(mapped);
           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() {
@@ -322,6 +371,21 @@ export default {
       return true;
     },
 
+    handleswipe: function(swiperight, swipeleft, swipeup, swipedown) {
+      if (swiperight) {
+        this.move(1);
+        console.log("r");
+      } else if (swipeleft) {
+        this.move(3);
+        console.log("l");
+      } else if (swipeup) {
+        this.move(0);
+        console.log("u");
+      } else if (swipedown) {
+        this.move(2);
+        console.log("d");
+      }
+    },
     move: function(direction) {
       var vector = this.getVector(direction);
       var traversals = this.buildTraversals(vector);
@@ -509,11 +573,7 @@ export default {
         d = document,
         e = d.documentElement,
         g = d.getElementsByTagName("body")[0],
-        x = w.innerWidth || e.clientWidth || g.clientWidth,
-        y = w.innerHeight || e.clientHeight || g.clientHeight;
-
-      console.log(x);
-      console.log(y);
+        x = w.innerWidth || e.clientWidth || g.clientWidth;
 
       if (x <= 520) {
         this.tileDimension = 69.5;
@@ -525,44 +585,5 @@ export default {
     }
   }
 };
-// document.addEventListener("keydown", logKey);
-// //document.getElementById("mainVue").textContent += ` ${e.code}`;
-// var map = {
-//   38: 0, // Up
-//   39: 1, // Right
-//   40: 2, // Down
-//   37: 3, // Left
-//   75: 0, // Vim up
-//   76: 1, // Vim right
-//   74: 2, // Vim down
-//   72: 3, // Vim left
-//   87: 0, // W
-//   68: 1, // D
-//   83: 2, // S
-//   65: 3 // A
-// };
-// function logKey(event) {
-//   var modifiers =
-//     event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
-//   var mapped = map[event.which];
-
-//   if (!modifiers) {
-//     if (mapped !== undefined) {
-//       event.preventDefault();
-//       console.log(mapped);
-//       this.move(mapped);
-//     }
-//   }
-// }
 </script>
 <style scoped src="../plugins/style.css"></style>
-<!-- (function(win) {
-   new Vue({});
- var Keys = keys.KeyboardInputManager();
- Keys.on("move", function(direction) {
-    Game.move(direction);
-  });
-  win.onresize = function() {
-     Game.getWindowSize();
-   };
-})(window);-->

From 501268db106763829438a4c20126d7fbc2ee220c Mon Sep 17 00:00:00 2001
From: Vishal <yadav.40@iitj.ac.in>
Date: Thu, 27 May 2021 01:08:18 +0530
Subject: [PATCH 3/3] Temporary changes

---
 src/plugins/style.css  | 1311 +++++++++++++++++++++++-----------------
 src/views/Error404.vue |   17 +-
 2 files changed, 753 insertions(+), 575 deletions(-)

diff --git a/src/plugins/style.css b/src/plugins/style.css
index b8abfe3..7ceab20 100644
--- a/src/plugins/style.css
+++ b/src/plugins/style.css
@@ -1,137 +1,598 @@
 .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;
+  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;
-    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-container .score-addition, .best-container .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;
-      -webkit-animation: move-up 600ms ease-in;
-      -moz-animation: move-up 600ms ease-in;
-      animation: move-up 600ms ease-in;
-      -webkit-animation-fill-mode: both;
-      -moz-animation-fill-mode: both;
-      animation-fill-mode: both; }
-  
-  .score-container:after {
-    content: "Score"; }
-  
-  .best-container:after {
-    content: "Best"; }
-  
-  p {
+  }
+}
+.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;
-    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-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: 40px;
+    margin-top: 17px;
     position: relative;
-    padding: 15px;
+    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;
@@ -139,279 +600,41 @@
     touch-action: none;
     background: #bbada0;
     border-radius: 6px;
-    width: 500px;
-    height: 500px;
+    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: 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 {
+  .game-container .game-message {
+    display: none;
     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: "";
+    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;
-    clear: both; }
-  
-  .game-intro {
-    float: left;
-    line-height: 42px;
-    margin-bottom: 0; }
-  
-  .restart-button {
+    margin-top: 59px;
+  }
+  .game-container .game-message a {
     display: inline-block;
     background: #8f7a66;
     border-radius: 3px;
@@ -420,184 +643,134 @@
     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;
-    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;
-      -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;
-      display: inline-block;
-      -webkit-appearance:none;
-      -moz-appearance:none;
-      appearance:none;
-      cursor:pointer;
-      float:left;
-      height: 50px;
-      width: 75px;
-  }
-  .left{
     clear: both;
+  }
+
+  .grid-cell {
+    width: 57.5px;
+    height: 57.5px;
+    margin-right: 10px;
     float: left;
-    font-size: 17px;
-    line-height: 24px;
-    padding: 0 10px 0 10px;
+    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);
   }
-  [v-cloak] { display: none; background: red; }
+}
\ No newline at end of file
diff --git a/src/views/Error404.vue b/src/views/Error404.vue
index 94cd2b5..90e33f5 100644
--- a/src/views/Error404.vue
+++ b/src/views/Error404.vue
@@ -3,7 +3,8 @@
   .heading
     h1.title 2048
     .scores-container
-      .score-container {{conf.score}}
+      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
@@ -24,6 +25,11 @@
       .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";
@@ -42,6 +48,8 @@ export default {
     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
@@ -374,16 +382,12 @@ export default {
     handleswipe: function(swiperight, swipeleft, swipeup, swipedown) {
       if (swiperight) {
         this.move(1);
-        console.log("r");
       } else if (swipeleft) {
         this.move(3);
-        console.log("l");
       } else if (swipeup) {
         this.move(0);
-        console.log("u");
       } else if (swipedown) {
         this.move(2);
-        console.log("d");
       }
     },
     move: function(direction) {
@@ -541,8 +545,9 @@ export default {
 
       var addition = document.createElement("div");
       addition.classList.add("score-addition");
+      addition.setAttribute("key", "1");
       addition.textContent = "+" + score;
-      scoreContainer.appendChild(addition);
+      scoreContainer.insertAdjacentElement("afterend", addition);
     },
 
     message: function(won) {