Browse Source

Add map toggle for sec status vs. faction.

master
Ben Kurtovic 4 years ago
parent
commit
5478dcba85
3 changed files with 84 additions and 17 deletions
  1. +33
    -0
      static/map.css
  2. +39
    -16
      static/map.js
  3. +12
    -1
      templates/map/map.mako

+ 33
- 0
static/map.css View File

@@ -41,4 +41,37 @@
right: 0;
padding: 0.5em;
background-color: rgba(0, 0, 0, 0.75);
text-align: right;
}

#map .controls .label {
font-size: 85%;
}

#map .system.neutral {
color: #777;
}

#map .system.faction {
color: #AAA;
}

#map .system.faction-amarr-empire {
color: #FFDE78;
}

#map .system.faction-caldari-state {
color: #99CCEE;
}

#map .system.faction-gallente-federation {
color: #66BB99;
}

#map .system.faction-minmatar-republic {
color: #D89988;
}

#map .system.faction-jove-empire {
color: #444;
}

+ 39
- 16
static/map.js View File

@@ -18,10 +18,25 @@ var get_bounds = function(galaxy) {
return [xmin, ymin, xspan, yspan];
}

var get_sec_class = function(sec) {
return "sec-" + (
sec <= 0.0 ? "null" :
Number(Math.max(sec, 0.1)).toFixed(1).replace(".", "_"));
}

var get_faction_class = function(factions, faction) {
if (faction < 0)
return "neutral";
if (factions[faction] !== undefined)
return "faction faction-" + S(factions[faction]["name"]).slugify();
}

$(function() {
$("#map .preload").append($("<p>").text("Loading map data..."));
$.getJSON( "map/data.json", data => {
var galaxy = data["systems"];
var factions = data["factions"];

var systems = Object.values(galaxy);
var jumps = [].concat
.apply([], Object.keys(galaxy)
@@ -45,9 +60,9 @@ $(function() {
var svg = d3.select("#map").append("svg")
.attr("viewBox", (-radius) + " " + (-radius) +
" " + scale + " " + scale);
var stars = svg.append("g");
var field = svg.append("g");

stars.selectAll("line")
field.selectAll("line")
.data(jumps)
.enter()
.append("line")
@@ -58,19 +73,16 @@ $(function() {
.attr("class", "jump")
.style("stroke-width", 1);

stars.selectAll("circle")
field.selectAll("circle")
.data(systems)
.enter()
.append("circle")
.attr("cx", d => projx(d["coords"][0]))
.attr("cy", d => projy(d["coords"][2]))
.attr("r", 2)
.attr("class", d => {
var sec = d["security"];
var klass = sec <= 0.0 ? "null" :
Number(Math.max(sec, 0.1)).toFixed(1).replace(".", "_");
return "system sec-" + klass;
});
.attr("r", 2);

var stars = field.selectAll("circle");
var jumps = field.selectAll("line");

var lastk = 1;
var zoom = d3.zoom()
@@ -81,14 +93,12 @@ $(function() {
var clamp = radius * (trans.k - 1);
trans.x = Math.max(Math.min(trans.x, clamp), -clamp);
trans.y = Math.max(Math.min(trans.y, clamp), -clamp);
stars.attr("transform", trans);
field.attr("transform", trans);
$("#map-scale").val(Math.log2(trans.k + 1));

if (Math.abs((trans.k - lastk) / lastk) > 0.1) {
stars.selectAll("circle")
.attr("r", 6 / (trans.k + 2));
stars.selectAll("line")
.style("stroke-width", 2 / (trans.k + 1));
stars.attr("r", 6 / (trans.k + 2));
jumps.style("stroke-width", 2 / (trans.k + 1));
lastk = trans.k;
}
});
@@ -97,7 +107,20 @@ $(function() {
$("#map-scale").on("input", e => {
var k = Math.pow(2, e.target.value) - 1;
zoom.scaleTo(svg, k);
})
});

$('#map .controls input[name="color"]').change(function() {
if (this.value == "sec") {
stars.attr("class", d =>
"system " + get_sec_class(d["security"]));
}
else if (this.value == "faction") {
stars.attr("class", d =>
"system " + get_faction_class(factions, d["faction"]));
}
});

$("#map-color-sec").prop("checked", true).change();

$(window).resize(() => {
svg.style("display", "none")


+ 12
- 1
templates/map/map.mako View File

@@ -7,6 +7,7 @@
</%block>
<%block name="extrajs">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.1/d3.min.js" integrity="sha256-4mL8TQfOJSbg0f42dQw5cKLl2ngQXUSXqfQnvK11M44=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/string.js/3.3.3/string.min.js" integrity="sha256-0AbuA3ySKKYec199lOYKxEcX6NdOl8CeRhquNfddzfs=" crossorigin="anonymous"></script>
${self.support.makejs("map.js")}
</%block>
<div id="map">
@@ -17,6 +18,16 @@
</noscript>
</div>
<div class="controls">
<input id="map-scale" type="range" min="1" max="6" step="0.1" value="1">
<div>
<label for="map-scale">Scale</label>
<input id="map-scale" type="range" min="1" max="6" step="0.1" value="1">
</div>
<div>
Color
<input id="map-color-sec" type="radio" name="color" value="sec">
<label class="label" for="map-color-sec">Security</label>
<input id="map-color-faction" type="radio" name="color" value="faction">
<label class="label" for="map-color-faction">Faction</label>
</div>
</div>
</div>

Loading…
Cancel
Save