silphius/app/react-components/targeting-ghost.jsx

import {Container} from '@pixi/display';
import {Graphics} from '@pixi/graphics';
import {PixiComponent} from '@pixi/react';
import {useEffect, useState} from 'react';

const tileSize = {x: 16, y: 16};

const TargetingGhostInternal = PixiComponent('TargetingGhost', {
  create: () => {
    // Solid target square.
    const target = new Graphics();
    target.lineStyle(1, 0xffffff);
    target.drawRect(0.5, 0.5, tileSize.x, tileSize.y);
    target.pivot = {x: tileSize.x / 2, y: tileSize.y / 2};
    // Inner spinny part.
    const targetInner = new Graphics();
    targetInner.alpha = 0.6;
    targetInner.lineStyle(3, 0x333333);
    targetInner.beginFill(0xdddddd);
    targetInner.pivot = {x: tileSize.x / 2, y: tileSize.y / 2};
    targetInner.drawRect(0, 0, tileSize.x, tileSize.y);
    targetInner.position.x = 0.5;
    targetInner.position.y = 0.5;
    // ...
    const container = new Container();
    container.addChild(target, targetInner);
    return container;
  },
  applyProps: (container, oldProps, {x, y, radians}) => {
    container.position.set(x, y);
    container.children[1].rotation = radians / 4;
    container.children[1].scale.set(0.3 + 0.2 * (Math.cos(radians) + 1));
  },
})

export default function TargetingGhost({ecs, entity, projection}) {
  const [radians, setRadians] = useState(0);
  useEffect(() => {
    const handle = setInterval(() => {
      setRadians((radians) => (radians + 0.2) % (Math.PI * 2))
    }, 50);
    return () => {
      clearInterval(handle);
    };
  }, []);
  const {TileLayers: {layers: [layer]}} = ecs.get(1);
  const {Position, Wielder} = entity;
  const projected = Wielder.project(Position.tile, projection)
  const ghosts = [];
  for (const {x, y} of projected) {
    if (x < 0 || y < 0 || x >= layer.area.x || y >= layer.area.y) {
      continue;
    }
    ghosts.push(
      <TargetingGhostInternal
        key={JSON.stringify({x, y})}
        x={x * tileSize.x + tileSize.x * 0.5}
        y={y * tileSize.y + tileSize.y * 0.5}
        radians={radians}
      />
    );
  }
  return <>{ghosts}</>;
}