silphius/app/react-components/entities.jsx

import {Container, Graphics} from '@pixi/react';
import {useCallback} from 'react';

import {useDebug} from '@/context/debug.js';

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 [debug] = useDebug();
  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}
        />
        {debug && (
          <Crosshair x={entity.Position.x} y={entity.Position.y} />
        )}
      </Container>
    );
  }
  return (
    <>
      {renderables}
    </>
  )
}