diff --git a/app/react/components/pixi/entities.jsx b/app/react/components/pixi/entities.jsx index e5baf27..1f98426 100644 --- a/app/react/components/pixi/entities.jsx +++ b/app/react/components/pixi/entities.jsx @@ -1,7 +1,7 @@ import {AdjustmentFilter} from '@pixi/filter-adjustment'; import {GlowFilter} from '@pixi/filter-glow'; import {Container} from '@pixi/react'; -import {useCallback, useEffect, useState} from 'react'; +import {useCallback, useEffect, useRef, useState} from 'react'; import {usePacket} from '@/react/context/client.js'; import {useEcs, useEcsTick} from '@/react/context/ecs.js'; @@ -12,7 +12,7 @@ import Entity from './entity.jsx'; export default function Entities({monopolizers, particleWorker}) { const [ecs] = useEcs(); - const [entities, setEntities] = useState({}); + const entities = useRef({}); const [mainEntity] = useMainEntity(); const radians = useRadians(); const [willInteractWith, setWillInteractWith] = useState(0); @@ -20,31 +20,22 @@ export default function Entities({monopolizers, particleWorker}) { new AdjustmentFilter(), new GlowFilter({color: 0x0}), ]); + const [, forceRender] = useState(); useEffect(() => { if (!ecs || !particleWorker) { return; } async function onMessage(diff) { await ecs.apply(diff.data); - const deleted = {}; - const updated = {}; for (const id in diff.data) { if (!diff.data[id]) { - deleted[id] = true; + delete entities.current[id] } else { - updated[id] = ecs.get(id); + entities.current[id] = ecs.get(id); } } - setEntities((entities) => { - for (const id in deleted) { - delete entities[id]; - } - return { - ...entities, - ...updated, - }; - }); + forceRender(Math.random()); } particleWorker.addEventListener('message', onMessage); return () => { @@ -55,31 +46,21 @@ export default function Entities({monopolizers, particleWorker}) { interactionFilters[0].brightness = (pulse * 0.75) + 1; interactionFilters[1].outerStrength = pulse * 0.5; usePacket('EcsChange', async () => { - setEntities({}); + entities.current = {}; }); const onEcsTickEntities = useCallback((payload, ecs) => { - const deleting = {}; - const updating = {}; for (const id in payload) { if ('1' === id) { continue; } const update = payload[id]; if (false === update) { - deleting[id] = true; + delete entities.current[id]; continue; } - updating[id] = ecs.get(id); + entities.current[id] = ecs.get(id); } - setEntities((entities) => { - for (const id in deleting) { - delete entities[id]; - } - return { - ...entities, - ...updating, - }; - }); + forceRender(Math.random()); }, []); useEcsTick(onEcsTickEntities); const onEcsTickParticles = useCallback((payload) => { @@ -101,12 +82,12 @@ export default function Entities({monopolizers, particleWorker}) { }, [mainEntity]); useEcsTick(onEcsTickInteractions); const renderables = []; - for (const id in entities) { + for (const id in entities.current) { const isHighlightedInteraction = 0 === monopolizers.length && id == willInteractWith; renderables.push( );