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;
-
+  // Logical dimensions of the container.
   this.dimensions = Runner.defaultDimensions;
 
   this.canvas = null;
   this.canvasCtx = null;
 
   this.tRex = null;
 
   this.distanceMeter = null;
   this.distanceRan = 0;
 
@@ skipping 53 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,
+  ARCADE_MODE_TOP_POSITION_PERCENT: 0.1
 };
 
 
 /**
  * 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.setArcadeModeContainerScale();
+      }
+    }
 
     // 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() {
+    if (this.isArcadeMode()) {
+      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() {
+    document.body.classList.add(Runner.classes.ARCADE_MODE);
+    this.setArcadeModeContainerScale();
+  },
+
+  /**
+   * Sets the scaling for arcade mode.
+   */
+  setArcadeModeContainerScale: function() {
+    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));
+    var scaledCanvasHeight = this.dimensions.HEIGHT * scale;
+    // Positions the game container at 10% of the available vertical window
+    // height minus the game container height.
+    var translateY = Math.max(0, (windowHeight - scaledCanvasHeight) *
+        Runner.config.ARCADE_MODE_TOP_POSITION_PERCENT);
+    this.containerEl.style.transform = 'scale(' + scale + ') translateY(' +
+        translateY + '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));
   }
 };
 })();