refactor: offsets

app/react-components/ecs.jsx

@@ -60,23 +60,16 @@ export default function EcsComponent() {
     Math.round(Camera.y - RESOLUTION.y / 2),
   ];
   return (
-    <Container>
-      <TileLayer
-        tileLayer={TileLayers.layers[0]}
-        x={-cx}
-        y={-cy}
-      />
-      <Entities
-        entities={entities}
-        x={-cx}
-        y={-cy}
-      />
+    <Container
+      x={-cx}
+      y={-cy}
+    >
+      <TileLayer tileLayer={TileLayers.layers[0]} />
+      <Entities entities={entities} />
       {isTool && (
         <TargetingGhost
-          px={Position.x}
-          py={Position.y}
-          cx={cx}
-          cy={cy}
+          x={Position.x}
+          y={Position.y}
         />
       )}
     </Container>

app/react-components/entities.jsx

@@ -26,7 +26,7 @@ function Crosshair({x, y}) {
   );
 }
 
-export default function Entities({entities, x, y}) {
+export default function Entities({entities}) {
   const renderables = [];
   for (const id in entities) {
     const entity = entities[id];
@@ -45,8 +45,8 @@ export default function Entities({entities, x, y}) {
     );
   }
   return (
-    <Container x={x} y={y}>
+    <>
       {renderables}
-    </Container>
+    </>
   )
 }

app/react-components/targeting-ghost.jsx

@@ -61,17 +61,17 @@ const TargetingGhostInternal = PixiComponent('TargetingGhost', {
     container.addChild(fade, grid, innerGrid);
     return container;
   },
-  applyProps: (container, oldProps, {cx, cy, px, py, tint}) => {
-    container.x = px - (px % tileSize.x) - cx + (tileSize.x / 2) - (tileSize.x * (radius / 2));
-    container.y = py - (py % tileSize.y) - cy + (tileSize.y / 2) - (tileSize.y * (radius / 2));
-    container.children[0].x = px % tileSize.x - (tileSize.x / 2) ;
-    container.children[0].y = py % tileSize.y - (tileSize.y / 2) ;
+  applyProps: (container, oldProps, {x, y, tint}) => {
+    container.x = x - (x % tileSize.x) + (tileSize.x / 2) - (tileSize.x * (radius / 2));
+    container.y = y - (y % tileSize.y) + (tileSize.y / 2) - (tileSize.y * (radius / 2));
+    container.children[0].x = x % tileSize.x - (tileSize.x / 2) ;
+    container.children[0].y = y % tileSize.y - (tileSize.y / 2) ;
     const color = Math.round(255 - (tint * 255));
     container.children[2].tint = `rgb(${color}, ${color}, ${color})`;
   },
 })
 
-export default function TargetingGhost({cx, cy, px, py}) {
+export default function TargetingGhost({x, y}) {
   const app = useApp();
   const [radians, setRadians] = useState(0);
   useEffect(() => {
@@ -85,10 +85,8 @@ export default function TargetingGhost({cx, cy, px, py}) {
   return (
     <TargetingGhostInternal
       app={app}
-      cx={cx}
-      cy={cy}
-      px={px}
-      py={py}
+      x={x}
+      y={y}
       tint={(Math.cos(radians) + 1) * 0.5}
     />
   );

app/react-components/tile-layer.jsx

@@ -7,11 +7,9 @@ import useAsset from '@/hooks/use-asset.js';
 const TileLayerInternal = PixiComponent('TileLayer', {
   create: () => new CompositeTilemap(),
   applyProps: (tilemap, {tileLayer: oldTileLayer}, props) => {
-    const {asset, tileLayer, x, y} = props;
+    const {asset, tileLayer} = props;
     const extless = tileLayer.source.slice('/assets/'.length, -'.json'.length);
     const {textures} = asset;
-    tilemap.position.x = x;
-    tilemap.position.y = y;
     if (tileLayer === oldTileLayer) {
       return;
     }