Skeletal UI system.

src/input/all.js

@@ -0,0 +1,23 @@
+/*global define*/
+define([
+    'input/keyboard',
+    'input/mouse',
+    'input/ui/panel',
+    'input/ui/button'],
+function(Keyboard, Mouse, Panel, Button) {
+
+    'use strict';
+
+    /**
+     * @module input/all
+     * @private
+     */
+
+    return {
+        Keyboard: Keyboard,
+        Mouse:    Mouse,
+        Panel:    Panel,
+        Button:   Button
+    };
+
+});

src/input/ui/button.js

@@ -0,0 +1,20 @@
+/*global define*/
+define(function() {
+
+    /**
+     * @module input/ui/button
+     */
+
+    'use strict';
+
+    /** A button reacts to mouse and touch events. It should be added to a panel
+     * in order to be presented on-screen.
+     * @constructor module:input/ui/button.Button
+     */
+    function Button() {
+
+    }
+
+
+    return Button;
+});

src/input/ui/panel.js

@@ -0,0 +1,90 @@
+/*global define*/
+define(function() {
+
+    /**
+     * @module input/ui/panel
+     */
+
+    'use strict';
+
+    /** A panel represents a set of UI elements which are drawn in order
+     * to the screen. E.g. a popup dialog panel that contains labels and
+     * buttons.
+     * @constructor module:input/ui/panel.Panel
+     */
+    function Panel(sn) {
+        this.sn = sn;
+    }
+
+    /**
+     * Panels can be defined in your game as JSON data. Call this static
+     * factory method to create a panel hierarchy from a JSON description.
+     * @member module:input/ui/panel.Panel#load
+     * @static
+     * @param {Object} data A JSON data structure that describes a nested
+     * UI arrangement with a root panel.
+     * @return {Panel} A new panel.
+     */
+    Panel.load = function(data) {
+        /* TODO */
+        return this;
+    };
+
+    /**
+     * Show this panel on-screen.
+     * @member module:input/ui/panel.Panel#show
+     * @param  {Boolean} [doShow=true] Pass true to show or false to hide.
+     */
+    Panel.prototype.show = function(doShow) {
+        if (doShow===undefined) {
+            doShow = true;
+        }
+        /* TODO */
+
+        return this;
+    };
+
+    /**
+     * Hide this panel.
+     * @member module:input/ui/panel.Panel#hide
+     */
+    Panel.prototype.hide = function() {
+        this.show(false);
+        return this;
+    };
+
+    /**
+     * Moves this panel to the center of the screen. Only works on the root
+     * panel if it has dimensions set. In all other cases, the behaviour is
+     * undefined.
+     * @member module:input/ui/panel.Panel#center
+     * @param  {Boolean} [cy=true] Pass true to center vertically.
+     * @param  {Boolean} [cx=true] Pass true to center horizontally.
+     */
+    Panel.prototype.center = function(cy, cx) {
+        if (cy===undefined) {
+            cy = true;
+        }
+
+        if (cx===undefined) {
+            cx = true;
+        }
+
+        /* TODO: Move to the screen center */
+        return this;
+    };
+
+    /**
+     * Draws this panel. This will be called on every frame.
+     * @param  {CanvasRenderingContext2D} ctx Drawing context
+     * @private
+     */
+    Panel.prototype.draw = function(ctx) {
+        /* TODO */
+    };
+
+    /* TODO: Panels should render off-screen so we can do transition in/out effects like
+     * fade. This implies that the root panel in the data should have dimensions. */
+
+    return Panel;
+});

src/snaps.js

@@ -1,9 +1,11 @@
 /*global define*/
 define(['sprites/spritedef', 'sprites/sprite', 'sprites/composite',
-        'input/keyboard', 'input/mouse',
         'util/all',
         'map/staggered-isometric',
 
+        /* UI */
+        'input/all',
+
         /* Plugins */
         'plugins/default-plugins',
 
@@ -23,7 +25,8 @@ define(['sprites/spritedef', 'sprites/sprite', 'sprites/composite',
         /* Non-referenced */
         'polyfills/bind'],
 
-function(SpriteDef, Sprite, Composite, Keyboard, Mouse, util, StaggeredIsometric,
+function(SpriteDef, Sprite, Composite, util, StaggeredIsometric,
+        ui,
         regPlugins,
         SlowQueue,
         tweens,
@@ -50,6 +53,9 @@ function(SpriteDef, Sprite, Composite, Keyboard, Mouse, util, StaggeredIsometric
     var Stats     = util.Stats;
     var clock     = util.clock;
 
+    var Keyboard  = ui.Keyboard;
+    var Mouse     = ui.Mouse;
+
     /**
      * The main class of the game engine
      * @constructor module:snaps.Snaps
@@ -107,6 +113,22 @@ function(SpriteDef, Sprite, Composite, Keyboard, Mouse, util, StaggeredIsometric
          */
         this.ProximityTracker = ProximityTracker.bind(ProximityTracker, this);
 
+        /**
+         * The Panel constructor is exposed here for general use.
+         * @member module:snaps.Snaps#Panel
+         * @type {Function}
+         */
+        this.Panel = ui.Panel.bind(ui.Panel, this);
+
+        /**
+         * The Button constructor is exposed here for general use, although you may wish
+         * to define UI via a definition file and load it via
+         * {@link module:input/ui/panel.Panel#load|Panel.load}
+         * @member module:snaps.Snaps#Button
+         * @type {Function}
+         */
+        this.Button = ui.Button.bind(ui.Button, this);
+
         /**
          * The PathFinder constructor is exposed here for general use.
          * @member module:snaps.Snaps#PathFinder