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 (