Matou-Garou / patches /src /components /PositionIndicator.tsx
Jofthomas's picture
Jofthomas HF staff
bulk2
90cbf22
raw
history blame
810 Bytes
import { useCallback, useState } from 'react';
import { Graphics } from '@pixi/react';
import { Graphics as PixiGraphics } from 'pixi.js';
const ANIMATION_DURATION = 500;
const RADIUS_TILES = 0.25;
export function PositionIndicator(props: {
destination: { x: number; y: number; t: number };
tileDim: number;
}) {
const { destination, tileDim } = props;
const draw = (g: PixiGraphics) => {
g.clear();
const now = Date.now();
if (destination.t + ANIMATION_DURATION <= now) {
return;
}
const progress = (now - destination.t) / ANIMATION_DURATION;
const x = destination.x * tileDim;
const y = destination.y * tileDim;
g.lineStyle(1.5, { h: 0, s: 50, l: 90 }, 0.5);
g.drawCircle(x, y, RADIUS_TILES * progress * tileDim);
};
return <Graphics draw={draw} />;
}