refactor: no layer masks for now

app/react-components/ecs.jsx

@@ -1,13 +1,10 @@
-import {Texture} from '@pixi/core';
 import {Container} from '@pixi/react';
-import {Sprite} from '@pixi/sprite';
 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 {bresenham, createNoise2D, TAU} from '@/util/math.js';
 
 import Entities from './entities.jsx';
 import TargetingGhost from './targeting-ghost.jsx';
@@ -17,8 +14,6 @@ import Water from './water.jsx';
 
 const NIGHTNESS = 0.1;
 
-const simplex2D = createNoise2D();
-
 function calculateDarkness(hour) {
   let darkness = 0;
   if (hour >= 21 || hour < 4) {
@@ -33,53 +28,6 @@ function calculateDarkness(hour) {
   return Math.floor(darkness * 1000) / 1000;
 }
 
-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 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);
-}
-
 export default function Ecs({applyFilters, scale}) {
   const [ecs] = useEcs();
   const [entities, setEntities] = useState({});
@@ -87,7 +35,6 @@ export default function Ecs({applyFilters, scale}) {
   const [mainEntity] = useMainEntity();
   const [hour, setHour] = useState(10);
   const [night, setNight] = useState();
-  const [mask, setMask] = useState();
   useEffect(() => {
     async function buildNightFilter() {
       const {ColorMatrixFilter} = await import('@pixi/filter-color-matrix');
@@ -133,12 +80,6 @@ export default function Ecs({applyFilters, scale}) {
           if (update.Time) {
             setHour(Math.round(ecs.get(1).Time.hour * 60) / 60);
           }
-          if (update.TileLayers) {
-            const layer1 = ecs.get(1).TileLayers.layer(1);
-            if (layer1) {
-              setMask(new Sprite(createLayerMask(layer1)));
-            }
-          }
         }
         updatedEntities[id] = ecs.get(id);
         if (update.Emitter?.emit) {
@@ -190,7 +131,6 @@ export default function Ecs({applyFilters, scale}) {
         />
         {layer1 && (
           <TileLayer
-            mask={mask}
             filters={filters}
             tileLayer={layer1}
           />
@@ -198,7 +138,6 @@ export default function Ecs({applyFilters, scale}) {
       </Container>
       {WaterEcs && (
         <Water
-          mask={mask}
           tileLayer={layer0}
           water={WaterEcs.water}
         />

app/util/noise.js

@@ -0,0 +1,56 @@
+// import {Texture} from '@pixi/core';
+// import {Sprite} from '@pixi/sprite';
+
+import {bresenham, createNoise2D, TAU} from '@/util/math.js';
+
+const simplex2D = createNoise2D();
+
+// TODO - 3d noise around a circumference of length polygon perimeter
+
+export 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 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);
+}
+