83 lines
2.8 KiB
TypeScript
83 lines
2.8 KiB
TypeScript
import { forwardRef } from 'react';
|
|
import { Resource } from '../types';
|
|
import { Node2D } from '../ui/graph';
|
|
import { ResourceDescriptions } from '../ui/resource';
|
|
import { Game } from '../engine/game';
|
|
|
|
interface Props {
|
|
game: Game;
|
|
node2d: Node2D;
|
|
selected: boolean;
|
|
onSelect: () => void;
|
|
onSocketRef?: (type: 'input' | 'output', index: number, el: HTMLDivElement | null) => void;
|
|
}
|
|
|
|
const NodeCard = forwardRef<HTMLDivElement, Props>(function NodeCard({ node2d, selected, onSelect, onSocketRef }, ref) {
|
|
const node = node2d.node;
|
|
function handleClick() {
|
|
onSelect();
|
|
}
|
|
|
|
const info = node.behaviour.getDisplayInfo();
|
|
const inputSockets = info.sockets.filter((s) => s.type === 'input');
|
|
const outputSockets = info.sockets.filter((s) => s.type === 'output');
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className={`node node--${node.behaviour.kind}${selected ? ' is-selected' : ''}`}
|
|
style={{ left: node2d.position.x, top: node2d.position.y }}
|
|
onClick={handleClick}
|
|
>
|
|
<div className="node__sockets node__sockets--input">
|
|
{
|
|
inputSockets.map((socket) => (
|
|
<div
|
|
key={`input.${socket.index}`}
|
|
ref={(el) => onSocketRef?.('input', socket.index, el)}
|
|
className="node__socket"
|
|
style={{ background: ResourceDescriptions[socket.resource].color }}
|
|
title={`${ResourceDescriptions[socket.resource].label} (вход)`}
|
|
/>
|
|
))
|
|
}
|
|
</div>
|
|
<div className="node__sockets node__sockets--output">
|
|
{
|
|
outputSockets.map((socket) => (
|
|
<div
|
|
key={`output.${socket.index}`}
|
|
ref={(el) => onSocketRef?.('output', socket.index, el)}
|
|
className="node__socket"
|
|
style={{ background: ResourceDescriptions[socket.resource].color }}
|
|
title={`${ResourceDescriptions[socket.resource].label} (выход)`}
|
|
/>
|
|
))
|
|
}
|
|
</div>
|
|
<div className="node__id">#{node.id}</div>
|
|
<div className="node__title">{node.name}</div>
|
|
<div className="node__kind">{node.behaviour.kind}</div>
|
|
{
|
|
Object.entries(info.storages).map(([name, storage]) => (
|
|
<div className="node__resources" key={name}>
|
|
<div>{name}</div>
|
|
{
|
|
Object.entries(storage)
|
|
.map(([rt, v]) => `${ResourceDescriptions[rt as Resource].icon}${v.toStringWithDecimalPlaces(4)}`).join(' ')
|
|
}
|
|
</div>
|
|
))
|
|
}
|
|
<div className="node__links">
|
|
{
|
|
info.links.map((link) => <div key={`${link.target}/${link.resource}`}>→{link.target}/{link.resource}</div>)
|
|
}
|
|
</div>
|
|
<div className="node__debug" style={{fontSize: '8px', whiteSpace: 'pre'}}>{JSON.stringify(info.raw, undefined, 4)}</div>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
export default NodeCard;
|