refactor: entities

app/react-components/ecs.jsx

@@ -3,9 +3,10 @@ import {useState} from 'react';
 
 import {RESOLUTION} from '@/constants.js'
 import Ecs from '@/engine/ecs.js';
-import usePacket from '@/hooks/use-packet';
+import usePacket from '@/hooks/use-packet.js';
 
-import TileLayer from './tile-layer';
+import Entities from './entities.jsx';
+import TileLayer from './tile-layer.jsx';
 
 const tiles = Array(100 * 100).fill(0).map(() => 1 + Math.floor(Math.random() * 4));
 
@@ -39,18 +40,6 @@ export default function EcsComponent() {
   }
   const {Camera} = mainEntity;
   const [cx, cy] = [Camera.x - RESOLUTION.x / 2, Camera.y - RESOLUTION.y / 2];
-  const sprites = [];
-  for (const id in entities) {
-    const entity = entities[id];
-    sprites.push(
-      <Sprite
-        image={entity.Sprite.image}
-        key={id}
-        x={entity.Position.x - cx}
-        y={entity.Position.y - cy}
-      />
-    );
-  }
   return (
     <Container>
       <TileLayer
@@ -61,7 +50,11 @@ export default function EcsComponent() {
         x={-cx}
         y={-cy}
       />
-      {sprites}
+      <Entities
+        entities={entities}
+        x={-cx}
+        y={-cy}
+      />
     </Container>
   )
 }

app/react-components/entities.jsx

@@ -0,0 +1,21 @@
+import {Container, Sprite} from '@pixi/react';
+
+export default function Entities({entities, x, y}) {
+  const sprites = [];
+  for (const id in entities) {
+    const entity = entities[id];
+    sprites.push(
+      <Sprite
+        image={entity.Sprite.image}
+        key={id}
+        x={entity.Position.x}
+        y={entity.Position.y}
+      />
+    );
+  }
+  return (
+    <Container x={x} y={y}>
+      {sprites}
+    </Container>
+  )
+}

public/assets/tileset.js

@@ -1,3 +1,5 @@
+#!/usr/bin/env node
+
 import {writeFileSync} from 'node:fs';
 import {basename, dirname, extname, join} from 'node:path';