Learning Redux

https://egghead.io/series/getting-started-with-redux

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.6/redux.js"></script>

CSS

body {
  font-family:monospace;
  white-space:pre;
}

Babel + JSX

const input = [
  	[0,0], [1,0], [2,0],
    [0,1], [1,1], [2,1],
    [0,2], [1,2],
    [0,3],				[2,3],
    [0,4],[1,4],
    [0,5],
    
    [2,6]    
  ];

const hexagonApp = (state = "", action) => {
  switch(action.type) {
    case 'DRAW_HEXAGONS':    
    	const coordinates = action.value;
    
    	// string representing hexagon grid
      var grid = ""

			const hexagons = {
      	x: Math.max.apply( Math,coordinates.map(function(o){return o[0];}) )+1,
        y:Math.max.apply( Math,coordinates.map(function(o){return o[1];}) )+1
      }
      
			const chars = {
        x: 1 + ( 6 * hexagons.x ), // 1 char + 6 for each hexagon
        y: 3 + ( 1 * hexagons.y ) // 3 chars + 1 for each heagon
      }     
      
			// draw empty grid
      for (var i=1; i<=(chars.x * chars.y); i++) {
        grid += ' '; // draw whitespace for each char
        if (i%chars.x === 0) { grid += "\r\n"; } // draw new line for each row of chars
      }

			// draw hexagons on grid
      for (var i=0; i<coordinates.length; i++) {
      
      	// find start char for hexagon
        var hexagon = 
        	coordinates[i][0]*6 // x coordinate
        	+ (chars.x+2)*coordinates[i][1] // y coordinate
          
        if (coordinates[i][1]%2 == 1) {hexagon=hexagon+3} // move 3 chars along for every other row

        // draw hexagon top
        grid = grid.substr(0, hexagon+1) + '__' + grid.substr(hexagon+ 3);

        //draw hexagon top sides
        grid = grid.substr(0, hexagon +chars.x+2) + '/  \\' + grid.substr(hexagon +chars.x+2 + 4);

        //draw hexagon bottom sides & bottom
        grid = grid.substr(0, hexagon +(chars.x+2)*2 ) + '\\__/' + grid.substr(hexagon +(chars.x+2)*2 + 4);

      }

      return grid;
    default: 
      return state;
  }
}

const { createStore } = Redux;
const store = createStore(hexagonApp);

const render = () => {
  document.body.innerText = store.getState();
};

store.subscribe(render);

//document.addEventListener('click', ()=> {
 ...