refactor: useEcsTick (always after apply)

app/context/client.js

@@ -14,9 +14,12 @@ export function usePacket(type, fn, dependencies) {
     if (!client) {
       return;
     }
-    client.addPacketListener(type, fn);
+    function listener(payload) {
+      fn(payload, client);
+    }
+    client.addPacketListener(type, listener);
     return () => {
-      client.removePacketListener(type, fn);
+      client.removePacketListener(type, listener);
     };
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [client, ...dependencies]);

app/context/ecs.js

@@ -1,5 +1,7 @@
 import {createContext, useContext} from 'react';
 
+import {usePacket} from './client.js';
+
 const context = createContext();
 
 export default context;
@@ -7,3 +9,8 @@ export default context;
 export function useEcs() {
   return useContext(context);
 }
+
+export function useEcsTick(fn, dependencies) {
+  const ecs = useEcs();
+  usePacket(':Ecs', fn, [ecs, ...dependencies]);
+}

app/react-components/ecs.jsx

@@ -2,8 +2,7 @@ import {Container} from '@pixi/react';
 import {useEffect, useState} from 'react';
 
 import {RESOLUTION} from '@/constants.js';
-import {usePacket} from '@/context/client.js';
-import {useEcs} from '@/context/ecs.js';
+import {useEcs, useEcsTick} from '@/context/ecs.js';
 import {useMainEntity} from '@/context/main-entity.js';
 
 import Entities from './entities.jsx';
@@ -25,14 +24,11 @@ export default function EcsComponent() {
           });
     }
   }, [ecs, mainEntity]);
-  usePacket('Tick', (payload) => {
-    if (0 === Object.keys(payload.ecs).length) {
-      return;
-    }
+  useEcsTick((payload) => {
     if (
       mainEntity
-      && payload.ecs[mainEntity]
-      && (payload.ecs[mainEntity].Inventory || payload.ecs[mainEntity].Wielder)
+      && payload[mainEntity]
+      && (payload[mainEntity].Inventory || payload[mainEntity].Wielder)
     ) {
       ecs.get(mainEntity)
         .Wielder.activeItem()
@@ -41,8 +37,8 @@ export default function EcsComponent() {
           });
     }
     const updatedEntities = {...entities};
-    for (const id in payload.ecs) {
-      const update = payload.ecs[id];
+    for (const id in payload) {
+      const update = payload[id];
       if (false === update) {
         delete updatedEntities[id];
       }

app/react-components/ui.jsx

@@ -4,7 +4,7 @@ import addKeyListener from '@/add-key-listener.js';
 import {RESOLUTION} from '@/constants.js';
 import {useClient, usePacket} from '@/context/client.js';
 import {useDebug} from '@/context/debug.js';
-import {useEcs} from '@/context/ecs.js';
+import {useEcs, useEcsTick} from '@/context/ecs.js';
 import {useMainEntity} from '@/context/main-entity.js';
 
 import Disconnected from './disconnected.jsx';
@@ -149,15 +149,20 @@ export default function Ui({disconnected}) {
       }
     });
   }, [client, debug, setDebug]);
-  usePacket('Tick', (payload) => {
+  usePacket('Tick', async (payload, client) => {
     if (0 === Object.keys(payload.ecs).length) {
       return;
     }
-    ecs.apply(payload.ecs);
+    await ecs.apply(payload.ecs);
+    for (const listener of client.listeners[':Ecs'] ?? []) {
+      listener(payload.ecs);
+    }
+  }, [hotbarSlots, mainEntity, setMainEntity]);
+  useEcsTick((payload) => {
     let localMainEntity = mainEntity;
-    for (const id in payload.ecs) {
+    for (const id in payload) {
       const entity = ecs.get(id);
-      const update = payload.ecs[id];
+      const update = payload[id];
       if (update.Sound?.play) {
         for (const sound of update.Sound.play) {
           (new Audio(sound)).play();