2024-06-12 13:19:16 -05:00
|
|
|
import {Container} from '@pixi/react';
|
2024-06-24 09:01:30 -05:00
|
|
|
import {useEffect, useState} from 'react';
|
2024-06-10 22:42:30 -05:00
|
|
|
|
2024-06-13 12:24:32 -05:00
|
|
|
import {RESOLUTION} from '@/constants.js';
|
2024-06-22 23:32:57 -05:00
|
|
|
import {useEcs} from '@/context/ecs.js';
|
2024-06-21 04:50:17 -05:00
|
|
|
import {useMainEntity} from '@/context/main-entity.js';
|
2024-06-11 18:42:48 -05:00
|
|
|
import usePacket from '@/hooks/use-packet.js';
|
2024-06-10 22:42:30 -05:00
|
|
|
|
2024-06-11 18:42:48 -05:00
|
|
|
import Entities from './entities.jsx';
|
2024-06-18 04:36:44 -05:00
|
|
|
import TargetingGhost from './targeting-ghost.jsx';
|
2024-06-11 18:42:48 -05:00
|
|
|
import TileLayer from './tile-layer.jsx';
|
2024-06-11 15:06:43 -05:00
|
|
|
|
2024-06-24 09:01:30 -05:00
|
|
|
function isEntityHoldingTool(entity) {
|
|
|
|
const {Inventory, Wielder} = entity;
|
|
|
|
const item = Inventory.item(Wielder.activeSlot + 1);
|
|
|
|
return !!item && [
|
|
|
|
'/assets/hoe',
|
|
|
|
].includes(item.source);
|
|
|
|
}
|
|
|
|
|
2024-06-10 22:42:30 -05:00
|
|
|
export default function EcsComponent() {
|
2024-06-22 23:32:57 -05:00
|
|
|
const [ecs] = useEcs();
|
2024-06-10 22:42:30 -05:00
|
|
|
const [entities, setEntities] = useState({});
|
2024-06-24 09:01:30 -05:00
|
|
|
const [isTool, setIsTool] = useState(false);
|
2024-06-21 04:50:17 -05:00
|
|
|
const [mainEntity] = useMainEntity();
|
2024-06-24 09:01:30 -05:00
|
|
|
useEffect(() => {
|
|
|
|
if (mainEntity) {
|
|
|
|
setIsTool(isEntityHoldingTool(ecs.get(mainEntity)));
|
|
|
|
}
|
|
|
|
}, [ecs, mainEntity]);
|
2024-06-10 22:42:30 -05:00
|
|
|
usePacket('Tick', (payload) => {
|
|
|
|
if (0 === Object.keys(payload.ecs).length) {
|
|
|
|
return;
|
|
|
|
}
|
2024-06-24 09:01:30 -05:00
|
|
|
if (
|
|
|
|
mainEntity
|
|
|
|
&& payload.ecs[mainEntity]
|
|
|
|
&& (payload.ecs[mainEntity].Inventory || payload.ecs[mainEntity].Wielder)
|
|
|
|
) {
|
|
|
|
setIsTool(isEntityHoldingTool(ecs.get(mainEntity)));
|
|
|
|
}
|
2024-06-10 22:42:30 -05:00
|
|
|
const updatedEntities = {...entities};
|
|
|
|
for (const id in payload.ecs) {
|
|
|
|
if (false === payload.ecs[id]) {
|
|
|
|
delete updatedEntities[id];
|
|
|
|
}
|
|
|
|
else {
|
2024-06-11 02:52:23 -05:00
|
|
|
updatedEntities[id] = ecs.get(id);
|
2024-06-10 22:42:30 -05:00
|
|
|
}
|
|
|
|
}
|
|
|
|
setEntities(updatedEntities);
|
2024-06-24 09:01:30 -05:00
|
|
|
}, [ecs, entities, mainEntity]);
|
2024-06-11 01:41:19 -05:00
|
|
|
if (!mainEntity) {
|
|
|
|
return false;
|
|
|
|
}
|
2024-06-21 04:50:17 -05:00
|
|
|
const {Camera, Position} = ecs.get(mainEntity);
|
2024-06-12 13:19:16 -05:00
|
|
|
const {TileLayers} = ecs.get(1);
|
2024-06-12 19:39:40 -05:00
|
|
|
const [cx, cy] = [
|
|
|
|
Math.round(Camera.x - RESOLUTION.x / 2),
|
|
|
|
Math.round(Camera.y - RESOLUTION.y / 2),
|
|
|
|
];
|
2024-06-10 22:42:30 -05:00
|
|
|
return (
|
2024-06-24 09:19:24 -05:00
|
|
|
<Container
|
|
|
|
x={-cx}
|
|
|
|
y={-cy}
|
|
|
|
>
|
|
|
|
<TileLayer tileLayer={TileLayers.layers[0]} />
|
|
|
|
<Entities entities={entities} />
|
2024-06-24 09:01:30 -05:00
|
|
|
{isTool && (
|
|
|
|
<TargetingGhost
|
2024-06-24 09:19:24 -05:00
|
|
|
x={Position.x}
|
|
|
|
y={Position.y}
|
2024-06-24 09:01:30 -05:00
|
|
|
/>
|
|
|
|
)}
|
2024-06-11 15:06:43 -05:00
|
|
|
</Container>
|
2024-06-10 22:42:30 -05:00
|
|
|
)
|
|
|
|
}
|