Hex Mine Sweeper D3js

by paulftw

HTML

<script src="http://d3js.org/d3.v2.js"></script>

<svg width="300" height="200" viewBox="0 0 300 200">
</svg>

CSS

svg polygon text {
    font: 10px sans-serif;
    pointer-events: none;
}

JavaScript

var r = 20;
var pi3 = Math.PI / 3;
var pi6 = Math.PI / 6;

var sin = Math.sin, cos = Math.cos;

h = r * sin(pi3);

var cx0 = r, cy0 = h;
var vrx = 0, vry = 2 * h;

var vcx = 1.5 * r, vcy = - h;


var cx = function(row, col) {
    return cx0 + vrx * row + vcx * col;
};
var cy = function(row, col) {
    return cy0 + vry * row + vcy * col;
};

var points = function(row, col) {
    var x0 = cx(row, col);
    var y0 = cy(row, col);
    var x1 = x0 - r/2;
    var y1 = y0 - h;
    var x2 = x0 + r/2;
    var y2 = y0 - h;
    var x3 = x0 + r;
    var y3 = y0;
    var x4 = x0 + r/2;
    var y4 = y0 + h;
    var x5 = x0 - r/2;
    var y5 = y0 + h;
    var x6 = x0 - r;
    var y6 = y0;
    return '' + x1 + ',' + y1
           + ' '+ x2 + ',' + y2
           + ' '+ x3 + ',' + y3
           + ' '+ x4 + ',' + y4
           + ' '+ x5 + ',' + y5
           + ' '+ x6 + ',' + y6;
};

var svg = d3.selectAll("svg");

var data = [];
function add(r, n, x) {
    for (var i = x; i < n; i++) {
        data.push([r,i, ' ', Math.random()>0.7]);
    }
}
add(0,1,0);
add(1,3,0);
add(2,5,0);
add(3,7,0);

add(4,9,2);
add(5,9,4);
add(6,9,6);
add(7,9,8);


var polys = svg.selectAll("polygon")
    .data(data, String)
    .attr("points", function(d, i) {
        return points(d[0], d[1]);
    })
    .attr("fill", "none")
    .attr("stroke", "#eee");

var update = function() {
    svg.selectAll("polygon").data(data, String);
};

var newg = polys.enter().append("g");

var hex = newg.append("polygon")
    .attr("points", function(d, i) {
        
        return points(d[0], d[1]);
    })
    .attr("fill", "#eee")
    .attr("stroke", "#333");

newg.append("text")
    .attr("text-anchor", "middle")
    .text(function(d) {return d[2]})
    .attr("x", function(d) { return cx(d[0], d[1]); })
    .attr("y", function(d) { return cy(d[0], d[1]) + h/2; });

polys.exit().remove();
var get=function(r,c) {
    for (var i = 0; i < data.length; i++) {
        if (data[i] == r)
            return data[i];
        if...