added fullscreen mode

Is enabled by default
jfd · Sep 10, 2011 · 90b231f · 90b231f
1 parent 74a220e
commit 90b231f
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 66 deletions.
diff --git a/client/devices.js b/client/devices.js
@@ -104,6 +104,15 @@ function ViewportDevice(target, width, height, options) {
   this.set_autorefresh(true);
 }
 
+
+ViewportDevice.prototype.update_size = function(width, height) {
+  this.target.width = width;
+  this.target.height = height;
+  this.w = width;
+  this.h = height;
+  this.camera.size = [width, height];
+};
+
 ViewportDevice.prototype.destroy = function() {
   this.set_autorefresh = false;
   this.ctx.clearRect(0, 0, this.w, this.h);

diff --git a/client/index.html b/client/index.html
@@ -94,6 +94,12 @@
 
 					$('#splash .server-info').html('Connecting...');
 
+          $(window).bind("resize", function() {
+            if ($("#viewport.fullscreen").length) {
+              viewport.update_size(canvas.width(), canvas.height());
+            }
+          });
+
 				  wpilot = new WPilotClient(options);
 				  wpilot.set_viewport(viewport)
 				  wpilot.set_input(keyboard);
@@ -139,7 +145,7 @@
 
 	</head>
 	<body>
-		<section id="viewport" class="mode540">
+		<section id="viewport" class="fullscreen">
 			<canvas></canvas>
 		</section>
 		<section id="splash" class="dialog">

diff --git a/client/style.css b/client/style.css
@@ -8,6 +8,7 @@ body {
   height: 100%;
   font-family: Arial;  
   background: #222;
+  overflow: hidden;
 }
 
 h1 {
@@ -34,6 +35,16 @@ section#viewport {
   top: 50%;
 }
 
+section#viewport.fullscreen {
+  position: absolute;
+  border: none;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+}
+
+
 section#viewport.mode480 {
   margin-left: -360px;
   margin-top: -240px;