28 lines
1.0 KiB
TypeScript
28 lines
1.0 KiB
TypeScript
import { observer } from 'mobx-react-lite';
|
|
import type { GameStore } from '../game/GameStore';
|
|
import type { ResourceNode } from '../game/entities/ResourceNode';
|
|
import { BUSH_SPRITE, TREE_SPRITE } from '../game/sprites';
|
|
import PixelSprite from './PixelSprite';
|
|
|
|
const NODE_SPRITES = { tree: TREE_SPRITE, bush: BUSH_SPRITE };
|
|
const NODE_SIZES = { tree: 64, bush: 40 };
|
|
|
|
const NodeEntity = observer(function NodeEntity({ node, store }: { node: ResourceNode; store: GameStore }) {
|
|
const isChopping = node.id === store.heldNodeId && store.isChopping;
|
|
|
|
return (
|
|
<div>
|
|
<div className={`entity ${node.kind}-shadow`} style={{ left: node.x, top: node.y, zIndex: Math.floor(node.y) - 1 }} />
|
|
<div
|
|
className={`entity ${node.kind} ${isChopping ? 'chopping' : ''}`}
|
|
style={{ left: node.x, top: node.y, zIndex: Math.floor(node.y) }}
|
|
data-node-id={node.id}
|
|
>
|
|
<PixelSprite pixels={NODE_SPRITES[node.kind]} size={NODE_SIZES[node.kind]} />
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
export default NodeEntity;
|