Merge pull request mozilla#291 from mcav/resize-for-phone

Resize canvas to fill screen on mobile-sized devices.
kripken · Sep 19, 2014 · 27a6951 · 27a6951
2 parents 6b1e631 + 77fbde2
commit 27a6951
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 31 deletions.
diff --git a/index.html b/index.html
@@ -86,11 +86,13 @@
     </section>
   </div>
   <div id="display"><canvas id="canvas"></canvas></div>
-  <button id="up">up</button>
-  <button id="down">down</button>
-  <button id="left">left</button>
-  <button id="right">right</button>
-  <button id="fire">fire</button>
+  <div id="gamepad">
+    <button id="up">up</button>
+    <button id="down">down</button>
+    <button id="left">left</button>
+    <button id="right">right</button>
+    <button id="fire">fire</button>
+  </div>
 </body>
 
 </html>
diff --git a/libs/urlparams.js b/libs/urlparams.js
@@ -20,6 +20,7 @@
  *    network_mnc
  *    pushConn
  *    pushMidlet
+ *    autosize
  *
  * Keep this list up-to-date!
  */

diff --git a/manifest.webapp b/manifest.webapp
@@ -1,7 +1,7 @@
 {
   "name": "j2me.js",
   "description": "j2me interpreter for firefox os",
-  "launch_path": "/index.html?main=com/sun/midp/main/MIDletSuiteLoader&midletClassName=asteroids.Game",
+  "launch_path": "/index.html?main=com/sun/midp/main/MIDletSuiteLoader&midletClassName=asteroids.Game&autosize=1&logConsole=web",
   "icons": {
     "128": "/img/icon-128.png"
   },

diff --git a/midp/midp.js b/midp/midp.js
@@ -537,8 +537,15 @@ Native["com/sun/midp/chameleon/layers/SoftButtonLayer.isNativeSoftButtonLayerSup
 
 MIDP.Context2D = (function() {
     var c = document.getElementById("canvas");
-    c.width = 240;
-    c.height = 320;
+
+    if (urlParams.autosize && !/no|0/.test(urlParams.autosize)) {
+      c.width = window.innerWidth;
+      c.height = window.innerHeight;
+      document.documentElement.classList.add('autosize');
+    } else {
+      c.width = 240;
+      c.height = 320;
+    }
 
     // TODO These mouse event handlers only work on firefox right now,
     // because they use layerX and layerY.

diff --git a/style.css b/style.css
@@ -83,29 +83,51 @@ button {
 .log-item-warn:before { content: 'W'; padding-right: 1rem; font-weight: bold; }
 .log-item-error:before { content: 'E'; padding-right: 1rem; font-weight: bold; }
 
+#gamepad button {
+  display: none;
+  position: absolute;
+  z-index: 2;
+  height: 40px;
+  width: 40px;
+}
+
+#gamepad #up { left: 75px; bottom: 40px; }
+#gamepad #down { left: 75px; bottom: 0px; }
+#gamepad #left { left: 25px; bottom: 20px; }
+#gamepad #right { left: 125px; bottom: 20px; }
+#gamepad #fire { left: 250px; bottom: 20px; }
+
+
+/* Auto-Size (for devices): Hide everything except the canvas. */
+.autosize body > pre,
+.autosize body > div {
+  display: none;
+}
+
+.autosize body > #gamepad {
+  display: block;
+  z-index: 2;
+}
+
+.autosize body > #gamepad button {
+  display: block;
+}
 
-@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
-  #settings {
-    display: none;
-  }
-
-  #display {
-    bottom: 0px;
-    left: 0px;
-    border: none;
-  }
-
-  button {
-    display: block;
-    position: absolute;
-    height: 40px;
-    width: 40px;
-  }
-
-  #up { left: 75px; bottom: 40px; }
-  #down { left: 75px; bottom: 0px; }
-  #left { left: 25px; bottom: 20px; }
-  #right { left: 125px; bottom: 20px; }
-  #fire { left: 250px; bottom: 20px; }
+.autosize #display {
+  overflow: hidden;
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: black;
+}
 
+/* Prevent scrolling. */
+.autosize, .autosize body {
+  overflow: hidden;
 }