refactor: camera and targeting

app/ecs-systems/follow-camera.js

@@ -27,10 +27,9 @@ export default class FollowCamera extends System {
   updateCamera(portion, entity) {
     const {Camera, Position} = entity;
     if (Camera && Position) {
-      const {AreaSize: {x, y}} = this.ecs.get(1);
       const [px, py] = [
-        Math.max(hx, Math.min(Math.round(Position.x), x - hx)),
+        Math.round(Position.x),
-        Math.max(hy, Math.min(Math.round(Position.y), y - hy)),
+        Math.round(Position.y),
       ];
       if (Camera.x === px && Camera.y === py) {
         return;

app/react-components/ecs.jsx

@@ -68,7 +68,10 @@ export default function EcsComponent() {
     >
       <TileLayer tileLayer={TileLayers.layers[0]} />
       {activeTool && (
-        <TargetingGrid entity={entity} />
+        <TargetingGrid
+          ecs={ecs}
+          entity={entity}
+        />
       )}
       <Entities entities={entities} />
       {activeTool && (

app/react-components/targeting-grid.jsx

@@ -7,7 +7,7 @@ import {Sprite} from '@pixi/sprite';
 import {useEffect, useState} from 'react';
 
 const tileSize = {x: 16, y: 16};
-const radius = 17;
+const radius = 9;
 
 function makeFade(renderer) {
   const fade = new Graphics();
@@ -18,7 +18,7 @@ function makeFade(renderer) {
     tileSize.y * (radius / 2),
     ((tileSize.x + tileSize.y) / 2) * (radius * 0.35),
   )
-  fade.filters = [new BlurFilter(((tileSize.x + tileSize.y) / 2) * 2.5)];
+  fade.filters = [new BlurFilter(24)];
   const renderTexture = RenderTexture.create({
     width: tileSize.x * radius,
     height: tileSize.y * radius,
@@ -28,7 +28,7 @@ function makeFade(renderer) {
 }
 
 const TargetingGridInternal = PixiComponent('TargetingGrid', {
-  create: ({app}) => {
+  create: ({app, ecs}) => {
     const fade = makeFade(app.renderer);
     const grid = new Graphics();
     const lineWidth = 1;
@@ -59,9 +59,18 @@ const TargetingGridInternal = PixiComponent('TargetingGrid', {
     innerGrid.mask = fade;
     const container = new Container();
     container.addChild(fade, grid, innerGrid);
-    return container;
+    // Clamp within layer area.
+    const area = new Graphics();
+    area.beginFill(0xffffff);
+    const {TileLayers: {layers: [layer]}} = ecs.get(1)
+    const {x, y} = layer.area;
+    area.drawRect(0, 0, x * tileSize.x, y * tileSize.y);
+    container.mask = area;
+    const top = new Container();
+    top.addChild(container, area);
+    return top;
   },
-  applyProps: (container, oldProps, {entity, radians}) => {
+  applyProps: ({children: [container]}, oldProps, {entity, radians}) => {
     const pulse = (Math.cos(radians) + 1) * 0.5;
     const {Position: {x, y}} = entity;
     const tileX = x - (x % tileSize.x);
@@ -77,7 +86,7 @@ const TargetingGridInternal = PixiComponent('TargetingGrid', {
   },
 })
 
-export default function TargetingGrid({entity}) {
+export default function TargetingGrid({ecs, entity}) {
   const app = useApp();
   const [radians, setRadians] = useState(0);
   useEffect(() => {
@@ -91,6 +100,7 @@ export default function TargetingGrid({entity}) {
   return (
     <TargetingGridInternal
       app={app}
+      ecs={ecs}
       entity={entity}
       radians={radians}
     />