Stylings / Restructuring

components/shared/ProducingGraph/ProducingGraph.module.css

@@ -0,0 +1,20 @@
+.plane {
+    border: 1px solid red;
+    padding: 2em;
+    width: fit-content;
+    display: flex;
+    flex-direction: column;
+    gap: 5em;
+}
+
+.row {
+    display: flex;
+    gap: 2em;
+}
+
+.node {
+    padding: 0.5em;
+    border-radius: 4px;
+    border: 1px solid #DDDDDD;
+    background-color: #EEE;
+}

components/shared/ProducingGraph/ProducingGraph.tsx

@@ -0,0 +1,71 @@
+import {FC, HTMLProps, PropsWithChildren, useMemo} from "react";
+import styles from './ProducingGraph.module.css'
+import {EntityIcon} from "../../home/EntityIcon/EntityIcon";
+import {sortByProperty} from "../../../src/utils";
+import {EnrichedEntity, Recipe} from "../../../src/types";
+
+interface GraphNodeBase {
+  inputs: string[]
+  outputs: string[]
+  name: string
+}
+
+export type GraphNode<T extends Record<string, unknown>> = GraphNodeBase & T
+
+interface Props<T extends {}> {
+  nodes: GraphNode<T>[]
+  inputs: string[]
+  outputs?: string[]
+  childType: FC<HTMLProps<HTMLDivElement> & {node: GraphNode<T>}>
+}
+
+export const ProducingGraph = <T extends Record<string, unknown>,>({nodes, inputs, outputs, childType: ChildType}: PropsWithChildren<Props<T>>) => {
+  const rows: GraphNode<T>[][] = useMemo(() => {
+    const available = new Set(inputs)
+    let todo = [...nodes]
+    const result: GraphNode<T>[][] = []
+    while (todo.length) {
+      const amount = todo.length
+      const thisRow: string[] = []
+      result.push([])
+
+      todo = todo.filter((node) => {
+        if (node.inputs.every(input => available.has(input))) {
+          result[result.length - 1].push(node)
+          thisRow.push(...node.outputs)
+          return false
+        }
+        return true
+      })
+      thisRow.map(uid => available.add(uid))
+      result[result.length - 1].sort(sortByProperty(val => -val.outputs.length * 1000 + -val.inputs.length))
+
+      if (amount === todo.length) {
+        console.warn("Loop detected! Left over:", todo)
+        result.pop()
+        break
+      }
+    }
+    return result
+  }, [inputs, nodes])
+
+  return <div className={styles.plane}>
+    <div className={styles.row}>
+      {inputs.map((input, idx) => <EntityIcon className={styles.input} key={input} value={input} />)}
+    </div>
+    {rows.map((row, colIdx) => {
+      return <div className={styles.row} key={colIdx}>
+        {
+          row.map((node) => <ChildType
+            className={styles.node}
+            key={node.name}
+            node={node}
+          />)
+        }
+      </div>
+    })}
+    {outputs ? <div className={styles.row}>
+      {outputs.map((input, idx) => <EntityIcon className={styles.input} key={input} value={input} />)}
+    </div> : null }
+  </div>
+}