feat: Q+D targeting prototype

app/react-components/ecs.jsx

@@ -53,7 +53,8 @@ export default function EcsComponent() {
   if (!mainEntity) {
     return false;
   }
-  const {Camera, Position} = ecs.get(mainEntity);
+  const entity = ecs.get(mainEntity);
+  const {Camera} = entity;
   const {TileLayers} = ecs.get(1);
   const [cx, cy] = [
     Math.round(Camera.x - RESOLUTION.x / 2),
@@ -67,10 +68,7 @@ export default function EcsComponent() {
       <TileLayer tileLayer={TileLayers.layers[0]} />
       <Entities entities={entities} />
       {isTool && (
-        <TargetingGhost
+        <TargetingGhost entity={entity} />
-          x={Position.x}
-          y={Position.y}
-        />
       )}
     </Container>
   )

app/react-components/targeting-ghost.jsx

@@ -1,3 +1,4 @@
+import {SCALE_MODES} from '@pixi/constants';
 import {RenderTexture} from '@pixi/core';
 import {Container} from '@pixi/display';
 import {BlurFilter} from '@pixi/filter-blur';
@@ -57,22 +58,86 @@ const TargetingGhostInternal = PixiComponent('TargetingGhost', {
       }
     }
     innerGrid.mask = fade;
+    const target = new Graphics();
+    target.lineStyle(lineWidth, 0xffffff);
+    for (let y = 0; y < 1; ++y) {
+      for (let x = 0; x < 1; ++x) {
+        target.drawRect(
+          (x * tileSize.x) + (lineWidth / 2),
+          (y * tileSize.y) + (lineWidth / 2),
+          tileSize.x,
+          tileSize.y,
+        );
+      }
+    }
+    const targetInner = new Graphics();
+    targetInner.alpha = 0.6;
+    targetInner.pivot = {
+      x: tileSize.x / 2 + 0.0625,
+      y: tileSize.y / 2 + 0.0625,
+    };
+    targetInner.lineStyle(lineWidth * 4, 0xcccccc);
+    for (let y = 0; y < 1; ++y) {
+      for (let x = 0; x < 1; ++x) {
+        targetInner.beginFill(0xcccccc);
+        targetInner.drawRect(
+          (x * tileSize.x) + lineWidth / 2 + lineWidth,
+          (y * tileSize.y) + lineWidth / 2 + lineWidth,
+          tileSize.x - lineWidth * 1.5,
+          tileSize.y - lineWidth * 1.5,
+        );
+      }
+    }
     const container = new Container();
-    container.addChild(fade, grid, innerGrid);
+    container.addChild(fade, grid, innerGrid, target, targetInner);
     return container;
   },
-  applyProps: (container, oldProps, {x, y, pulse}) => {
+  applyProps: (container, oldProps, {entity, pulse}) => {
-    container.x = x - (x % tileSize.x) + (tileSize.x / 2) - (tileSize.x * (radius / 2));
+    const {Direction: {direction}, Position: {x, y}} = entity;
-    container.y = y - (y % tileSize.y) + (tileSize.y / 2) - (tileSize.y * (radius / 2));
+    const tileX = x - (x % tileSize.x);
+    const tileY = y - (y % tileSize.y);
+    const gridX = (tileSize.x * (radius / 2));
+    const gridy = (tileSize.y * (radius / 2));
+    container.x = tileX + (tileSize.x / 2) - gridX;
+    container.y = tileY + (tileSize.y / 2) - gridy;
     container.children[0].alpha = 0.5 + (pulse / 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 - (pulse * 255));
     container.children[2].tint = `rgb(${color}, ${color}, ${color})`;
+    container.children[4].angle = (1 - pulse) * 5.625;
+    container.children[4].scale.x = 0.2 + (0.6 * pulse);
+    container.children[4].scale.y = 0.2 + (0.6 * pulse);
+    switch (direction) {
+      case 0:
+        container.children[3].x = gridX - (tileSize.x / 2);
+        container.children[3].y = gridy - (tileSize.y * 1.5);
+        container.children[4].x = gridX;
+        container.children[4].y = gridy - tileSize.y;
+        break;
+      case 1:
+        container.children[3].x = gridX + (tileSize.x / 2);
+        container.children[3].y = gridy - (tileSize.y / 2);
+        container.children[4].x = gridX + tileSize.x;
+        container.children[4].y = gridy;
+        break;
+      case 2:
+        container.children[3].x = gridX - (tileSize.x / 2);
+        container.children[3].y = gridy + (tileSize.y / 2);
+        container.children[4].x = gridX;
+        container.children[4].y = gridy + tileSize.y;
+        break;
+      case 3:
+        container.children[3].x = gridX - (tileSize.x * 1.5);
+        container.children[3].y = gridy - (tileSize.y / 2);
+        container.children[4].x = gridX - tileSize.x;
+        container.children[4].y = gridy;
+        break;
+    }
   },
 })
 
-export default function TargetingGhost({x, y}) {
+export default function TargetingGhost({entity}) {
   const app = useApp();
   const [radians, setRadians] = useState(0);
   useEffect(() => {
@@ -86,8 +151,7 @@ export default function TargetingGhost({x, y}) {
   return (
     <TargetingGhostInternal
       app={app}
-      x={x}
+      entity={entity}
-      y={y}
       pulse={(Math.cos(radians) + 1) * 0.5}
     />
   );