debug draw overlay, fullscreen

app/Bootstrap/HttpServer.js

@@ -7,7 +7,8 @@ function (http, nodeStatic) {
 
     function HttpServer (options) {
         options.port = options.port || 1234;
-        options.caching = typeof options.caching != 'undefined' ? options.caching : true;
+        options.caching = typeof options.caching != 'undefined' ? options.caching : 3600;
+        console.log(options.caching)
         options.rootDirectory = options.rootDirectory || './';
 
         this.server = null;
@@ -44,6 +45,10 @@ function (http, nodeStatic) {
                             fileServer.serveFile('./node_modules/requirejs/require.js', 200, {}, req, res);
                             break;
 
+                        case req.url == '/screenfull.js':
+                            fileServer.serveFile('./node_modules/screenfull/dist/screenfull.js', 200, {}, req, res);
+                            break;
+
                         case new RegExp(/^\/app/).test(req.url):
                             fileServer.serve(req, res, function () {
                                 self.handleFileError(res)

app/Game/Client/GameController.js

@@ -7,16 +7,15 @@ define([
     "Lib/Utilities/NotificationCenter",
     "Lib/Utilities/RequestAnimFrame",
     "Game/Config/Settings",
-    "Lib/Vendor/Stats",
     "Game/Client/GameObjects/GameObject",
-    "Game/Client/GameObjects/Doll"
+    "Game/Client/GameObjects/Doll",
+    "Game/Client/View/DomController"
 ],
 
-function (Parent, Box2D, PhysicsEngine, ViewManager, PlayerController, NotificationCenter, requestAnimFrame, Settings, Stats, GameObject, Doll) {
+function (Parent, Box2D, PhysicsEngine, ViewManager, PlayerController, NotificationCenter, requestAnimFrame, Settings, GameObject, Doll, DomController) {
 
     function GameController () {
         this.view = ViewManager.createView();
-        this.initStats();
         this.me = null;
 
         Parent.call(this);
@@ -24,23 +23,6 @@ function (Parent, Box2D, PhysicsEngine, ViewManager, PlayerController, Notificat
 
     GameController.prototype = Object.create(Parent.prototype);
 
-    GameController.prototype.initStats = function() {
-        this.stats = new Stats();
-        this.stats.setMode(0);
-        document.body.appendChild(this.stats.domElement);
-        var p = document.createElement("p");
-        var button = document.createElement("button");
-        button.innerHTML = "Reset level";
-        button.onclick = function() {
-            inspector.resetLevel();
-            button.disabled = true;;
-            setTimeout(function() {
-                button.disabled = false;
-            }, 1000 * 30);
-        }
-        p.appendChild(button);
-        document.body.appendChild(p);
-    };
 
     GameController.prototype.destruct = function() {
         //destroy box2d world etc.
@@ -51,7 +33,7 @@ function (Parent, Box2D, PhysicsEngine, ViewManager, PlayerController, Notificat
     }
 
     GameController.prototype.update  = function () {
-        this.stats.begin();
+        DomController.statsBegin();
 
         requestAnimFrame(this.update.bind(this));
 
@@ -67,7 +49,7 @@ function (Parent, Box2D, PhysicsEngine, ViewManager, PlayerController, Notificat
 
         this.view.render();
 
-        this.stats.end();
+        DomController.statsEnd();
     }
 
     GameController.prototype.onWorldUpdate = function (updateData) {

app/Game/Client/Networker.js

@@ -3,10 +3,11 @@ define([
     "Game/Client/GameController",
     "Game/Client/User",
     "Lib/Utilities/NotificationCenter",
-    "Game/Config/Settings"
+    "Game/Config/Settings",
+    "Game/Client/View/DomController"
 ], 
 
-function (ProtocolHelper, GameController, User, NotificationCenter, Settings) {
+function (ProtocolHelper, GameController, User, NotificationCenter, Settings, DomController) {
 
     function Networker (socketLink) {
         this.socketLink = socketLink;
@@ -74,10 +75,7 @@ function (ProtocolHelper, GameController, User, NotificationCenter, Settings) {
     }
 
     Networker.prototype.initPing = function() {
-        this.pingDOMElement = document.createElement("span");
+
-        this.pingDOMElement.style.color = "white";
-        this.pingDOMElement.style.fontFamily = "monospace";
-        document.body.appendChild(this.pingDOMElement);
         this.ping();
     };
 
@@ -121,7 +119,8 @@ function (ProtocolHelper, GameController, User, NotificationCenter, Settings) {
     }
 
     Networker.prototype.onPong = function(timestamp) {
-        this.pingDOMElement.innerHTML = "Ping: " + (Date.now() - parseInt(timestamp, 10));
+        var ping = (Date.now() - parseInt(timestamp, 10));
+        DomController.setPing(ping);
         setTimeout(this.ping.bind(this), 1000);
     };
 

app/Game/Client/Physics/Engine.js

@@ -2,34 +2,43 @@ define([
     "Game/Core/Physics/Engine",
     "Game/Config/Settings",
     "Game/Client/View/DomController",
-    "Lib/Vendor/Box2D"
+    "Lib/Vendor/Box2D",
+    "Lib/Utilities/NotificationCenter"
 ],
 
-function (Parent, Settings, DomController, Box2D) {
+function (Parent, Settings, DomController, Box2D, NotificationCenter) {
 
     function Engine () {
         Parent.call(this);
 
-        if(Settings.DEBUG_MODE) {
+        this.debugMode = false;
-            this.setupDebugDraw();
+
-        }
+        NotificationCenter.on("view/toggleDebugMode", this.onToggleDebugMode, this);
     }
 
     Engine.prototype = Object.create(Parent.prototype);
 
+    Engine.prototype.onToggleDebugMode = function(debugMode) {
+        this.debugMode = debugMode;
+
+        if(this.debugMode && !this.debugDraw) {
+            this.setupDebugDraw();
+        }
+    };
+
     Engine.prototype.setupDebugDraw = function () {
-        //var debugSprite = Settings.DEBUG_DRAW_CANVAS_SPRITE;
+
         var debugSprite = DomController.getDebugCanvas().getContext("2d");
 
         // set debug draw
-        var debugDraw = new Box2D.Dynamics.b2DebugDraw();
+        this.debugDraw = new Box2D.Dynamics.b2DebugDraw();
 
-        debugDraw.SetSprite(debugSprite);
+        this.debugDraw.SetSprite(debugSprite);
-        debugDraw.SetDrawScale(Settings.RATIO);
+        this.debugDraw.SetDrawScale(Settings.RATIO);
-        debugDraw.SetFillAlpha(0.5);
+        this.debugDraw.SetFillAlpha(0.5);
-        debugDraw.SetLineThickness(1.0);
+        this.debugDraw.SetLineThickness(1.0);
 
-        debugDraw.SetFlags(null
+        this.debugDraw.SetFlags(null
             | Box2D.Dynamics.b2DebugDraw.e_shapeBit 
             | Box2D.Dynamics.b2DebugDraw.e_jointBit 
             //| Box2D.Dynamics.b2DebugDraw.e_coreShapeBit
@@ -39,16 +48,16 @@ function (Parent, Settings, DomController, Box2D) {
             //| Box2D.Dynamics.b2DebugDraw.e_pairBit
         );
 
-        this.world.SetDebugDraw(debugDraw);
+        this.world.SetDebugDraw(this.debugDraw);
-        this.world.SetWarmStarting(true);
     }
 
-
     Engine.prototype.update = function () {
         Parent.prototype.update.call(this);
 
+        if(this.debugMode) {
             this.world.DrawDebugData();
         }
+    }
 
     return Engine;
 })

app/Game/Client/View/DomController.js

@@ -1,15 +1,101 @@
 define([
-    'Game/Config/Settings'
+    'Game/Config/Settings',
+    'Lib/Utilities/NotificationCenter',
+    "Lib/Vendor/Stats",
+    "Lib/Vendor/Screenfull"
 ], 
 
-function (Settings) {
+function (Settings, NotificationCenter, Stats, Screenfull) {
 
-    var DomController = {
+    function DomController() {
-        canvas: null,
+        this.canvas = null;
-        debugCanvas: null
+        this.debugCanvas = null;
+        this.stats = null;
+        this.ping = null;
+
+        NotificationCenter.on("view/ready", this.initDevTools, this);
+    }
+
+    DomController.prototype.initDevTools = function() {
+
+        var self = this;
+
+        // create dev tools container
+        this.devToolsContainer = document.createElement("div");
+        this.devToolsContainer.id = "devtools";
+        document.body.appendChild(this.devToolsContainer);
+
+        // create Fullscreen
+        var p = document.createElement("p");
+        var button = document.createElement("button");
+        button.innerHTML = "Fullscreen";
+        button.onclick = function() {
+            if(Screenfull.enabled) {
+                Screenfull.request(self.canvas);
+            }
+        }
+        p.appendChild(button);
+        this.devToolsContainer.appendChild(p);
+
+        window.onresize = function() {
+            if(Screenfull.enabled) {
+                NotificationCenter.trigger("view/fullscreenChange", Screenfull.isFullscreen);
+            }
+        }
+
+        // create Ping: container
+        this.ping = document.createElement("span");
+        this.devToolsContainer.appendChild(this.ping);
+
+        // create FPS stats
+        this.stats = new Stats();
+        this.stats.setMode(0);
+        this.devToolsContainer.appendChild(this.stats.domElement);
+        
+        // create Reset level
+        p = document.createElement("p");
+        button = document.createElement("button");
+        button.innerHTML = "Reset level";
+        button.onclick = function() {
+            inspector.resetLevel();
+            button.disabled = true;;
+            setTimeout(function() {
+                button.disabled = false;
+            }, 1000 * 30);
+        }
+        p.appendChild(button);
+        this.devToolsContainer.appendChild(p);
+
+        // create debug mode
+        var label = document.createElement("label");
+        var checkbox = document.createElement("input");
+        checkbox.type = "checkbox";
+        checkbox.onclick = function(e) {
+            NotificationCenter.trigger("view/toggleDebugMode", e.target.checked);
+            self.getDebugCanvas().style.display = e.target.checked ? "" : "none";
+        }
+        label.appendChild(checkbox);
+        label.appendChild(document.createTextNode("Debug"));
+        this.devToolsContainer.appendChild(label);
     };
 
-    DomController.getCanvasContainer = function () {
+    DomController.prototype.statsBegin = function() {
+        if(this.stats) {
+            this.stats.begin();
+        }
+    };
+
+    DomController.prototype.statsEnd = function() {
+        if(this.stats) {
+            this.stats.end();
+        }
+    };
+
+    DomController.prototype.setPing = function(ping) {
+        this.ping.innerHTML = "Ping: " + ping;
+    };
+
+    DomController.prototype.getCanvasContainer = function () {
         var container = document.getElementById(Settings.CANVAS_DOM_ID);
 
         if(container) {
@@ -19,38 +105,35 @@ function (Settings) {
         }
     }
 
-    DomController.getCanvas = function () {
+    DomController.prototype.getCanvas = function () {
-        return DomController.canvas;
+        return this.canvas;
     }
 
-    DomController.setCanvas = function (canvas) {
+    DomController.prototype.setCanvas = function (canvas) {
         
-        var container = DomController.getCanvasContainer();
+        var container = this.getCanvasContainer();
-        if(DomController.canvas) {
+        if(this.canvas) {
-            container.removeChild(DomController.canvas);
+            container.removeChild(this.canvas);
         }
 
-        DomController.canvas = canvas;
+        this.canvas = canvas;
         container.appendChild(canvas);
     }
 
-    DomController.getDebugCanvas = function () {
+    DomController.prototype.getDebugCanvas = function () {
-        return DomController.debugCanvas;
-    }
-
-    DomController.createDebugCanvas = function () {
-        var container = DomController.getCanvasContainer();
-        if(DomController.debugCanvas) {
-            container.removeChild(DomController.debugCanvas);
-        }
 
+        if(!this.debugCanvas) {
             var canvas = document.createElement('canvas');
             canvas.width = Settings.STAGE_WIDTH;
             canvas.height = Settings.STAGE_HEIGHT;
-        DomController.debugCanvas = canvas;
+            this.debugCanvas = canvas;
-        container.appendChild(canvas);
+            this.getCanvasContainer().appendChild(canvas);
         }
 
-    return DomController;
+        return this.debugCanvas;
+    }
+
+
+    return new DomController();
     
 });

app/Game/Client/View/ViewManager.js

@@ -4,9 +4,10 @@ define([
     "Game/Client/View/Views/AbstractView",
 	//"Game/Client/View/Views/ThreeView",
 	"Game/Client/View/Views/PixiView",
+    "Lib/Utilities/NotificationCenter"
 ],
  
-function (Settings, Exception, AbstractView, PixiView) {
+function (Settings, Exception, AbstractView, PixiView, NotificationCenter) {
  
     var ViewManager = {};
 
@@ -22,7 +23,7 @@ function (Settings, Exception, AbstractView, PixiView) {
             default:
                 throw new Exception("A view called", Settings.VIEW_CONTROLLER, "has not been (fully) implemented.");
         }
-/*
+
         if(!(view instanceof AbstractView)) {
             throw new Exception("The view", Settings.VIEW_CONTROLLER + 'View', "must extend AbstractView!");
         }
@@ -34,7 +35,9 @@ function (Settings, Exception, AbstractView, PixiView) {
         if(!(view.canvas instanceof HTMLCanvasElement)) {
             throw new Exception("In the view", Settings.VIEW_CONTROLLER + 'View', "this.setCanvas(canvas) has not been called with a valid HTMLCanvasElement!");
         }
-*/
+
+        NotificationCenter.trigger("view/ready", view);
+
         return view;
     }
  

app/Game/Client/View/Views/AbstractView.js

@@ -10,12 +10,16 @@ function (DomController, Settings, Exception, NotificationCenter) {
     function AbstractView () {
     	this.me = null;
         this.canvas = null;
+        this.debugMode = false;
 
         NotificationCenter.on("view/createMesh", this.createMesh, this);
         NotificationCenter.on("view/createAnimatedMesh", this.createAnimatedMesh, this);
         NotificationCenter.on("view/addMesh", this.addMesh, this);
         NotificationCenter.on("view/removeMesh", this.removeMesh, this);
         NotificationCenter.on("view/updateMesh", this.updateMesh, this);
+
+        NotificationCenter.on("view/fullscreenChange", this.onFullscreenChange, this);
+        NotificationCenter.on("view/toggleDebugMode", this.onToggleDebugMode, this);
     }
 
     AbstractView.prototype.isWebGlEnabled = function () { 
@@ -30,10 +34,6 @@ function (DomController, Settings, Exception, NotificationCenter) {
 
     	this.canvas = canvas;
         DomController.setCanvas(canvas);
-
-        if(Settings.DEBUG_MODE) {
-            DomController.createDebugCanvas();
-        }
     }
 
     AbstractView.prototype.loadPlayerMesh = function(player) {
@@ -102,7 +102,28 @@ function (DomController, Settings, Exception, NotificationCenter) {
 
     AbstractView.prototype.setCameraZoom = function (z) {
     	throw new Exception('Abstract Function setCameraZoom not overwritten ');
+    };
+
+    AbstractView.prototype.onFullscreenChange = function(isFullScreen) {
+
+        if (!isFullScreen) {
+            Settings.STAGE_WIDTH = 600;
+            Settings.STAGE_HEIGHT = 400;
+        } else {
+            // FIXME: Create FIXME meme (dumb and dumber)
+            // FIXME: don't overwrite Settings
+            Settings.STAGE_WIDTH = window.innerWidth;
+            Settings.STAGE_HEIGHT = window.innerHeight;
         }
+    };
+
+    AbstractView.prototype.onToggleDebugMode = function(debugMode) {
+        if(debugMode) {
+            this.setCameraPosition(-Settings.STAGE_WIDTH / 2, -Settings.STAGE_HEIGHT / 2);
+        }
+
+        this.debugMode = debugMode;
+    };
 
     return AbstractView;
 });

app/Game/Client/View/Views/PixiView.js

@@ -2,10 +2,11 @@ define([
     "Game/Client/View/Views/AbstractView",
     "Game/Client/View/DomController", 
     "Lib/Vendor/Pixi", 
-    "Game/Config/Settings"
+    "Game/Config/Settings",
+    "Lib/Utilities/NotificationCenter"
 ], 
 
-function (Parent, DomController, PIXI, Settings) {
+function (Parent, DomController, PIXI, Settings, NotificationCenter) {
     
     function PixiView () {
 
@@ -104,14 +105,16 @@ function (Parent, DomController, PIXI, Settings) {
     }
 
     PixiView.prototype.calculateCameraPosition = function() {
+
         var reference = this.me.getPosition();
         var pos = {};
 
         pos.x = -reference.x;
         pos.y = reference.y;
 
-        pos.x = pos.x * Settings.RATIO;
+        var zoom = this.container.scale.x;
-        pos.y = -(pos.y * Settings.RATIO);
+        pos.x = pos.x * Settings.RATIO * zoom;
+        pos.y = -(pos.y * Settings.RATIO) * zoom;
 
         pos.x -= this.me.playerController.xyInput.x * Settings.STAGE_WIDTH / 4;
         pos.y += this.me.playerController.xyInput.y * Settings.STAGE_HEIGHT / 4;
@@ -120,13 +123,30 @@ function (Parent, DomController, PIXI, Settings) {
     };
 
     PixiView.prototype.setCameraPosition = function (x, y) {
+        if(!this.debugMode) {
             this.container.position.x = x + Settings.STAGE_WIDTH / 2;
             this.container.position.y = y + Settings.STAGE_HEIGHT / 2;
+        }
     };
 
     PixiView.prototype.setCameraZoom = function (z) {
         //this.container.position.x = x;
         //this.container.position.y = y;
+        this.container.scale.x = z;
+        this.container.scale.y = z;
+
+    };
+
+    PixiView.prototype.onFullscreenChange = function(isFullScreen) {
+        Parent.prototype.onFullscreenChange.call(this, isFullScreen);
+
+        if(isFullScreen) {
+            this.renderer.resize(window.innerWidth, window.innerHeight);
+            this.setCameraZoom(window.innerWidth / 600);
+        } else {
+            this.renderer.resize(600, 400);
+            this.setCameraZoom(1);
+        }
     };
 
     return PixiView;

app/Game/Core/Physics/Engine.js

@@ -11,6 +11,7 @@ function (Settings, Box2D, CollisionDetector) {
             new Box2D.Common.Math.b2Vec2(0, Settings.BOX2D_GRAVITY),
             Settings.BOX2D_ALLOW_SLEEP
         );
+        this.world.SetWarmStarting(true);
         this.ground = null;
         this.lastStep = Date.now();
     }

app/Lib/Vendor/Screenfull.js

@@ -0,0 +1,3 @@
+define(["/screenfull.js"], function() {
+    return screenfull;
+});

package.json

@@ -18,7 +18,8 @@
     "socket.io": ">= 0.9.6",
     "node-static": ">= 0.6.0",
     "requirejs": "= 2.0.4",
-    "node-fork": ">= 0.4.2"
+    "node-fork": ">= 0.4.2",
+    "screenfull": ">= 1.0.4"
   },
   "devDependencies": {},
   "optionalDependencies": {},

server.js

@@ -16,7 +16,7 @@ var port = process.argv[2]
 var options = {
     port: port,
     rootDirectory: './',
-    caching: false,
+    caching: 0,
     logLevel: process.argv[3] || 0
 };
 

static/html/index.html

@@ -10,7 +10,9 @@
                 display: table; 
                 width: 100%; 
                 height: 100%;
-                background: #000;
+                background: black;
+                color: white;
+                font-family: monospace;
             }
             
             #loading {
@@ -29,15 +31,40 @@
             }
 
             #canvasContainer { 
+                /*
                 text-align: center; 
                 display: table-cell; 
                 vertical-align: middle; 
+                */
                 height: 100%;
             }
 
             canvas { 
-                background: #333;  
+                position: absolute;
-                margin: 10px;
+                top: 50%;
+                left: 50%;
+                margin-top: -200px;
+                margin-left: -300px;
+            }
+
+            :-webkit-full-screen {
+                top: 0;
+                left: 0;
+                margin: 0;
+                padding: 0;
+            }
+
+            #devtools {
+                position: absolute;
+                right: 0;
+                top: 0;
+                padding: 10px;
+                background: #222;
+            }
+
+            #devtools p {
+                padding: 5px 0 0 0;
+                margin: 0;
             }
 
         </style>