2024-07-01 18:12:53 -05:00
|
|
|
import {AdjustmentFilter} from '@pixi/filter-adjustment';
|
|
|
|
import {GlowFilter} from '@pixi/filter-glow';
|
2024-06-27 13:57:18 -05:00
|
|
|
import {Container} from '@pixi/react';
|
2024-07-14 21:07:46 -05:00
|
|
|
import {useState} from 'react';
|
2024-07-01 18:12:53 -05:00
|
|
|
|
2024-07-20 04:32:33 -05:00
|
|
|
import {usePacket} from '@/react/context/client.js';
|
|
|
|
import {useEcs, useEcsTick} from '@/react/context/ecs.js';
|
|
|
|
import {useMainEntity} from '@/react/context/main-entity.js';
|
|
|
|
import {useRadians} from '@/react/context/radians.js';
|
2024-06-27 13:57:18 -05:00
|
|
|
|
2024-06-27 02:57:28 -05:00
|
|
|
import Entity from './entity.jsx';
|
2024-06-18 07:24:20 -05:00
|
|
|
|
2024-07-13 17:08:23 -05:00
|
|
|
export default function Entities({filters, monopolizers}) {
|
2024-07-01 18:12:53 -05:00
|
|
|
const [ecs] = useEcs();
|
2024-07-11 03:09:28 -05:00
|
|
|
const [entities, setEntities] = useState({});
|
2024-07-01 18:12:53 -05:00
|
|
|
const [mainEntity] = useMainEntity();
|
2024-07-14 21:07:46 -05:00
|
|
|
const radians = useRadians();
|
2024-07-01 18:12:53 -05:00
|
|
|
const [willInteractWith, setWillInteractWith] = useState(0);
|
2024-07-14 21:07:46 -05:00
|
|
|
const [interactionFilters] = useState([
|
|
|
|
new AdjustmentFilter(),
|
|
|
|
new GlowFilter({color: 0x0}),
|
|
|
|
]);
|
|
|
|
const pulse = (Math.cos(radians / 4) + 1) * 0.5;
|
2024-07-05 18:25:57 -05:00
|
|
|
interactionFilters[0].brightness = (pulse * 0.75) + 1;
|
|
|
|
interactionFilters[1].outerStrength = pulse * 0.5;
|
2024-07-11 03:09:28 -05:00
|
|
|
usePacket('EcsChange', async () => {
|
|
|
|
setEntities({});
|
|
|
|
}, [setEntities]);
|
|
|
|
useEcsTick((payload) => {
|
|
|
|
if (!ecs) {
|
|
|
|
return;
|
|
|
|
}
|
2024-07-13 16:33:23 -05:00
|
|
|
const deleting = {};
|
|
|
|
const updating = {};
|
2024-07-11 03:09:28 -05:00
|
|
|
for (const id in payload) {
|
2024-07-11 16:44:41 -05:00
|
|
|
if ('1' === id) {
|
|
|
|
continue;
|
|
|
|
}
|
2024-07-11 03:09:28 -05:00
|
|
|
const update = payload[id];
|
|
|
|
if (false === update) {
|
2024-07-13 16:33:23 -05:00
|
|
|
deleting[id] = true;
|
|
|
|
continue;
|
|
|
|
}
|
|
|
|
updating[id] = ecs.get(id);
|
|
|
|
if (update.Emitter?.emit) {
|
|
|
|
updating[id].Emitter.emitting = {
|
|
|
|
...updating[id].Emitter.emitting,
|
|
|
|
...update.Emitter.emit,
|
|
|
|
};
|
2024-07-11 03:09:28 -05:00
|
|
|
}
|
2024-07-13 16:33:23 -05:00
|
|
|
}
|
|
|
|
setEntities((entities) => {
|
|
|
|
for (const id in deleting) {
|
|
|
|
delete entities[id];
|
2024-07-11 03:09:28 -05:00
|
|
|
}
|
2024-07-13 16:33:23 -05:00
|
|
|
return {
|
|
|
|
...entities,
|
|
|
|
...updating,
|
|
|
|
};
|
|
|
|
});
|
|
|
|
}, [ecs]);
|
|
|
|
useEcsTick(() => {
|
|
|
|
if (!ecs) {
|
|
|
|
return;
|
2024-07-11 03:09:28 -05:00
|
|
|
}
|
|
|
|
const main = ecs.get(mainEntity);
|
|
|
|
if (main) {
|
|
|
|
setWillInteractWith(main.Interacts.willInteractWith);
|
|
|
|
}
|
2024-07-13 16:33:23 -05:00
|
|
|
}, [ecs, mainEntity]);
|
2024-06-18 07:24:20 -05:00
|
|
|
const renderables = [];
|
2024-06-11 18:42:48 -05:00
|
|
|
for (const id in entities) {
|
2024-07-13 17:08:23 -05:00
|
|
|
const isHighlightedInteraction = 0 === monopolizers.length && id == willInteractWith;
|
2024-06-18 07:24:20 -05:00
|
|
|
renderables.push(
|
2024-06-27 02:57:28 -05:00
|
|
|
<Entity
|
2024-07-10 14:16:47 -05:00
|
|
|
filters={isHighlightedInteraction ? interactionFilters : null}
|
2024-06-27 02:57:28 -05:00
|
|
|
entity={entities[id]}
|
2024-06-21 04:50:17 -05:00
|
|
|
key={id}
|
2024-06-27 02:57:28 -05:00
|
|
|
/>
|
2024-06-11 18:42:48 -05:00
|
|
|
);
|
|
|
|
}
|
2024-06-27 13:57:18 -05:00
|
|
|
return (
|
|
|
|
<Container
|
2024-07-10 14:16:47 -05:00
|
|
|
filters={filters}
|
2024-06-27 13:57:18 -05:00
|
|
|
sortableChildren
|
|
|
|
>
|
|
|
|
{renderables}
|
|
|
|
</Container>
|
|
|
|
);
|
2024-06-11 18:42:48 -05:00
|
|
|
}
|