silphius/app/react-components/targeting-ghost.jsx
2024-06-27 02:14:47 -05:00

65 lines
2.0 KiB
JavaScript

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({entity, projection, tileLayer}) {
const [radians, setRadians] = useState(0);
useEffect(() => {
const handle = setInterval(() => {
setRadians((radians) => (radians + 0.2) % (Math.PI * 2))
}, 50);
return () => {
clearInterval(handle);
};
}, []);
const {Position, Wielder} = entity;
const projected = Wielder.project(Position.tile, projection)
const ghosts = [];
const {area} = tileLayer;
for (const {x, y} of projected) {
if (x < 0 || y < 0 || x >= area.x || y >= 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}</>;
}