var circle = svg.selectAll("circle")
    .data([32, 57, 293], function(d) { return d; });

circle.enter().append("circle")
    .attr("cy", 60)
    .attr("cx", function(d, i) { return i * 100 + 30; })
    .attr("r", function(d) { return Math.sqrt(d); });

circle.exit().remove();

this.tiles.forEach(tile =>
	svg.append("rect")
		.attr("x", tile.x + 1.2 * this.cellWidth * this.tiles.filter(e => e.x < tile.x && e.y == tile.y).length)
		.attr("y", tile.y + 1.2 * this.cellWidth * this.tiles.filter(e => e.y < tile.y && e.x == tile.x).length)
		.attr("width", this.cellWidth * tile.width)
		.attr("height", this.cellWidth * tile.height)
		.attr("fill", "grey")
);

// PART 1: The UI
class Tile {
    constructor(x, y, width, height){
        width = width || 1;
        height = height || 1;
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
    }
}

class Grid {
    /*
     * width and height are given in number of tiles
     * cellWidth is the display size of a cell
     */
    constructor(width, height, cellWidth){
        /* let board = [];
        for(let i = 0; i < height; i++){
            board[i] = [];

List of components
=
A (+) indicates found, a (-) indicates missing
Everything is strictly directional and 11x11 unless specifed otherwise
 + wire
  + bidirectional straight
  + 4-long modular bendy
  + diagonal
  + corner
  + splits
   + 2-way, both configs
   - 3-way
  + wire-crossing
  - double corners (both configs)
  + 22:11 delay
 + AND/OR/XOR gates
  + opposing in, one out
  - opposing in, two out
  + adjacent in, one/two out
 + "A-AND-NOT-B" gates
  + opposing in, one out
  + adjacent in, input-A opposite to output

update(){
    var rects = svg.selectAll("rect.tile");
    rects.data(this.tiles)
      .enter().append("rect")
        .attr("fill", "gray")
        .attr("class", "tile");
    rects.exit().remove();
    rects.attr("x", function(tile){return tile.x + 1.2 * this.cellWidth * this.tiles.filter(e => e.x < tile.x && e.y == tile.y).length})
      .attr("y", function(tile){return tile.y + 1.2 * this.cellWidth * this.tiles.filter(e => e.y < tile.y && e.x == tile.x).length})
      .attr("width", function(tile){return this.cellWidth * tile.width})

svg.append("rect")
	.attr("x", tile.x + padFactor * this.cellWidth * tile.x)
	.attr("y", tile.y + padFactor * this.cellWidth * tile.y)
	.attr("width", this.cellWidth * tile.width)
	.attr("height", this.cellWidth * tile.height)
	.attr("fill", "grey")
	.attr("class", "tile")
	.on("drag", function(){
		console.log("dragging");
		let t = d3.select(this);
		t.attr("x", d3.event.x).attr("y", d3.event.y);
	})