initial commit

src/components/NodeCard.tsx

@@ -0,0 +1,51 @@
+import { forwardRef } from 'react';
+import { Game, Resource } from '../types';
+import { Node2D } from '../ui/graph';
+import { ResourceDescriptions } from '../ui/resource';
+
+interface Props {
+  game: Game;
+  node2d: Node2D;
+  selected: boolean;
+  onSelect: () => void;
+}
+
+const NodeCard = forwardRef<HTMLDivElement, Props>(function NodeCard({ node2d, selected, onSelect }, ref) {
+  const node = node2d.node;
+  function handleClick() {
+    onSelect();
+  }
+
+  const info = node.behaviour.getDisplayInfo();
+
+  return (
+    <div
+      ref={ref}
+      className={`node node--${node.behaviour.kind}${selected ? ' is-selected' : ''}`}
+      style={{ left: node2d.position.x, top: node2d.position.y, width: 100 }}
+      onClick={handleClick}
+    >
+      <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">
+            <div>{name}</div>
+            {
+              Object.entries(storage)
+                .map(([rt, v]) => `${ResourceDescriptions[rt as Resource].icon}${v}`).join(' ')
+            }
+          </div>
+        ))
+      }
+      <div className="node__links">
+        {
+          info.links.map((link) => <div>{link.target}/{link.resource}</div>)
+        }
+      </div>
+    </div>
+  );
+});
+
+export default NodeCard;