chuck.js/app/Game/Client/View/DomController.js

define([
    'Game/Config/Settings',
    'Lib/Utilities/NotificationCenter',
    "Lib/Vendor/Stats",
    "Lib/Vendor/Screenfull"
], 

function (Settings, Nc, Stats, Screenfull) {

	"use strict";

    function DomController() {
        this.canvas = document.getElementById("canvas");
        this.debugCanvas = null;
        this.stats = null;
        this.ping = null;

        Nc.on(Nc.ns.client.view.events.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) {
                Nc.trigger(Nc.ns.client.view.fullscreen.change, 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 debug mode
        var label = document.createElement("label");
        var checkbox = document.createElement("input");
        checkbox.type = "checkbox";
        checkbox.onclick = function(e) {
            Nc.trigger(Nc.ns.client.view.debugMode.toggle, e.target.checked);
            self.getDebugCanvas().style.display = e.target.checked ? "" : "none";
        }
        label.appendChild(checkbox);
        label.appendChild(document.createTextNode("Debug"));
        this.devToolsContainer.appendChild(label);

        // create health
        this.health = document.createElement("span");
        this.health.innerHTML = "Health: 100";
        p = document.createElement("p");
        p.appendChild(this.health);
        this.devToolsContainer.appendChild(p);
    };

    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) {
            return container;
        } else {
            throw 'Canvas Container missing: #' + Settings.CANVAS_DOM_ID;
        }
    }

    DomController.prototype.getCanvas = function () {
        return this.canvas;
    }

    DomController.prototype.initCanvas = function (canvas) {
        Nc.trigger(Nc.ns.client.view.fullscreen.change, Screenfull.isFullscreen);
    }

    DomController.prototype.getDebugCanvas = function () {

        if(!this.debugCanvas) {
            var canvas = document.createElement('canvas');
            canvas.width = Settings.STAGE_WIDTH;
            canvas.height = Settings.STAGE_HEIGHT;
            this.debugCanvas = canvas;
            this.getCanvasContainer().appendChild(canvas);
        }

        return this.debugCanvas;
    }

    DomController.prototype.setHealth = function(health) {
        this.health.innerHTML = "Health: " + parseInt(health, 10);     
    };

    DomController.prototype.setConnected = function(connected) {
        if(connected) {
            document.body.style.backgroundColor = '';
        } else {
            document.body.style.backgroundColor = '#aaaaaa';
        }
    };


    return new DomController();
    
});