Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
base fork: cscott/nell-balloons
base: 20b50ab7a7
...
head fork: cscott/nell-balloons
compare: 90c53bf023
  • 11 commits
  • 5 files changed
  • 0 commit comments
  • 1 contributor
Commits on May 23, 2012
@cscott Fix bogus "zoom out when hidden #video element is touched" issue. 9deb15b
@cscott Use CSS3 gradient for background. 3cc192f
@cscott Suppress pointer events on hidden menu tags (bogus!).
If 'visibility: visible' is set -- even if containing element is
'visibility: hidden'! -- then the element will be tappable/clickable.
That's very strange; not clear that's in spec -- but we need to deal
with it anyway.
bbdfac2
Commits on May 24, 2012
@cscott Fix CSS3 background gradient. d57d796
@cscott Fix odd tap highlight on menu screen in phonegap app (and Android bro…
…wser).
ea5acb5
@cscott Fancy transitions only on fast machines.
The opacity rules slow down the game on Android by a *lot*.  I guess
the Android version of webkit doesn't know how to optimize 'visibility:hidden'
elements and/or isn't handling the compound transition rules.
fd0ee80
@cscott Don't use webkit gradient on Honeycomb/ICS, it looks ugly. ce2bb96
@cscott Suppress .anim rules on Xoom/ICS as well as Xoom/Honeycomb. c9aac54
@cscott Turning off hardware acceleration in the Android manifest eliminates …
…ICS bugs.

