Add arcade mode to chrome://dino

components/neterror/resources/offline.js

Index: components/neterror/resources/offline.js
diff --git a/components/neterror/resources/offline.js b/components/neterror/resources/offline.js
index ed3582f278dc2c95983dc03cb8070ae23cba0f60..b4edc9cba0d10eb6396dfd2ee0d0c0e756be56df 100644
--- a/components/neterror/resources/offline.js
+++ b/components/neterror/resources/offline.js
@@ -96,6 +96,9 @@ var IS_MOBILE = /Android/.test(window.navigator.userAgent) || IS_IOS;
 /** @const */
 var IS_TOUCH_ENABLED = 'ontouchstart' in window;
 
+/** @const */
+var ARCADE_MODE_URL = 'chrome://dino/';
+
 /**
  * Default game configuration.
  * @enum {number}
@@ -121,7 +124,9 @@ Runner.config = {
   MOBILE_SPEED_COEFFICIENT: 1.2,
   RESOURCE_TEMPLATE_ID: 'audio-resources',
   SPEED: 6,
-  SPEED_DROP_COEFFICIENT: 3
+  SPEED_DROP_COEFFICIENT: 3,
+  TOP_MARGIN: 35,
+  TOP_POSITION_WEIGHT: 10

[mmenke, 2017/07/05 18:51:29]

Should document these, and name them so it's clear they're only for arcade mode.

[edwardjung, 2017/07/06 19:33:19]

Done.

 };
 
 
@@ -140,6 +145,7 @@ Runner.defaultDimensions = {
  * @enum {string}
  */
 Runner.classes = {
+  ARCADE_MODE: 'arcade-mode',
   CANVAS: 'runner-canvas',
   CONTAINER: 'runner-container',
   CRASHED: 'crashed',
@@ -225,7 +231,6 @@ Runner.events = {
   LOAD: 'load'
 };
 
-
 Runner.prototype = {
   /**
    * Whether the easter egg has been disabled. CrOS enterprise enrolled devices.
@@ -418,6 +423,12 @@ Runner.prototype = {
         boxStyles.paddingLeft.length - 2));
 
     this.dimensions.WIDTH = this.outerContainerEl.offsetWidth - padding * 2;
+    if (this.isArcadeMode()) {
+      this.dimensions.WIDTH = Math.min(DEFAULT_WIDTH, this.dimensions.WIDTH);
+      if (this.activated) {
+        this.setContainerScale();
+      }
+    }
 
     // Redraw the elements back onto the canvas.
     if (this.canvas) {
@@ -486,6 +497,7 @@ Runner.prototype = {
    * Update the game status to started.
    */
   startGame: function() {
+    this.setArcadeMode();
     this.runningTime = 0;
     this.playingIntro = false;
     this.tRex.playingIntro = false;
@@ -825,6 +837,38 @@ Runner.prototype = {
     }
   },
 
+  /**
+   * Whether the game should go into arcade mode.
+   * @return {boolean}
+   */
+  isArcadeMode: function() {
+    return document.title == ARCADE_MODE_URL;
+  },
+
+  /**
+   * Hides offline messaging for a fullscreen game only experience.
+   */
+  setArcadeMode: function() {
+    if (this.isArcadeMode()) {

[mmenke, 2017/07/05 18:51:29]

I'd suggest moving this to the callsite, to make it clearer that this is
actually conditioned on being in arcade mode.

[edwardjung, 2017/07/06 19:33:20]

Done.

+      document.body.classList.add(Runner.classes.ARCADE_MODE);
+      this.setContainerScale();
+    }
+  },
+
+  /**
+   * Sets the scaling for arcade mode.
+   */
+  setContainerScale: function() {

[mmenke, 2017/07/05 18:51:29]

setContainerScaleForArcadeMode?

[edwardjung, 2017/07/06 19:33:19]

Changed to: setArcadeModeContainerScale

+    var windowHeight = window.innerHeight;
+    var scaleHeight = windowHeight / this.dimensions.HEIGHT;
+    var scaleWidth = window.innerWidth / this.dimensions.WIDTH;
+    var scale = Math.max(1, Math.min(scaleHeight, scaleWidth));

[mmenke, 2017/07/05 18:51:29]

So does this mean you can see farther if you make the window wide but really
short?

[edwardjung, 2017/07/06 19:33:19]

No, this just scales up the game container in the window, horizontally and
vertically whilst keeping the aspect ratio of the container size. You don't
actually get more running space. It never scales down, just stays the same size.

+    var position = Math.max(-Runner.config.TOP_MARGIN, (windowHeight -
+        (this.dimensions.HEIGHT * scale)) / Runner.config.TOP_POSITION_WEIGHT);

[mmenke, 2017/07/05 18:51:29]

So I guess this is figuring out how much extra height there is to work with, and
moving the container of the canvas to have 1/10th of that area above it, and the
rest below it?  Could you document that?

Also, I think this would be clearer if this were:

var scaled_canvas_height = this.dimensions.HEIGHT * scale;
var translate_y = Math.max(-Runner.config.TOP_MARGIN,
   scaled_canvas_height * (1 - Runner.config.TOP_POSITION_WEIGHT));  (Note this
different in meaning of the weight - it's now a percent).

Also, why is the -Runner.config.TOP_MARGIN needed, instead of just 0?  I don't
suppose we could express that as an arcade-mode CSS property instead?  (Would be
nice if we could express this all as a CSS property based on arcade mode, but
not sure if that's possible or would just be too complicated)

[edwardjung, 2017/07/06 19:33:20]

Did you mean"
   Math.max(-Runner.config.TOP_MARGIN,
      scaled_canvas_height * (1 / Runner.config.TOP_POSITION_PERCENT))  // 0.1;

This just gives me 10% of the scaled container height. My calculation takes into
the account the available window height. So you get more padding at the top as
the window height get's bigger.
The container is absolutely positioned at 35px from the top. -translateY(35px)
would in effect set it to 0; I've set the top to 0 when in arcade mode. So this
top margin isn't required.
I agree, but one of the issue with transform, is that it will get overridden by
the scale set in the JS here. 
This is also a much more accurate way to get the positioning right to the
available height.

[mmenke, 2017/07/07 16:28:10]

No, I did not - dividing by percents generally means it's not a percent. 1 - 0.9
gives 0.1, so is the same thing as the old value of "10", but it's actually a
percent, and has a clearer meaning (I was thinking 90% up the page, though if
you get rid of the subtraction, could use 0.1 to indicate it's 10% from the top
of the page).

[edwardjung, 2017/07/10 15:17:11]

Aaah, got it. Switched to to 0.1.

+    this.containerEl.style.transform = 'scale(' + scale + ') translateY(' +
+        position + 'px)';
+  },
+
   /**
    * Pause the game if the tab is not in focus.
    */