2024-06-12 13:19:16 -05:00
|
|
|
import {Container} from '@pixi/react';
|
2024-07-04 15:17:33 -05:00
|
|
|
import {useEffect, useState} from 'react';
|
2024-06-10 22:42:30 -05:00
|
|
|
|
2024-07-20 04:32:33 -05:00
|
|
|
import {useEcs, useEcsTick} from '@/react/context/ecs.js';
|
|
|
|
import {useMainEntity} from '@/react/context/main-entity.js';
|
|
|
|
// import {useRadians} from '@/react/context/radians.js';
|
2024-07-14 21:44:46 -05:00
|
|
|
// import {TAU} from '@/util/math.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-25 01:46:07 -05:00
|
|
|
import TargetingGrid from './targeting-grid.jsx';
|
2024-06-11 18:42:48 -05:00
|
|
|
import TileLayer from './tile-layer.jsx';
|
2024-06-28 16:38:49 -05:00
|
|
|
import Water from './water.jsx';
|
2024-06-11 15:06:43 -05:00
|
|
|
|
2024-07-04 15:17:33 -05:00
|
|
|
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;
|
|
|
|
}
|
|
|
|
|
2024-07-13 17:08:23 -05:00
|
|
|
export default function Ecs({applyFilters, camera, monopolizers, scale}) {
|
2024-06-22 23:32:57 -05:00
|
|
|
const [ecs] = useEcs();
|
2024-07-10 14:16:47 -05:00
|
|
|
const [filters, setFilters] = useState([]);
|
2024-06-21 04:50:17 -05:00
|
|
|
const [mainEntity] = useMainEntity();
|
2024-07-11 03:09:28 -05:00
|
|
|
const [layers, setLayers] = useState([]);
|
2024-07-04 15:17:33 -05:00
|
|
|
const [hour, setHour] = useState(10);
|
|
|
|
const [night, setNight] = useState();
|
2024-07-11 03:09:28 -05:00
|
|
|
const [projected, setProjected] = useState([]);
|
|
|
|
const [position, setPosition] = useState({x: 0, y: 0});
|
|
|
|
const [water, setWater] = useState();
|
2024-07-14 21:44:46 -05:00
|
|
|
// const radians = useRadians();
|
|
|
|
// const [sine, setSine] = useState();
|
|
|
|
// useEffect(() => {
|
|
|
|
// async function buildSineFilter() {
|
2024-07-20 05:07:33 -05:00
|
|
|
// const {default: SineFilter} = await import('./filters/horizontal-sine.js');
|
2024-07-14 21:44:46 -05:00
|
|
|
// const sine = new SineFilter();
|
|
|
|
// sine.frequency = 1;
|
|
|
|
// sine.magnitude = 3;
|
|
|
|
// setSine(sine);
|
|
|
|
// }
|
|
|
|
// buildSineFilter();
|
|
|
|
// }, []);
|
|
|
|
// useEffect(() => {
|
|
|
|
// if (!sine) {
|
|
|
|
// return;
|
|
|
|
// }
|
|
|
|
// const r = (radians / 8) % TAU;
|
|
|
|
// sine.offset = 6 * (camera.y + r);
|
|
|
|
// sine.magnitude = 2 * (r > Math.PI ? TAU - r : r);
|
|
|
|
// }, [camera, radians, scale, sine]);
|
2024-07-04 15:17:33 -05:00
|
|
|
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]);
|
2024-06-27 05:44:34 -05:00
|
|
|
useEcsTick((payload) => {
|
2024-07-11 03:09:28 -05:00
|
|
|
const entity = ecs.get(mainEntity);
|
2024-06-27 05:44:34 -05:00
|
|
|
for (const id in payload) {
|
|
|
|
const update = payload[id];
|
2024-07-11 03:09:28 -05:00
|
|
|
switch (id) {
|
|
|
|
case '1': {
|
|
|
|
const master = ecs.get(1);
|
|
|
|
if (update.TileLayers) {
|
|
|
|
setLayers(Object.values(master.TileLayers.$$layersProxies));
|
|
|
|
}
|
2024-07-04 15:17:33 -05:00
|
|
|
if (update.Time) {
|
|
|
|
setHour(Math.round(ecs.get(1).Time.hour * 60) / 60);
|
|
|
|
}
|
2024-07-11 03:09:28 -05:00
|
|
|
if (update.Water) {
|
|
|
|
setWater(master.Water.water);
|
|
|
|
}
|
|
|
|
break;
|
2024-07-04 15:17:33 -05:00
|
|
|
}
|
2024-06-10 22:42:30 -05:00
|
|
|
}
|
|
|
|
}
|
2024-07-11 03:09:28 -05:00
|
|
|
if (entity) {
|
|
|
|
const {Direction, Position, Wielder} = entity;
|
|
|
|
setPosition(Position.toJSON());
|
|
|
|
setProjected(Wielder.activeItem()?.project(Position.tile, Direction.direction));
|
|
|
|
}
|
|
|
|
}, [ecs, mainEntity, scale]);
|
2024-07-14 21:44:46 -05:00
|
|
|
useEffect(() => {
|
|
|
|
setFilters(
|
|
|
|
applyFilters
|
|
|
|
? [
|
|
|
|
...(false && night ? [night] : []),
|
|
|
|
// ...(sine ? [sine] : []),
|
|
|
|
]
|
|
|
|
: [],
|
|
|
|
);
|
|
|
|
}, [applyFilters, night])
|
2024-06-10 22:42:30 -05:00
|
|
|
return (
|
2024-06-24 09:19:24 -05:00
|
|
|
<Container
|
2024-07-01 13:44:52 -05:00
|
|
|
scale={scale}
|
2024-07-11 03:09:28 -05:00
|
|
|
x={-camera.x}
|
|
|
|
y={-camera.y}
|
2024-06-24 09:19:24 -05:00
|
|
|
>
|
2024-07-05 18:25:57 -05:00
|
|
|
<Container
|
|
|
|
filters={filters}
|
|
|
|
>
|
2024-07-11 03:09:28 -05:00
|
|
|
{layers.map((layer, i) => (
|
2024-07-07 17:34:40 -05:00
|
|
|
<TileLayer
|
|
|
|
filters={filters}
|
2024-07-11 03:09:28 -05:00
|
|
|
key={i}
|
|
|
|
tileLayer={layer}
|
2024-07-07 17:34:40 -05:00
|
|
|
/>
|
2024-07-11 03:09:28 -05:00
|
|
|
))}
|
2024-07-05 18:25:57 -05:00
|
|
|
</Container>
|
2024-07-11 03:09:28 -05:00
|
|
|
{water && layers[0] && (
|
2024-07-07 17:34:40 -05:00
|
|
|
<Water
|
2024-07-11 03:09:28 -05:00
|
|
|
tileLayer={layers[0]}
|
|
|
|
water={water}
|
2024-07-07 17:34:40 -05:00
|
|
|
/>
|
2024-07-02 22:43:04 -05:00
|
|
|
)}
|
2024-07-11 03:09:28 -05:00
|
|
|
{projected && layers[0] && (
|
2024-06-25 08:41:20 -05:00
|
|
|
<TargetingGrid
|
2024-07-11 03:09:28 -05:00
|
|
|
tileLayer={layers[0]}
|
|
|
|
x={position.x}
|
|
|
|
y={position.y}
|
2024-06-25 08:41:20 -05:00
|
|
|
/>
|
2024-06-25 01:46:07 -05:00
|
|
|
)}
|
2024-07-05 18:25:57 -05:00
|
|
|
<Entities
|
|
|
|
filters={filters}
|
2024-07-13 17:08:23 -05:00
|
|
|
monopolizers={monopolizers}
|
2024-07-05 18:25:57 -05:00
|
|
|
/>
|
2024-07-11 03:09:28 -05:00
|
|
|
{projected?.length > 0 && layers[0] && (
|
2024-06-25 06:20:45 -05:00
|
|
|
<TargetingGhost
|
2024-06-28 08:53:20 -05:00
|
|
|
projected={projected}
|
2024-07-11 03:09:28 -05:00
|
|
|
tileLayer={layers[0]}
|
2024-06-25 06:20:45 -05:00
|
|
|
/>
|
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
|
|
|
)
|
|
|
|
}
|