35 lines
914 B
TypeScript
35 lines
914 B
TypeScript
import { Graphics } from "pixi.js";
|
|
import { useCallback } from "react";
|
|
import { PATH_COLOR, PATH_WIDTH } from "./Constants";
|
|
import { coordinatesToLocal } from "./utils";
|
|
|
|
interface TravelPathProps {
|
|
points: { x: number; y: number }[];
|
|
}
|
|
|
|
export function TravelPath({ points }: Readonly<TravelPathProps>) {
|
|
const draw = useCallback(
|
|
(g: Graphics) => {
|
|
g.clear();
|
|
const coordStart = coordinatesToLocal(points[0].x, points[0].y);
|
|
g.moveTo(coordStart.x, coordStart.y);
|
|
for (let i = 1; i <= points.length - 1; i++) {
|
|
const coordinates = coordinatesToLocal(points[i].x, points[i].y);
|
|
g.lineTo(coordinates.x, coordinates.y);
|
|
}
|
|
g.stroke({
|
|
color: PATH_COLOR,
|
|
width: PATH_WIDTH,
|
|
});
|
|
},
|
|
[points]
|
|
);
|
|
|
|
if (points.length === 0) {
|
|
console.error("points is empty");
|
|
return null;
|
|
}
|
|
|
|
return <pixiGraphics draw={draw} />;
|
|
}
|