import {Container} from '@pixi/react'; import {useEffect, useState} from 'react'; import {RESOLUTION} from '@/constants.js'; import {usePacket} from '@/context/client.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'; const NIGHTNESS = 0.1; function calculateDarkness(hour) { let darkness = 0; if (hour >= 21 || hour < 4) { darkness = 0.8; } if (hour >= 4 && hour < 7) { darkness = 0.8 * ((7 - hour) / 3); } if (hour >= 18 && hour < 21) { darkness = 0.8 * ((3 - (21 - hour)) / 3); } return Math.floor(darkness * 1000) / 1000; } export default function Ecs({scale}) { const [ecs] = useEcs(); const [entities, setEntities] = useState({}); const [mainEntity] = useMainEntity(); const [hour, setHour] = useState(10); const [night, setNight] = useState(); useEffect(() => { async function buildNightFilter() { const {ColorMatrixFilter} = await import('@pixi/filter-color-matrix'); class NightFilter extends ColorMatrixFilter { setIntensity(intensity) { const double = NIGHTNESS * 2; const half = NIGHTNESS / 2; const redDown = 1 - (intensity * (1 + double)); const blueUp = 1 - (intensity * (1 - half)); const scale = intensity * NIGHTNESS; this.uniforms.m = [ redDown, -scale, 0, 0, 0, -scale, (1 - intensity), scale, 0, 0, 0, scale, blueUp, 0, 0, 0, 0, 0, 1, 0, ]; } } setNight(new NightFilter()); } buildNightFilter(); }, []); useEffect(() => { if (night) { night.setIntensity(calculateDarkness(hour)); } }, [hour, night]); usePacket('EcsChange', async () => { setEntities({}); }, [setEntities]); useEcsTick((payload) => { if (!ecs) { return; } const updatedEntities = {...entities}; for (const id in payload) { const update = payload[id]; if (false === update) { delete updatedEntities[id]; } else { if ('1' === id) { if (update.Time) { setHour(Math.round(ecs.get(1).Time.hour * 60) / 60); } } 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 (!ecs || !mainEntity) { return false; } const entity = ecs.get(mainEntity); if (!entity) { return false; } const {Direction, Position, Wielder} = entity; const projected = Wielder.activeItem()?.project(Position.tile, Direction.direction) const {Camera} = entity; const {TileLayers: {layers: [layer]}, Water: WaterEcs} = ecs.get(1); const filters = []; if (night) { filters.push(night); } const [cx, cy] = [ Math.round((Camera.x * scale) - RESOLUTION.x / 2), Math.round((Camera.y * scale) - RESOLUTION.y / 2), ]; return ( {WaterEcs && ( )} {projected && ( )} {projected?.length > 0 && ( )} ) }