From 2860bb837ae3de509f94679f488e6ffa7b1164ab Mon Sep 17 00:00:00 2001
From: "azykov@mail.ru" <azykov@mail.ru>
Date: Mon, 31 Aug 2026 21:37:21 +0300
Subject: [PATCH] css

---
 src/components/GameCanvas.tsx | 12 ++++++++----
 src/components/LinkLine.tsx   |  2 +-
 src/components/NodeCard.tsx   |  6 +++---
 src/engine/functions/index.ts |  2 +-
 src/index.css                 | 20 ++++++++++++++++++++
 src/prefabs/game.ts           |  6 +++---
 6 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/src/components/GameCanvas.tsx b/src/components/GameCanvas.tsx
index 92fc9d4..3e55e64 100644
--- a/src/components/GameCanvas.tsx
+++ b/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);
-                else nodeElsRef.current.delete(node2d.id);
+                if (el)
+                  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);
-                else socketElsRef.current.delete(socketKey);
+                if (el)
+                  socketElsRef.current.set(socketKey, el);
+                else
+                  socketElsRef.current.delete(socketKey);
               }}
               game={game}
               key={node2d.id}
diff --git a/src/components/LinkLine.tsx b/src/components/LinkLine.tsx
index 95a83de..9cfe657 100644
--- a/src/components/LinkLine.tsx
+++ b/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}
diff --git a/src/components/NodeCard.tsx b/src/components/NodeCard.tsx
index 3bf1f9d..351064e 100644
--- a/src/components/NodeCard.tsx
+++ b/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>
diff --git a/src/engine/functions/index.ts b/src/engine/functions/index.ts
index 23e2b2f..61ce3de 100644
--- a/src/engine/functions/index.ts
+++ b/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 {
diff --git a/src/index.css b/src/index.css
index 48dee49..727f75e 100644
--- a/src/index.css
+++ b/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;
diff --git a/src/prefabs/game.ts b/src/prefabs/game.ts
index 12fa3d4..714706e 100644
--- a/src/prefabs/game.ts
+++ b/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',