Add routing via page.js

client/index.html

@@ -10,6 +10,7 @@
       <div id="cardeditor"></div>
       <!-- libraries -->
       <script src="js/react.js"></script>
+      <script src="js/page.js"></script>
 
       <!-- teh app -->
       <script src="js/app.js"></script>

client/js/page.js

@@ -0,0 +1,922 @@
+!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.page=e()}}(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+(function (process){
+  /* globals require, module */
+
+  'use strict';
+
+  /**
+   * Module dependencies.
+   */
+
+  var pathtoRegexp = require('path-to-regexp');
+
+  /**
+   * Module exports.
+   */
+
+  module.exports = page;
+
+  /**
+   * Detect click event
+   */
+  var clickEvent = ('undefined' !== typeof document) && document.ontouchstart ? 'touchstart' : 'click';
+
+  /**
+   * To work properly with the URL
+   * history.location generated polyfill in https://github.com/devote/HTML5-History-API
+   */
+
+  var location = ('undefined' !== typeof window) && (window.history.location || window.location);
+
+  /**
+   * Perform initial dispatch.
+   */
+
+  var dispatch = true;
+
+
+  /**
+   * Decode URL components (query string, pathname, hash).
+   * Accommodates both regular percent encoding and x-www-form-urlencoded format.
+   */
+  var decodeURLComponents = true;
+
+  /**
+   * Base path.
+   */
+
+  var base = '';
+
+  /**
+   * Running flag.
+   */
+
+  var running;
+
+  /**
+   * HashBang option
+   */
+
+  var hashbang = false;
+
+  /**
+   * Previous context, for capturing
+   * page exit events.
+   */
+
+  var prevContext;
+
+  /**
+   * Register `path` with callback `fn()`,
+   * or route `path`, or redirection,
+   * or `page.start()`.
+   *
+   *   page(fn);
+   *   page('*', fn);
+   *   page('/user/:id', load, user);
+   *   page('/user/' + user.id, { some: 'thing' });
+   *   page('/user/' + user.id);
+   *   page('/from', '/to')
+   *   page();
+   *
+   * @param {String|Function} path
+   * @param {Function} fn...
+   * @api public
+   */
+
+  function page(path, fn) {
+    // <callback>
+    if ('function' === typeof path) {
+      return page('*', path);
+    }
+
+    // route <path> to <callback ...>
+    if ('function' === typeof fn) {
+      var route = new Route(path);
+      for (var i = 1; i < arguments.length; ++i) {
+        page.callbacks.push(route.middleware(arguments[i]));
+      }
+      // show <path> with [state]
+    } else if ('string' === typeof path) {
+      page['string' === typeof fn ? 'redirect' : 'show'](path, fn);
+      // start [options]
+    } else {
+      page.start(path);
+    }
+  }
+
+  /**
+   * Callback functions.
+   */
+
+  page.callbacks = [];
+  page.exits = [];
+
+  /**
+   * Current path being processed
+   * @type {String}
+   */
+  page.current = '';
+
+  /**
+   * Number of pages navigated to.
+   * @type {number}
+   *
+   *     page.len == 0;
+   *     page('/login');
+   *     page.len == 1;
+   */
+
+  page.len = 0;
+
+  /**
+   * Get or set basepath to `path`.
+   *
+   * @param {String} path
+   * @api public
+   */
+
+  page.base = function(path) {
+    if (0 === arguments.length) return base;
+    base = path;
+  };
+
+  /**
+   * Bind with the given `options`.
+   *
+   * Options:
+   *
+   *    - `click` bind to click events [true]
+   *    - `popstate` bind to popstate [true]
+   *    - `dispatch` perform initial dispatch [true]
+   *
+   * @param {Object} options
+   * @api public
+   */
+
+  page.start = function(options) {
+    options = options || {};
+    if (running) return;
+    running = true;
+    if (false === options.dispatch) dispatch = false;
+    if (false === options.decodeURLComponents) decodeURLComponents = false;
+    if (false !== options.popstate) window.addEventListener('popstate', onpopstate, false);
+    if (false !== options.click) {
+      document.addEventListener(clickEvent, onclick, false);
+    }
+    if (true === options.hashbang) hashbang = true;
+    if (!dispatch) return;
+    var url = (hashbang && ~location.hash.indexOf('#!')) ? location.hash.substr(2) + location.search : location.pathname + location.search + location.hash;
+    page.replace(url, null, true, dispatch);
+  };
+
+  /**
+   * Unbind click and popstate event handlers.
+   *
+   * @api public
+   */
+
+  page.stop = function() {
+    if (!running) return;
+    page.current = '';
+    page.len = 0;
+    running = false;
+    document.removeEventListener(clickEvent, onclick, false);
+    window.removeEventListener('popstate', onpopstate, false);
+  };
+
+  /**
+   * Show `path` with optional `state` object.
+   *
+   * @param {String} path
+   * @param {Object} state
+   * @param {Boolean} dispatch
+   * @return {Context}
+   * @api public
+   */
+
+  page.show = function(path, state, dispatch, push) {
+    var ctx = new Context(path, state);
+    page.current = ctx.path;
+    if (false !== dispatch) page.dispatch(ctx);
+    if (false !== ctx.handled && false !== push) ctx.pushState();
+    return ctx;
+  };
+
+  /**
+   * Goes back in the history
+   * Back should always let the current route push state and then go back.
+   *
+   * @param {String} path - fallback path to go back if no more history exists, if undefined defaults to page.base
+   * @param {Object} [state]
+   * @api public
+   */
+
+  page.back = function(path, state) {
+    if (page.len > 0) {
+      // this may need more testing to see if all browsers
+      // wait for the next tick to go back in history
+      history.back();
+      page.len--;
+    } else if (path) {
+      setTimeout(function() {
+        page.show(path, state);
+      });
+    }else{
+      setTimeout(function() {
+        page.show(base, state);
+      });
+    }
+  };
+
+
+  /**
+   * Register route to redirect from one path to other
+   * or just redirect to another route
+   *
+   * @param {String} from - if param 'to' is undefined redirects to 'from'
+   * @param {String} [to]
+   * @api public
+   */
+  page.redirect = function(from, to) {
+    // Define route from a path to another
+    if ('string' === typeof from && 'string' === typeof to) {
+      page(from, function(e) {
+        setTimeout(function() {
+          page.replace(to);
+        }, 0);
+      });
+    }
+
+    // Wait for the push state and replace it with another
+    if ('string' === typeof from && 'undefined' === typeof to) {
+      setTimeout(function() {
+        page.replace(from);
+      }, 0);
+    }
+  };
+
+  /**
+   * Replace `path` with optional `state` object.
+   *
+   * @param {String} path
+   * @param {Object} state
+   * @return {Context}
+   * @api public
+   */
+
+
+  page.replace = function(path, state, init, dispatch) {
+    var ctx = new Context(path, state);
+    page.current = ctx.path;
+    ctx.init = init;
+    ctx.save(); // save before dispatching, which may redirect
+    if (false !== dispatch) page.dispatch(ctx);
+    return ctx;
+  };
+
+  /**
+   * Dispatch the given `ctx`.
+   *
+   * @param {Object} ctx
+   * @api private
+   */
+
+  page.dispatch = function(ctx) {
+    var prev = prevContext,
+      i = 0,
+      j = 0;
+
+    prevContext = ctx;
+
+    function nextExit() {
+      var fn = page.exits[j++];
+      if (!fn) return nextEnter();
+      fn(prev, nextExit);
+    }
+
+    function nextEnter() {
+      var fn = page.callbacks[i++];
+
+      if (ctx.path !== page.current) {
+        ctx.handled = false;
+        return;
+      }
+      if (!fn) return unhandled(ctx);
+      fn(ctx, nextEnter);
+    }
+
+    if (prev) {
+      nextExit();
+    } else {
+      nextEnter();
+    }
+  };
+
+  /**
+   * Unhandled `ctx`. When it's not the initial
+   * popstate then redirect. If you wish to handle
+   * 404s on your own use `page('*', callback)`.
+   *
+   * @param {Context} ctx
+   * @api private
+   */
+
+  function unhandled(ctx) {
+    if (ctx.handled) return;
+    var current;
+
+    if (hashbang) {
+      current = base + location.hash.replace('#!', '');
+    } else {
+      current = location.pathname + location.search;
+    }
+
+    if (current === ctx.canonicalPath) return;
+    page.stop();
+    ctx.handled = false;
+    location.href = ctx.canonicalPath;
+  }
+
+  /**
+   * Register an exit route on `path` with
+   * callback `fn()`, which will be called
+   * on the previous context when a new
+   * page is visited.
+   */
+  page.exit = function(path, fn) {
+    if (typeof path === 'function') {
+      return page.exit('*', path);
+    }
+
+    var route = new Route(path);
+    for (var i = 1; i < arguments.length; ++i) {
+      page.exits.push(route.middleware(arguments[i]));
+    }
+  };
+
+  /**
+   * Remove URL encoding from the given `str`.
+   * Accommodates whitespace in both x-www-form-urlencoded
+   * and regular percent-encoded form.
+   *
+   * @param {str} URL component to decode
+   */
+  function decodeURLEncodedURIComponent(val) {
+    if (typeof val !== 'string') { return val; }
+    return decodeURLComponents ? decodeURIComponent(val.replace(/\+/g, ' ')) : val;
+  }
+
+  /**
+   * Initialize a new "request" `Context`
+   * with the given `path` and optional initial `state`.
+   *
+   * @param {String} path
+   * @param {Object} state
+   * @api public
+   */
+
+  function Context(path, state) {
+    if ('/' === path[0] && 0 !== path.indexOf(base)) path = base + (hashbang ? '#!' : '') + path;
+    var i = path.indexOf('?');
+
+    this.canonicalPath = path;
+    this.path = path.replace(base, '') || '/';
+    if (hashbang) this.path = this.path.replace('#!', '') || '/';
+
+    this.title = document.title;
+    this.state = state || {};
+    this.state.path = path;
+    this.querystring = ~i ? decodeURLEncodedURIComponent(path.slice(i + 1)) : '';
+    this.pathname = decodeURLEncodedURIComponent(~i ? path.slice(0, i) : path);
+    this.params = {};
+
+    // fragment
+    this.hash = '';
+    if (!hashbang) {
+      if (!~this.path.indexOf('#')) return;
+      var parts = this.path.split('#');
+      this.path = parts[0];
+      this.hash = decodeURLEncodedURIComponent(parts[1]) || '';
+      this.querystring = this.querystring.split('#')[0];
+    }
+  }
+
+  /**
+   * Expose `Context`.
+   */
+
+  page.Context = Context;
+
+  /**
+   * Push state.
+   *
+   * @api private
+   */
+
+  Context.prototype.pushState = function() {
+    page.len++;
+    history.pushState(this.state, this.title, hashbang && this.path !== '/' ? '#!' + this.path : this.canonicalPath);
+  };
+
+  /**
+   * Save the context state.
+   *
+   * @api public
+   */
+
+  Context.prototype.save = function() {
+    history.replaceState(this.state, this.title, hashbang && this.path !== '/' ? '#!' + this.path : this.canonicalPath);
+  };
+
+  /**
+   * Initialize `Route` with the given HTTP `path`,
+   * and an array of `callbacks` and `options`.
+   *
+   * Options:
+   *
+   *   - `sensitive`    enable case-sensitive routes
+   *   - `strict`       enable strict matching for trailing slashes
+   *
+   * @param {String} path
+   * @param {Object} options.
+   * @api private
+   */
+
+  function Route(path, options) {
+    options = options || {};
+    this.path = (path === '*') ? '(.*)' : path;
+    this.method = 'GET';
+    this.regexp = pathtoRegexp(this.path,
+      this.keys = [],
+      options.sensitive,
+      options.strict);
+  }
+
+  /**
+   * Expose `Route`.
+   */
+
+  page.Route = Route;
+
+  /**
+   * Return route middleware with
+   * the given callback `fn()`.
+   *
+   * @param {Function} fn
+   * @return {Function}
+   * @api public
+   */
+
+  Route.prototype.middleware = function(fn) {
+    var self = this;
+    return function(ctx, next) {
+      if (self.match(ctx.path, ctx.params)) return fn(ctx, next);
+      next();
+    };
+  };
+
+  /**
+   * Check if this route matches `path`, if so
+   * populate `params`.
+   *
+   * @param {String} path
+   * @param {Object} params
+   * @return {Boolean}
+   * @api private
+   */
+
+  Route.prototype.match = function(path, params) {
+    var keys = this.keys,
+      qsIndex = path.indexOf('?'),
+      pathname = ~qsIndex ? path.slice(0, qsIndex) : path,
+      m = this.regexp.exec(decodeURIComponent(pathname));
+
+    if (!m) return false;
+
+    for (var i = 1, len = m.length; i < len; ++i) {
+      var key = keys[i - 1];
+      var val = decodeURLEncodedURIComponent(m[i]);
+      if (val !== undefined || !(hasOwnProperty.call(params, key.name))) {
+        params[key.name] = val;
+      }
+    }
+
+    return true;
+  };
+
+
+  /**
+   * Handle "populate" events.
+   */
+
+  var onpopstate = (function () {
+    var loaded = false;
+    if ('undefined' === typeof window) {
+      return;
+    }
+    if (document.readyState === 'complete') {
+      loaded = true;
+    } else {
+      window.addEventListener('load', function() {
+        setTimeout(function() {
+          loaded = true;
+        }, 0);
+      });
+    }
+    return function onpopstate(e) {
+      if (!loaded) return;
+      if (e.state) {
+        var path = e.state.path;
+        page.replace(path, e.state);
+      } else {
+        page.show(location.pathname + location.hash, undefined, undefined, false);
+      }
+    };
+  })();
+  /**
+   * Handle "click" events.
+   */
+
+  function onclick(e) {
+
+    if (1 !== which(e)) return;
+
+    if (e.metaKey || e.ctrlKey || e.shiftKey) return;
+    if (e.defaultPrevented) return;
+
+
+
+    // ensure link
+    var el = e.target;
+    while (el && 'A' !== el.nodeName) el = el.parentNode;
+    if (!el || 'A' !== el.nodeName) return;
+
+
+
+    // Ignore if tag has
+    // 1. "download" attribute
+    // 2. rel="external" attribute
+    if (el.hasAttribute('download') || el.getAttribute('rel') === 'external') return;
+
+    // ensure non-hash for the same path
+    var link = el.getAttribute('href');
+    if (!hashbang && el.pathname === location.pathname && (el.hash || '#' === link)) return;
+
+
+
+    // Check for mailto: in the href
+    if (link && link.indexOf('mailto:') > -1) return;
+
+    // check target
+    if (el.target) return;
+
+    // x-origin
+    if (!sameOrigin(el.href)) return;
+
+
+
+    // rebuild path
+    var path = el.pathname + el.search + (el.hash || '');
+
+    // strip leading "/[drive letter]:" on NW.js on Windows
+    if (typeof process !== 'undefined' && path.match(/^\/[a-zA-Z]:\//)) {
+      path = path.replace(/^\/[a-zA-Z]:\//, '/');
+    }
+
+    // same page
+    var orig = path;
+
+    if (path.indexOf(base) === 0) {
+      path = path.substr(base.length);
+    }
+
+    if (hashbang) path = path.replace('#!', '');
+
+    if (base && orig === path) return;
+
+    e.preventDefault();
+    page.show(orig);
+  }
+
+  /**
+   * Event button.
+   */
+
+  function which(e) {
+    e = e || window.event;
+    return null === e.which ? e.button : e.which;
+  }
+
+  /**
+   * Check if `href` is the same origin.
+   */
+
+  function sameOrigin(href) {
+    var origin = location.protocol + '//' + location.hostname;
+    if (location.port) origin += ':' + location.port;
+    return (href && (0 === href.indexOf(origin)));
+  }
+
+  page.sameOrigin = sameOrigin;
+
+}).call(this,require('_process'))
+},{"_process":2,"path-to-regexp":3}],2:[function(require,module,exports){
+// shim for using process in browser
+
+var process = module.exports = {};
+
+process.nextTick = (function () {
+    var canSetImmediate = typeof window !== 'undefined'
+    && window.setImmediate;
+    var canMutationObserver = typeof window !== 'undefined'
+    && window.MutationObserver;
+    var canPost = typeof window !== 'undefined'
+    && window.postMessage && window.addEventListener
+    ;
+
+    if (canSetImmediate) {
+        return function (f) { return window.setImmediate(f) };
+    }
+
+    var queue = [];
+
+    if (canMutationObserver) {
+        var hiddenDiv = document.createElement("div");
+        var observer = new MutationObserver(function () {
+            var queueList = queue.slice();
+            queue.length = 0;
+            queueList.forEach(function (fn) {
+                fn();
+            });
+        });
+
+        observer.observe(hiddenDiv, { attributes: true });
+
+        return function nextTick(fn) {
+            if (!queue.length) {
+                hiddenDiv.setAttribute('yes', 'no');
+            }
+            queue.push(fn);
+        };
+    }
+
+    if (canPost) {
+        window.addEventListener('message', function (ev) {
+            var source = ev.source;
+            if ((source === window || source === null) && ev.data === 'process-tick') {
+                ev.stopPropagation();
+                if (queue.length > 0) {
+                    var fn = queue.shift();
+                    fn();
+                }
+            }
+        }, true);
+
+        return function nextTick(fn) {
+            queue.push(fn);
+            window.postMessage('process-tick', '*');
+        };
+    }
+
+    return function nextTick(fn) {
+        setTimeout(fn, 0);
+    };
+})();
+
+process.title = 'browser';
+process.browser = true;
+process.env = {};
+process.argv = [];
+
+function noop() {}
+
+process.on = noop;
+process.addListener = noop;
+process.once = noop;
+process.off = noop;
+process.removeListener = noop;
+process.removeAllListeners = noop;
+process.emit = noop;
+
+process.binding = function (name) {
+    throw new Error('process.binding is not supported');
+};
+
+// TODO(shtylman)
+process.cwd = function () { return '/' };
+process.chdir = function (dir) {
+    throw new Error('process.chdir is not supported');
+};
+
+},{}],3:[function(require,module,exports){
+var isArray = require('isarray');
+
+/**
+ * Expose `pathToRegexp`.
+ */
+module.exports = pathToRegexp;
+
+/**
+ * The main path matching regexp utility.
+ *
+ * @type {RegExp}
+ */
+var PATH_REGEXP = new RegExp([
+  // Match escaped characters that would otherwise appear in future matches.
+  // This allows the user to escape special characters that won't transform.
+  '(\\\\.)',
+  // Match Express-style parameters and un-named parameters with a prefix
+  // and optional suffixes. Matches appear as:
+  //
+  // "/:test(\\d+)?" => ["/", "test", "\d+", undefined, "?"]
+  // "/route(\\d+)" => [undefined, undefined, undefined, "\d+", undefined]
+  '([\\/.])?(?:\\:(\\w+)(?:\\(((?:\\\\.|[^)])*)\\))?|\\(((?:\\\\.|[^)])*)\\))([+*?])?',
+  // Match regexp special characters that are always escaped.
+  '([.+*?=^!:${}()[\\]|\\/])'
+].join('|'), 'g');
+
+/**
+ * Escape the capturing group by escaping special characters and meaning.
+ *
+ * @param  {String} group
+ * @return {String}
+ */
+function escapeGroup (group) {
+  return group.replace(/([=!:$\/()])/g, '\\$1');
+}
+
+/**
+ * Attach the keys as a property of the regexp.
+ *
+ * @param  {RegExp} re
+ * @param  {Array}  keys
+ * @return {RegExp}
+ */
+function attachKeys (re, keys) {
+  re.keys = keys;
+  return re;
+}
+
+/**
+ * Get the flags for a regexp from the options.
+ *
+ * @param  {Object} options
+ * @return {String}
+ */
+function flags (options) {
+  return options.sensitive ? '' : 'i';
+}
+
+/**
+ * Pull out keys from a regexp.
+ *
+ * @param  {RegExp} path
+ * @param  {Array}  keys
+ * @return {RegExp}
+ */
+function regexpToRegexp (path, keys) {
+  // Use a negative lookahead to match only capturing groups.
+  var groups = path.source.match(/\((?!\?)/g);
+
+  if (groups) {
+    for (var i = 0; i < groups.length; i++) {
+      keys.push({
+        name:      i,
+        delimiter: null,
+        optional:  false,
+        repeat:    false
+      });
+    }
+  }
+
+  return attachKeys(path, keys);
+}
+
+/**
+ * Transform an array into a regexp.
+ *
+ * @param  {Array}  path
+ * @param  {Array}  keys
+ * @param  {Object} options
+ * @return {RegExp}
+ */
+function arrayToRegexp (path, keys, options) {
+  var parts = [];
+
+  for (var i = 0; i < path.length; i++) {
+    parts.push(pathToRegexp(path[i], keys, options).source);
+  }
+
+  var regexp = new RegExp('(?:' + parts.join('|') + ')', flags(options));
+  return attachKeys(regexp, keys);
+}
+
+/**
+ * Replace the specific tags with regexp strings.
+ *
+ * @param  {String} path
+ * @param  {Array}  keys
+ * @return {String}
+ */
+function replacePath (path, keys) {
+  var index = 0;
+
+  function replace (_, escaped, prefix, key, capture, group, suffix, escape) {
+    if (escaped) {
+      return escaped;
+    }
+
+    if (escape) {
+      return '\\' + escape;
+    }
+
+    var repeat   = suffix === '+' || suffix === '*';
+    var optional = suffix === '?' || suffix === '*';
+
+    keys.push({
+      name:      key || index++,
+      delimiter: prefix || '/',
+      optional:  optional,
+      repeat:    repeat
+    });
+
+    prefix = prefix ? ('\\' + prefix) : '';
+    capture = escapeGroup(capture || group || '[^' + (prefix || '\\/') + ']+?');
+
+    if (repeat) {
+      capture = capture + '(?:' + prefix + capture + ')*';
+    }
+
+    if (optional) {
+      return '(?:' + prefix + '(' + capture + '))?';
+    }
+
+    // Basic parameter support.
+    return prefix + '(' + capture + ')';
+  }
+
+  return path.replace(PATH_REGEXP, replace);
+}
+
+/**
+ * Normalize the given path string, returning a regular expression.
+ *
+ * An empty array can be passed in for the keys, which will hold the
+ * placeholder key descriptions. For example, using `/user/:id`, `keys` will
+ * contain `[{ name: 'id', delimiter: '/', optional: false, repeat: false }]`.
+ *
+ * @param  {(String|RegExp|Array)} path
+ * @param  {Array}                 [keys]
+ * @param  {Object}                [options]
+ * @return {RegExp}
+ */
+function pathToRegexp (path, keys, options) {
+  keys = keys || [];
+
+  if (!isArray(keys)) {
+    options = keys;
+    keys = [];
+  } else if (!options) {
+    options = {};
+  }
+
+  if (path instanceof RegExp) {
+    return regexpToRegexp(path, keys, options);
+  }
+
+  if (isArray(path)) {
+    return arrayToRegexp(path, keys, options);
+  }
+
+  var strict = options.strict;
+  var end = options.end !== false;
+  var route = replacePath(path, keys);
+  var endsWithSlash = path.charAt(path.length - 1) === '/';
+
+  // In non-strict mode we allow a slash at the end of match. If the path to
+  // match already ends with a slash, we remove it for consistency. The slash
+  // is valid at the end of a path match, not in the middle. This is important
+  // in non-ending mode, where "/test/" shouldn't match "/test//route".
+  if (!strict) {
+    route = (endsWithSlash ? route.slice(0, -2) : route) + '(?:\\/(?=$))?';
+  }
+
+  if (end) {
+    route += '$';
+  } else {
+    // In non-ending mode, we need the capturing groups to match as much as
+    // possible by using a positive lookahead to the end or next path segment.
+    route += strict && endsWithSlash ? '' : '(?=\\/|$)';
+  }
+
+  return attachKeys(new RegExp('^' + route, flags(options)), keys);
+}
+
+},{"isarray":4}],4:[function(require,module,exports){
+module.exports = Array.isArray || function (arr) {
+  return Object.prototype.toString.call(arr) == '[object Array]';
+};
+
+},{}]},{},[1])(1)
+});

