css

src/components/GameCanvas.tsx

@@ -108,13 +108,17 @@ export const GameCanvas = function ({
           nodes2d.map((node2d) => (
             <NodeCard
               ref={(el) => {
-                if (el) nodeElsRef.current.set(node2d.id, el);
+                if (el)
-                else nodeElsRef.current.delete(node2d.id);
+                  nodeElsRef.current.set(node2d.id, el);
+                else
+                  nodeElsRef.current.delete(node2d.id);
               }}
               onSocketRef={(type, index, el) => {
                 const socketKey = `${node2d.id}.${type}.${index}`;
-                if (el) socketElsRef.current.set(socketKey, el);
+                if (el)
-                else socketElsRef.current.delete(socketKey);
+                  socketElsRef.current.set(socketKey, el);
+                else
+                  socketElsRef.current.delete(socketKey);
               }}
               game={game}
               key={node2d.id}

src/components/LinkLine.tsx

@@ -17,7 +17,7 @@ export const LinkLine = function ({ from, to }: Props) {
         return null;
 
     return (
-        <svg style={{zIndex: 1000}}>
+        <svg>
             <defs>
                 <marker
                     id={markerId}

src/components/NodeCard.tsx

@@ -25,7 +25,7 @@ const NodeCard = forwardRef<HTMLDivElement, Props>(function NodeCard({ node2d, s
     <div
       ref={ref}
       className={`node node--${node.behaviour.kind}${selected ? ' is-selected' : ''}`}
-      style={{ left: node2d.position.x, top: node2d.position.y, width: 100 }}
+      style={{ left: node2d.position.x, top: node2d.position.y }}
       onClick={handleClick}
     >
       <div className="node__sockets node__sockets--input">
@@ -54,7 +54,7 @@ const NodeCard = forwardRef<HTMLDivElement, Props>(function NodeCard({ node2d, s
           ))
         }
       </div>
-      <div className="node__id">{node.id}</div>
+      <div className="node__id">#{node.id}</div>
       <div className="node__title">{node.name}</div>
       <div className="node__kind">{node.behaviour.kind}</div>
       {
@@ -70,7 +70,7 @@ const NodeCard = forwardRef<HTMLDivElement, Props>(function NodeCard({ node2d, s
       }
       <div className="node__links">
         {
-          info.links.map((link) => <div key={`${link.target}/${link.resource}`}>{link.target}/{link.resource}</div>)
+          info.links.map((link) => <div key={`${link.target}/${link.resource}`}>→{link.target}/{link.resource}</div>)
         }
       </div>
     </div>

src/engine/functions/index.ts

@@ -65,7 +65,7 @@ export abstract class Behaviour {
 
 export type ResourceUsageRule = {
     resource: Resource;
-    speed: number; // per tick
+    speed: number; // per second
 }
 
 export class Converter extends Behaviour {

src/index.css

@@ -202,6 +202,16 @@ select {
 .node--converter { border-left-color: var(--accent-converter); }
 .node--consumer { border-left-color: var(--accent-consumer); }
 
+.node__id {
+  font-family: var(--display);
+  font-weight: 200;
+  font-size: 10px;
+  color: var(--ink);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .node__title {
   font-family: var(--display);
   font-weight: 600;
@@ -230,6 +240,16 @@ select {
   white-space: nowrap;
 }
 
+.node__links {
+  font-size: 11px;
+  background: #171613;
+  border: 1px solid var(--line);
+  border-radius: 3px;
+  padding: 4px 6px;
+  letter-spacing: 0.02em;
+  white-space: nowrap;
+}
+
 .node__sockets {
   position: absolute;
   top: 0;

src/prefabs/game.ts

@@ -5,7 +5,7 @@ export const defaultGame: () => SerializedGame = () => ({
     nodes: [
         {
             id: 'forest',
-            name: 'Forest',
+            name: 'Лес',
             behaviour: {
                 id: 'forest.1',
                 kind: 'converter',
@@ -28,7 +28,7 @@ export const defaultGame: () => SerializedGame = () => ({
         },
         {
             id: 'sawmill',
-            name: 'Sawmill',
+            name: 'Лесопилка',
             behaviour: {
                 id: 'sawmill.1',
                 kind: 'converter',
@@ -53,7 +53,7 @@ export const defaultGame: () => SerializedGame = () => ({
         },
         {
             id: 'burner',
-            name: 'Burner',
+            name: 'Магазин досок',
             behaviour: {
                 id: 'burner.1',
                 kind: 'converter',