Traveller Javascript Library

[forthekill]

So I've been working on a Javascript library for Traveller over the last few weeks and so far so good. I've mentioned this in a couple of other threads but I figured it should have its own thread.

Disclaimer: I'm not a Javascript programmer, or even a programmer by trade (though I do have a CS degree), so I'm learning as I go.

I've got the following in really good shape:

Sector Generator (Currently Megatraveller rules by and large)
World Generator
Sector Parser
Trade Route Generator (per GURPS Far Trader)
HTML5 Canvas Mapper (hexes, hex numbers, worlds, names, starport, bases, zones, routes to some degree)

Some of the code is borrowed from Joshua Bell (who's been very helpful) and I think I've credited him where appropriate, but I need to go through the JS again to make sure I'm not missing anything. Most of the code is my own, except for the parser, some of the sector gen code, and the algorithm to walk the map to find routes.

I have all the JS methods in a number of files so I can work on them easily, and at some point I will more logically organize them into a few main JS files. I am still working on streamlining methods and reusing code where possible.

Most of the methods are commented pretty well, but I still have some work to do in that area.

I've also tried to standardize objects across all the "libraries", so methods work with a sector, a world, and/or a Canvas context as parameters.

What I need still need to do:

- World name generator
- Improving the performance of the dog slow trade route calculations
- Border generation (I am very intrigued by this by Joshua Bell and am hoping he might help me get that working with what I've got )
- Subsector generation
- Taking into account adjacent sectors for routes

- Border rendering
- MSEC route rendering
- Fixing the trade route rendering so that only the highest BTN route between worlds is rendered
- Combining multiple routes between worlds that should be upgraded to a higher BTN
- Subsector rendering

- Multiple outputs besides Canvas (print, PDF, sector files, MSEC, SVG?, etc.)

Examples:

Sector parsing with Canvas map and sector data display (Chrome and Firefox only)
Sector generation with Canvas map in layers
Sector generation with Canvas map in layers with route generation and rendering IN TESTING (WARNING: Trade route calculation is intensive and you may think the page is frozen. Give it time.)

Feedback is wanted and needed!

 

[inexorabletash]

- Border generation (I am very intrigued by this by Joshua Bell and am hoping he might help me get that working with what I've got )

There's a JavaScript implementation of that algorithm at:

http://travellermap.com/borders/borders.js

Note that it's asynchronous so the page doesn't freeze while it's running and can display progress updates.

 

[forthekill]

Thanks for that. I'll see if I can figure out how to use that.

I do need to fix the trade route calculation to not freeze the page while it's going, but I'm not sure what my options are. Everything I've read on asynchronous Javascript includes server-side processing, and I want to keep everything on the client-side. It seems I could use setTimeout in some fashion but I need to look into it further.

 

[inexorabletash]

Yep. Basically, break your work up into chunks, and process one chunk at a time, then schedule a timer to process the next chunk. The general pattern is:

function forEachAsync(items, func, callback) {  
  var i = 0;
  function nextItem() {
    if (i < items.length) {
      var item = items[i];
      i += 1;
      func(item);
      setTimeout(nextItem, 0);
    } else {
      callback();
    }
  }
  nextItem();
}

forEachAsync(
  ['a', 'b', 'c', 'd'], 
  function (item) { /* do something here */ },
  function () { alert("all done!"); }
);

You can bump up the timeout to 100 (ms) to make the page more responsive at the expense of execution time. And obviously you don't need to operate on a pre-constructed list; this shows how a variable i in the outer function can be iterated by the inner function, so you could easily have x and y in there for hexes (you just can't use for() loops).