Skip to content

Commit f2689aa

Browse files
committed
add fullscreen support to controllers.
If the controller is on mobile and if the device supports fullscreen we'll ask to go fullscreen
1 parent 20ea8e6 commit f2689aa

File tree

5 files changed

+156
-13
lines changed

5 files changed

+156
-13
lines changed

public/css/controllers.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -219,6 +219,16 @@ html, body {
219219
line-height: 1;
220220
}
221221

222+
#hft-touchstart {
223+
display: none;
224+
z-index: 10000;
225+
position: absolute;
226+
width: 100%;
227+
height: 100%;
228+
left: 0px;
229+
top: 0px;
230+
}
231+
222232
@media only screen and (max-width : 360px) {
223233
#hft-portrait {
224234
position: absolute;

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

Lines changed: 37 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -39,12 +39,14 @@ define([
3939
'./io',
4040
'./hft-splash',
4141
'./hft-system',
42+
'./misc/fullscreen',
4243
'./misc/misc',
4344
'./misc/playername',
4445
], function(
4546
IO,
4647
HFTSplash,
4748
HFTSystem,
49+
FullScreen,
4850
Misc,
4951
PlayerNameHandler) {
5052

@@ -75,22 +77,47 @@ define([
7577
*/
7678
var setupStandardControllerUI = function(client, options) {
7779
var hftSettings = window.hftSettings || {};
78-
var menu = $("hft-menu");
79-
var settings = $("hft-settings");
80-
var disconnected = $("hft-disconnected");
80+
var menuElement = $("hft-menu");
81+
var settingsElement = $("hft-settings");
82+
var disconnectedElement = $("hft-disconnected");
83+
var touchStartElement = $("hft-touchstart");
8184

8285
if (!hftSettings.menu) {
83-
menu.style.display = "none";
86+
menuElement.style.display = "none";
8487
} else {
85-
menu.addEventListener('click', function() {
86-
settings.style.display = "block";
88+
menuElement.addEventListener('click', function() {
89+
settingsElement.style.display = "block";
8790
}, false);
8891
}
8992

93+
// setup full screen support
94+
var requestFullScreen = function() {
95+
touchStartElement.removeEventListener('click', requestFullScreen, false);
96+
touchStartElement.style.display = "none";
97+
FullScreen.requestFullScreen(document.body);
98+
};
99+
100+
var goFullScreenIfNotFullScreen = function(isFullScreen) {
101+
if (!isFullScreen) {
102+
touchStartElement.addEventListener('click', requestFullScreen, false);
103+
touchStartElement.style.display = "block";
104+
}
105+
};
106+
FullScreen.onFullScreenChange(document.body, goFullScreenIfNotFullScreen);
107+
108+
// Try to detect if we're on mobile. I'm assuming it's not
109+
// common for window.innerWidth to match screen.availWidth
110+
// on desktop but that it is on mobile.
111+
var landscape = window.orientation == 90 || window.orientation == 270;
112+
var effectiveWidth = landscape ? screen.height : screen.width;
113+
if (window.innerWidth == effectiveWidth) {
114+
goFullScreenIfNotFullScreen(false);
115+
}
116+
90117
var playerNameHandler = new PlayerNameHandler(client, $("hft-name"));
91118

92119
$("hft-setname").addEventListener('click', function() {
93-
settings.style.display = "none";
120+
settingsElement.style.display = "none";
94121
playerNameHandler.startNameEntry();
95122
}, false);
96123
$("hft-restart").addEventListener('click', function() {
@@ -100,7 +127,7 @@ define([
100127
window.location.href = "/";
101128
}, false);
102129
$("hft-back").addEventListener('click', function() {
103-
settings.style.display = "none";
130+
settingsElement.style.display = "none";
104131
});
105132

106133
// $("hft-mainmenu").addEventListener('click', function() {
@@ -115,14 +142,14 @@ define([
115142
// until the user connected but that's mostly
116143
// pointless.
117144
client.addEventListener('connect', function() {
118-
disconnected.style.display = "none";
145+
disconnectedElement.style.display = "none";
119146
if (options.connectFn) {
120147
options.connectFn();
121148
}
122149
});
123150

124151
client.addEventListener('disconnect', function() {
125-
disconnected.style.display = "block";
152+
disconnectedElement.style.display = "block";
126153
if (options.disconnectFn) {
127154
options.disconnectFn();
128155
}
Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
/*
2+
* Copyright 2014, Gregg Tavares.
3+
* All rights reserved.
4+
*
5+
* Redistribution and use in source and binary forms, with or without
6+
* modification, are permitted provided that the following conditions are
7+
* met:
8+
*
9+
* * Redistributions of source code must retain the above copyright
10+
* notice, this list of conditions and the following disclaimer.
11+
* * Redistributions in binary form must reproduce the above
12+
* copyright notice, this list of conditions and the following disclaimer
13+
* in the documentation and/or other materials provided with the
14+
* distribution.
15+
* * Neither the name of Gregg Tavares. nor the names of its
16+
* contributors may be used to endorse or promote products derived from
17+
* this software without specific prior written permission.
18+
*
19+
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
20+
* "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
21+
* LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
22+
* A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
23+
* OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
24+
* SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
25+
* LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
26+
* DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
27+
* THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
28+
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
29+
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
30+
*/
31+
"use strict";
32+
33+
define([], function() {
34+
35+
var requestFullScreen = function(element) {
36+
if (element.requestFullscreen) {
37+
element.requestFullscreen();
38+
} else if (element.msRequestFullscreen) {
39+
element.msRequestFullscreen();
40+
} else if (element.webkitRequestFullScreen) {
41+
element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
42+
} else if (element.mozRequestFullScreen) {
43+
element.mozRequestFullScreen();
44+
}
45+
};
46+
47+
var cancelFullScreen = function(element) {
48+
if (document.exitFullscreen) {
49+
document.exitFullscreen();
50+
} else if (document.msExitFullscreen) {
51+
document.msExitFullscreen();
52+
} else if (document.webkitCancelFullScreen) {
53+
document.webkitCancelFullScreen();
54+
} else if (document.mozCancelFullScreen) {
55+
document.mozCancelFullScreen();
56+
}
57+
};
58+
59+
var onFullScreenChange = function(element, callback) {
60+
var isFullScreen = function() {
61+
return document.fullscreenElement || document.mozFullScreenElement ||
62+
document.webkitFullscreenElement || document.msFullscreenElement ||
63+
document.mozFullScreen || document.webkitIsFullScreen;
64+
};
65+
document.addEventListener('fullscreenchange', function(event) {
66+
callback(isFullScreen());
67+
});
68+
element.addEventListener('webkitfullscreenchange', function(event) {
69+
callback(isFullScreen());
70+
});
71+
document.addEventListener('mozfullscreenchange', function(event) {
72+
callback(isFullScreen());
73+
});
74+
};
75+
76+
return {
77+
requestFullScreen: requestFullScreen,
78+
cancelFullScreen: cancelFullScreen,
79+
onFullScreenChange: onFullScreenChange,
80+
};
81+
});

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,9 @@
8585
<div id="hft-back" class="hft-menubutton"><div>Back</div></div>
8686
</div>
8787
</div>
88+
<!-- fullscreen/audio hit area -->
89+
<div id="hft-touchstart">
90+
</div>
8891
</div>
8992
%(pages.controller.afterScripts)s
9093
</body>

todo.md

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,27 @@
11
To Do
22
=====
33

4-
* make games 'reload' if the server disconnects then reconnects
4+
* make --go-direct
5+
* add fullscreen to android
6+
* add a session id to controller so you can continue where you left off
57

6-
can we some how indicate to the game it's a reconnect? For example, set a local cookie.
7-
On load read and clear the cookie. Set a flag on gameserver?
8+
Of the top of my head, gameclient would get sent and id from hft
9+
which it would write to a cookie? If the game is restarted that
10+
id can be sent back to the game at start up to reconnect a player
11+
with their previous state in the game.
12+
13+
This would only work for a controlled restart of a game. Basically
14+
the game would need some way for a user to request it shutdown. It
15+
would then save all needed state for current players associated
16+
with their session ids. I could send these ids to the controllers
17+
at that time.
18+
19+
On restarting the game the controller would send the id back so
20+
the game could reconnect them to their state.
21+
22+
This is only needed because networking equipment sucks and has
23+
to be rebooted from time to time. If we can get networking equipment
24+
that never needs to be rebooted there is no need to implement this.
825

926
* send audio example
1027
* move tiled support to hft-tiled?
@@ -760,6 +777,11 @@ Runs Repo noid
760777
Done
761778
====
762779

780+
* make games 'reload' if the server disconnects then reconnects
781+
782+
can we some how indicate to the game it's a reconnect? For example, set a local cookie.
783+
On load read and clear the cookie. Set a flag on gameserver?
784+
763785
* figure out why unitycharacterexample is not exiting when hft asks it to.
764786
* Add option to skip name input. hft start --no-ask-name
765787
* make controllers only work if game is running, otherwise switch to other game

0 commit comments

Comments
 (0)