add fullscreen support to controllers.

If the controller is on mobile and if the device supports fullscreen
we'll ask to go fullscreen

public/css/controllers.css

@@ -219,6 +219,16 @@ html, body {
   line-height: 1;
 }
 
+#hft-touchstart {
+    display: none;
+    z-index: 10000;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0px;
+    top: 0px;
+}
+
 @media only screen and (max-width : 360px) {
   #hft-portrait {
     position: absolute;

public/hft/0.x.x/scripts/commonui.js

@@ -39,12 +39,14 @@ define([
     './io',
     './hft-splash',
     './hft-system',
+    './misc/fullscreen',
     './misc/misc',
     './misc/playername',
   ], function(
     IO,
     HFTSplash,
     HFTSystem,
+    FullScreen,
     Misc,
     PlayerNameHandler) {
 
@@ -75,22 +77,47 @@ define([
    */
   var setupStandardControllerUI = function(client, options) {
     var hftSettings = window.hftSettings || {};
-    var menu = $("hft-menu");
-    var settings = $("hft-settings");
-    var disconnected = $("hft-disconnected");
+    var menuElement = $("hft-menu");
+    var settingsElement = $("hft-settings");
+    var disconnectedElement = $("hft-disconnected");
+    var touchStartElement = $("hft-touchstart");
 
     if (!hftSettings.menu) {
-      menu.style.display = "none";
+      menuElement.style.display = "none";
     } else {
-      menu.addEventListener('click', function() {
-        settings.style.display = "block";
+      menuElement.addEventListener('click', function() {
+        settingsElement.style.display = "block";
       }, false);
     }
 
+    // setup full screen support
+    var requestFullScreen = function() {
+      touchStartElement.removeEventListener('click', requestFullScreen, false);
+      touchStartElement.style.display = "none";
+      FullScreen.requestFullScreen(document.body);
+    };
+
+    var goFullScreenIfNotFullScreen = function(isFullScreen) {
+      if (!isFullScreen) {
+        touchStartElement.addEventListener('click', requestFullScreen, false);
+        touchStartElement.style.display = "block";
+      }
+    };
+    FullScreen.onFullScreenChange(document.body, goFullScreenIfNotFullScreen);
+
+    // Try to detect if we're on mobile. I'm assuming it's not
+    // common for window.innerWidth to match screen.availWidth
+    // on desktop but that it is on mobile.
+    var landscape = window.orientation == 90 || window.orientation == 270;
+    var effectiveWidth = landscape ? screen.height : screen.width;
+    if (window.innerWidth == effectiveWidth) {
+      goFullScreenIfNotFullScreen(false);
+    }
+
     var playerNameHandler = new PlayerNameHandler(client, $("hft-name"));
 
     $("hft-setname").addEventListener('click', function() {
-      settings.style.display = "none";
+      settingsElement.style.display = "none";
       playerNameHandler.startNameEntry();
     }, false);
     $("hft-restart").addEventListener('click', function() {
@@ -100,7 +127,7 @@ define([
       window.location.href = "/";
     }, false);
     $("hft-back").addEventListener('click', function() {
-      settings.style.display = "none";
+      settingsElement.style.display = "none";
     });
 
 //    $("hft-mainmenu").addEventListener('click', function() {
@@ -115,14 +142,14 @@ define([
     // until the user connected but that's mostly
     // pointless.
     client.addEventListener('connect', function() {
-      disconnected.style.display = "none";
+      disconnectedElement.style.display = "none";
       if (options.connectFn) {
         options.connectFn();
       }
     });
 
     client.addEventListener('disconnect', function() {
-      disconnected.style.display = "block";
+      disconnectedElement.style.display = "block";
       if (options.disconnectFn) {
         options.disconnectFn();
       }

public/hft/0.x.x/scripts/misc/fullscreen.js

@@ -0,0 +1,81 @@
+/*
+ * Copyright 2014, Gregg Tavares.
+ * All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are
+ * met:
+ *
+ *     * Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above
+ * copyright notice, this list of conditions and the following disclaimer
+ * in the documentation and/or other materials provided with the
+ * distribution.
+ *     * Neither the name of Gregg Tavares. nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+"use strict";
+
+define([], function() {
+
+  var requestFullScreen = function(element) {
+    if (element.requestFullscreen) {
+      element.requestFullscreen();
+    } else if (element.msRequestFullscreen) {
+      element.msRequestFullscreen();
+    } else if (element.webkitRequestFullScreen) {
+      element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
+    } else if (element.mozRequestFullScreen) {
+      element.mozRequestFullScreen();
+    }
+  };
+
+  var cancelFullScreen = function(element) {
+    if (document.exitFullscreen) {
+      document.exitFullscreen();
+    } else if (document.msExitFullscreen) {
+      document.msExitFullscreen();
+    } else if (document.webkitCancelFullScreen) {
+      document.webkitCancelFullScreen();
+    } else if (document.mozCancelFullScreen) {
+      document.mozCancelFullScreen();
+    }
+  };
+
+  var onFullScreenChange = function(element, callback) {
+    var isFullScreen = function() {
+      return document.fullscreenElement || document.mozFullScreenElement ||
+             document.webkitFullscreenElement || document.msFullscreenElement ||
+             document.mozFullScreen || document.webkitIsFullScreen;
+    };
+    document.addEventListener('fullscreenchange', function(event) {
+        callback(isFullScreen());
+      });
+    element.addEventListener('webkitfullscreenchange', function(event) {
+        callback(isFullScreen());
+      });
+    document.addEventListener('mozfullscreenchange', function(event) {
+        callback(isFullScreen());
+      });
+  };
+
+  return {
+    requestFullScreen: requestFullScreen,
+    cancelFullScreen: cancelFullScreen,
+    onFullScreenChange: onFullScreenChange,
+  };
+});

templates/0.x.x/controller.index.html

@@ -85,6 +85,9 @@
       <div id="hft-back"    class="hft-menubutton"><div>Back</div></div>
     </div>
   </div>
+  <!-- fullscreen/audio hit area -->
+  <div id="hft-touchstart">
+  </div>
 </div>
 %(pages.controller.afterScripts)s
 </body>

todo.md

@@ -1,10 +1,27 @@
 To Do
 =====
 
-*   make games 'reload' if the server disconnects then reconnects
+*   make --go-direct
+*   add fullscreen to android
+*   add a session id to controller so you can continue where you left off
 
-    can we some how indicate to the game it's a reconnect? For example, set a local cookie.
-    On load read and clear the cookie. Set a flag on gameserver?
+    Of the top of my head, gameclient would get sent and id from hft
+    which it would write to a cookie? If the game is restarted that
+    id can be sent back to the game at start up to reconnect a player
+    with their previous state in the game.
+
+    This would only work for a controlled restart of a game. Basically
+    the game would need some way for a user to request it shutdown. It
+    would then save all needed state for current players associated
+    with their session ids. I could send these ids to the controllers
+    at that time.
+
+    On restarting the game the controller would send the id back so
+    the game could reconnect them to their state.
+
+    This is only needed because networking equipment sucks and has
+    to be rebooted from time to time. If we can get networking equipment
+    that never needs to be rebooted there is no need to implement this.
 
 *   send audio example
 *   move tiled support to hft-tiled?
@@ -760,6 +777,11 @@ Runs Repo noid
 Done
 ====
 
+*   make games 'reload' if the server disconnects then reconnects
+
+    can we some how indicate to the game it's a reconnect? For example, set a local cookie.
+    On load read and clear the cookie. Set a flag on gameserver?
+
 *   figure out why unitycharacterexample is not exiting when hft asks it to.
 *   Add option to skip name input. hft start --no-ask-name
 *   make controllers only work if game is running, otherwise switch to other game