refactor: target projection

app/react-components/ecs.jsx

@@ -72,7 +72,11 @@ export default function EcsComponent() {
       )}
       <Entities entities={entities} />
       {activeTool && (
-        <TargetingGhost entity={entity} projection={activeTool.projection} />
+        <TargetingGhost
+          ecs={ecs}
+          entity={entity}
+          projection={activeTool.projection}
+        />
       )}
     </Container>
   )

app/react-components/targeting-ghost.jsx

@@ -33,7 +33,7 @@ const TargetingGhostInternal = PixiComponent('TargetingGhost', {
   },
 })
 
-export default function TargetingGhost({entity, projection}) {
+export default function TargetingGhost({ecs, entity, projection}) {
   const [radians, setRadians] = useState(0);
   useEffect(() => {
     const handle = setInterval(() => {
@@ -43,60 +43,22 @@ export default function TargetingGhost({entity, projection}) {
       clearInterval(handle);
     };
   }, []);
-  const {Direction: {direction}, Position: {x, y}} = entity;
+  const {TileLayers: {layers: [layer]}} = ecs.get(1);
-  const tileX = x - (x % tileSize.x);
+  const {Position, Wielder} = entity;
-  const tileY = y - (y % tileSize.y);
+  const projected = Wielder.project(Position.tile, projection)
-  let startX = tileX + (tileSize.x / 2);
-  let startY = tileY + (tileSize.y / 2);
-  switch (direction) {
-    case 0:
-      startX += projection.distance[1] * tileSize.x;
-      startY -= projection.distance[0] * tileSize.y;
-      break;
-    case 1:
-      startX += projection.distance[0] * tileSize.x;
-      startY += projection.distance[1] * tileSize.y;
-      break;
-    case 2:
-      startX -= projection.distance[1] * tileSize.x;
-      startY += projection.distance[0] * tileSize.y;
-      break;
-    case 3:
-      startX -= projection.distance[0] * tileSize.x;
-      startY -= projection.distance[1] * tileSize.y;
-      break;
-  }
   const ghosts = [];
-  for (const row in projection.grid) {
+  for (const {x, y} of projected) {
-    const columns = projection.grid[row];
+    if (x < 0 || y < 0 || x >= layer.area.x || y >= layer.area.y) {
-    for (const column in columns) {
+      continue;
-      const targeted = projection.grid[row][column];
-      if (targeted) {
-        let axe;
-        switch (direction) {
-          case 0:
-            axe = [column, row];
-            break;
-          case 1:
-            axe = [-row, column];
-            break;
-          case 2:
-            axe = [-column, -row];
-            break;
-          case 3:
-            axe = [row, -column];
-            break;
-        }
-        ghosts.push(
-          <TargetingGhostInternal
-            key={JSON.stringify({column, row})}
-            x={startX + (tileSize.x * parseInt(axe[0]))}
-            y={startY + (tileSize.y * parseInt(axe[1]))}
-            radians={radians}
-          />
-        );
-      }
     }
+    ghosts.push(
+      <TargetingGhostInternal
+        key={JSON.stringify({x, y})}
+        x={x * tileSize.x + tileSize.x * 0.5}
+        y={y * tileSize.y + tileSize.y * 0.5}
+        radians={radians}
+      />
+    );
   }
   return <>{ghosts}</>;
 }