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