JSFiddle - React, Tailwind, and code Playground

by eprouver

HTML

<svg id="main"></svg>

CSS

* {
    margin: 0;
    padding: 0;
}
svg {
    background:black;
}
.ship {

}
.prod {
    opacity: 0.3;
    pointer-events:none;
    fill: transparent;
    stroke-width: 4px;
}
.noclick {
    pointer-events:none;
}
.selected {
    fill:cyan;
}
.territory {
    stroke-width: 0;
    stroke-linejoin: round;
    opacity: 0.1;
}
.link {
    stroke-width: 1px;
    opacity: 0.7;
    pointer-events:none;
    stroke-dasharray:1, 10;
}
.planet {
    stroke: none;
}

JavaScript

//D3
var dims = {
    width: window.innerWidth,
    height: window.innerHeight
}

var x = d3.scale.linear()
    .range([0, dims.width]);

var y = d3.scale.linear()
    .range([0, dims.height]);

var color = d3.scale.category10();

//Board
var selected = {};
var activePlayer = false;
var main = d3.select('#main')
    .attr('width', dims.width)
    .attr('height', dims.height)
    .on('click', function () {
    //Find player
    if (selected[activePlayer]) {
        var coords = d3.mouse(this);
        selected[activePlayer].tx = coords[0] / dims.width;
        selected[activePlayer].ty = coords[1] / dims.height;
        selected[activePlayer].selected = false;
        selected[activePlayer] = false;
    }
});

//Veronoi
var territoryHolder = main.append("g").attr('class', 'noclick');
var territory = territoryHolder.selectAll("path.territory");
var voronoi = d3.geom.voronoi()
    .clipExtent([
    [0, 0],
    [dims.width, dims.height]
]);

//Planets
var planets;
function addPlanet() {
    planetData.push({
        x: Math.random(),
        y: Math.random()
    });

    planets = main.selectAll('.planet').data(planetData).enter()
        .append('circle')
        .attr('class', 'noclick')
        .attr('cx', function (d) {
        return x(d.x)
    })
        .attr('cy', function (d) {
        return y(d.y)
    })
        .attr('r', 3)
}
var planetData = [];
for (var i = 0; i < 15; i++) {
    addPlanet();
}

//Ships
var shipsData = [];
var ships, prods;

function addShip(t, x, y, tx, ty) {
    var ship = {
        x: x || Math.random(),
        y: y || Math.random(),
        v: 0,
        a: 0.0000005,
        mv: 0.1,
        life: 1,
        links: 0,
        prod: 0,
        prodSpeed: 0.0001,
        selected: false,
        player: t === undefined ? ~~ (Math.random() * 10) : t
    }

    ship.tx = tx ? tx : ship.x;
    ship.ty = ty ? ty : ship.y;

    shipsData.push(ship);

    d3.selectAll('.ship').remove();

    ships =...