optimize for mobile

- make the whole screen touchable initially to easy start the game
- make the whole screen touchable to restart the game

main.css → index.css

@@ -2,7 +2,7 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
-html,body{
+html, body {
   padding: 0;
   margin: 0;
   width: 100%;
@@ -15,9 +15,7 @@ html,body{
 }
 
 .icon-offline {
-  content: -webkit-image-set(
-      url(assets/default_100_percent/100-error-offline.png) 1x,
-      url(assets/default_200_percent/200-error-offline.png) 2x);
+  content: -webkit-image-set( url(assets/default_100_percent/100-error-offline.png) 1x, url(assets/default_200_percent/200-error-offline.png) 2x);
   position: relative;
 }
 
@@ -25,7 +23,9 @@ html,body{
   display: none;
 }
 
+
 /* Offline page */
+
 .offline .interstitial-wrapper {
   color: #2b2b2b;
   font-size: 1em;
@@ -56,7 +56,7 @@ html,body{
 }
 
 .offline .controller {
-  background: rgba(247,247,247, .1);
+  background: rgba(247, 247, 247, .1);
   height: 100vh;
   left: 0;
   position: absolute;
@@ -70,11 +70,9 @@ html,body{
 }
 
 @media (max-width: 420px) {
-  .suggested-left > #control-buttons,
-  .suggested-right > #control-buttons {
+  .suggested-left > #control-buttons, .suggested-right > #control-buttons {
     float: none;
   }
-
   .snackbar {
     left: 0;
     bottom: 0;
@@ -87,15 +85,12 @@ html,body{
   h1 {
     margin: 0 0 15px;
   }
-
   .icon-offline {
     margin: 0 0 10px;
   }
-
   .interstitial-wrapper {
     margin-top: 5%;
   }
-
   .nav-wrapper {
     margin-top: 30px;
   }
@@ -108,9 +103,7 @@ html,body{
   }
 }
 
-@media (min-width: 420px) and (max-width: 736px) and
-       (min-height: 240px) and (max-height: 420px) and
-       (orientation:landscape) {
+@media (min-width: 420px) and (max-width: 736px) and (min-height: 240px) and (max-height: 420px) and (orientation:landscape) {
   .interstitial-wrapper {
     margin-bottom: 100px;
   }
@@ -120,7 +113,6 @@ html,body{
   .offline .interstitial-wrapper {
     margin-bottom: 90px;
   }
-
   .icon-offline {
     margin-bottom: 20px;
   }
@@ -130,7 +122,6 @@ html,body{
   .icon-offline {
     margin-bottom: 0;
   }
-
   .offline .runner-container {
     top: 10px;
   }
@@ -141,4 +132,4 @@ html,body{
     overflow: inherit;
     padding: 0 8px;
   }
-}
+}

index.html

@@ -5,7 +5,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
     <title >chrome easter egg: t-rex runner</title>
-    <link rel="stylesheet" href="main.css">
+    <link rel="stylesheet" href="index.css">
     <script src="index.js"></script>
 </head>
 

index.js

@@ -396,6 +396,7 @@
         createTouchController: function () {
             this.touchController = document.createElement('div');
             this.touchController.className = Runner.classes.TOUCH_CONTROLLER;
+            this.outerContainerEl.appendChild(this.touchController);
         },
 
         /**
@@ -473,9 +474,9 @@
                 this.containerEl.style.webkitAnimation = 'intro .4s ease-out 1 both';
                 this.containerEl.style.width = this.dimensions.WIDTH + 'px';
 
-                if (this.touchController) {
-                    this.outerContainerEl.appendChild(this.touchController);
-                }
+                // if (this.touchController) {
+                //     this.outerContainerEl.appendChild(this.touchController);
+                // }
                 this.playing = true;
                 this.activated = true;
             } else if (this.crashed) {
@@ -680,8 +681,9 @@
                     }
                 }
 
-                if (this.crashed && e.type == Runner.events.TOUCHSTART &&
-                    e.currentTarget == this.containerEl) {
+                // if (this.crashed && e.type == Runner.events.TOUCHSTART &&
+                //     e.currentTarget == this.containerEl) {
+                if (this.crashed && e.type == Runner.events.TOUCHSTART) {
                     this.restart();
                 }
             }