Add arcade mode to chrome://dino

components/neterror/resources/offline.js

 // Copyright (c) 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 (function() {
 'use strict';
 /**
  * T-Rex runner.
  * @param {string} outerContainerId Outer containing element id.
  * @param {Object} opt_config
  * @constructor
  * @export
  */
 function Runner(outerContainerId, opt_config) {
   // Singleton
   if (Runner.instance_) {
     return Runner.instance_;
   }
   Runner.instance_ = this;
 
   this.outerContainerEl = document.querySelector(outerContainerId);
   this.containerEl = null;
   this.snackbarEl = null;
 
   this.config = opt_config || Runner.config;
 
   this.dimensions = Runner.defaultDimensions;

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

I guess these are now logical dimensions, as opposed to dimensions in screen
space?  Comment on that somewhere?  Or better, rename this to
logical_dimensions?

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

Done.

 
   this.canvas = null;
   this.canvasCtx = null;
 
   this.tRex = null;
 
   this.distanceMeter = null;
   this.distanceRan = 0;
 
   this.highestScore = 0;
@@ skipping 52 matching lines @@
 
 /** @const */
 var IS_IOS = /iPad|iPhone|iPod/.test(window.navigator.platform);
 
 /** @const */
 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}
  */
 Runner.config = {
   ACCELERATION: 0.001,
   BG_CLOUD_SPEED: 0.2,
   BOTTOM_PAD: 10,
   CLEAR_TIME: 3000,
   CLOUD_FREQUENCY: 0.5,
   GAMEOVER_CLEAR_TIME: 750,
   GAP_COEFFICIENT: 0.6,
   GRAVITY: 0.6,
   INITIAL_JUMP_VELOCITY: 12,
   INVERT_FADE_DURATION: 12000,
   INVERT_DISTANCE: 700,
   MAX_BLINK_COUNT: 3,
   MAX_CLOUDS: 6,
   MAX_OBSTACLE_LENGTH: 3,
   MAX_OBSTACLE_DUPLICATION: 2,
   MAX_SPEED: 13,
   MIN_JUMP_HEIGHT: 35,
   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.

 };
 
 
 /**
  * Default dimensions.
  * @enum {string}
  */
 Runner.defaultDimensions = {
   WIDTH: DEFAULT_WIDTH,
   HEIGHT: 150
 };
 
 
 /**
  * CSS class names.
  * @enum {string}
  */
 Runner.classes = {
+  ARCADE_MODE: 'arcade-mode',
   CANVAS: 'runner-canvas',
   CONTAINER: 'runner-container',
   CRASHED: 'crashed',
   ICON: 'icon-offline',
   INVERTED: 'inverted',
   SNACKBAR: 'snackbar',
   SNACKBAR_SHOW: 'snackbar-show',
   TOUCH_CONTROLLER: 'controller'
 };
 
@@ skipping 65 matching lines @@
   MOUSEUP: 'mouseup',
   RESIZE: 'resize',
   TOUCHEND: 'touchend',
   TOUCHSTART: 'touchstart',
   VISIBILITY: 'visibilitychange',
   BLUR: 'blur',
   FOCUS: 'focus',
   LOAD: 'load'
 };
 
-
 Runner.prototype = {
   /**
    * Whether the easter egg has been disabled. CrOS enterprise enrolled devices.
    * @return {boolean}
    */
   isDisabled: function() {
     return loadTimeData && loadTimeData.valueExists('disabledEasterEgg');
   },
 
   /**
@@ skipping 172 matching lines @@
    */
   adjustDimensions: function() {
     clearInterval(this.resizeTimerId_);
     this.resizeTimerId_ = null;
 
     var boxStyles = window.getComputedStyle(this.outerContainerEl);
     var padding = Number(boxStyles.paddingLeft.substr(0,
         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) {
       this.canvas.width = this.dimensions.WIDTH;
       this.canvas.height = this.dimensions.HEIGHT;
 
       Runner.updateCanvasScaling(this.canvas);
 
       this.distanceMeter.calcXPos(this.dimensions.WIDTH);
       this.clearCanvas();
@@ skipping 48 matching lines @@
     } else if (this.crashed) {
       this.restart();
     }
   },
 
 
   /**
    * Update the game status to started.
    */
   startGame: function() {
+    this.setArcadeMode();
     this.runningTime = 0;
     this.playingIntro = false;
     this.tRex.playingIntro = false;
     this.containerEl.style.webkitAnimation = '';
     this.playCount++;
 
     // Handle tabbing off the page. Pause the current game.
     document.addEventListener(Runner.events.VISIBILITY,
           this.onVisibilityChange.bind(this));
 
@@ skipping 320 matching lines @@
       this.distanceMeter.reset(this.highestScore);
       this.horizon.reset();
       this.tRex.reset();
       this.playSound(this.soundFx.BUTTON_PRESS);
       this.invert(true);
       this.update();
     }
   },
 
   /**
+   * 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.
    */
   onVisibilityChange: function(e) {
     if (document.hidden || document.webkitHidden || e.type == 'blur' ||
       document.visibilityState != 'visible') {
       this.stop();
     } else if (!this.crashed) {
       this.tRex.reset();
       this.play();
     }
@@ skipping 1850 matching lines @@
 
   /**
    * Add a new cloud to the horizon.
    */
   addCloud: function() {
     this.clouds.push(new Cloud(this.canvas, this.spritePos.CLOUD,
         this.dimensions.WIDTH));
   }
 };
 })();