feat: debug entity crosshair

app/react-components/entities.jsx

@@ -1,24 +1,44 @@
-import {Container} from '@pixi/react';
+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 sprites = [];
+  const renderables = [];
   for (const id in entities) {
     const entity = entities[id];
     if (!entity.Position || !entity.Sprite) {
       continue;
     }
-    sprites.push(
-      <Sprite
-        entity={entity}
-        key={id}
-      />
+    renderables.push(
+      <>
+        <Sprite
+          entity={entity}
+          key={id}
+        />
+        <Crosshair x={entity.Position.x} y={entity.Position.y} />
+      </>
     );
   }
   return (
     <Container x={x} y={y}>
-      {sprites}
+      {renderables}
     </Container>
   )
 }