adjust js formatting and clean up some html/css

index.html

@@ -23,39 +23,30 @@
     <div class="container">
 
       <!-- LEFT CONTAINER -->
-    	<div>
+    	<div class="inner-container">
           <div class="heading">
-            <center>
-              <h2 class="title">Periodic  Elemental 2048</h2><br />
-            </center>
+             <h2 class="title">Periodic  Elemental 2048</h2>
             <div class="above-game" style="width:100%">
-              <p class="game-intro"><b>This is a modified version of the famous 2048 game, based on the periodic table of elements. Let's play the game with a twist!</b></p>
+              <p class="game-intro">This is a modified version of the famous 2048 game, based on the periodic table of elements. Let's play the game with a twist!</p>
             </div>
-
             <div class="screen">
               <p>
-                <strong class="important"><center>Instructions</center></strong><br />
-                <center>
+                <strong class="important">Instructions</strong><br />
                   Use your <strong>arrow keys</strong> to move the tiles. When two tiles with the same symbol touch, they <strong>merge into one!</strong>
                 </p>
-                </center>
             </div>
 
-            <CENTER>
-            <p>
-              </br>
-              <strong class="">Modified by <a  href=https://github.com/Griffintaur/Periodic-Elemental-2048 target="_blank">Ankit Singh.</a> Further Enhanced by  <a  href=https://github.com/barath99 target="_blank">Barath</a> Based on <a  href=https://github.com/gabrielecirulli/2048 target="_blank">gabrielecirulli</a></strong>
+            <p class="m-t-20">
+              <strong>Modified by <a href=https://github.com/Griffintaur/Periodic-Elemental-2048 target="_blank">Ankit Singh.</a> Further Enhanced by  <a href=https://github.com/barath99 target="_blank">Barath</a> Based on <a href=https://github.com/gabrielecirulli/2048 target="_blank">gabrielecirulli</a></strong>
             </p>
+            <div class="game-buttons">
               <div class="score-container">0</div>
               <div class="best-container">0</div>
               <a class="restart-button" >New Game</a>
+            </div>
           </div>
 
 
-          </br>
-        </CENTER>
-<CENTER>
-
           <div class="game-container" style="margin-bottom:50px;">
 
             <div class="game-message">
@@ -94,7 +85,6 @@ <h2 class="title">Periodic  Elemental 2048</h2><br />
 
             <div class="tile-container"></div>
           </div>
-        </CENTER>
 
       </div>
     </div>

js/animframe_polyfill.js

@@ -1,28 +1,28 @@
-(function () {
+(function() {
   var lastTime = 0;
-  var vendors = ['webkit', 'moz'];
+  var vendors = ["webkit", "moz"];
   for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
-    window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
-    window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||
-      window[vendors[x] + 'CancelRequestAnimationFrame'];
+    window.requestAnimationFrame = window[vendors[x] + "RequestAnimationFrame"];
+    window.cancelAnimationFrame =
+      window[vendors[x] + "CancelAnimationFrame"] ||
+      window[vendors[x] + "CancelRequestAnimationFrame"];
   }
 
   if (!window.requestAnimationFrame) {
-    window.requestAnimationFrame = function (callback) {
+    window.requestAnimationFrame = function(callback) {
       var currTime = new Date().getTime();
       var timeToCall = Math.max(0, 16 - (currTime - lastTime));
-      var id = window.setTimeout(function () {
+      var id = window.setTimeout(function() {
         callback(currTime + timeToCall);
-      },
-      timeToCall);
+      }, timeToCall);
       lastTime = currTime + timeToCall;
       return id;
     };
   }
 
   if (!window.cancelAnimationFrame) {
-    window.cancelAnimationFrame = function (id) {
+    window.cancelAnimationFrame = function(id) {
       clearTimeout(id);
     };
   }
-}());
+})();

js/application.js

@@ -1,4 +1,4 @@
 // Wait till the browser is ready to render the game (avoids glitches)
-window.requestAnimationFrame(function () {
+window.requestAnimationFrame(function() {
   new GameManager(4, KeyboardInputManager, HTMLActuator, LocalStorageManager);
 });

js/bind_polyfill.js

@@ -1,9 +1,11 @@
-Function.prototype.bind = Function.prototype.bind || function (target) {
-  var self = this;
-  return function (args) {
-    if (!(args instanceof Array)) {
-      args = [args];
-    }
-    self.apply(target, args);
+Function.prototype.bind =
+  Function.prototype.bind ||
+  function(target) {
+    var self = this;
+    return function(args) {
+      if (!(args instanceof Array)) {
+        args = [args];
+      }
+      self.apply(target, args);
+    };
   };
-};

js/classlist_polyfill.js

@@ -1,48 +1,50 @@
-(function () {
-  if (typeof window.Element === "undefined" ||
-      "classList" in document.documentElement) {
+(function() {
+  if (
+    typeof window.Element === "undefined" ||
+    "classList" in document.documentElement
+  ) {
     return;
   }
 
   var prototype = Array.prototype,
-      push = prototype.push,
-      splice = prototype.splice,
-      join = prototype.join;
+    push = prototype.push,
+    splice = prototype.splice,
+    join = prototype.join;
 
   function DOMTokenList(el) {
     this.el = el;
     // The className needs to be trimmed and split on whitespace
     // to retrieve a list of classes.
-    var classes = el.className.replace(/^\s+|\s+$/g, '').split(/\s+/);
+    var classes = el.className.replace(/^\s+|\s+$/g, "").split(/\s+/);
     for (var i = 0; i < classes.length; i++) {
       push.call(this, classes[i]);
     }
   }
 
   DOMTokenList.prototype = {
-    add: function (token) {
+    add: function(token) {
       if (this.contains(token)) return;
       push.call(this, token);
       this.el.className = this.toString();
     },
-    contains: function (token) {
+    contains: function(token) {
       return this.el.className.indexOf(token) != -1;
     },
-    item: function (index) {
+    item: function(index) {
       return this[index] || null;
     },
-    remove: function (token) {
+    remove: function(token) {
       if (!this.contains(token)) return;
       for (var i = 0; i < this.length; i++) {
         if (this[i] == token) break;
       }
       splice.call(this, i, 1);
       this.el.className = this.toString();
     },
-    toString: function () {
-      return join.call(this, ' ');
+    toString: function() {
+      return join.call(this, " ");
     },
-    toggle: function (token) {
+    toggle: function(token) {
       if (!this.contains(token)) {
         this.add(token);
       } else {
@@ -65,7 +67,7 @@
     }
   }
 
-  defineElementGetter(HTMLElement.prototype, 'classList', function () {
+  defineElementGetter(HTMLElement.prototype, "classList", function() {
     return new DOMTokenList(this);
   });
 })();