diff --git a/app/ecs-systems/follow-camera.js b/app/ecs-systems/follow-camera.js
index 9276612..d8c508c 100644
--- a/app/ecs-systems/follow-camera.js
+++ b/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.max(hy, Math.min(Math.round(Position.y), y - hy)),
+ Math.round(Position.x),
+ Math.round(Position.y),
];
if (Camera.x === px && Camera.y === py) {
return;
diff --git a/app/react-components/ecs.jsx b/app/react-components/ecs.jsx
index fc95bc3..5439ac6 100644
--- a/app/react-components/ecs.jsx
+++ b/app/react-components/ecs.jsx
@@ -68,7 +68,10 @@ export default function EcsComponent() {
>
{activeTool && (
-
+
)}
{activeTool && (
diff --git a/app/react-components/targeting-grid.jsx b/app/react-components/targeting-grid.jsx
index e3393d4..e4992c0 100644
--- a/app/react-components/targeting-grid.jsx
+++ b/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 (