refactor: share less

app/react-components/ecs.jsx

@@ -63,7 +63,7 @@ export default function EcsComponent() {
   }
   const entity = ecs.get(mainEntity);
   const {Camera} = entity;
-  const {TileLayers} = ecs.get(1);
+  const {TileLayers: {layers: [layer]}} = ecs.get(1);
   const [cx, cy] = [
     Math.round(Camera.x - RESOLUTION.x / 2),
     Math.round(Camera.y - RESOLUTION.y / 2),
@@ -73,19 +73,19 @@ export default function EcsComponent() {
       x={-cx}
       y={-cy}
     >
-      <TileLayer tileLayer={TileLayers.layers[0]} />
+      <TileLayer tileLayer={layer} />
       {activeTool && (
         <TargetingGrid
-          ecs={ecs}
           entity={entity}
+          tileLayer={layer}
         />
       )}
       <Entities entities={entities} />
       {activeTool && (
         <TargetingGhost
-          ecs={ecs}
           entity={entity}
           projection={activeTool.projection}
+          tileLayer={layer}
         />
       )}
     </Container>

app/react-components/targeting-ghost.jsx

@@ -33,7 +33,7 @@ const TargetingGhostInternal = PixiComponent('TargetingGhost', {
   },
 })
 
-export default function TargetingGhost({ecs, entity, projection}) {
+export default function TargetingGhost({entity, projection, tileLayer}) {
   const [radians, setRadians] = useState(0);
   useEffect(() => {
     const handle = setInterval(() => {
@@ -43,12 +43,12 @@ export default function TargetingGhost({ecs, entity, projection}) {
       clearInterval(handle);
     };
   }, []);
-  const {TileLayers: {layers: [layer]}} = ecs.get(1);
   const {Position, Wielder} = entity;
   const projected = Wielder.project(Position.tile, projection)
   const ghosts = [];
+  const {area} = tileLayer;
   for (const {x, y} of projected) {
-    if (x < 0 || y < 0 || x >= layer.area.x || y >= layer.area.y) {
+    if (x < 0 || y < 0 || x >= area.x || y >= area.y) {
       continue;
     }
     ghosts.push(

app/react-components/targeting-grid.jsx

@@ -28,7 +28,7 @@ function makeFade(renderer) {
 }
 
 const TargetingGridInternal = PixiComponent('TargetingGrid', {
-  create: ({app, ecs}) => {
+  create: ({app, tileLayer}) => {
     const fade = makeFade(app.renderer);
     const grid = new Graphics();
     const lineWidth = 1;
@@ -59,11 +59,10 @@ const TargetingGridInternal = PixiComponent('TargetingGrid', {
     innerGrid.mask = fade;
     const container = new Container();
     container.addChild(fade, grid, innerGrid);
-    // Clamp within layer area.
+    // Clamp within tile layer area.
     const area = new Graphics();
     area.beginFill(0xffffff);
-    const {TileLayers: {layers: [layer]}} = ecs.get(1)
-    const {x, y} = layer.area;
+    const {x, y} = tileLayer.area;
     area.drawRect(0, 0, x * tileSize.x, y * tileSize.y);
     container.mask = area;
     const top = new Container();
@@ -86,7 +85,7 @@ const TargetingGridInternal = PixiComponent('TargetingGrid', {
   },
 })
 
-export default function TargetingGrid({ecs, entity}) {
+export default function TargetingGrid({entity, tileLayer}) {
   const app = useApp();
   const [radians, setRadians] = useState(0);
   useEffect(() => {
@@ -100,9 +99,9 @@ export default function TargetingGrid({ecs, entity}) {
   return (
     <TargetingGridInternal
       app={app}
-      ecs={ecs}
       entity={entity}
       radians={radians}
+      tileLayer={tileLayer}
     />
   );
 }