74 lines
2.1 KiB
JavaScript
74 lines
2.1 KiB
JavaScript
import {Container} from '@pixi/react';
|
|
import {useState} from 'react';
|
|
|
|
import {RESOLUTION} from '@/constants.js';
|
|
import {useEcs, useEcsTick} from '@/context/ecs.js';
|
|
import {useMainEntity} from '@/context/main-entity.js';
|
|
|
|
import Entities from './entities.jsx';
|
|
import TargetingGhost from './targeting-ghost.jsx';
|
|
import TargetingGrid from './targeting-grid.jsx';
|
|
import TileLayer from './tile-layer.jsx';
|
|
import Water from './water.jsx';
|
|
|
|
export default function Ecs({scale}) {
|
|
const [ecs] = useEcs();
|
|
const [entities, setEntities] = useState({});
|
|
const [mainEntity] = useMainEntity();
|
|
useEcsTick((payload) => {
|
|
const updatedEntities = {...entities};
|
|
for (const id in payload) {
|
|
const update = payload[id];
|
|
if (false === update) {
|
|
delete updatedEntities[id];
|
|
}
|
|
else {
|
|
updatedEntities[id] = ecs.get(id);
|
|
if (update.Emitter?.emit) {
|
|
updatedEntities[id].Emitter.emitting = {
|
|
...updatedEntities[id].Emitter.emitting,
|
|
...update.Emitter.emit,
|
|
};
|
|
}
|
|
}
|
|
}
|
|
setEntities(updatedEntities);
|
|
}, [ecs, entities, mainEntity]);
|
|
if (!mainEntity) {
|
|
return false;
|
|
}
|
|
const entity = ecs.get(mainEntity);
|
|
const {Direction, Position, Wielder} = entity;
|
|
const projected = Wielder.activeItem()?.project(Position.tile, Direction.direction)
|
|
const {Camera} = entity;
|
|
const {TileLayers: {layers: [layer]}, Water: {water}} = ecs.get(1);
|
|
const [cx, cy] = [
|
|
Math.round((Camera.x * scale) - RESOLUTION.x / 2),
|
|
Math.round((Camera.y * scale) - RESOLUTION.y / 2),
|
|
];
|
|
return (
|
|
<Container
|
|
scale={scale}
|
|
x={-cx}
|
|
y={-cy}
|
|
>
|
|
<TileLayer tileLayer={layer} />
|
|
<Water tileLayer={layer} water={water} />
|
|
{projected && (
|
|
<TargetingGrid
|
|
tileLayer={layer}
|
|
x={Position.x}
|
|
y={Position.y}
|
|
/>
|
|
)}
|
|
<Entities entities={entities} />
|
|
{projected?.length > 0 && (
|
|
<TargetingGhost
|
|
projected={projected}
|
|
tileLayer={layer}
|
|
/>
|
|
)}
|
|
</Container>
|
|
)
|
|
}
|