client/src/app.ts

@@ -2,134 +2,91 @@
 /// <reference path="./stores/store.ts"/>
 /// <reference path="./actions/actions.ts"/>
 /// <reference path="./views/header.ts"/>
+/// <reference path="./views/view.ts"/>
+/// <reference path="./external/page/page.d.ts"/>
 
-module rpgcards {
-
-    // Global objects, only accessible within this file
-    var appDispatcher: Dispatcher = null;
-    var appActions: Actions = null;
-    var appStore: Store = null;
-
-    // Access to the global objects, to be used from the browser debug window
-    export function debug() {
-        return {
-            dispatcher: appDispatcher,
-            actions: appActions,
-            store: appStore,
-            refresh: refresh,
-            testState: setupTestState
-        }
-    }
-
-    // Initializes the application
-    // Creates and links the global objects
-    export function bootstrap() {
-        appDispatcher = new Dispatcher();
-        appActions = new Actions(appDispatcher);
-        appStore = new Store(appDispatcher);
+/// <reference path="./mock.ts"/>
 
-        // Set up some initial state for debugging
-        // Remove this line once development is finished
-        setupTestState();
-
-        // Start react rendering
-        appStore.addChangeListener(refresh);
-        refresh();
-    }
-
-    // Renders the whole application
-    // In this project, render*() functions are pure functions that map
-    // the application state (Store) to React elements
-    function renderApp(store: Store) {
-        return React.DOM.div(
-            {},
-            renderHeader(store),
-            renderDecks(store)
-            );
-    }
-
-    function refresh() {
-        React.render(renderApp(appStore), document.body);
-    }
+module rpgcards {
 
-    function setupTestState() {
-        console.log(
-            "This function resets the current application state"
-            + " and then triggers a series of hardcoded user actions,"
-            + " in order to set up some application state that can be used"
-            + " for testing");
-        var withDeckId = (i: number, fn: (deckId: string)=>void) => {
-            appStore.getDeckList().lift(ids => fn(ids[i]));
-        }
-        var withDatasetId = (i: number, fn: (datasetId: string)=>void) => {
-            appStore.getDatasetList().lift(ids => fn(ids[i]));
-        }
-        var withTemplateId = (i: number, fn: (datasetId: string)=>void) => {
-            appStore.getTemplateList().lift(ids => fn(ids[i]));
-        }
-        appActions.reset();
+    /**
+     * An object that holds all global data for our application
+     */
+    class App {
+        public dispatcher: Dispatcher;
+        public actions: Actions;
+        public store: Store;
+        public view: View;
+        public container: ()=>HTMLElement;
         
-        // Dataset 1
-        appActions.newDataset();
-        withDatasetId(0, id=> {
-            appActions.setDatasetName(id, "Player's Basic Rules spells");
-            appActions.newRecord(id);
-            appActions.newRecord(id);
-            appActions.newRecord(id);
-        });
-
-        // Dataset 2
-        appActions.newDataset();
-        withDatasetId(1, id=> {
-            appActions.setDatasetName(id, "Elemental Evil spells");
-            appActions.newRecord(id);
-            appActions.newRecord(id);
-            appActions.newRecord(id);
-        });
+        constructor() {
+            this.dispatcher = null;
+            this.actions = null;
+            this.store = null;
+            this.view = null;
+            this.container = null;
+        }
         
-        // Dataset 3
-        appActions.newDataset();
-        withDatasetId(2, id=> {
-            appActions.setDatasetName(id, "DM's Basic Rules creatures");
-            appActions.newRecord(id);
-            appActions.newRecord(id);
-            appActions.newRecord(id);
-        });
+        // Initializes the application
+        // Creates and links the global objects
+        bootstrap() {
+            this.dispatcher = new Dispatcher();
+            this.actions = new Actions(this.dispatcher);
+            this.store = new Store(this.dispatcher);
+            this.container = ()=>document.body;
+            
+            // Map URLs to views
+            this.setupRoutes();
+    
+            // Each state change triggers a re-render
+            this.store.addChangeListener(() => this.refresh());
+            
+            // Trigger an initial action
+            this.actions.reset();
+        }
         
-        // Template 1
-        appActions.newTemplate();
+        // Refresh
+        refresh() {
+            // In this project, views are pure functions that map
+            // the application state (Store) to React elements
+            React.render(this.view(this.store), this.container());
+        }
         
-        // Template 2
-        appActions.newTemplate();
-
-        // Deck 1
-        appActions.newDeck();
-        withDeckId(0, id=>{
-            appActions.setDeckName(id, "Wizard spells");
-            appActions.setDeckDesc(id, "This deck contains wizard and sorcerer spells.");
-            withTemplateId(0, id2=>appActions.setDeckTemplate(id, id2));
-            withDatasetId(0, id2=>appActions.addDeckDataset(id, id2));
-            withDatasetId(1, id2=>appActions.addDeckDataset(id, id2));
-        });
+        // Routing
+        setupRoutes() {
+            page('/', () => {
+                this.view = renderDecks;
+            });
+            page('/decks', () => {
+                this.view = renderDecks;
+            });
+            page('*', () => {
+                this.view = renderDecks;
+            });
+            
+            page();
+        }
+    }
+    
 
-        // Deck 2
-        appActions.newDeck();
-        withDeckId(1, id=>{
-            appActions.setDeckName(id, "Cleric spells");
-            appActions.setDeckDesc(id, "This deck contains cleric spells.");
-            withTemplateId(0, id2=>appActions.setDeckTemplate(id, id2));
-            withDatasetId(0, id2=>appActions.addDeckDataset(id, id2));
-            withDatasetId(1, id2=>appActions.addDeckDataset(id, id2));
-        });
+    // All the global data (only accessible from within this file)
+    var app: App;
+    
+    // Access to the global data, to be used from the browser debug window
+    export function _debug(): App { return app; }
 
-        // Deck 3
-        appActions.newDeck();
-        withDeckId(2, id=>{
-            appActions.setDeckName(id, "Creatures");
-            appActions.setDeckDesc(id, "This deck contains creatures.");
-            withTemplateId(1, id2=>appActions.setDeckTemplate(id, id2));
-            withDatasetId(2, id2=>appActions.addDeckDataset(id, id2));
-        });
+    // Bootstrap the application
+    export function bootstrap() {
+        app = new App();
+        app.bootstrap();
+        
+        _mockData();
+    }
+    
+    // Setup some test state
+    export function _mockData() {
+        setupTestState(app.store, app.actions);
     }
 
+
 }

client/src/external/page/page.d.ts

@@ -0,0 +1,216 @@
+// Type definitions for page v1.5.0
+// Project: http://visionmedia.github.io/page.js/
+// Definitions by: Alan Norbauer <http://alan.norbauer.com/>
+// Definitions: https://github.com/borisyankov/DefinitelyTyped
+
+declare module PageJS {
+    interface Static {
+        /**
+         *  Defines a route mapping path to the given callback(s).
+         *
+         *      page('/', user.list)
+         *      page('/user/:id', user.load, user.show)
+         *      page('/user/:id/edit', user.load, user.edit)
+         *      page('*', notfound)
+         *
+         *  Links that are not of the same origin are disregarded and will not be dispatched.
+         */
+        (path: string, ...callbacks: Callback[]): void;
+        /**
+         * This is equivalent to page('*', callback) for generic "middleware".
+         */
+        (callback: Callback): void;
+        /**
+         *  Navigate to the given path.
+         *
+         *      $('.view').click(function(e){
+         *        page('/user/12')
+         *        e.preventDefault()
+         *      })
+         */
+        (path: string): void;
+        /**
+         * Setup redirect form one path to other.
+         */
+        (fromPath: string, toPath: string): void;
+        /**
+         * Register page's popstate / click bindings. If you're doing selective binding you'll like want to pass { click: false } to specify this yourself. The following options are available:
+         * 
+         *     - click bind to click events [true]
+         *     - popstate bind to popstate[true]
+         *     - dispatch perform initial dispatch[true]
+         *     - hashbang add #!before urls[false]
+         * 
+         * If you wish to load serve initial content from the server you likely will want to set dispatch to false.
+         */
+        (options: Options): void;
+        /**
+         * Register page's popstate / click bindings. If you're doing selective binding you'll like want to pass { click: false } to specify this yourself. The following options are available:
+         * 
+         *     - click bind to click events [true]
+         *     - popstate bind to popstate[true]
+         *     - dispatch perform initial dispatch[true]
+         *     - hashbang add #!before urls[false]
+         * 
+         * If you wish to load serve initial content from the server you likely will want to set dispatch to false.
+         */
+        (): void;
+
+        /**
+         * Identical to page(fromPath, toPath)
+         */
+        redirect(fromPath: string, toPath: string): void;
+        /**
+         *  Calling page.redirect with only a string as the first parameter redirects to another route. Waits for the current route to push state and after replaces it with the new one leaving the browser history clean.
+         *
+         *      page('/default', function(){
+         *        // some logic to decide which route to redirect to
+         *        if(admin) {
+         *          page.redirect('/admin');
+         *        } else {
+         *          page.redirect('/guest');
+         *        }
+         *      });
+         *
+         *      page('/default');
+         *
+         */
+        redirect(page: string): void;
+        /**
+         *  Navigate to the given path.
+         *
+         *      $('.view').click(function(e){
+         *        page('/user/12')
+         *        e.preventDefault()
+         *      })
+         * 
+         * Identical to page(path).
+         */
+        show(path: string): void;
+        /**
+         * Register page's popstate / click bindings. If you're doing selective binding you'll like want to pass { click: false } to specify this yourself. The following options are available:
+         * 
+         *     - click bind to click events [true]
+         *     - popstate bind to popstate[true]
+         *     - dispatch perform initial dispatch[true]
+         *     - hashbang add #!before urls[false]
+         * 
+         * If you wish to load serve initial content from the server you likely will want to set dispatch to false.
+         * 
+         * Identical to page([options]).
+         */
+        start(options: Options): void;
+        /**
+         * Register page's popstate / click bindings. If you're doing selective binding you'll like want to pass { click: false } to specify this yourself. The following options are available:
+         * 
+         *     - click bind to click events [true]
+         *     - popstate bind to popstate[true]
+         *     - dispatch perform initial dispatch[true]
+         *     - hashbang add #!before urls[false]
+         * 
+         * If you wish to load serve initial content from the server you likely will want to set dispatch to false.
+         */
+        start(): void;
+        /**
+         * Unbind both the popstate and click handlers.
+         */
+        stop(): void;
+        /**
+         * Get or set the base path. For example if page.js is operating within /blog/* set the base path to "/blog".
+         */
+        base(path?: string): void;
+        /**
+         * Defines an exit route mapping path to the given callback(s).
+         *  
+         * Exit routes are called when a page changes, using the context from the previous change. For example:
+         *     
+         *     page('/sidebar', function(ctx, next) {
+         *       sidebar.open = true
+         *       next()
+         *     })
+         *     
+         *     page.exit('/sidebar', function(next) {
+         *       sidebar.open = false
+         *       next()
+         *     })
+         */
+        exit(path: string, callback: Callback, moreCallbacks?: Callback[]): void;
+        /**
+         * Equivalent to page.exit('*', callback).
+         */
+        exit(callback: Callback): void;
+    }
+
+    interface Options {
+        /**
+         * bind to click events (default = true)
+         */
+        click?: boolean;
+        /**
+         * bind to popstate (default = true)
+         */
+        popstate?: boolean;
+        /**
+         * perform initial dispatch (default = true)
+         */
+        dispatch?: boolean;
+        /**
+         * add #!before urls (default = false)
+         */
+        hashbang?: boolean;
+    }
+
+    interface Callback {
+        (ctx: Context, next: () => any): any;
+    }
+
+    /**
+     * Routes are passed Context objects, these may be used to share state, for example ctx.user =, as well as the history "state" ctx.state that the pushState API provides.
+     */
+    interface Context {
+        [idx: string]: any;
+        /**
+         * Saves the context using replaceState(). For example this is useful for caching HTML or other resources that were loaded for when a user presses "back".
+         */
+        save: () => void;
+        /**
+         *  If true, marks the context as handled to prevent default 404 behaviour. For example this is useful for the routes with interminate quantity of the callbacks.
+         */
+        handled: boolean;
+        /**
+         *  Pathname including the "base" (if any) and query string "/admin/login?foo=bar".
+         */
+        canonicalPath: string;
+        /**
+         *  Pathname and query string "/login?foo=bar".
+         */
+        path: string;
+        /**
+         *  Query string void of leading ? such as "foo=bar", defaults to "".
+         */
+        querystring: string;
+        /**
+         *  The pathname void of query string "/login".
+         */
+        pathname: string;
+        /**
+         *  The pushState state object.
+         */
+        state: any;
+        /**
+         * The pushState title.
+         */
+        title: string;
+        /**
+         * The parameters from the url, e.g. /user/:id => Context.params.id
+         */
+        params: any;
+    }
+}
+
+declare module "page" {
+    var page: PageJS.Static;
+    //export = page;
+}
+
+declare var page: PageJS.Static;

client/src/mock.ts

@@ -0,0 +1,90 @@
+/// <reference path="./stores/store.ts"/>
+/// <reference path="./actions/actions.ts"/>
+
+module rpgcards {
+
+    export function setupTestState(store: Store, actions: Actions) {
+        console.log(
+            "This function resets the current application state"
+            + " and then triggers a series of hardcoded user actions,"
+            + " in order to set up some application state that can be used"
+            + " for testing");
+        
+        // Functions for converting entity indices to entity IDs
+        var withDeckId = (i: number, fn: (deckId: string)=>void) => {
+            store.getDeckList().lift(ids => fn(ids[i]));
+        }
+        var withDatasetId = (i: number, fn: (datasetId: string)=>void) => {
+            store.getDatasetList().lift(ids => fn(ids[i]));
+        }
+        var withTemplateId = (i: number, fn: (datasetId: string)=>void) => {
+            store.getTemplateList().lift(ids => fn(ids[i]));
+        }
+        
+        // Reset the state
+        actions.reset();
+        
+        // Dataset 1
+        actions.newDataset();
+        withDatasetId(0, id=> {
+            actions.setDatasetName(id, "Player's Basic Rules spells");
+            actions.newRecord(id);
+            actions.newRecord(id);
+            actions.newRecord(id);
+        });
+
+        // Dataset 2
+        actions.newDataset();
+        withDatasetId(1, id=> {
+            actions.setDatasetName(id, "Elemental Evil spells");
+            actions.newRecord(id);
+            actions.newRecord(id);
+            actions.newRecord(id);
+        });
+        
+        // Dataset 3
+        actions.newDataset();
+        withDatasetId(2, id=> {
+            actions.setDatasetName(id, "DM's Basic Rules creatures");
+            actions.newRecord(id);
+            actions.newRecord(id);
+            actions.newRecord(id);
+        });
+        
+        // Template 1
+        actions.newTemplate();
+        
+        // Template 2
+        actions.newTemplate();
+
+        // Deck 1
+        actions.newDeck();
+        withDeckId(0, id=>{
+            actions.setDeckName(id, "Wizard spells");
+            actions.setDeckDesc(id, "This deck contains wizard and sorcerer spells.");
+            withTemplateId(0, id2=>actions.setDeckTemplate(id, id2));
+            withDatasetId(0, id2=>actions.addDeckDataset(id, id2));
+            withDatasetId(1, id2=>actions.addDeckDataset(id, id2));
+        });
+
+        // Deck 2
+        actions.newDeck();
+        withDeckId(1, id=>{
+            actions.setDeckName(id, "Cleric spells");
+            actions.setDeckDesc(id, "This deck contains cleric spells.");
+            withTemplateId(0, id2=>actions.setDeckTemplate(id, id2));
+            withDatasetId(0, id2=>actions.addDeckDataset(id, id2));
+            withDatasetId(1, id2=>actions.addDeckDataset(id, id2));
+        });
+
+        // Deck 3
+        actions.newDeck();
+        withDeckId(2, id=>{
+            actions.setDeckName(id, "Creatures");
+            actions.setDeckDesc(id, "This deck contains creatures.");
+            withTemplateId(1, id2=>actions.setDeckTemplate(id, id2));
+            withDatasetId(2, id2=>actions.addDeckDataset(id, id2));
+        });
+    }
+
+}

client/src/views/view.ts

@@ -0,0 +1,8 @@
+/// <reference path="../external/react/react.d.ts"/>
+/// <reference path="../stores/store.ts"/>
+
+module rpgcards {
+	
+	export type View = (store: Store) => React.ReactElement<any>;
+
+}

client/tsconfig.json

@@ -16,12 +16,14 @@
         "!./node_modules/**/*.ts"
     ],
     "files": [
-        "./src/actions/actions.ts",
         "./src/app.ts",
+        "./src/mock.ts",
+        "./src/actions/actions.ts",
         "./src/dispatcher/dispatcher.ts",
         "./src/dispatcher/invariant.ts",
         "./src/external/react/react-addons.d.ts",
         "./src/external/react/react.d.ts",
+        "./src/external/page/page.d.ts",
         "./src/stores/asyncT.ts",
         "./src/stores/card.ts",
         "./src/stores/dataset.ts",
@@ -33,6 +35,7 @@
         "./src/stores/template.ts",
         "./src/views/components/deck.ts",
         "./src/views/decks.ts",
-        "./src/views/header.ts"
+        "./src/views/header.ts",
+        "./src/views/view.ts"
     ]
 }