diff --git a/app/engine.js b/app/engine.js
index 2c8e9c2..37b35c2 100644
--- a/app/engine.js
+++ b/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},
diff --git a/app/react-components/ecs.jsx b/app/react-components/ecs.jsx
index cda3c4c..e96cc5e 100644
--- a/app/react-components/ecs.jsx
+++ b/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}
/>
-
+ {isTool && (
+
+ )}
)
}
diff --git a/app/react-components/entities.jsx b/app/react-components/entities.jsx
index 7f9985a..14c1838 100644
--- a/app/react-components/entities.jsx
+++ b/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 (
diff --git a/app/react-components/targeting-ghost.jsx b/app/react-components/targeting-ghost.jsx
index 824cfd6..7b9a9e5 100644
--- a/app/react-components/targeting-ghost.jsx
+++ b/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,
diff --git a/public/assets/hoe/icon.png b/public/assets/hoe/icon.png
new file mode 100644
index 0000000..a0de610
Binary files /dev/null and b/public/assets/hoe/icon.png differ
diff --git a/public/assets/potion.png b/public/assets/potion.png
deleted file mode 100644
index c7586d2..0000000
Binary files a/public/assets/potion.png and /dev/null differ