From 36b5fec08b138f5ca2733635165a8b9909f61176 Mon Sep 17 00:00:00 2001 From: Ian Beveridge Date: Thu, 6 Jun 2013 14:51:40 +0100 Subject: [PATCH] Skeletal UI system. --- src/input/all.js | 23 +++++++++++ src/input/ui/button.js | 20 ++++++++++ src/input/ui/panel.js | 90 ++++++++++++++++++++++++++++++++++++++++++ src/snaps.js | 26 +++++++++++- 4 files changed, 157 insertions(+), 2 deletions(-) create mode 100644 src/input/all.js create mode 100644 src/input/ui/button.js create mode 100644 src/input/ui/panel.js diff --git a/src/input/all.js b/src/input/all.js new file mode 100644 index 0000000..29075c4 --- /dev/null +++ b/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 + }; + +}); diff --git a/src/input/ui/button.js b/src/input/ui/button.js new file mode 100644 index 0000000..d05783e --- /dev/null +++ b/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; +}); diff --git a/src/input/ui/panel.js b/src/input/ui/panel.js new file mode 100644 index 0000000..beeda27 --- /dev/null +++ b/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; +}); diff --git a/src/snaps.js b/src/snaps.js index 80a5ab0..0d3c588 100644 --- a/src/snaps.js +++ b/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