ICS was clipping the beanstalk inappropriately until I removed this clause.
58c1ad4
@cscott Recognize button click on touchstart for faster response time.
Android issues a 'touchcancel' event if the DOM is changed in the touchstart
processing.  Ways the DOM might be changed: audio playing (creates/clones
an element), Funf logging (XHR processing creates a <script> element maybe?).
So the hover effect doesn't persist for 'fast' buttons... but it's a reasonable
tradeoff here.
As a side-effect, we get a 'touchcancel' event
8f7b24c
@cscott Workaround incorrect orientation data given by Android on startup. 90c53bf
View
1  AndroidManifest.xml
@@ -36,7 +36,6 @@ android:anyDensity="true"
<activity
android:name=".BalloonsActivity"
android:label="@string/app_name"
- android:hardwareAccelerated="true"
android:screenOrientation="sensor"
android:configChanges="keyboardHidden|screenSize|orientation">
<!-- was: android:configChanges="orientation|keyboardHidden|screenSize" -->
View
2  assets/www/index.html
@@ -180,7 +180,7 @@
</div></div>
<div id="mask"></div>
-<div id="video"></div>
+<div id="video"><div></div></div>
<div id="rotate">
<div class="background"></div>
<div class="foreground"></div>
View
35 assets/www/index.js
@@ -103,6 +103,7 @@ define(['domReady!', './alea', './compat', './funf', 'nell!', 'score!', 'sound',
}
this.domElement.classList.add('hover');
event.preventDefault();
+ if (this.fast && this.ignoreMouse) { this.handleClick(); }
};
ClickableElement.prototype.unhighlight = function(event) {
switch (event.type) {
@@ -113,7 +114,8 @@ define(['domReady!', './alea', './compat', './funf', 'nell!', 'score!', 'sound',
this.domElement.classList.remove('hover');
event.preventDefault();
if (event.type !== 'touchcancel' &&
- event.type !== 'mouseout') {
+ event.type !== 'mouseout' &&
+ !(this.fast && this.ignoreMouse)) {
this.handleClick();
}
this.ignoreMouse = false;
@@ -122,6 +124,7 @@ define(['domReady!', './alea', './compat', './funf', 'nell!', 'score!', 'sound',
var Button = function(color) {
ClickableElement.call(this, color);
this.attach(buttonsElement);
+ this.fast = true; // fast button response
};
Button.prototype = Object.create(ClickableElement.prototype);
Button.prototype.handleClick = function() {
@@ -813,20 +816,29 @@ define(['domReady!', './alea', './compat', './funf', 'nell!', 'score!', 'sound',
}
};
- var onOrientationChange = function() {
+ var onOrientationChange = function(event) {
// XXX this is xoom specific, we should really look at width/height
var isXoom = (window.device &&
window.device.platform==='Android' &&
window.device.name==='tervigon');
if (!isXoom) { return; }
- if (window.orientation === 0 || window.orientation === 180) {
+ var isPortrait = !(window.orientation === 0 ||
+ window.orientation === 180);
+ // Android sometimes gives bogus values on startup, so if this is the
+ // first call to onOrientationChange, use document body size instead
+ // (but note that document.body size is generally changed *after*
+ // the orientationchange event is fired)
+ if (!event) {
+ isPortrait = (window.outerHeight >= window.outerWidth);
+ }
+ if (!isPortrait) {
if (GameMode.currentMode !== GameMode.Rotate) {
GameMode.Rotate.setUnderMode(GameMode.currentMode);
GameMode.switchTo(GameMode.Rotate);
funf.record('orientation', 'landscape');
}
- } else if (window.orientation === 90 || window.orientation === -90) {
+ } else {
if (GameMode.currentMode === GameMode.Rotate) {
GameMode.switchTo(GameMode.currentMode.underMode);
funf.record('orientation', 'portrait');
@@ -849,6 +861,15 @@ define(['domReady!', './alea', './compat', './funf', 'nell!', 'score!', 'sound',
window.addEventListener('orientationchange',onOrientationChange,false);
if ('orientation' in window) { onOrientationChange(); }
+ /* XXX: this is the "new hotness" way to detect orientation, but it's
+ * not supported by Honeycomb (maybe not by ICS either, I haven't
+ * checked). */
+ //var mql = window.matchMedia("(orientation: portrait)");
+ //console.log("MQL "+(mql.matches?"portrait":"landscape"));
+ //mql.addListener(function(m) {
+ // console.log("MQL CHANGE: "+(m.matches?"portrait":"landscape"));
+ //});
+
// phonegap
document.addEventListener("backbutton", function() {
if (HTML5_HISTORY) {
@@ -863,11 +884,11 @@ define(['domReady!', './alea', './compat', './funf', 'nell!', 'score!', 'sound',
document.addEventListener('resume', onResume, false);
onVisibilityChange();
// add top-level "anim" class unless we're on xoom/honeycomb
- var isHoneycomb = window.device &&
+ var isXoom = window.device &&
(window.device.platform==='Android') &&
- (window.device.version==='3.2.1') &&
+ //(window.device.version==='3.2.1') &&
(window.device.name==='tervigon');
- if (!isHoneycomb) { document.body.classList.add('anim'); }
+ if (!isXoom) { document.body.classList.add('anim'); }
}
if (window.cordovaDetect) {
document.addEventListener("deviceready", onDeviceReady, false);
View
53 assets/www/style.css
@@ -47,14 +47,27 @@ body { background: #008; }
}
#video {
position: absolute;
- top: 50%; left: 50%;
- /* 1280x720 :: 800x450 */
- width: 800px; height: 450px;
- margin-left: -400px; margin-top: -225px;
+ left: 0; top: 50%;
+ /* 1280x720 :: 800x450 .. plus 10px border */
+ width: 100%; height: 460px;
+ margin-top: -230px;
background: #fff;
+ text-align: center;
+ white-space: nowrap;
+ /* overflow style very important, keeps us from 'zooming' when you
+ * double tap on (hidden!) #video element, despite pointer-events: none
+ * *and* overflow: hidden style on <body>. */
+ overflow: hidden;
+}
+#video > * {
+ display: inline-block;
+ width: 800px; height: 450px;
border: 5px solid black;
}
#mask, #video, #menu, #rotate {
+ display: none;
+}
+.anim #mask, .anim #video, .anim #menu, .anim #rotate {
/* transition effect knowledge gleaned from:
* http://www.greywyvern.com/?post=337
* thanks! */
@@ -63,6 +76,7 @@ body { background: #008; }
transition: visibility 0s linear 700ms, opacity 700ms ease-in-out;
opacity: 0;
visibility: hidden;
+ display: block;
}
.video #mask,
.rotate #mask { opacity: 0.8; }
@@ -79,6 +93,7 @@ body { background: #008; }
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
transition-delay: 0s;
+ display: block;
}
.video #game *,
.paused #game * {
@@ -133,6 +148,11 @@ body { background: #008; }
background-repeat: repeat-x;
background-position: bottom;
}
+.anim .grass #background {
+ /* CSS3 gradient */
+ background-image: -webkit-linear-gradient(bottom, #0ff, #0ff 9%, #00f 17%, #00f 28%, #008 50%, #000 100%);
+ background-image: -moz-linear-gradient(bottom, #0ff, #0ff 9%, #00f 17%, #00f 28%, #008 50%, #000 100%);
+}
.grass #background .satellite1,
.grass #background .satellite2,
.grass #background .cloud {
@@ -306,7 +326,7 @@ body { background: #008; }
pointer-events: none;
}
/* don't highlight nell when she is tapped */
-#nell, #nell * {
+.nells > div > div {
-webkit-tap-highlight-color: rgba(0,0,0,0);
tap-highlight-color: rgba(0,0,0,0);
}
@@ -980,6 +1000,10 @@ body { background: #008; }
background-color: #000;
background-image: url('images/grass-back.png');
}
+.anim #menu .level.grass > .background {
+ background-image: -webkit-linear-gradient(bottom, #0ff, #0ff 9%, #00f 17%, #00f 28%, #008 50%, #000 100%);
+ background-image: -moz-linear-gradient(bottom, #0ff, #0ff 9%, #00f 17%, #00f 28%, #008 50%, #000 100%);
+}
#menu .level.grass > .background .stars {
position: absolute; left: 0; top: 0; height: 25%; width: 25%;
background: url('images/star-tile.png') repeat;
@@ -1073,14 +1097,15 @@ body { background: #008; }
-webkit-transition: visibility 0s linear 1s;
-moz-transition: visibility 0s linear 1s;
transition: visibility 0s linear 1s;
+ pointer-events: none;
}
-#menu .exposed-ground .awards > .ground,
-#menu .exposed-troposphere .awards > .ground,
-#menu .exposed-troposphere .awards > .troposphere,
-#menu .exposed-stratosphere .awards > .ground,
-#menu .exposed-stratosphere .awards > .troposphere,
-#menu .exposed-stratosphere .awards > .stratosphere,
-#menu .exposed-mesosphere .awards > * {
+.menu #menu .exposed-ground .awards > .ground,
+.menu #menu .exposed-troposphere .awards > .ground,
+.menu #menu .exposed-troposphere .awards > .troposphere,
+.menu #menu .exposed-stratosphere .awards > .ground,
+.menu #menu .exposed-stratosphere .awards > .troposphere,
+.menu #menu .exposed-stratosphere .awards > .stratosphere,
+.menu #menu .exposed-mesosphere .awards > * {
visibility: visible;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
@@ -1112,6 +1137,8 @@ body { background: #008; }
margin-bottom: -65px; /* cheat down 5px */
background: url('images/tag-white-empty.png') no-repeat;
display: block;
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
+ tap-highlight-color: rgba(0,0,0,0);
}
#menu .awards .tag.hover {
/* use CSS to do tag highlighting */
@@ -1170,7 +1197,7 @@ body { background: #008; }
#menu .mesosphere {
pointer-events: none;
}
-#menu .awards .tag { pointer-events: all; }
+.menu #menu .awards .tag { pointer-events: all; }
.nells > div > div { pointer-events: all; }
/* ------- "please rotate" animation -------- */
View
2  assets/www/test.html
@@ -186,7 +186,7 @@
</div></div>
<div id="mask"></div>
-<div id="video"></div>
+<div id="video"><div></div></div>
<div id="rotate">
<div class="background"></div>
<div class="foreground"></div>

No commit comments for this range

Something went wrong with that request. Please try again.