feat: ecs tile layer

app/ecs-components/tile-layers.js

@@ -0,0 +1,16 @@
+export default {
+  layers: {
+    type: 'array',
+    subtype: {
+      type: 'object',
+      properties: {
+        data: {
+          type: 'array',
+          subtype: {
+            type: 'uint16',
+          },
+        },
+      },
+    },
+  },
+};

app/engine/engine.js

@@ -29,8 +29,21 @@ export default class Engine {
 
   constructor(Server) {
     const ecs = new this.constructor.Ecs();
+    const layerSize = {x: Math.ceil(RESOLUTION.x / 4), y: Math.ceil(RESOLUTION.y / 4)};
     ecs.create({
       AreaSize: {x: RESOLUTION.x * 4, y: RESOLUTION.y * 4},
+      TileLayers: {
+        layers: [
+          {
+            data: (
+              Array(layerSize.x * layerSize.y)
+                .fill(0)
+                .map(() => 1 + Math.floor(Math.random() * 4))
+            ),
+            size: layerSize,
+          }
+        ],
+      },
     });
     ecs.addSystem(ControlMovement);
     ecs.addSystem(ApplyMomentum);
@@ -140,6 +153,8 @@ export default class Engine {
     const mainEntityId = entity.id;
     const ecs = this.ecses[entity.World.world];
     const nearby = ecs.system(UpdateSpatialHash).nearby(entity);
+    // Master entity.
+    nearby.add(ecs.get(1));
     const lastMemory = new Set(memory.values());
     for (const entity of nearby) {
       const {id} = entity;

app/engine/engine.test.js

@@ -18,7 +18,7 @@ test('visibility-based updates', async () => {
   // Tick and get update. Should be a full update.
   engine.tick(1);
   expect(engine.updateFor(undefined))
-    .to.deep.equal({2: ecs.get(2).toJSON(), 3: {MainEntity: {}, ...ecs.get(3).toJSON()}});
+    .to.deep.include({2: ecs.get(2).toJSON(), 3: {MainEntity: {}, ...ecs.get(3).toJSON()}});
   // Tick and get update. Should be a partial update.
   engine.tick(1);
   expect(engine.updateFor(undefined))

app/react-components/ecs.jsx

@@ -1,4 +1,4 @@
-import {Container, Sprite} from '@pixi/react';
+import {Container} from '@pixi/react';
 import {useState} from 'react';
 
 import {RESOLUTION} from '@/constants.js'
@@ -8,8 +8,6 @@ import usePacket from '@/hooks/use-packet.js';
 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));
-
 export default function EcsComponent() {
   const [ecs] = useState(new Ecs());
   const [entities, setEntities] = useState({});
@@ -39,12 +37,13 @@ export default function EcsComponent() {
     return false;
   }
   const {Camera} = mainEntity;
+  const {TileLayers} = ecs.get(1);
   const [cx, cy] = [Camera.x - RESOLUTION.x / 2, Camera.y - RESOLUTION.y / 2];
   return (
     <Container>
       <TileLayer
-        size={{x: 100, y: 100}}
-        tiles={tiles}
+        size={TileLayers.layers[0].size}
+        tiles={TileLayers.layers[0].data}
         tileset="/assets/tileset.json"
         tileSize={{x: 16, y: 16}}
         x={-cx}

app/react-components/entities.jsx

@@ -4,6 +4,9 @@ export default function Entities({entities, x, y}) {
   const sprites = [];
   for (const id in entities) {
     const entity = entities[id];
+    if (!entity.Position || !entity.Sprite) {
+      continue;
+    }
     sprites.push(
       <Sprite
         image={entity.Sprite.image}