patch grid

gistfile1.md

Hex Grid

The base hex grid renderer should return markup

var grid = new HexGrid({
  size: [100, 120], // size in pixels per patch
  offset: [200, 120], // offset for 0,0 point (centering offset)
  template: patchTemplate
});

$('#my-relative-container').append(grid.render(mySkill));

Skill Map

Example of a particular grid view, in this case managing something like the splash screen. The controller should reject patches fully outside the bounds, accounting for those rows offset horizontally. It passes patch x,y coordinates without modification, starting from the center 0,0 point.

// figure out our page width and number of patches per
var x = (pageWidth * patchWidth) / 2;
x = Math.ceil(x);

// pick the rendering engine and x,y bounds
var map = new SkillMap(grid, -x, -4, x, 4);

html = map.add(mySkill);
//or
html = map.add([skills, skills, etc]);

Portfolio Map

Another view on top of the grid renderer. A portfolio map view should sort achieved skills, placing them first against the lefthand side and sprinkling a few in-progress on the right

// center is far left, middle row (between -1 and 1)
var portfolio = new PortfolioMap(grid, 0, -1, 7, 1);
html = portfolio.fill([array of skills]);