A corporation manager and dashboard for EVE Online
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

map.js 4.4 KiB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. var get_bounds = function(galaxy) {
  2. var xmin = Infinity, xmax = -Infinity,
  3. ymin = Infinity, ymax = -Infinity;
  4. for (var sid in galaxy) {
  5. var system = galaxy[sid];
  6. var x = system["coords"][0];
  7. var y = system["coords"][2];
  8. if (x < xmin) xmin = x;
  9. if (x > xmax) xmax = x;
  10. if (y < ymin) ymin = y;
  11. if (y > ymax) ymax = y;
  12. }
  13. var xspan = xmax - xmin;
  14. var yspan = ymax - ymin;
  15. return [xmin, ymin, xspan, yspan];
  16. }
  17. var get_sec_class = function(sec) {
  18. return "sec-" + (
  19. sec <= 0.0 ? "null" :
  20. Number(Math.max(sec, 0.1)).toFixed(1).replace(".", "_"));
  21. }
  22. var get_faction_class = function(factions, faction) {
  23. if (faction < 0)
  24. return "neutral";
  25. if (factions[faction] !== undefined)
  26. return "faction faction-" + S(factions[faction]["name"]).slugify();
  27. }
  28. $(function() {
  29. $("#map .preload").append($("<p>").text("Loading map data..."));
  30. $.getJSON( "map/data.json", data => {
  31. var galaxy = data["systems"];
  32. var factions = data["factions"];
  33. var systems = Object.values(galaxy);
  34. var jumps = [].concat
  35. .apply([], Object.keys(galaxy)
  36. .map(src => galaxy[src]["gates"]
  37. .map(dst => [parseInt(src), dst])))
  38. .filter(pair => pair[0] < pair[1]);
  39. var [xmin, ymin, xspan, yspan] = get_bounds(galaxy);
  40. var scale = 1000;
  41. var radius = scale / 2;
  42. var projx = x => ((x - xmin) / xspan - 0.5) * (scale * 0.99);
  43. var projy = y => -((y - ymin) / yspan - 0.5) * (scale * 0.99);
  44. $("#container > div").addClass("map-1");
  45. $("main").addClass("map-2");
  46. $("#map").addClass("map-3");
  47. $("#map .preload").remove();
  48. $("#map .controls").show();
  49. var svg = d3.select("#map").append("svg")
  50. .attr("viewBox", (-radius) + " " + (-radius) +
  51. " " + scale + " " + scale);
  52. var field = svg.append("g");
  53. field.selectAll("line")
  54. .data(jumps)
  55. .enter()
  56. .append("line")
  57. .attr("x1", d => projx(galaxy[d[0]]["coords"][0]))
  58. .attr("y1", d => projy(galaxy[d[0]]["coords"][2]))
  59. .attr("x2", d => projx(galaxy[d[1]]["coords"][0]))
  60. .attr("y2", d => projy(galaxy[d[1]]["coords"][2]))
  61. .attr("class", "jump")
  62. .style("stroke-width", 1);
  63. field.selectAll("circle")
  64. .data(systems)
  65. .enter()
  66. .append("circle")
  67. .attr("cx", d => projx(d["coords"][0]))
  68. .attr("cy", d => projy(d["coords"][2]))
  69. .attr("r", 2);
  70. var stars = field.selectAll("circle");
  71. var jumps = field.selectAll("line");
  72. var lastk = 1;
  73. var zoom = d3.zoom()
  74. .extent([[-radius, -radius], [radius, radius]])
  75. .scaleExtent([1, 63])
  76. .on("zoom", () => {
  77. var trans = d3.event.transform;
  78. var clamp = radius * (trans.k - 1);
  79. trans.x = Math.max(Math.min(trans.x, clamp), -clamp);
  80. trans.y = Math.max(Math.min(trans.y, clamp), -clamp);
  81. field.attr("transform", trans);
  82. $("#map-scale").val(Math.log2(trans.k + 1));
  83. if (Math.abs((trans.k - lastk) / lastk) > 0.1) {
  84. stars.attr("r", 6 / (trans.k + 2));
  85. jumps.style("stroke-width", 2 / (trans.k + 1));
  86. lastk = trans.k;
  87. }
  88. });
  89. svg.call(zoom);
  90. $("#map-scale").on("input", e => {
  91. var k = Math.pow(2, e.target.value) - 1;
  92. zoom.scaleTo(svg, k);
  93. });
  94. $('#map .controls input[name="color"]').change(function() {
  95. if (this.value == "sec") {
  96. stars.attr("class", d =>
  97. "system " + get_sec_class(d["security"]));
  98. }
  99. else if (this.value == "faction") {
  100. stars.attr("class", d =>
  101. "system " + get_faction_class(factions, d["faction"]));
  102. }
  103. });
  104. $("#map-color-sec").prop("checked", true).change();
  105. $(window).resize(() => {
  106. svg.style("display", "none")
  107. .attr("width", $("#map").width())
  108. .attr("height", $("#map").height())
  109. .style("display", "");
  110. });
  111. $(window).resize();
  112. });
  113. });