2024-07-07 17:34:40 -05:00
|
|
|
import {simplex2D} from '@leodeslf/simplex-noise';
|
|
|
|
import {Texture} from '@pixi/core';
|
2024-06-12 13:19:16 -05:00
|
|
|
import {Container} from '@pixi/react';
|
2024-07-07 17:34:40 -05:00
|
|
|
import {Sprite} from '@pixi/sprite';
|
2024-07-04 15:17:33 -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-07-03 11:17:36 -05:00
|
|
|
import {usePacket} from '@/context/client.js';
|
2024-06-27 05:44:34 -05:00
|
|
|
import {useEcs, useEcsTick} from '@/context/ecs.js';
|
2024-06-21 04:50:17 -05:00
|
|
|
import {useMainEntity} from '@/context/main-entity.js';
|
2024-07-07 17:34:40 -05:00
|
|
|
import {bresenham, 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-07 17:34:40 -05:00
|
|
|
function createLayerMask(layer) {
|
|
|
|
const {area, hulls, tileSize} = layer;
|
|
|
|
const canvas = window.document.createElement('canvas');
|
|
|
|
if (0 === hulls.length) {
|
|
|
|
return Texture.from(canvas);
|
|
|
|
}
|
|
|
|
[canvas.width, canvas.height] = [area.x * tileSize.x, area.y * tileSize.y];
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
ctx.fillStyle = 'rgba(0, 0, 0, 1)';
|
|
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
ctx.fillStyle = 'rgba(255, 255, 255, 1)';
|
|
|
|
for (let i = 0; i < hulls.length; ++i) {
|
|
|
|
const {x, y} = hulls[i][0];
|
|
|
|
if (7 !== layer.tile({x: Math.floor(x / tileSize.x), y: Math.floor(y / tileSize.y)})) {
|
|
|
|
continue;
|
|
|
|
}
|
|
|
|
const hull = [...hulls[i]];
|
|
|
|
hull.push(hull[0]);
|
|
|
|
ctx.beginPath();
|
|
|
|
ctx.moveTo(hull[0].x, hull[0].y);
|
|
|
|
for (let j = 0; j < hull.length - 1; j++) {
|
|
|
|
const p0 = hull[j + 0];
|
|
|
|
const p1 = hull[j + 1];
|
|
|
|
const points = bresenham(p0, p1);
|
|
|
|
const isReversed = (
|
|
|
|
(p0.x > p1.x && points[0].x < points[points.length - 1].x)
|
|
|
|
|| (p0.y > p1.y && points[0].y < points[points.length - 1].y)
|
|
|
|
);
|
|
|
|
for (
|
|
|
|
let k = (isReversed ? points.length - 1 : 0);
|
|
|
|
(isReversed ? k >= 0 : k < points.length);
|
|
|
|
k += (isReversed ? -1 : 1)
|
|
|
|
) {
|
|
|
|
const {x, y} = points[k];
|
|
|
|
const ANGLE_SCALE = 1000;
|
|
|
|
const WALK_SCALE = 10;
|
|
|
|
const MAGNITUDE = ((tileSize.x + tileSize.y) / 2) * simplex2D(x * 100, y * 100);
|
|
|
|
const w = simplex2D(x * WALK_SCALE, y * WALK_SCALE);
|
|
|
|
const r = TAU * simplex2D(x * ANGLE_SCALE, y * ANGLE_SCALE)
|
|
|
|
ctx.lineTo(
|
|
|
|
x + Math.cos(r) * w * MAGNITUDE,
|
|
|
|
y + -Math.sin(r) * w * MAGNITUDE,
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
ctx.closePath();
|
|
|
|
ctx.fill();
|
|
|
|
}
|
|
|
|
return Texture.from(canvas);
|
|
|
|
}
|
|
|
|
|
2024-07-01 13:44:52 -05:00
|
|
|
export default function Ecs({scale}) {
|
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-21 04:50:17 -05:00
|
|
|
const [mainEntity] = useMainEntity();
|
2024-07-04 15:17:33 -05:00
|
|
|
const [hour, setHour] = useState(10);
|
|
|
|
const [night, setNight] = useState();
|
2024-07-07 17:34:40 -05:00
|
|
|
const [mask, setMask] = useState();
|
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-07-03 11:17:36 -05:00
|
|
|
usePacket('EcsChange', async () => {
|
|
|
|
setEntities({});
|
|
|
|
}, [setEntities]);
|
2024-06-27 05:44:34 -05:00
|
|
|
useEcsTick((payload) => {
|
2024-07-02 20:43:55 -05:00
|
|
|
if (!ecs) {
|
|
|
|
return;
|
|
|
|
}
|
2024-06-10 22:42:30 -05:00
|
|
|
const updatedEntities = {...entities};
|
2024-06-27 05:44:34 -05:00
|
|
|
for (const id in payload) {
|
|
|
|
const update = payload[id];
|
2024-06-26 04:18:46 -05:00
|
|
|
if (false === update) {
|
2024-06-10 22:42:30 -05:00
|
|
|
delete updatedEntities[id];
|
|
|
|
}
|
|
|
|
else {
|
2024-07-04 15:17:33 -05:00
|
|
|
if ('1' === id) {
|
|
|
|
if (update.Time) {
|
|
|
|
setHour(Math.round(ecs.get(1).Time.hour * 60) / 60);
|
|
|
|
}
|
2024-07-07 17:34:40 -05:00
|
|
|
if (update.TileLayers) {
|
|
|
|
const layer1 = ecs.get(1).TileLayers.layer(1);
|
|
|
|
if (layer1) {
|
|
|
|
setMask(new Sprite(createLayerMask(layer1)));
|
|
|
|
}
|
|
|
|
}
|
2024-07-04 15:17:33 -05:00
|
|
|
}
|
2024-06-11 02:52:23 -05:00
|
|
|
updatedEntities[id] = ecs.get(id);
|
2024-06-26 04:18:46 -05:00
|
|
|
if (update.Emitter?.emit) {
|
|
|
|
updatedEntities[id].Emitter.emitting = {
|
|
|
|
...updatedEntities[id].Emitter.emitting,
|
|
|
|
...update.Emitter.emit,
|
|
|
|
};
|
|
|
|
}
|
2024-06-10 22:42:30 -05:00
|
|
|
}
|
|
|
|
}
|
|
|
|
setEntities(updatedEntities);
|
2024-06-24 09:01:30 -05:00
|
|
|
}, [ecs, entities, mainEntity]);
|
2024-07-02 20:43:55 -05:00
|
|
|
if (!ecs || !mainEntity) {
|
2024-06-11 01:41:19 -05:00
|
|
|
return false;
|
|
|
|
}
|
2024-06-24 10:53:01 -05:00
|
|
|
const entity = ecs.get(mainEntity);
|
2024-07-02 20:43:55 -05:00
|
|
|
if (!entity) {
|
|
|
|
return false;
|
|
|
|
}
|
2024-06-28 08:53:20 -05:00
|
|
|
const {Direction, Position, Wielder} = entity;
|
|
|
|
const projected = Wielder.activeItem()?.project(Position.tile, Direction.direction)
|
2024-06-24 10:53:01 -05:00
|
|
|
const {Camera} = entity;
|
2024-07-07 17:34:40 -05:00
|
|
|
const {TileLayers, Water: WaterEcs} = ecs.get(1);
|
|
|
|
const layer0 = TileLayers.layer(0);
|
|
|
|
const layer1 = TileLayers.layer(1);
|
2024-07-04 15:17:33 -05:00
|
|
|
const filters = [];
|
|
|
|
if (night) {
|
|
|
|
filters.push(night);
|
|
|
|
}
|
2024-06-12 19:39:40 -05:00
|
|
|
const [cx, cy] = [
|
2024-07-01 13:44:52 -05:00
|
|
|
Math.round((Camera.x * scale) - RESOLUTION.x / 2),
|
|
|
|
Math.round((Camera.y * scale) - RESOLUTION.y / 2),
|
2024-06-12 19:39:40 -05:00
|
|
|
];
|
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-06-24 09:19:24 -05:00
|
|
|
x={-cx}
|
|
|
|
y={-cy}
|
|
|
|
>
|
2024-07-05 18:25:57 -05:00
|
|
|
<Container
|
|
|
|
filters={filters}
|
|
|
|
>
|
|
|
|
<TileLayer
|
|
|
|
filters={filters}
|
2024-07-07 17:34:40 -05:00
|
|
|
tileLayer={layer0}
|
2024-07-05 18:25:57 -05:00
|
|
|
/>
|
2024-07-07 17:34:40 -05:00
|
|
|
{layer1 && (
|
|
|
|
<TileLayer
|
|
|
|
mask={mask}
|
|
|
|
filters={filters}
|
|
|
|
tileLayer={layer1}
|
|
|
|
/>
|
|
|
|
)}
|
2024-07-05 18:25:57 -05:00
|
|
|
</Container>
|
2024-07-02 22:43:04 -05:00
|
|
|
{WaterEcs && (
|
2024-07-07 17:34:40 -05:00
|
|
|
<Water
|
|
|
|
mask={mask}
|
|
|
|
tileLayer={layer0}
|
|
|
|
water={WaterEcs.water}
|
|
|
|
/>
|
2024-07-02 22:43:04 -05:00
|
|
|
)}
|
2024-06-28 08:53:20 -05:00
|
|
|
{projected && (
|
2024-06-25 08:41:20 -05:00
|
|
|
<TargetingGrid
|
2024-07-07 17:34:40 -05:00
|
|
|
tileLayer={layer0}
|
2024-06-28 08:53:20 -05:00
|
|
|
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
|
|
|
|
entities={entities}
|
|
|
|
filters={filters}
|
|
|
|
/>
|
2024-06-28 08:53:20 -05:00
|
|
|
{projected?.length > 0 && (
|
2024-06-25 06:20:45 -05:00
|
|
|
<TargetingGhost
|
2024-06-28 08:53:20 -05:00
|
|
|
projected={projected}
|
2024-07-07 17:34:40 -05:00
|
|
|
tileLayer={layer0}
|
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
|
|
|
)
|
|
|
|
}
|