svg path render

backend/web.rs

@@ -133,6 +133,9 @@ fn calc_dist(db: &State<Db>, start: String, end: String) -> Result<Json<DistRetu
 struct WebStar {
     id: SolarSystemId,
     name: String,
+    x: f64,
+    y: f64,
+    z: f64,
 }
 #[derive(Debug, Serialize)]
 struct PathStep {
@@ -188,6 +191,9 @@ fn calc_path(
                     from: WebStar {
                         id: last_id,
                         name: db.star_id_to_name[&last_id].clone(),
+                x: from_star.x,
+                y: from_star.y,
+                z: from_star.z,
                     },
                     conn_type: match conn.conn_type {
                         ConnType::Jump => "jump".to_string(),
@@ -198,6 +204,9 @@ fn calc_path(
                     to: WebStar {
                         id: conn.target,
                         name: db.star_id_to_name[&conn.target].clone(),
+                x: from_star.x,
+                y: from_star.y,
+                z: from_star.z,
                     },
                 });
                 last_id = conn.target;

src/routes/calc/path.tsx

@@ -13,12 +13,18 @@ type PathStep = {
   from: {
     name: string;
     id: string;
+    x: number;
+    y: number;
+    z: number;
   };
   conn_type: ConnType;
   distance: number;
   to: {
     name: string;
     id: string;
+    x: number;
+    y: number;
+    z: number;
   };
 };
 
@@ -71,6 +77,110 @@ function TextPath(props: { path: PathStep[] }) {
   );
 }
 
+function SvgPath(props: { path: PathStep[] }) {
+  function jump_color(conn_type: ConnType): string {
+    switch (conn_type) {
+      case "npc_gate":
+        return "green";
+      case "smart_gate":
+        return "blue";
+      case "jump":
+        return "orange";
+    }
+  }
+
+  let path_bounds = {
+    min_x: Infinity,
+    min_y: Infinity,
+    max_x: -Infinity,
+    max_y: -Infinity,
+    min_z: Infinity,
+    max_z: -Infinity,
+  };
+  props.path.forEach((p) => {
+    path_bounds.min_x = Math.min(path_bounds.min_x, p.from.x, p.to.x);
+    path_bounds.min_y = Math.min(path_bounds.min_y, p.from.y, p.to.y);
+    path_bounds.max_x = Math.max(path_bounds.max_x, p.from.x, p.to.x);
+    path_bounds.max_y = Math.max(path_bounds.max_y, p.from.y, p.to.y);
+    path_bounds.min_z = Math.min(path_bounds.min_z, p.from.z, p.to.z);
+    path_bounds.max_z = Math.max(path_bounds.max_z, p.from.z, p.to.z);
+  });
+  const content_width = path_bounds.max_x - path_bounds.min_x;
+  const content_height = path_bounds.max_z - path_bounds.min_z;
+  const margin = Math.max(content_width, content_height) * 0.1;
+  path_bounds = {
+    min_x: path_bounds.min_x - margin,
+    max_x: path_bounds.max_x + margin,
+    min_y: path_bounds.min_y - margin,
+    max_y: path_bounds.max_y + margin,
+    min_z: path_bounds.min_z - margin,
+    max_z: path_bounds.max_z + margin,
+  };
+
+  const width = path_bounds.max_x - path_bounds.min_x;
+  const height = path_bounds.max_z - path_bounds.min_z;
+  const scale = 1 / Math.max(width, height);
+
+  const path2d: PathStep[] = props.path.map((n) => ({
+    from: {
+      id: n.from.id,
+      name: n.from.name,
+      x: (n.from.x - path_bounds.min_x) * scale,
+      y: 1 - (n.from.z - path_bounds.min_z) * scale,
+      z: 0,
+    },
+    conn_type: n.conn_type,
+    distance: n.distance,
+    to: {
+      id: n.to.id,
+      name: n.to.name,
+      x: (n.to.x - path_bounds.min_x) * scale,
+      y: 1 - (n.to.z - path_bounds.min_z) * scale,
+      z: 0,
+    },
+  }));
+
+  return (
+    <>
+      <svg
+        width="100%"
+        viewBox="0 0 1024 1024"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <rect x="0" y="0" width="1024" height="1024" fill="black" />
+        {path2d.map((p, i) => {
+          const x1 = p.from.x * 1024;
+          const y1 = p.from.y * 1024;
+          const x2 = p.to.x * 1024;
+          const y2 = p.to.y * 1024;
+          return (
+            <g key={i}>
+              <line
+                x1={x1}
+                y1={y1}
+                x2={x2}
+                y2={y2}
+                stroke={jump_color(p.conn_type)}
+                strokeWidth={2}
+              />
+              <circle cx={x1} cy={y1} r={5} fill="blue" />
+              <circle cx={x2} cy={y2} r={5} fill="blue" />
+              {i == 0 ? (
+                <text x={x1} y={y1} dy={-10} textAnchor="middle" fill="white">
+                  {p.from.name}
+                </text>
+              ) : null}
+              <text x={x2} y={y2} dy={-10} textAnchor="middle" fill="white">
+                {p.to.name}
+              </text>
+            </g>
+          );
+        })}
+      </svg>
+    </>
+  );
+}
+
 function PathFinder() {
   const [start, setStart] = useSessionStorage<string>("start", "E.G1G.6GD");
   const [end, setEnd] = useSessionStorage<string>("end", "Nod");
@@ -87,11 +197,12 @@ function PathFinder() {
   const [path, setPath] = useState<null | PathStep[]>(null);
   const [error, setError] = useState<null | Error>(null);
 
+  /*
   useEffect(() => {
     setPath(null);
     setError(null);
   }, [start, end, jump, optimize]);
-
+*/
   function submit(e: FormEvent<HTMLFormElement>) {
     e.preventDefault();
     form_api(e.target as HTMLFormElement, 2, setPath, setError);
@@ -181,6 +292,7 @@ function PathFinder() {
           </tbody>
         </table>
       </form>
+      {path && <SvgPath path={path} />}
     </section>
   );
 }