fix(MazeWeb): Add resize screen feature

- Add fullscreen and unfullscreen buttons to MazeWeb/index.html
- Add fullscreen and unfullscreen icons to MazeWeb/icons/
- Add fullscreen and unfullscreen function to MazeWeb/js/activities.js

Fix llaske#400

activities/MazeWeb.activity/css/activity.css

@@ -44,4 +44,22 @@
   background-color: #101010;
   overflow-x: hidden;
   overflow-y: hidden;
-}
+}
+
+#fullscreen-button {
+  background-image: url(../icons/view-fullscreen.svg);
+}
+
+#unfullscreen-button {
+  background-image: url(../icons/view-return.svg);
+  border: 0;
+  border-radius: 0px;
+  margin: 1px;
+  width: 45px;
+  height: 45px;
+  top: 0;
+  left: 95%;
+  position: absolute;
+  visibility: hidden;
+  z-index: 5;
+}

activities/MazeWeb.activity/index.html

@@ -20,12 +20,14 @@
   <button class="toolbutton" id="activity-button" title="My Activity"></button>
   <button class="toolbutton" id="network-button" title="Network"></button>
   <button class="toolbutton pull-right" id="stop-button" title="Stop"></button>
+  <button class="toolbutton pull-right" id="fullscreen-button" title="Fullscreen"></button>
   <button class="toolbutton" id="restart-button" title="Restart"></button>
 </div>
 
 <div id="canvas">
   <canvas id="maze"></canvas>
 </div>
+<button class="toolbutton" id="unfullscreen-button" title="Unfullscreen"></button>
 </body>
 
 </html>

activities/MazeWeb.activity/js/activity.js

@@ -1,6 +1,19 @@
 define(["sugar-web/activity/activity","tween","rAF","activity/directions","sugar-web/graphics/presencepalette", "sugar-web/env",  "sugar-web/graphics/icon", "webL10n", "sugar-web/graphics/palette", "rot", "humane"], function (activity, TWEEN, rAF, directions, presencepalette, env, icon, webL10n, palette, ROT, humane) {
 
-    requirejs(['domReady!'], function (doc) {
+    // Resize screen
+  document.getElementById("fullscreen-button").addEventListener('click', function() {
+    console.log('RESIZE')    
+    document.getElementById("main-toolbar").style.opacity = 0;
+    document.getElementById("canvas").style.top = "0px";
+    document.getElementById("unfullscreen-button").style.visibility = "visible";
+  });
+  document.getElementById("unfullscreen-button").addEventListener('click', function() {
+    document.getElementById("main-toolbar").style.opacity = 1;
+    document.getElementById("canvas").style.top = "55px";
+    document.getElementById("unfullscreen-button").style.visibility = "hidden";
+  });  
+
+  requirejs(['domReady!'], function (doc) {
         activity.setup();
 
         var maze = {};
@@ -87,7 +100,7 @@ define(["sugar-web/activity/activity","tween","rAF","activity/directions","sugar
 
         };
 
-        var onNetworkUserChanged = function(msg) {
+      var onNetworkUserChanged = function(msg) {
 			var userName = msg.user.name.replace('<', '&lt;').replace('>', '&gt;');
 			var html = "<img style='height:30px;' src='" + generateXOLogoWithColor(msg.user.colorvalue) + "'>";
 			if (msg.move === 1) {