45 lines
945 B
JavaScript
45 lines
945 B
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, 0xffff00);
|
|
g.moveTo(-5, 0);
|
|
g.lineTo(5, 0);
|
|
g.moveTo(0, -5);
|
|
g.lineTo(0, 5);
|
|
g.lineStyle(1, 0xffffff);
|
|
g.drawCircle(0, 0, 3);
|
|
}, []);
|
|
return (
|
|
<Graphics draw={draw} x={x} y={y} />
|
|
);
|
|
}
|
|
|
|
export default function Entities({entities, x, y}) {
|
|
const renderables = [];
|
|
for (const id in entities) {
|
|
const entity = entities[id];
|
|
if (!entity.Position || !entity.Sprite) {
|
|
continue;
|
|
}
|
|
renderables.push(
|
|
<Container
|
|
key={id}
|
|
>
|
|
<Sprite
|
|
entity={entity}
|
|
/>
|
|
<Crosshair x={entity.Position.x} y={entity.Position.y} />
|
|
</Container>
|
|
);
|
|
}
|
|
return (
|
|
<Container x={x} y={y}>
|
|
{renderables}
|
|
</Container>
|
|
)
|
|
} |