Constellations/js/Grid.js

import * as Dom from UnitJS.Dom;
import {color, tool} from Toolbox;

var grid = {
	element: null,
	data: {}
};
var down = false;

return {
	init: init
};

function init(size, elementId) {
	grid.element = document.getElementById(elementId || 'grid');
	for(var row = 0; row < size; row++) {
		grid.element.appendChild(
			makeRow({tag: 'td', attributes: bodyAttributes, row: row, size: size})
		);
		grid.data[row] = {};
	}
	grid.element.addEventListener('mouseleave', function() {
		down = false;
	});
}

function makeRow(config) {
	var cells = [];
	for(var column = 0; column < config.size; column++) {
		cells.push(Dom.make(config.tag, config.attributes(config.row, column)));
	}
	return Dom.make('tr', {}, cells);
}

function bodyAttributes(i, j) {
	return {
		onMousedown: function(e) {
			down = true;
			if(tool() == 'draw') {
				colorize(i, j, e);
			}
		},
		onMouseup: function(e) {
			down = false;
		},
		onMouseenter: function(e) {
			if(down && tool() == 'draw') {
				colorize(i, j, e);
			}
		}
	};
}

function colorize(i, j, e) {
	grid.data[i][j] = color();
	e.target.className = grid.data[i][j];
}