52 lines
1.1 KiB
JavaScript
52 lines
1.1 KiB
JavaScript
import {Container, Graphics} from '@pixi/react';
|
|
import {useCallback} from 'react';
|
|
|
|
import Sprite from './sprite.jsx';
|
|
|
|
function Crosshair({x, y}) {
|
|
const draw = useCallback((g) => {
|
|
g.clear();
|
|
g.lineStyle(1, 0x000000);
|
|
g.moveTo(-5, 0);
|
|
g.lineTo(5, 0);
|
|
g.moveTo(0, -5);
|
|
g.lineTo(0, 5);
|
|
g.lineStyle(0.5, 0xffffff);
|
|
g.moveTo(-5, 0);
|
|
g.lineTo(5, 0);
|
|
g.moveTo(0, -5);
|
|
g.lineTo(0, 5);
|
|
g.lineStyle(1, 0x000000);
|
|
g.drawCircle(0, 0, 3);
|
|
g.lineStyle(0.5, 0xffffff);
|
|
g.drawCircle(0, 0, 3);
|
|
}, []);
|
|
return (
|
|
<Graphics draw={draw} x={x} y={y} />
|
|
);
|
|
}
|
|
|
|
export default function Entities({entities}) {
|
|
const renderables = [];
|
|
for (const id in entities) {
|
|
const entity = entities[id];
|
|
if (!entity || !entity.Position || !entity.Sprite) {
|
|
continue;
|
|
}
|
|
renderables.push(
|
|
<Container
|
|
key={id}
|
|
>
|
|
<Sprite
|
|
entity={entity}
|
|
/>
|
|
<Crosshair x={entity.Position.x} y={entity.Position.y} />
|
|
</Container>
|
|
);
|
|
}
|
|
return (
|
|
<>
|
|
{renderables}
|
|
</>
|
|
)
|
|
} |