feat: Q+D tools

app/engine.js

@@ -117,6 +117,10 @@ export default class Engine {
             qty: 10,
             source: '/assets/potion',
           },
+          4: {
+            qty: 1,
+            source: '/assets/hoe',
+          },
         },
       },
       Health: {health: 100},

app/react-components/ecs.jsx

@@ -1,5 +1,5 @@
 import {Container} from '@pixi/react';
-import {useState} from 'react';
+import {useEffect, useState} from 'react';
 
 import {RESOLUTION} from '@/constants.js';
 import {useEcs} from '@/context/ecs.js';
@@ -10,14 +10,35 @@ import Entities from './entities.jsx';
 import TargetingGhost from './targeting-ghost.jsx';
 import TileLayer from './tile-layer.jsx';
 
+function isEntityHoldingTool(entity) {
+  const {Inventory, Wielder} = entity;
+  const item = Inventory.item(Wielder.activeSlot + 1);
+  return !!item && [
+    '/assets/hoe',
+  ].includes(item.source);
+}
+
 export default function EcsComponent() {
   const [ecs] = useEcs();
   const [entities, setEntities] = useState({});
+  const [isTool, setIsTool] = useState(false);
   const [mainEntity] = useMainEntity();
+  useEffect(() => {
+    if (mainEntity) {
+      setIsTool(isEntityHoldingTool(ecs.get(mainEntity)));
+    }
+  }, [ecs, mainEntity]);
   usePacket('Tick', (payload) => {
     if (0 === Object.keys(payload.ecs).length) {
       return;
     }
+    if (
+      mainEntity
+      && payload.ecs[mainEntity]
+      && (payload.ecs[mainEntity].Inventory || payload.ecs[mainEntity].Wielder)
+    ) {
+      setIsTool(isEntityHoldingTool(ecs.get(mainEntity)));
+    }
     const updatedEntities = {...entities};
     for (const id in payload.ecs) {
       if (false === payload.ecs[id]) {
@@ -28,7 +49,7 @@ export default function EcsComponent() {
       }
     }
     setEntities(updatedEntities);
-  }, [entities, mainEntity]);
+  }, [ecs, entities, mainEntity]);
   if (!mainEntity) {
     return false;
   }
@@ -50,12 +71,14 @@ export default function EcsComponent() {
         x={-cx}
         y={-cy}
       />
-      <TargetingGhost
+      {isTool && (
-        px={Position.x}
+        <TargetingGhost
-        py={Position.y}
+          px={Position.x}
-        cx={cx}
+          py={Position.y}
-        cy={cy}
+          cx={cx}
-      />
+          cy={cy}
+        />
+      )}
     </Container>
   )
 }

app/react-components/entities.jsx

@@ -6,12 +6,19 @@ import Sprite from './sprite.jsx';
 function Crosshair({x, y}) {
   const draw = useCallback((g) => {
     g.clear();
-    g.lineStyle(1, 0xffff00);
+    g.lineStyle(1, 0x000000);
     g.moveTo(-5, 0);
     g.lineTo(5, 0);
     g.moveTo(0, -5);
     g.lineTo(0, 5);
-    g.lineStyle(1, 0xffffff);
+    g.lineStyle(0.5, 0xffffff);
+    g.moveTo(-5, 0);
+    g.lineTo(5, 0);
+    g.moveTo(0, -5);
+    g.lineTo(0, 5);
+    g.lineStyle(1, 0x000000);
+    g.drawCircle(0, 0, 3);
+    g.lineStyle(0.5, 0xffffff);
     g.drawCircle(0, 0, 3);
   }, []);
   return (

app/react-components/targeting-ghost.jsx

@@ -7,18 +7,18 @@ import {Sprite} from '@pixi/sprite';
 import {useEffect, useState} from 'react';
 
 const tileSize = {x: 16, y: 16};
-const radius = 11;
+const radius = 17;
 
 function makeFade(renderer) {
   const fade = new Graphics();
   fade.beginFill(0xffffff);
-  fade.alpha = 0.35;
+  fade.alpha = 0.4;
   fade.drawCircle(
     tileSize.x * (radius / 2),
     tileSize.y * (radius / 2),
     ((tileSize.x + tileSize.y) / 2) * (radius * 0.35),
   )
-  fade.filters = [new BlurFilter(((tileSize.x + tileSize.y) / 2) * 1.25)];
+  fade.filters = [new BlurFilter(((tileSize.x + tileSize.y) / 2) * 2.5)];
   const renderTexture = RenderTexture.create({
     width: tileSize.x * radius,
     height: tileSize.y * radius,