simple canvas renderer for traveller subsector data

subsector.js

// Copyright (c) 2011 Meadhbh S. Hamrick
// 
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights to 
// use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
// of the Software, and to permit persons to whom the Software is furnished to do
// so, subject to the following conditions:
// 
// The above copyright notice and this permission notice shall be included in all
// copies or substantial portions of the Software.
// 
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
// FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
// COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
// AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

( function () {
  function Subsector ( eid, descriptor ) {
    this.descriptor = descriptor;
    this.eid = eid;
    this.element = document.getElementById( eid );
    if( this.element ) {
      this.context = this.element.getContext('2d');
    }
  }

  Subsector.prototype.render = function () {
    this.renderHexes();
    this.renderLanes();
    this.renderRedYellow('red');
    this.renderRedYellow('yellow');
    this.renderSystems();
  };

  Subsector.prototype.renderHexes = function () {
    for( var i = 0; i < 8; i++ ) {
      for( var j = 0; j < 10; j++ ) {
        var coords = this.hextileToXY( i, j );
        this.context.strokeStyle = 'rgb(' + Math.floor( i * j * 3.5 + 18 ) +
            ',' + Math.floor(255 - 16 * i ) +
            ',' + Math.floor( 255 - 12.8 * j ) + ')';
        this.strokeCircle( coords[0], coords[1], 23 );
      }
    }
  };

  Subsector.prototype.renderLanes = function () {
    this.context.lineWidth = 5;
    this.context.strokeStyle = '#a58fb2';
    this.context.lineCap = 'round';
    for( var i = 0, il = this.descriptor.lanes.length; i < il; i++ ) {
      var current = this.descriptor.lanes[ i ];
      var start = this.hextileToXY( current[0], current[1] );
      var stop  = this.hextileToXY( current[2], current[3] );
      this.context.beginPath();
      this.context.moveTo( start[0], start[1] );
      this.context.lineTo( stop[0], stop[1] );
      this.context.stroke();
    }
  };

  Subsector.prototype.renderRedYellow = function (color) {
    this.context.strokeStyle = color;
    this.context.lineWidth = 3;
    for( var i = 0, il = this.descriptor[ color ].length; i < il; i++ ) {
      var system = this.descriptor.systems[ this.descriptor[ color ][ i ] ];
      if( system ) {
        var coords = this.hextileToXY( system.x, system.y );
        this.strokeCircle( coords[0], coords[1], 18, true );
      }
    }
  };

  Subsector.prototype.renderSystems = function () {
    this.context.strokeStyle = 'white';
    this.context.fillStyle = 'blue';
    this.context.textAlign = 'center';
    this.context.font = '10pt Sans-Serif';
    this.context.lineWidth = 1;
    for( var current in this.descriptor.systems ) {
      var system = this.descriptor.systems[ current ];
      if( system ) {
        var coords = this.hextileToXY( system.x, system.y );
        if( system.asteroid ) {
          for( var i = 0; i < 5; i++ ) {
            this.fillCircle( coords[0] - 5 + (Math.random() * 10),
                               coords[1] - 5 + (Math.random() * 10),
                               2 );
          }
        } else {
          if( system.color ) {
            this.context.fillStyle = system.color;
          }
          if( system.hollow ) {
            this.strokeCircle(coords[0], coords[1], 4);
          } else {
            this.fillCircle(coords[0], coords[1], 4);
          }
          if( system.color ) {
            this.context.fillStyle = 'blue';
          }
        }
        this.context.strokeText( current, coords[0], coords[1] + 20 );
      }
    }
  };

  Subsector.prototype.hextileToXY = function ( x, y ) {
    return( [ 44 * x + 25, ( 0 === x % 2 ) ? 50 * y + 25 : 50 * y + 50 ] );
              
  };

  Subsector.prototype.strokeCircle = function (x, y, radius, partial) {
    this.circle( x, y, radius, partial );
    this.context.stroke();
  };

  Subsector.prototype.fillCircle = function (x, y, radius, partial) {
    this.circle( x, y, radius, partial );
    this.context.fill();
  };

  Subsector.prototype.circle = function (x, y, radius, partial) {
    var start, stop;
    if( partial ) {
      start = Math.PI - 0.5;
      stop = 2 * Math.PI + 0.5;
    } else {
      start = 0;
      stop = 2 * Math.PI;
    }
    this.context.beginPath();
    this.context.arc( x, y, radius, start, stop, false );
  }

  if( window ) {
    window.Subsector = Subsector;
  }
} ) ();