Improves load time, and cleans up padding and footer styles

Author: brehaut

index.html

@@ -53,7 +53,7 @@ <h2><em>13th Age</em> fair encounter generator</h2>
       </div>
 
       <footer>       
-        <div>
+        <div class="clearfix">
           <section class="fire-opal">
             <p>
               This program uses trademarks and/or copyrights owned by Fire Opal

src/ts/appcache.ts

@@ -35,7 +35,7 @@ module manticore.appcache {
 
         inPageConfirm(interface.strings._("There is a new version of this app available. "), 
                       interface.strings._("Reload?"))
-            .map<any>(_ => location.reload());
+            .then<any>(_ => location.reload());
     }
 
     export function handleReloads () {        

src/ts/bestiary.ts

@@ -13,7 +13,7 @@ module manticore.bestiary {
                     level:number, 
                     size:string,
                     kind:string,
-                    attributes: Array<string>,
+                    attributes: string[],
                     book: string,
                     public price:number) { 
             super(name, level, size, kind, attributes, book);
@@ -175,7 +175,7 @@ module manticore.bestiary {
 
 
     // allocateMonster is the core algorithm of this application.
-    function repeatMonster(points, monster):Array<MonsterAllocation> {
+    function repeatMonster(points, monster):MonsterAllocation[] {
         var max = Math.floor(points / monster.price); 
         var repeats = [];
         for (var i = 1; i <= max; i++) {
@@ -185,15 +185,15 @@ module manticore.bestiary {
     }
 
 
-    function allocateMonsters(points:number, monsters:Array<PricedMonster>) {
+    function allocateMonsters(points:number, monsters:PricedMonster[]) {
         var allAllocations = [];     
         var allowedUnspent = Math.min.apply(null, monsters.map((m) => m.price));
 
         var startT = +new Date();
 
         function allocate(remainingPoints:number, 
                           monstersIdx:number, 
-                          acc:Array<MonsterAllocation>) {
+                          acc:MonsterAllocation[]) {
 
             // cap runtime to 2 seconds
             if (+new Date() - startT >= 2000) throw { message: "Ran too long; Results truncated" };
@@ -241,7 +241,7 @@ module manticore.bestiary {
 
     // public API:
     export function allocationsForParty(party:data.IParty, 
-                                        selectedMonsters:Array<data.Monster>) {
+                                        selectedMonsters:data.Monster[]) {
 
         return allocateMonsters(priceParty(party.size),
                                 selectedMonsters

src/ts/data.ts

@@ -118,8 +118,4 @@ module manticore.data {
 
         return allPredicate(predicates);
     }
-
-
-
-
 }

src/ts/interface.ts

@@ -5,10 +5,6 @@
 module manticore.interface {
     var _ = strings._;
 
-    function arrayFrom<T>(arrayLike):T[] {
-        return Array.prototype.slice.apply(arrayLike);
-    }
-
     function cssClassName(text:string):string {
         return text.replace(/[^-a-zA-Z0-9]+/g, "-");
     }
@@ -160,7 +156,7 @@ module manticore.interface {
         }
 
         public getSelectedAttributes() {            
-            var selected = arrayFrom<HTMLElement>(this.el.querySelectorAll("li"))
+            var selected = Array.from<Node>(this.el.querySelectorAll("li"))
                 .map<string>((el:HTMLElement) =>
                     el.classList.contains("selected") ? el.getAttribute("data-name") : null)
                .filter((attr) => !!attr)
@@ -170,8 +166,8 @@ module manticore.interface {
         }
 
         public updateFilterCounts(filters:{[index: string]: number}) {
-             arrayFrom<HTMLElement>(this.el.querySelectorAll("li"))
-                .forEach((el) => {
+             Array.from<Node>(this.el.querySelectorAll("li"))
+                .forEach((el:HTMLElement) => {
                     var name = el.getAttribute("data-name");
                     var count = filters[name] || 0;
 
@@ -533,7 +529,7 @@ module manticore.interface {
         //bestiary = bestiary.then(awaitDelay(2000));
 
         bestiary
-            .map<void>((bestiary) => {
+            .then<void>((bestiary) => {
                 new UI(allocator, bestiary, root);
             })
             .catch((e) => {

src/ts/manticore.ts

@@ -26,30 +26,44 @@ module manticore {
             return acc;
         }
     }
+   
 
-    document.addEventListener("DOMContentLoaded", (e) => {
-        var root = document.getElementById("application");
+    function awaitContentLoaded() {
+        return new Promise((resolve, reject) => {
+            document.addEventListener("DOMContentLoaded", _ => {
+                manticore.appcache.handleReloads();
+                resolve(null);
+            })
+        });
+    }
 
-        var dataset = Promise.all<string>([
-            awaitAjax("static/data/bestiary.json"),
-            awaitAjax("static/data/custom.json")
-                .then<string>(resp => Promise.of<string>(resp), 
-                              _ => Promise.of<string>("{}")
-                             )
-        ])
-        // this looks wacky, but is due to the additional arguments of map conflicting
-        // with the optional arguments parse
-            .map<any[]>((texts:string[]) => texts.map((s) => JSON.parse(s))) 
-            .map<any>(mergeWith<any[]>((a, b) => a.concat(b)))
-            .map<bestiary.Bestiary>(bestiary.createBestiary)
-        ;
 
-        manticore.appcache.handleReloads();
+    // Bootstrap application
+    //
+    // Immediately request the data. The interface waits on this and
+    // (in parallel) DOMContentLoaded before it appears.
+    // Not awaiting DOMContentLoaded to begin loading data ensures a faster
+    // turn around.
+   
+    var dataset = Promise.all<string>([
+        awaitAjax("static/data/bestiary.json"),
+        awaitAjax("static/data/custom.json")
+            .then<string>(resp => Promise.resolve<string>(resp), 
+                          _ => Promise.resolve<string>("{}")
+                         )
+    ])
+    // this looks wacky, but is due to the additional arguments of then conflicting
+    // with the optional arguments parse
+        .then<any[]>((texts:string[]) => texts.map((s) => JSON.parse(s))) 
+        .then<any>(mergeWith<any[]>((a, b) => a.concat(b)))
+        .then<bestiary.Bestiary>(bestiary.createBestiary)
+    ;
 
-        interface.initialize(
-            root,
-            dataset,
-            bestiary.allocationsForParty
-        );
-    });
+    interface.initialize(
+        document.getElementById("application"),
+        Promise.all([dataset, awaitContentLoaded()])
+            .then(all => all[0])
+            .catch(e => console.error("An error occured bootstrapping the application", e)),
+        bestiary.allocationsForParty
+    );
 }

src/ts/shims.ts

@@ -48,22 +48,6 @@ function awaitAjax(url:string, method?:string):Promise<string> {
 }
 
 
-// implement functors on promises so that .then isnt so gross.
-// 
-// exchanging one evil (duckwrapping) for another (monkeypatching a core type)
-if (typeof Promise.of == "undefined") {
-    Promise.of = function (v) {
-        return new Promise((resolve, _) => resolve(v));
-    };
-}
-
-if (typeof Promise.prototype.map == "undefined") {
-    Promise.prototype.map = function (fn) {
-        return this.then((data) => Promise.of(fn(data)));
-    };
-}
-
-
 
 // array polyfils taken from developer.mozilla.org
 
@@ -240,3 +224,89 @@ if (!Array.prototype.forEach) {
   };
 }
 
+
+if (!Array.of) {
+  Array.of = function() {
+    return Array.prototype.slice.call(arguments);
+  };
+}
+
+
+// Production steps of ECMA-262, Edition 6, 22.1.2.1
+// Reference: https://people.mozilla.org/~jorendorff/es6-draft.html#sec-array.from
+if (!Array.from) {
+  Array.from = (function () {
+    var toStr = Object.prototype.toString;
+    var isCallable = function (fn) {
+      return typeof fn === 'function' || toStr.call(fn) === '[object Function]';
+    };
+    var toInteger = function (value) {
+      var number = Number(value);
+      if (isNaN(number)) { return 0; }
+      if (number === 0 || !isFinite(number)) { return number; }
+      return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number));
+    };
+    var maxSafeInteger = Math.pow(2, 53) - 1;
+    var toLength = function (value) {
+      var len = toInteger(value);
+      return Math.min(Math.max(len, 0), maxSafeInteger);
+    };
+
+    // The length property of the from method is 1.
+    return function from(arrayLike/*, mapFn, thisArg */) {
+      // 1. Let C be the this value.
+      var C = this;
+
+      // 2. Let items be ToObject(arrayLike).
+      var items = Object(arrayLike);
+
+      // 3. ReturnIfAbrupt(items).
+      if (arrayLike == null) {
+        throw new TypeError("Array.from requires an array-like object - not null or undefined");
+      }
+
+      // 4. If mapfn is undefined, then let mapping be false.
+      var mapFn = arguments.length > 1 ? arguments[1] : void undefined;
+      var T;
+      if (typeof mapFn !== 'undefined') {
+        // 5. else      
+        // 5. a If IsCallable(mapfn) is false, throw a TypeError exception.
+        if (!isCallable(mapFn)) {
+          throw new TypeError('Array.from: when provided, the second argument must be a function');
+        }
+
+        // 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined.
+        if (arguments.length > 2) {
+          T = arguments[2];
+        }
+      }
+
+      // 10. Let lenValue be Get(items, "length").
+      // 11. Let len be ToLength(lenValue).
+      var len = toLength(items.length);
+
+      // 13. If IsConstructor(C) is true, then
+      // 13. a. Let A be the result of calling the [[Construct]] internal method of C with an argument list containing the single item len.
+      // 14. a. Else, Let A be ArrayCreate(len).
+      var A = isCallable(C) ? Object(new C(len)) : new Array(len);
+
+      // 16. Let k be 0.
+      var k = 0;
+      // 17. Repeat, while k < len… (also steps a - h)
+      var kValue;
+      while (k < len) {
+        kValue = items[k];
+        if (mapFn) {
+          A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k);
+        } else {
+          A[k] = kValue;
+        }
+        k += 1;
+      }
+      // 18. Let putStatus be Put(A, "length", len, true).
+      A.length = len;
+      // 20. Return A.
+      return A;
+    };
+  }());
+}

src/ts/types.d.ts

@@ -7,17 +7,52 @@ interface PromiseExecutor<T> {
 }
 
 interface Promise<T> {
-    then<NextT>(fulfilled?:(v:T)=>Promise<NextT>, rejected?:(err:any)=>Promise<NextT>):Promise<NextT>;
-    // variants of then that support functor map are not provided, instead map here is
-    // and is monkeypatched in in shims.ts\
-    map<NextT>(fn:(v:T) => NextT):Promise<NextT>;
+    then<NextT>(fulfilled?:(v:T)=>NextT|Promise<NextT>,
+                rejected?:(err:any)=>NextT|Promise<NextT>):Promise<NextT>;
     'catch'(handle:(err:any) => any): any;
 }
 
 interface PromiseStatic {
     new<T> (ex:PromiseExecutor<T>): Promise<T>;
+
+    resolve<T>(v:T|Promise<T>): Promise<T>;
+    reject<T>(v:T|Promise<T>): Promise<T>;
+    
     all<T>(ps:Promise<T>[]): Promise<T[]>;
-    of<T>(v:T): Promise<T>;
+    race<T>(ps:Promise<T>[]): Promise<T[]>;
+    
 }
 
 declare var Promise: PromiseStatic;
+
+
+// snaffled from ts es6.d.ts on github,
+// minus support for itereables
+interface ArrayLike<T> {
+    length: number;
+    [n: number]: T;
+}
+
+
+
+interface ArrayConstructor {
+    /**
+      * Creates an array from an array-like object.
+      * @param arrayLike An array-like object to convert to an array.
+      * @param mapfn A mapping function to call on every element of the array.
+      * @param thisArg Value of 'this' used to invoke the mapfn.
+      */
+    from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): Array<U>;
+
+    /**
+      * Creates an array from an array-like object.
+      * @param arrayLike An array-like object to convert to an array.
+      */
+    from<T>(arrayLike: ArrayLike<T>): Array<T>;
+
+    /**
+      * Returns a new array from a set of elements.
+      * @param items A set of elements to include in the new array object.
+      */
+    of<T>(...items: T[]): Array<T>;
+}